Atölye › Bilardo › 26/33. adım
Masaya basınca pull o noktaya göre nişan alsın. Bir incelik var: sayfa canvas'ı ekranda 480×340'tan küçük ya da
büyük gösterebilir (telefonda küçülür). Olayın verdiği nokta ekran pikseli; toCanvas onu canvas pikseline çevirecek.
Kazandıktan sonra bir basış yeni oyun başlatsın; toplar yuvarlanırken ise basış bir şey yapmasın.
```js
function toCanvas(event) {
const rect = canvas.getBoundingClientRect()
return {
x: ((event.clientX - rect.left) * canvas.width) / rect.width,
y: ((event.clientY - rect.top) * canvas.height) / rect.height,
}
}
canvas.addEventListener('pointerdown', (event) => {
if (state === 'won') return reset()
if (state !== 'aiming') return
pull(toCanvas(event))
})
```canvas.getBoundingClientRect() → canvas'ın ekrandaki yeri ve gösterilen boyu.event.clientX - rect.left → canvas'ın sol kenarından uzaklık (ekran pikseli); * canvas.width / rect.width →
canvas pikseline çevir. y aynı hesap.canvas.addEventListener('pointerdown', ...) → fare, kalem ya da parmakla basılınca.if (state === 'won') return reset() → kazanıldıysa yeni oyun ve çık.if (state !== 'aiming') return → toplar yuvarlanıyorsa bir şey yapma.pull(toCanvas(event)) → basılan noktaya göre nişan ve güç.pull'un yorum satırının üstüne toCanvas fonksiyonunu yaz; altında bir boş satır kalsın.pull fonksiyonunun altına bir boş satır bırak ve pointerdown dinleyicisini yaz.Beceriler: Klavye ve fare girdisi