Atölye › Yılan › 8/28. adım

Oyun döngüsü

Ne yapıyoruz

Oyunlar bir döngü ile çalışır: güncelle → çiz → tekrar → güncelle → çiz... 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.

```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 (baş bir hücre sağa).
• 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 (artık çizimi döngü yapıyor).

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 kareyi izle.

Beceriler: Oyun döngüsü

← Hareket ettiren bir fonksiyon Yavaşlat →

Tüm adımlar

1. Canvas'ı bul
2. Kalemi al
3. Tahtayı boya
4. Hücrelerle düşün
5. Yeri bir değişkende tut
6. Çizen bir fonksiyon
7. Hareket ettiren bir fonksiyon
8. Oyun döngüsü
9. Yavaşlat
10. Gidilecek yön
11. Ok tuşlarıyla yönlendir
12. Listeden bir gövde
13. Bütün gövdeyi yürüt
14. Yeme bir yer seç
15. Yemi çiz
16. Ye ve büyü
17. Yemi yılanın üstüne koyma
18. Yön tablosu
19. Geri dönüş yok
20. Duvara çarpma
21. Kendine çarpma
22. Oyun bitti yazısı
23. Skoru göster
24. Oyunu başlatan tek fonksiyon
25. Boşlukla yeniden oyna
26. En iyi skoru hatırla
27. Büyüdükçe hızlan
28. Kendin yap: duvarlardan geç