将球移动到球场
重要性：5
将球移动到球场，点击即可。像这样
要求
- 球的中心应该正好在点击指针下方（如果可能，不要越过球场边缘）。
- 欢迎使用 CSS 动画。
- 球不能越过球场边界。
- 当页面滚动时，不应该出现任何问题。
笔记
- 代码也应该适用于不同的球和球场尺寸，不要绑定到任何固定值。
- 使用属性
event.clientX/event.clientY获取点击坐标。
首先，我们需要选择一种定位球的方法。
我们不能使用position:fixed，因为滚动页面会导致球从球场移动。
所以我们应该使用position:absolute，并且为了使定位更加稳固，让field本身也处于定位状态。
然后球将相对于球场进行定位。
#field {
width: 200px;
height: 150px;
position: relative;
}
#ball {
position: absolute;
left: 0; /* relative to the closest positioned ancestor (field) */
top: 0;
transition: 1s all; /* CSS animation for left/top makes the ball fly */
}接下来，我们需要为ball.style.left/top分配正确的坐标。它们现在包含相对于球场的坐标。
以下是示意图：
我们有event.clientX/clientY，即点击事件相对于窗口的坐标。
为了获得点击事件相对于球场的left坐标，我们可以减去球场的左边缘和边框宽度。
let left = event.clientX - fieldCoords.left - field.clientLeft;通常，ball.style.left表示“元素（球）的左边缘”。所以如果我们分配这个left值，那么球的边缘，而不是中心，将位于鼠标光标下方。
我们需要将球向左移动一半宽度，向上移动一半高度，使其居中。
所以最终的left值将是：
let left = event.clientX - fieldCoords.left - field.clientLeft - ball.offsetWidth/2;垂直坐标使用相同的逻辑计算。
请注意，在访问ball.offsetWidth时，必须知道球的宽度/高度。应该在HTML或CSS中指定。