Atölye › Puzzle Bobble Tarzı Balon Atıcı › 9/31. adım
Fare ya da parmak da nişan alsın: atıcıdan işaretçiye giden okun açısı Math.atan2(dy, dx) ile bulunur. Atıcının
altındaki noktalar yok sayılır; yere ateş edilmez.
Bir incelik: sayfa canvas'ı ekranda 400×520'den küçük ya da büyük gösterebilir (telefonda küçülür). Olayın verdiği nokta ekran pikseli; önce canvas pikseline çeviririz.
```js
function pointAt(event) {
const rect = canvas.getBoundingClientRect()
const x = ((event.clientX - rect.left) * canvas.width) / rect.width
const y = ((event.clientY - rect.top) * canvas.height) / rect.height
if (y < SHOOTER.y) aim = clampAim(Math.atan2(y - SHOOTER.y, x - SHOOTER.x))
}
canvas.addEventListener('pointermove', pointAt)
canvas.addEventListener('pointerdown', pointAt)
```canvas.getBoundingClientRect() → canvas'ın ekrandaki yeri ve gösterilen boyu. (event.clientX - rect.left) * canvas.width / rect.width → ekran pikselini canvas pikseline çevirir; y aynı hesap.if (y < SHOOTER.y) → yalnız atıcının üstündeki noktalar.Math.atan2(y - SHOOTER.y, x - SHOOTER.x) → atıcıdan noktaya okun açısı; her yönde doğru çalışır. Dikkat: önce y
farkı, sonra x farkı. Sonuç yine clampAim'den geçer.canvas.addEventListener('pointermove', pointAt) → fonksiyonun kendisini veriyoruz (parantezsiz): tarayıcı onu
olayla birlikte çağırır. İşaretçi kıpırdayınca da basınca da nişan alınır.function drawBubble(...) satırının üstüne pointAt fonksiyonunu ve iki dinleyiciyi yaz; altlarında bir boş satır
kalsın. Çalıştır ve fareyi canvas üstünde gezdir: çizgi onu izlemeli.
Beceriler: Klavye ve fare girdisi