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

Her ekranda aynı hız

Ne yapıyoruz

Oyunda gizli bir hata var. requestAnimationFrame ekran her yenilendiğinde bir kez çalışır. Çoğu ekran saniyede 60 kez yenilenir, ama birçok telefon ve oyun monitörü 120 ya da 144 kez. update her karede bir kez çalıştığı için 120 Hz'lik ekranda kuş iki kat hızlı düşer; yavaş bir bilgisayarda ise oyun ağır çekimde oynar.

Çözüm: fiziği ekrandan ayırmak. Bir zaman kumbarası tutacağız: her karede gerçekten geçen süreyi kumbaraya atacağız, kumbarada bir adımlık süre (1/60 saniye) oldukça bir update harcayacağız.

```js
const STEP = 1000 / 60 // one physics step, in milliseconds
let last = 0
let lag = 0

function loop(time) {
  // Run the physics at a fixed 60 steps per second, whatever the screen's refresh rate.
  lag += time - last
  last = time
  while (lag >= STEP) {
    update()
    lag -= STEP
  }
  draw()
```

Ne işe yarıyor

• const STEP = 1000 / 60 → bir fizik adımı: 1 saniye = 1000 milisaniye; 1000 / 60 ≈ 16,7 ms.
• let last = 0 → bir önceki karenin zamanı. let lag = 0 → kumbarada biriken süre.
• function loop(time) → tarayıcı loop'u çağırırken ona şu anki zamanı (ms) verir.
• lag += time - last → son kareden beri geçen süreyi kumbaraya at. last = time → şimdiki zamanı hatırla.
• while (lag >= STEP) { ... } → while döngüsü: "koşul doğru olduğu sürece tekrarla". Kumbarada bir adımlık süre oldukça bir update yap ve o süreyi (lag -= STEP) kumbaradan çıkar. Her turda lag azaldığı için döngü mutlaka biter.
  • 120 Hz ekranda her kare ~8 ms atar: update iki karede bir çalışır.
  • 30 Hz ekranda her kare ~33 ms atar: update her karede iki kez çalışır.
  • İkisinde de saniyede 60 güncelleme.
• draw() → while'ın dışında: fizik kaç adım atarsa atsın, ekrana bir kez çizeriz.

Sıra sende

1. function loop() { satırının üstüne STEP, last ve lag satırlarını ve bir boş satır yaz.
2. loop'u kodda görüldüğü gibi değiştir: parantez içine time; yorum, lag, last satırları; update() çağrısı while döngüsünün içine. draw() ve requestAnimationFrame(loop) aynı kalır.
3. Çalıştır: senin ekranında oyun aynı görünür. Fark: artık herkesin ekranında da aynı.

Beceriler: Oyun döngüsü, Hız ve yerçekimi

← Rekoru göster Aradan sonra telafi yok →

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