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

Atışları göster

Ne yapıyoruz

Atışlar görünsün. drawSea'ye üçüncü bir parametre veriyoruz: bir atış tablosu. Iska kareye küçük beyaz bir nokta, isabet büyük kırmızı bir nokta koyacağız. Düşman denizine senin atışların (myShots) çizilecek. Senin denizine henüz kimse ateş etmiyor; ona şimdilik boş bir tablo veriyoruz.

```js
function drawSea(origin, size, shotsGrid) {

      const shot = shotsGrid[r][c]
      if (!shot) continue
      ctx.fillStyle = shot === 'miss' ? '#e2e8f0' : '#ef4444'
      ctx.beginPath()
      ctx.arc(x + size / 2, y + size / 2, shot === 'miss' ? size / 8 : size / 3, 0, Math.PI * 2)
      ctx.fill()

  drawSea(SEA, BIG, myShots)

  drawSea(HOME, SMALL, grid(null))
```

Ne işe yarıyor

const shot = shotsGrid[r][c] → bu karenin atış sonucu.
if (!shot) continue → null "yanlış" sayılır: denenmemiş kareyi atla, sıradakine geç.
shot === 'miss' ? '#e2e8f0' : '#ef4444' → ıskaysa beyaz, değilse kırmızı.
ctx.arc(x + size / 2, y + size / 2, yarıçap, 0, Math.PI * 2) → karenin ortasında bir daire. Yarıçap ıskada size / 8 (küçük), isabette size / 3 (büyük). 0'dan Math.PI * 2'ye tam bir tur.
Çağrılar: düşman denizine myShots; senin denizine şimdilik grid(null), yani boş bir tablo.

Sıra sende

drawSea'nin parametrelerine , shotsGrid ekle.
drawSea içinde kareyi boyayan ctx.fillRect(...) satırının altına altı nokta satırını yaz.
draw içinde düşman denizine myShots, senin denizine grid(null) ver: drawSea(SEA, BIG, myShots) ve drawSea(HOME, SMALL, grid(null)).
Çalıştır: henüz atış yok, ekran aynı. Kontroller yeşil olmalı.

Beceriler: Canvas üzerine çizim

← Bir kareye ateş et Senin atışın →

Atışları göster

Ne yapıyoruz

Ne işe yarıyor

Sıra sende

Tüm adımlar