Atölye › Candy Crush Tarzı Üçlü Eşleştirme › 7/29. adım
Bir hamle bir mücevhere tıklayarak başlar. Tarayıcı tıklamanın yerini piksel olarak verir; bizim ise hangi
hücreye tıklandığını bilmemiz lazım. Bunu cellAt (hücre nerede) fonksiyonu hesaplayacak. Tahtanın dışına
tıklandıysa cevap null (hiçbir şey).
Tıklanan hücreyi selected (seçili) değişkeninde tutuyoruz. Ekranda henüz bir şey görünmeyecek; seçimi bir sonraki
adımda çizeceğiz.
```js
let selected
function cellAt(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 r = Math.floor(y / SIZE)
const c = Math.floor(x / SIZE)
return r >= 0 && r < N && c >= 0 && c < N ? { r, c } : null
}
canvas.addEventListener('pointerdown', (event) => {
const cell = cellAt(event)
if (!cell) return
selected = cell
})
```canvas.getBoundingClientRect() → canvas'ın ekrandaki yeri ve boyu. Telefonda canvas küçültülmüş olabilir: ekranda
200 piksel eninde görünse de içi hâlâ 400 piksel.(event.clientX - rect.left) * canvas.width / rect.width → tıklamanın ekrandaki yerini canvas pikseline
çevirir: önce canvas'ın sol kenarını çıkar, sonra gerçek en ÷ ekrandaki en oranıyla büyüt. - LEFT → ızgaranın
köşesine göre.Math.floor(y / SIZE) → 48'e bölüp aşağı yuvarla: satır. Aynısı sütun için.r >= 0 && r < N && c >= 0 && c < N ? { r, c } : null → ızgaranın içindeyse { r, c } nesnesi, değilse null.
{ r, c }, { r: r, c: c }'nin kısası.canvas.addEventListener('pointerdown', (event) => { ... }) → canvas'a fareyle basılınca ya da parmakla dokununca
bu fonksiyonu çalıştır. event tıklamanın bilgisini taşır.if (!cell) return → ! "değil": hücre yoksa (tahtanın dışı) hiçbir şey yapma.selected = cell → tıklanan hücreyi hatırla.let board ... satırının altına let selected yaz.function draw() { satırının üstüne cellAt fonksiyonunu ve tıklama dinleyicisini yaz; aralarında ve altında
birer boş satır kalsın.Beceriler: Klavye ve fare girdisi
← Eşleşmesiz başla Seçimi göster →