回到课程

让球在球场中移动

重要程度: 5

单击一下让球在球场中移动。就像这样:

要求:

  • 球的中心应该准确的在单击时指针位置的下方(如果可能的话,不越过球场边缘)。
  • CSS 动画很受欢迎。
  • 球不能越过场地边界。
  • 当页面被滚动时,任何东西都不应该中断。

注意:

  • 代码还应该能在不同的球和球场大小中工作,而不是绑定到任何固定的值。
  • 使用 event.clientX/event.clientY 属性来获取点击坐标。

打开一个任务沙箱。

首先我们需要选择一种定位球的方法。

我们不能使用 position:fixed,因为滑动页面会让球在球场上移动。

因此我们应该使用 position:absolute,并使定位稳定,让 field 自身定位。

然后球会相对于球场定位:

#field {
  width: 200px;
  height: 150px;
  position: relative;
}

#ball {
  position: absolute;
  left: 0; /* 相对于最近位置的祖先(字段) */
  top: 0;
  transition: 1s all; /* 在左上方的 CSS 特效会让球飞起来 */
}

接下来我们需要指定正确的 ball.style.position.left/top。它们现在包含球场的相对坐标。

这是图片:

我们有 event.clientX/clientY—— 单击窗口时的相对坐标。

要获取单击字段的相对 left 坐标,我们可以减去字段的左边缘和边框宽度:

let left = event.clientX - fieldInnerCoords.left - field.clientLeft;

通常情况下,ball.style.position.left 是指“元素的左边缘”(球)。因此,如果我们指定 left,那么球的边缘就会在鼠标光标下面。

我们需要将球向左移动宽度的一半,向上移动高度的一半,使其居中。

因此,最后 left 是:

let left = event.clientX - fieldInnerCoords.left - field.clientLeft - ball.offsetWidth/2;

使用相同的逻辑计算垂直坐标。

请注意,球的宽度/高度必须在我们设置 ball.offsetWidth 时就已知。应该在 HTML 或 CSS 中指定。

使用沙箱打开解决方案。