Atölye › Wordle Tarzı Kelime Tahmini › 21/26. adım
Şimdi tuşlara dokunmak yazsın. Dokunulan noktayı tuval piksellerine çevirip keyRects() listesinde "bu nokta
hangi tuşun içinde?" diye arayacağız. Tuş bulunursa type ile yazarız; klavyeden gelen harflerle aynı yol.
Oyun bittiyse tuş dışında bir yere dokunmak yeni kelime başlatsın.
```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
const hit = keyRects().find((k) => x >= k.x && x < k.x + k.w && y >= k.y && y < k.y + k.h)
if (hit) type(hit.key)
else if (state !== 'playing') reset()
})
```canvas.addEventListener('pointerdown', ...) → tuvale fareyle basıldığında ya da parmakla dokunulduğunda.canvas.getBoundingClientRect() → tuvalin ekrandaki yeri ve boyu. Tuval ekranda küçülebilir (telefonda); konumu
oranlayıp tuval pikseline çeviririz.keyRects().find((k) => ...) → koşulu tutan ilk tuşu bulur; yoksa undefined.x >= k.x && x < k.x + k.w && y >= k.y && y < k.y + k.h → nokta tuşun sol ve sağ kenarı arasında ve üst ve alt
kenarı arasında mı? Tuşlar arasındaki boşluk hiçbir tuşa ait değil.if (hit) type(hit.key) → tuşun key'ini yaz.else if (state !== 'playing') reset() → tuş yoksa ve oyun bittiyse yeni kelime.function draw() { satırının üstüne dinleyiciyi yaz; arada bir boş satır kalsın. Çalıştır ve fareyle tuşlara
tıkla: harfler yazılmalı.
Beceriler: Klavye ve fare girdisi
← Klavyeyi çiz Enter ve Sil tuşları →