Atölye › Doodle Jump Tarzı Tırmanış › 2/24. adım

Tekrar tekrar çiz

Ne yapıyoruz

Resim her an değişecek. Çizim satırlarını draw (çiz) fonksiyonuna alıyoruz ve bir döngü onu saniyede ~60 kez çalıştırıyor.

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

  ctx.fillStyle = '#f59e0b'
  ctx.fillRect(player.x, player.y, player.w, player.h)
}

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

requestAnimationFrame(loop)
```

Ne işe yarıyor

function draw() → bütün resmi çizer; önce arka plan eski resmi siler.
function loop() → çiz, sonra requestAnimationFrame(loop) ile bir sonraki turu iste. Kendini yeniden istediği için durmaz.
En alttaki satır döngüyü başlatır.

Sıra sende

Dört çizim satırını function draw() { ... } içine al (iki boşluk içeri).
Altına loop fonksiyonunu ve en alta requestAnimationFrame(loop) satırını yaz.
Çalıştır.

Beceriler: Oyun döngüsü

← Zıplayan Yer çekimi →

Tüm adımlar