Atölye › Mario Tarzı Platform › 1/37. adım
Kayan bir bölümde koş, zıpla, düşmanları ez ve bayrağa ulaş. Metinden bir bölüm, döşeme çarpışmaları, ivme, coyote time, kamera, düşmanlar ve ezme.
Her canvas oyununun başladığı yerden başlıyoruz: canvas'ı bul, çizim kalemini al ve saniyede ~60 kez gökyüzünü boyayan bir döngü kur. Bölüm, oyuncu ve düşmanlar bu gökyüzünün önünde koşacak.
```js
const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')
function draw() {
ctx.fillStyle = '#7dd3fc'
ctx.fillRect(0, 0, canvas.width, canvas.height)
}
function loop() {
draw()
requestAnimationFrame(loop)
}
requestAnimationFrame(loop)
```document.getElementById('game') → sayfadaki 640×352'lik canvas; getContext('2d') → onun çizim kalemi, ctx.draw → fillStyle ile rengi açık mavi seçer, fillRect(0, 0, canvas.width, canvas.height) ile canvas'ın tamamını
boyar. Canvas'ta (0, 0) sol üst köşe; x sağa, y aşağı doğru büyür.loop → döngünün bir turu: çiz, sonra requestAnimationFrame(loop) ile "ekran bir sonraki yenilenmeden önce beni
yine çağır" de. Saniyede ~60 tur.requestAnimationFrame(loop) → döngüyü başlatır.Kodu üç yorum satırının altına yaz ve Çalıştır'a bas. Sağdaki alan açık mavi olmalı.
Beceriler: Canvas üzerine çizim, Oyun döngüsü