Atölye › 15 Bulmacası › 14/27. adım
Şimdi fareyle (ya da parmakla) oynayalım: bir taşa tıklayınca move çağrılsın.
Tıklanan noktanın hangi kare olduğunu bulmalıyız. Yöntem: noktayı tahtanın sol üst köşesine göre ölç, sonra bir kare + aralık genişliğine (96) böl ve aşağı yuvarla. 250. piksel → 250 / 96 = 2,6 → 2. sütun.
```js
canvas.addEventListener('pointerdown', (event) => {
const rect = canvas.getBoundingClientRect()
const x = ((event.clientX - rect.left) * canvas.width) / rect.width - LEFT
const y = ((event.clientY - rect.top) * canvas.height) / rect.height - TOP
const col = Math.floor(x / (SIZE + GAP))
const row = Math.floor(y / (SIZE + GAP))
if (col >= 0 && col < N && row >= 0 && row < N) move(row * N + col)
})
```canvas.addEventListener('pointerdown', (event) => { ... }) → tuvale fareyle basıldığında ya da parmakla
dokunulduğunda içini çalıştırır. event tıklamanın bilgilerini taşır.canvas.getBoundingClientRect() → tuvalin ekrandaki yeri ve boyu. Tuval ekranda 400 pikselden küçük ya da büyük
görünebilir (telefonda küçülür).(event.clientX - rect.left) * canvas.width / rect.width → tıklamanın tuvalin sol kenarına uzaklığı, tuval
pikseline çevrilmiş. - LEFT → tahtanın sol kenarından ölç. y için aynısı, - TOP ile.Math.floor(x / (SIZE + GAP)) → sütun; row aynı şekilde satır.col >= 0 && col < N && row >= 0 && row < N → tıklama tahtanın içinde mi? && "ve", >= "büyük ya da eşit".move(row * N + col) → satır ve sütundan listedeki konuma: row * 4 + col. (rowOf/colOf'un tersi.)function squareX(i) { satırının üstüne dinleyiciyi yaz; arada bir boş satır kalsın. Çalıştır, sonra 15'e ya
da 12'ye tıkla: boşluğa geçmeli. Uzaktaki bir taşa tıklamak hiçbir şey yapmamalı.
Beceriler: Klavye ve fare girdisi