Atölye › Yazı Yağmuru › 32/33. adım

Tuşlara dokun

Ne yapıyoruz

Ekrandaki tuşa dokunmak o harfi yazsın. Dokunuş da gerçek klavyeyle aynı type(key)'i çağıracak; böylece kilitlenme, hatalar, puan her şey iki yolda da aynı çalışır. Oyun bittikten sonra bir dokunuş yeniden 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
  if (state === 'over') return reset()
  ROWS.forEach((keys, row) => {
    for (let i = 0; i < keys.length; i++) {
      const k = keyRect(row, i)
      if (x >= k.x && x < k.x + KEY_W && y >= k.y && y < k.y + KEY_H) type(keys[i])
    }
  })
})

    ctx.fillText('Press Enter or tap to play again', canvas.width / 2, 205)
```

Ne işe yarıyor

• canvas.addEventListener('pointerdown', ...) → canvas'a fareyle ya da parmakla basıldığında.
• canvas.getBoundingClientRect() → canvas'ın sayfadaki kutusu: left, top (kenarları), width, height (ekranda göründüğü boy).
• ((event.clientX - rect.left) * canvas.width) / rect.width → event.clientX dokunuşun sayfadaki yeri. Önce canvas'ın kenarını çıkarırız, sonra ekran pikselini canvas pikseline çeviririz (telefonda canvas küçültülmüş olabilir). y için aynısı.
• if (state === 'over') return reset() → oyun bittiyse yeniden başlat.
• Döngüler çizimdekiyle aynı: her tuş için keyRect. x >= k.x && x < k.x + KEY_W && ... → nokta bu tuşun kutusunun içinde mi? İçindeyse type(keys[i]).
• Kartın son yazısı artık dokunmayı da söylüyor.

Sıra sende

1. function draw() { satırının üstüne pointerdown dinleyicisini yaz; altında bir boş satır kalsın.
2. Kartın son yazısını 'Press Enter or tap to play again' yap.
3. Çalıştır ve ekrandaki tuşlara tıklayarak yaz. Oyun tamam!

Beceriler: Klavye ve fare girdisi

← Sıradaki tuşu yak Kendin yap: fikir değiştir →

Tüm adımlar

1. Kelimeler için bir gökyüzü
2. Zemin
3. Canvas'ta bir kelime
4. Çizen bir fonksiyon
5. Kelime listesi
6. Düşür
7. Oyun döngüsü
8. Listeden yeni bir kelime
9. Yağmur başlasın
10. Zemini geçince gider
11. Bir kelimeye kilitlen
12. Klavyeyi dinle
13. Harf harf
14. Yarım kelime sarı
15. Kaybolan kelimeyi bırak
16. Canlar
17. Kalpler
18. Puan
19. Canlar bitti
20. Oyunu dondur
21. Oyun bitti kartı
22. Yeniden oyna
23. Seviyeler
24. Gittikçe hızlanarak
25. Rekor
26. Doğruluk
27. Dakikada kelime
28. Sonunda hızın
29. Tuşlar nereye
30. Klavyeyi çiz
31. Sıradaki tuşu yak
32. Tuşlara dokun
33. Kendin yap: fikir değiştir