Atölye › Dört Bağla › 9/38. adım

Her karede çiz

Ne yapıyoruz

draw() şu an bir kez çalışıyor; tahta sonradan değişirse ekrana hiç yansımaz. Oyunlar bu yüzden bir döngüyle çalışır: resmi saniyede yaklaşık 60 kez baştan çizerler; çizgi filmin kareleri gibi.

requestAnimationFrame(loop) tarayıcıya "ekranı bir dahaki yenilemenden önce loop'u çalıştır" der. loop da her seferinde kendi devamını ister; döngü hiç durmaz.

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

reset()
requestAnimationFrame(loop)
```

Ne işe yarıyor

function loop() → döngünün bir turu: çiz, sonra requestAnimationFrame(loop) ile bir sonraki turu iste.
En alttaki draw() gidiyor; yerine döngüyü başlatan requestAnimationFrame(loop) geliyor.

Sıra sende

En alttaki reset() satırının üstüne loop fonksiyonunu yaz; altında bir boş satır kalsın.
En son satırdaki draw()'ı sil; yerine requestAnimationFrame(loop) yaz.
Çalıştır: ekran aynı görünür, ama artık her karede yeniden çiziliyor.

Beceriler: Oyun döngüsü

← Renkli diskler Disk nereye düşer? →

Tüm adımlar