22 lines (14 loc) · 775 Bytes

importance: 5

필드를 가로질러 공 이동하기

클릭으로 필드를 가로질러 공을 이동해 주세요.

예시: [iframe src="solution" height="260" link]

요구사항은 다음과 같습니다.

공의 중앙이 클릭 시 포인터 바로 아래에 와야 합니다(가능하면 필드 가장자리를 넘지 않아야 함).
CSS-animation을 사용하는 것도 환영합니다.
공은 필드의 경계를 넘어서면 안 됩니다.
페이지를 스크롤 할 때 깨짐 현상이 없어야 합니다.

이 두 가지를 주의하세요.

해당 코드는 특정 값에 고정되지 않고, 다른 공과 필드 크기에서도 작동해야 합니다.
클릭 좌표에 event.clientX/event.clientY 프로퍼티를 사용하세요.