Atölye › Hafıza Kartları › 14/25. adım
Şimdi kartlara tıklayabileceğiz. Tarayıcıya "canvas'a tıklanınca bana haber ver" deriz. Buna olay dinlemek (event listener) denir: kapı zili gibi, çalınca ne yapacağını önceden söylersin.
Tıklamanın yeri sayfaya göre gelir; canvas ise sayfanın köşesinde başlamaz ve ekranda farklı boyda gösterilebilir.
Önce tıklamayı canvas piksellerine çevirir, sonra cardAt ile kartı buluruz.
```js
canvas.addEventListener('click', (event) => {
// The canvas may be displayed at a different size than its own pixels, so scale the click.
const rect = canvas.getBoundingClientRect()
const x = (event.clientX - rect.left) * (canvas.width / rect.width)
const y = (event.clientY - rect.top) * (canvas.height / rect.height)
const card = cardAt(x, y)
if (card) card.faceUp = true
})
```canvas.addEventListener('click', (event) => { ... }) → canvas'a her tıklandığında içini çalıştır. event olayın
bilgisi: event.clientX, event.clientY farenin sayfadaki yeri.canvas.getBoundingClientRect() → canvas'ın sayfadaki dikdörtgeni: nerede başladığı (left, top) ve ekranda ne
kadar büyük gösterildiği (width, height).(event.clientX - rect.left) → canvas'ın başladığı yeri çıkar: canvas içindeki konum.* (canvas.width / rect.width) → ölçekle: canvas iki kat büyük gösteriliyorsa 0.5 ile çarp. Bu adımı atlamak
yaygın bir hatadır: kendi ekranında çalışır, telefonda yanlış karta düşer.const card = cardAt(x, y) → o noktadaki kart (ya da undefined).if (card) card.faceUp = true → kart bulunduysa aç. Tek komutluk if'te süslü parantez gerekmez. Ekranı döngü
günceller; draw() çağırmamıza gerek yok.function draw() { satırının üstüne tıklama dinleyicisini yaz; arada bir boş satır kalsın.}) önemli: } fonksiyonu, ) ise addEventListener( parantezini kapatır.Beceriler: Klavye ve fare girdisi
← Bir noktada hangi kart var? Kurallar için tek yer →