Atölye › Tuğla Kırma › 2/39. adım

Tekrar tekrar çiz

Ne yapıyoruz

Şu an resim bir kez çiziliyor ve öyle kalıyor. Raket kıpırdasa bile ekran bunu göstermez. Oyunlar resmi saniyede yaklaşık 60 kez yeniden çizer; bir çizgi filmin kareleri gibi.

Çizim satırlarını draw (çiz) adlı bir fonksiyona koyacağız ve onu bir oyun döngüsünden sürekli çağıracağız. Ekran yine aynı görünecek, ama artık her karede yeniden çiziliyor.

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

  ctx.fillStyle = '#e2e8f0'
  ctx.fillRect(paddle.x, PADDLE_Y, PADDLE_W, PADDLE_H)
}

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

requestAnimationFrame(loop)
```

Ne işe yarıyor

function draw() { ... } → dört çizim satırını draw adı altında toplar. Tanımlamak çalıştırmak değildir; tarif yazılır, pişirilmez.
Gövdenin ilk iki satırı arka planı boyar: bu her karede eski resmi siler. Raket kayınca arkasında iz kalmaz.
function loop() { → döngünün bir turu: önce draw() ile çiz, sonra...
requestAnimationFrame(loop) → tarayıcıya "ekranı bir sonraki yenileyişinden önce loop'u yine ç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. Burada loop parantezsiz yazılır: "şimdi çalıştır" değil, "sırası gelince sen çalıştır" diyoruz.

Sıra sende

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

Beceriler: Oyun döngüsü, Fonksiyonlar

← Oyun alanı ve raket Sayıyı sınırlar içinde tut →

Tekrar tekrar çiz

Ne yapıyoruz

Ne işe yarıyor

Sıra sende

Tüm adımlar