Atölye › Angry Birds Tarzı Sapan › 3/47. adım

Tekrar tekrar çiz

Ne yapıyoruz

Bir oyun, ekranı saniyede yaklaşık 60 kez yeniden çizer; hareket eden şeyler böyle canlı görünür (çizgi filmin kareleri gibi). Bunun için çizim satırlarını bir fonksiyonun içine koyup ona draw (çiz) adını veriyoruz.

Sonra bir oyun döngüsü yazıyoruz: loop her turda çizer ve tarayıcıdan bir sonraki turu ister. Ekran aynı görünecek; ama artık resim sürekli yeniden çiziliyor.

```js
function draw() {
  ctx.fillStyle = '#bae6fd'
  ...
  ctx.fillRect(SLING.x - 4, SLING.y, 8, GROUND - SLING.y)
}

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

requestAnimationFrame(loop)
```

Ne işe yarıyor

function draw() { → bir fonksiyon (tarif) tanımlar: "draw deyince şu satırları yap". { ile } arası gövdesidir; okunaklı olsun diye iki boşluk içeriden yazılır.
Gövdede ilk çizim bütün tuvali gökyüzüyle boyadığı için eski resim her seferinde silinir. İleride kuş hareket edince arkasında iz kalmamasının sebebi bu.
function loop() { → döngünün bir turu: çiz, sonra devamını iste.
requestAnimationFrame(loop) → tarayıcıya "ekranı bir sonraki yenilemeden önce loop'u ç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.

Sıra sende

Gökyüzü satırının (ctx.fillStyle = '#bae6fd') üstüne function draw() { yaz.
Gökyüzünden direğe kadar bütün satırları iki boşluk içeri al (satırları seçip Tab'a basabilirsin).
Direğin son satırının altına kapanan } yaz.
Bir boş satırdan sonra loop fonksiyonunu, bir boş satır daha bırakıp en alta requestAnimationFrame(loop) yaz.
Çalıştır: ekran aynı görünmeli, kontroller yeşil olmalı.

Beceriler: Oyun döngüsü, Fonksiyonlar

← Gökyüzü ve zemin Nişan: bir açı ve bir çekiş →

Tekrar tekrar çiz

Ne yapıyoruz

Ne işe yarıyor

Sıra sende

Tüm adımlar