Atölye › Kule Savunması › 3/42. adım

Her karede çiz

Ne yapıyoruz

Bir oyun, ekranı saniyede yaklaşık 60 kez yeniden çizer; yürüyen düşmanlar ve uçan mermiler böyle canlı görünür. Çizim satırlarını draw (çiz) adlı bir fonksiyona koyuyoruz ve onu bir oyun döngüsünden çağırıyoruz. Ekran aynı kalacak; ama artık sürekli yeniden çiziliyor.

```js
function draw() {
  ctx.fillStyle = '#0f172a'
  ctx.fillRect(0, 0, canvas.width, canvas.height)

  for (let row = 0; row < ROWS; row++) {
    ...
  }
}

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

requestAnimationFrame(loop)
```

Ne işe yarıyor

function draw() { ... } → çizim tarifi: draw() denince içindeki satırlar çalışır. İlk satırlar bütün tuvali boyadığı için eski resim her seferinde silinir.
function loop() { → döngünün bir turu: çiz, sonra devamını iste.
requestAnimationFrame(loop) → tarayıcıya "ekranı bir sonraki yenilemeden önce loop'u çalıştır" der. loop kendi devamını istediği için döngü hiç durmaz.
En alttaki requestAnimationFrame(loop) → döngüyü başlatır.

Sıra sende

ctx.fillStyle = '#0f172a' satırının üstüne function draw() { yaz.
Arka plan satırlarını ve iki döngüyü iki boşluk içeri al; altlarına kapanan } yaz.
Bir boş satırdan sonra loop fonksiyonunu, en alta da requestAnimationFrame(loop) yaz.
Çalıştır: ekran aynı görünmeli.

Beceriler: Oyun döngüsü, Fonksiyonlar

← Karelerden bir harita Köşelerden yol →

Her karede çiz

Ne yapıyoruz

Ne işe yarıyor

Sıra sende

Tüm adımlar