Atölye › Missile Command Tarzı Savunma › 3/35. adım

Tekrar tekrar çiz

Ne yapıyoruz

Birazdan füzeler hareket edecek; resmin saniyede yaklaşık 60 kez yeniden çizilmesi gerekiyor. Çizim satırlarını draw (çiz) adlı bir fonksiyona koyuyoruz ve onu bir oyun döngüsünden sürekli çağırıyoruz.

Ekran aynı görünecek; ama artık her karede baştan çiziliyor.

```js
function draw() {
  ctx.fillStyle = '#020617'
  ctx.fillRect(0, 0, canvas.width, canvas.height)
  ctx.fillStyle = '#854d0e'
  ctx.fillRect(0, GROUND, canvas.width, canvas.height - GROUND)

  ctx.fillStyle = '#38bdf8'
  for (const x of CITY_XS) {
    ctx.fillRect(x - 16, GROUND - 14, 32, 14)
  }
  ctx.fillStyle = '#a3e635'
  ctx.fillRect(BASE.x - 12, BASE.y, 24, 14)
}

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

requestAnimationFrame(loop)
```

Ne işe yarıyor

function draw() { ... } → bütün çizim satırlarını draw adı altında toplar. Satırlar senin zaten yazdığın satırlar; yalnız iki boşluk içeri girip { } arasına alınıyorlar.
Gökyüzünü boyamak her karede eski resmi siler; füzeler ilerleyince arkalarında eski kopyalar kalmaz.
function loop() { draw(); requestAnimationFrame(loop) } → döngünün bir turu: çiz, sonra tarayıcıya "ekranı bir sonraki yenileyişinden önce loop'u yine çalıştır" de. Kendi devamını istediği için döngü hiç durmaz.
En alttaki requestAnimationFrame(loop) → döngüyü başlatır. loop parantezsiz: "şimdi çalıştır" değil, "sırası gelince sen çalıştır".

Sıra sende

Gökyüzünü boyayan ilk ctx.fillStyle = '#020617' satırının üstüne function draw() { yaz.
Üssü çizen son satıra kadar bütün çizim satırlarını iki boşluk içeri al ve altlarına } koy.
Bir boş satırdan sonra loop fonksiyonunu, bir boş satır daha bırakıp requestAnimationFrame(loop) satırını yaz.
Çalıştır: ekran aynı görünmeli.

Beceriler: Oyun döngüsü, Fonksiyonlar

← Füze üssün Yıkılabilen şehirler →

Tekrar tekrar çiz

Ne yapıyoruz

Ne işe yarıyor

Sıra sende

Tüm adımlar