Atölye › Wolfenstein Tarzı 3B Labirent › 3/18. adım

Tavan, zemin ve döngü

Ne yapıyoruz

3B görünümün bir tavanı (üst yarı, koyu) ve bir zemini (alt yarı, daha açık) olsun. İkisi her karede eski resmi de silmiş olur. Bir döngü her şeyi saniyede ~60 kez yeniden çizsin.

```js
  const H = canvas.height
  ctx.fillStyle = '#1e293b'
  ctx.fillRect(0, 0, canvas.width, H / 2)
  ctx.fillStyle = '#475569'
  ctx.fillRect(0, H / 2, canvas.width, H / 2)

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

requestAnimationFrame(loop)
```

Ne işe yarıyor

const H = canvas.height → sık kullanacağımız yükseklik için kısa ad.
Tavan 0'dan H / 2'ye, zemin H / 2'den aşağı: ortadaki çizgi ufuk.
loop → çiz ve bir sonraki kareyi iste. En alttaki draw() yerine requestAnimationFrame(loop) başlatıyor.

Sıra sende

draw'ın en üstüne H satırını, tavanı ve zemini, sonra bir boş satır yaz.
En alttaki draw() satırını sil; reset()'in üstüne loop fonksiyonunu, altına requestAnimationFrame(loop) yaz.
Çalıştır.

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

← Oyuncu Dön →

Tüm adımlar