en.javascript.info/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/task.md

importance: 5

---

Move the ball across the field

Move the ball across the field to a click. Like this:

[iframe src="solution" height="260" link]

Requirements:

• The ball center should come exactly under the pointer on click (if possible without crossing the field edge).
• CSS-animation is welcome.
• The ball must not cross field boundaries.
• When the page is scrolled, nothing should break.

Notes:

• The code should also work with different ball and field sizes, not be bound to any fixed values.
• Use properties event.clientX/event.clientY for click coordinates.