Atölye › Dört Bağla › 13/38. adım
Artık fareyle oynayacağız: bir sütuna tıklayınca o sütuna disk düşsün.
Tarayıcı sayfada bir şey olunca bunu bir olay (event) olarak duyurur; sen de "şu olunca şunu yap" diye kayıt
olursun. Kapıya zil takmak gibi. 'pointerdown' fareyle tıklanınca (ya da parmakla dokununca) olur.
Farenin hangi sütunda olduğunu colAt(event) hesaplayacak. Bir incelik: sayfa canvas'ı ekrana sığdırmak için büyütüp
küçültebilir. O yüzden önce ekran pikselini canvas pikseline çeviriyoruz.
```js
let hoverCol = 3
function colAt(event) {
const rect = canvas.getBoundingClientRect()
const x = ((event.clientX - rect.left) * canvas.width) / rect.width
return Math.min(COLS - 1, Math.max(0, Math.floor(x / CELL)))
}
canvas.addEventListener('pointerdown', (event) => {
hoverCol = colAt(event)
play(hoverCol)
})
```let hoverCol = 3 → seçili sütun; ortadan başlar.canvas.getBoundingClientRect() → canvas'ın ekrandaki yeri (rect.left) ve gösterilen eni (rect.width).event.clientX → farenin ekrandaki yatay konumu. event.clientX - rect.left → canvas'ın sol kenarından uzaklığı.* canvas.width / rect.width → ekran pikselini canvas pikseline çevirir. Canvas yarı boyda gösteriliyorsa 2 ile çarpar.Math.floor(x / CELL) → aşağı yuvarlar: x 200 ise 200 / 64 = 3.1 → 3. sütun.Math.max(0, ...) → 0'ın altına inme; Math.min(COLS - 1, ...) → 6'nın üstüne çıkma. İkisi birlikte sonucu 0 ile 6
arasında sıkıştırır.canvas.addEventListener('pointerdown', (event) => { ... }) → her tıklamada bu fonksiyon çalışır. (event) => { }
kısa yoldan yazılmış bir fonksiyon; event olayın bilgisi (farenin yeri gibi).let turn satırının altına let hoverCol = 3 yaz.function disc( satırının üstüne colAt fonksiyonunu ve bir boş satırdan sonra pointerdown dinleyicisini yaz;
altında bir boş satır kalsın.Beceriler: Klavye ve fare girdisi