Atölye › OutRun Tarzı Yarış › 2/44. adım

Tekrar tekrar çiz

Ne yapıyoruz

Yol birazdan hareket edecek. Hareket demek, resmi saniyede yaklaşık 60 kez baştan çizmek demek; bir çizgi filmin kareleri gibi. Her karede resim biraz değişir, göz bunu hareket olarak görür.

Bunun için boyama satırlarını bir fonksiyonun içine koyacağız ve onu bir oyun döngüsünden çağıracağız. Ekranda bir şey değişmeyecek; ama resim artık her karede yeniden çiziliyor.

```js
function draw() {
  ctx.fillStyle = '#7dd3fc'
  ctx.fillRect(0, 0, W, H)
  ctx.fillStyle = '#15803d'
  ctx.fillRect(0, H / 2, W, H / 2)
}

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

requestAnimationFrame(loop)
```

Ne işe yarıyor

function draw() { ... } → çizim tarifini bir ada bağlar. Tanımlamak tek başına bir şey çizmez; draw() diye çağrılınca çalışır. Süslü parantezlerin içi fonksiyonun gövdesidir, iki boşluk içeriden yazılır.
function loop() → döngünün bir turu: önce çiz, sonra devamını iste.
requestAnimationFrame(loop) → tarayıcıya "ekranı bir dahaki yenilemenden hemen önce loop'u yine çalıştır" der. loop her seferinde kendi devamını istediği için döngü hiç durmaz.
En alttaki requestAnimationFrame(loop) → döngüyü başlatır.

Sıra sende

Dört boyama satırının üstüne function draw() { yaz.
Dört satırı iki boşluk içeri al; altlarına kapanan } koy.
Bir boş satırdan sonra loop fonksiyonunu, en alta da bir boş satırdan sonra requestAnimationFrame(loop) satırını yaz.
Çalıştır: ekran aynı görünmeli, kontroller yeşil olmalı.

Beceriler: Oyun döngüsü, Fonksiyonlar

← Gökyüzü ve zemin Perspektif →

Tekrar tekrar çiz

Ne yapıyoruz

Ne işe yarıyor

Sıra sende

Tüm adımlar