Atölye › Pac-Man Tarzı Labirent Kovalamaca › 2/42. adım

Oyun döngüsü

Ne yapıyoruz

Bu oyunda her şey hareket edecek; o yüzden resmi baştan bir oyun döngüsü içinde çiziyoruz. Tarayıcı ekranı her yenilemeden önce (saniyede yaklaşık 60 kez) loop'u çalıştıracak, loop da draw ile resmi baştan çizecek.

Şimdilik draw yalnız arka planı gece mavisine boyuyor.

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

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

requestAnimationFrame(loop)
```

Ne işe yarıyor

function draw() { ... } → çizim tarifi. ctx.fillStyle = '#0b1020' rengi seçer (çok koyu lacivert), ctx.fillRect(0, 0, canvas.width, canvas.height) sol üst köşeden (0, 0) başlayıp bütün canvas'ı boyar. Canvas'ta x sağa, y aşağı doğru büyür.
function loop() { → döngünün bir turu: çiz, sonra bir sonrakini iste.
requestAnimationFrame(loop) → "ekran bir sonraki yenilenmeden önce loop'u çalıştır". 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

const COLS = ... satırının altına bir boş satır bırak; draw, loop ve başlatma satırını yaz (aralarında birer boş satır).
Çalıştır: oyun alanı koyu laciverte boyanmalı.

Beceriler: Oyun döngüsü, Canvas üzerine çizim

← Metin olarak labirent Duvarları çiz →

Oyun döngüsü

Ne yapıyoruz

Ne işe yarıyor

Sıra sende

Tüm adımlar