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

Oyun döngüsü

Ne yapıyoruz

Oyunlar bir döngü ile çalışır: güncelle → çiz → tekrar... Bir çizgi filmin kareleri gibi, her turda resim biraz değişir ve hareket görünür.

Tarayıcı ekranı saniyede yaklaşık 60 kez yeniler. requestAnimationFrame ona "bir sonraki yenilemeden önce bu fonksiyonu çalıştır" der. Döngü kendini her seferinde yeniden istediği için hiç durmaz. Şarkı başlıyor!

```js
function loop() {
  update()
  draw()
  requestAnimationFrame(loop)
}

reset()
requestAnimationFrame(loop)
```

Ne işe yarıyor

• function loop() { → döngünün bir turu.
• update() → saati bir kare ilerlet. draw() → yeni durumu çiz.
• requestAnimationFrame(loop) → "ekran bir sonraki yenilenmeden önce loop'u yine çalıştır". Fonksiyon kendi devamını istiyor; böylece döngü hiç bitmez.
• En alttaki requestAnimationFrame(loop) → döngüyü başlatır. Eski tek seferlik draw() çağrısının yerini alır.

Sıra sende

1. En alttaki reset() satırının üstüne loop fonksiyonunu yaz ve altında bir boş satır bırak.
2. En alttaki draw() satırını sil; yerine requestAnimationFrame(loop) yaz.
3. Çalıştır ve izle: notalar yağmur gibi yağmalı.

Beceriler: Oyun döngüsü

← İşleyen bir saat Yanan şeritler →

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ı