Pindahkan bola ke seberang lapangan

Pindahkan bola ke seberang lapangan pada saat di klik. Seperti ini:

Syarat-Syarat:

Pusat bola harus berada tepat dibawah pointer pada saat di klik (jika memungkinkan tanpa melintasi ujung lapangan).
Animasi CSS jika memungkinkan.
Bola tidak boleh melintasi batas lapangan.
Saat halaman di digulir, tidak ada yang rusak.

Tambahan:

Kode harus juga bekerja dengan bola yang berbeda dan berbagai ukuran lapangan, tidak hanya pada ukuran tertentu.
Gunakan properti event.clientX/event.clientY untuk koordinat klik.

Pertama kita perlu memilih metode untuk memposisikan bola.

Kita tidak dapat menggunakan position:fixed untuk itu, karena pada saat halaman digulir bola akan berpindah dari lapangan.

Jadi kita sebaiknya menggunakan position:absolute dan, untuk membuat posisinya benar-benar tepat, buat lapangan(field) itu sendiri diposisikan.

Kemudian bola akan diposisikan relatif terhadap lapangan(field):

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

#ball {
  position: absolute;
  left: 0; /* relatif ke posisi terdekat blok atas (lapangan) */
  top: 0;
  transition: 1s all; /* Animasi CSS untuk left/top untuk membuat bolanya terbang */
}
        

Selanjutnya kita harus mengatur dengan benar ball.style.left/top. Mereka memiliki koordinat relatif ke lapangan(field) sekarang.

Berikut ini gambarnya:

Kita memiliki event.clientX/clientY – koordinat relatif jendela (window) dari klik.

Untuk mendapatkan koordinat kiri relatif terhadap lapangan(field), kita kurangkan dengan nilai dari ujung dan pembatas kiri lapangan:

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

Biasanya, ball.style.left artinya “ujung kiri dari elemen” (bola). Jadi kita mengatur nilai left, kemudian ujung bola, bukan tengah, akan berada tepat dibawah kursor mouse.

Kita perlu memindahkan bola setengah lebar kiri dan setengah tinggi atas untuk membuatnya di tengah.

Jadi nilai terakhir left akan menjadi:

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

Koordinat vertikal di ukur dengan menggunakan logika yang sama.

Harap dicatat bahwa lebar/tinggi bola harus di ketahui pada saat kita mengakses ball.offsetWidth. Sebaiknya di atur pada HTML atau CSS.

Buka solusi di kotak pasir.