Создать HTML-страницу с футбольным полем, которое занимает всю ширину и высоту экрана, и мячом размером 100px на 100px. Сделать так, чтобы при щелчке мышкой по полю, мяч плавно перемещался на место щелчка.
Учтите: необходимо, чтобы центр мяча останавливался именно там, где был совершен щелчок мышкой. Также предусмотрите, чтобы мяч не выходил за границы поля.
document.body.onclick = function(e) {
mydiv.style.left = (e.pageX - mydiv.offsetWidth / 2) + "px";
mydiv.style.top = (e.pageY - mydiv.offsetHeight / 2) + "px";
}
<div id=mypole style="background: no-repeat" "background-size: 100px">
<img src="http://evergreen.org.ua/wp-content/uploads/2014/03/kak-gazon-delayut-polosatum.jpg" />
</div>
<div id=mydiv style="position: absolute">
<img src="http://yoway.ru/wp-content/uploads/2015/02/street_black.jpg" />
</div>
style="background: no-repeat; background-size: 100px"
С точки зрения чистоты кода, конечно, CSS-стили стоит вынести в одельный файл.