Atölye › Adam Asmaca › 35/36. adım
Son adım: ekrandaki tuşa tıklamak ya da dokunmak o harfi tahmin etsin. Böylece oyun telefonda da oynanır.
İki iş var: tıklanan noktayı canvas piksellerine çevirmek ve 26 tuşa tek tek "bu nokta sende mi?" diye sormak.
```js
canvas.addEventListener('pointerdown', (event) => {
const rect = canvas.getBoundingClientRect()
const x = ((event.clientX - rect.left) * canvas.width) / rect.width
const y = ((event.clientY - rect.top) * canvas.height) / rect.height
if (state !== 'playing') {
newWord()
return
}
for (let i = 0; i < LETTERS.length; i++) {
const k = keyRect(i)
if (x >= k.x && x < k.x + KEY_W && y >= k.y && y < k.y + KEY_H) guess(LETTERS[i])
}
})
```(event) → dinleyici artık olayı alıyor; tıklamanın yeri onda.canvas.getBoundingClientRect() → tuvalin ekrandaki yeri ve boyu. Tuval ekranda 480 pikselden küçük ya da
büyük görünebilir (telefonda küçülür).event.clientX - rect.left → tıklamanın tuvalin sol kenarından uzaklığı (ekran pikseli). * canvas.width / rect.width → bunu tuval pikseline çevirir. y için aynısı.if (state !== 'playing') { newWord(); return } → oyun bittiyse eskisi gibi yeni kelime.for döngüsü 26 tuşa sorar: x >= k.x && x < k.x + KEY_W → nokta tuşun sol ve sağ kenarı arasında mı?
y için aynı soru, üst ve alt kenar. >= "büyük ya da eşit".guess(LETTERS[i]). Tuşların arasındaki boşluk hiçbir tuşa ait değil; kenara basan kalın
parmak yanlış harfe gitmez.Eski pointerdown dinleyicisini (üç satır) sil ve yerine yenisini yaz. Çalıştır ve sadece fareyle oyna:
tuşlara tıklayınca harfler tahmin edilmeli. Oyun bitti.
Beceriler: Klavye ve fare girdisi
← Hatırlayan tuşlar Kendin yap: ipucu düğmesi →