Atölye › Flappy tarzı kuş › 6/30. adım

Oyun döngüsü

Ne yapıyoruz

Oyunlar bir döngü ile çalışır: güncelle → çiz → tekrar → güncelle → çiz... Çizgi filmin kareleri gibi, her turda resim biraz değişir ve hareket görünür. Her resme kare (frame) denir.

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.

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

requestAnimationFrame(loop)
```

Ne işe yarıyor

• function loop() { → döngünün bir turu.
• update() → durumu değiştir (kuş 2 piksel iner).
• 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.
• Dikkat: burada loop parantezsiz. loop() "şimdi çalıştır" olurdu; loop ise "bu tarifi al, sırası gelince sen çalıştır" demek.
• 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 draw() satırını sil.
2. Yerine loop fonksiyonunu ve altına, bir boş satırdan sonra, requestAnimationFrame(loop) satırını yaz.
3. Çalıştır ve kuşu izle.

Beceriler: Oyun döngüsü

← Hareket ettiren bir fonksiyon Yerçekimi →

Tüm adımlar

1. Canvas'ı ve kalemi al
2. Gökyüzünü boya
3. Kuşu çiz
4. Çizen bir fonksiyon
5. Hareket ettiren bir fonksiyon
6. Oyun döngüsü
7. Yerçekimi
8. Kanat çırpış
9. Boşluk, yukarı ok ya da dokunuş
10. İlk çırpışı bekle
11. Yer ve gök
12. Oyuncuya söyle
13. Veri olarak boru
14. Boruları çiz
15. Kuş değil dünya kayar
16. Rastgele yükseklikte yeni boru
17. Her 90 karede bir boru
18. Geçilen boruları sil
19. Kuş borunun hizasında mı?
20. Açıklıktan geç
21. Her boruyu bir kez say
22. Skoru göster
23. Temiz başlangıç fonksiyonu
24. Tekrar dene
25. Oyunun bittiği tek yer
26. Rekoru hatırla
27. Rekoru göster
28. Her ekranda aynı hız
29. Aradan sonra telafi yok
30. Kendin yap: madalya