Atölye › Ritim Şeritleri › 34/35. adım

Dokunulabilen şeritler

Ne yapıyoruz

Telefonda klavye yok; şeritlerin kendisi düğme olsun: bir şeridin herhangi bir yerine dokunmak ona basmak demek. Dokunuş da klavyeyle aynı press(lane)'i çağıracak; böylece zamanlama, puan ve kombo her cihazda aynı. Şarkı bittikten sonra bir dokunuş yeniden başlatsın.

```js
// On a touch screen, each lane is its own big button.
canvas.addEventListener('pointerdown', (event) => {
  if (state === 'done') return reset()
  const rect = canvas.getBoundingClientRect()
  const x = ((event.clientX - rect.left) * canvas.width) / rect.width
  const lane = Math.floor((x - LEFT) / LANE_W)
  if (lane >= 0 && lane < LANES) press(lane)
})

    ctx.fillText('Space or tap to play again', canvas.width / 2, 318)
```

Ne işe yarıyor

• canvas.addEventListener('pointerdown', ...) → canvas'a fareyle ya da parmakla basıldığında.
• if (state === 'done') return reset() → şarkı bittiyse yeniden başlat.
• canvas.getBoundingClientRect() → canvas'ın ekrandaki kutusu: left (sol kenarı), width (ekranda göründüğü eni).
• ((event.clientX - rect.left) * canvas.width) / rect.width → event.clientX dokunuşun sayfadaki yeri. Önce canvas'ın sol kenarını çıkarırız, sonra ekran pikselini canvas pikseline çeviririz (telefonda canvas küçültülmüş olabilir).
• Math.floor((x - LEFT) / LANE_W) → hangi şerit: soldaki boşluğu çıkar, şerit enine böl, aşağı yuvarla. x = 150 → (150 − 60) / 70 = 1.28 → 1.
• if (lane >= 0 && lane < LANES) press(lane) → yalnız dört şeritten birine dokunulduysa bas; kenar boşluklarına dokunmak hiçbir şey yapmaz.
• Kartın son satırı artık dokunmayı da söylüyor.

Sıra sende

1. function draw() { satırının üstüne yorum satırını ve pointerdown dinleyicisini yaz; altında bir boş satır kalsın.
2. Sonuç kartının son satırındaki yazıyı 'Space or tap to play again' yap.
3. Çalıştır ve şeritlere tıklayarak oyna. Oyun tamam!

Beceriler: Klavye ve fare girdisi

← En iyi puan Kendin yap: hız ayarı →

Tüm adımlar

1. Notalar için bir sahne
2. İlk şerit
3. Döngüyle dört şerit
4. Vuruş çizgisi
5. Çizen bir fonksiyon
6. Yazı olarak şarkı
7. Yazıdan notalara
8. Yeri saat belirler
9. Notaları çiz
10. İşleyen bir saat
11. Oyun döngüsü
12. Yanan şeritler
13. Şeritlere tuşlar
14. Tuşları göster
15. En yakın notaya vur
16. Zamana yeterince yakın
17. Bir basış, bir vuruş
18. Ekranda bir mesaj
19. Hit mesajı
20. Mesaj gitsin
21. Kusursuz ya da iyi
22. Say
23. Kaçan notalar
24. Puan
25. Art arda vuruşlar
26. Çarpan
27. Şarkı biter
28. Saati durdur
29. Doğruluk
30. Not
31. Sonuçlar
32. Yeniden oyna
33. En iyi puan
34. Dokunulabilen şeritler
35. Kendin yap: hız ayarı