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

Her deniz için bir fonksiyon

Ne yapıyoruz

Oyunda iki deniz olacak: üstte düşmanınki (büyük), altta seninki (küçük). Aynı döngüleri iki kez yazmak yerine bir fonksiyon yazıyoruz: drawSea(origin, size). Ona denizin nereden başlayacağını ve karelerin ne kadar büyük olacağını söylersin, o da çizer.

Ekran aynı görünecek; ama artık denizi tek satırla çizebiliyoruz.

```js
function drawSea(origin, size) {
  for (let r = 0; r < N; r++) {
    for (let c = 0; c < N; c++) {
      const x = origin.x + c * size
      const y = origin.y + r * size
      ctx.fillStyle = '#1e3a8a'
      ctx.fillRect(x + 1, y + 1, size - 2, size - 2)
    }
  }
}

drawSea(SEA, BIG)
```

Ne işe yarıyor

function drawSea(origin, size) → iki parametre: origin (başlangıç köşesi) ve size (kare boyu). drawSea(SEA, BIG) diye çağırınca içeride origin = SEA, size = BIG olur.
const x = origin.x + c * size, const y = ... → karenin sol üst köşesi; bir kez hesaplayıp aşağıda kullanıyoruz.
ctx.fillStyle = '#1e3a8a' artık döngünün içinde: ileride bazı kareler başka renkte olacak (gemi, isabet...).
En alttaki drawSea(SEA, BIG) → düşman denizini çizer.

Sıra sende

Arka planı boyayan iki satırın üstüne drawSea fonksiyonunu yaz (döngüleri içine taşı ve kodda görüldüğü gibi değiştir); altında bir boş satır kalsın.
Eski döngüleri ve ctx.fillStyle = '#1e3a8a' satırını sil.
Arka planın altına, bir boş satırdan sonra drawSea(SEA, BIG) yaz.
Çalıştır: ekran aynı görünmeli.

Beceriler: Fonksiyonlar

← 10'a 10 bir deniz Senin denizin →

Her deniz için bir fonksiyon

Ne yapıyoruz

Ne işe yarıyor

Sıra sende

Tüm adımlar