Atölye › Amiral Battı › 4/35. adım

Tekrar tekrar çiz

Ne yapıyoruz

Birazdan atışlar resmi değiştirecek: isabetler, ıskalar... Resmin her an güncel olması için çizimi draw (çiz) adlı bir fonksiyona koyup bir oyun döngüsüyle saniyede yaklaşık 60 kez yeniden çiziyoruz. Ekran yine aynı görünecek.

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

  drawSea(SEA, BIG)

  ctx.fillStyle = 'white'
  ctx.font = 'bold 14px sans-serif'
  ctx.fillText('Your fleet', HOME.x, HOME.y - 10)
  drawSea(HOME, SMALL)
}

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

requestAnimationFrame(loop)
```

Ne işe yarıyor

function draw() { ... } → bütün çizim satırlarını bir araya toplar; satırlar iki boşluk içeri girer. Arka plan her seferinde eski resmi siler.
function loop() { ... } → döngünün bir turu: çiz, sonra requestAnimationFrame(loop) ile tarayıcıya "ekranı bir sonraki yenileyişinden önce loop'u yine çalıştır" de. Kendi devamını istediği için hiç durmaz.
En alttaki requestAnimationFrame(loop) → döngüyü başlatır. loop parantezsiz: "sırası gelince sen çalıştır".

Sıra sende

drawSea fonksiyonunun altındaki bütün çizim satırlarının üstüne function draw() { yaz, satırları iki boşluk içeri al ve altlarına } koy.
Bir boş satırdan sonra loop fonksiyonunu, bir boş satır daha bırakıp requestAnimationFrame(loop) satırını yaz.
Çalıştır: ekran aynı görünmeli.

Beceriler: Oyun döngüsü

← Senin denizin Liste olarak ızgara ve gemi →

Tekrar tekrar çiz

Ne yapıyoruz

Ne işe yarıyor

Sıra sende

Tüm adımlar