Atölye › Candy Crush Tarzı Üçlü Eşleştirme › 3/29. adım

Oyun döngüsü

Ne yapıyoruz

Mücevherler ileride yanıp sönecek ve düşecek; resmin saniyede yaklaşık 60 kez yeniden çizilmesi gerekecek. Bu yüzden bütün çizimi bir fonksiyona koyuyoruz: draw (çiz). Bir de oyun döngüsü: loop her turda draw()'u çağırır ve tarayıcıdan bir sonraki turu ister. Ekran aynı görünecek.

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

  for (let r = 0; r < N; r++) {
    for (let c = 0; c < N; c++) {
      const x = LEFT + c * SIZE
      const y = TOP + r * SIZE
      ctx.fillStyle = (r + c) % 2 === 0 ? '#312e81' : '#3730a3'
      ctx.fillRect(x, y, SIZE, SIZE)
    }
  }
}

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

requestAnimationFrame(loop)
```

Ne işe yarıyor

function draw() { → bütün çizim bu fonksiyonun içinde. İlk iş arka planı boyamak: bu, eski resmi siler.
requestAnimationFrame(loop) → tarayıcıya "ekranı bir sonraki yenilemeden önce loop'u çalıştır" der.
function loop() { → döngünün bir turu: çiz, sonra bir sonraki turu iste. Kendi devamını istediği için hiç durmaz.
En alttaki requestAnimationFrame(loop) → döngüyü başlatır.

Sıra sende

Boyama satırlarının üstüne function draw() { yaz; altındaki bütün satırları (iki döngü dahil) iki boşluk içeri al ve en sona kapanan } yaz.
Bir boş satırdan sonra loop fonksiyonunu, bir boş satır daha bırakıp requestAnimationFrame(loop) satırını yaz.
Çalıştır: ızgara aynı görünmeli.

Beceriler: Oyun döngüsü, Fonksiyonlar

← Damalı ızgara Rastgele mücevherli tahta →

Oyun döngüsü

Ne yapıyoruz

Ne işe yarıyor

Sıra sende

Tüm adımlar