Atölye › Amiral Battı › 18/35. adım
Batırdığın her düşman gemisinin etrafına pembe bir çerçeve çizelim: batırdığın şeyin şekli ve boyu açıkça görünsün. Çerçeve, geminin en üst-sol karesinden en alt-sağ karesine kadar uzanan bir dikdörtgen.
```js
// Sunk enemy ships are outlined so you can see what is left.
ctx.strokeStyle = '#fca5a5'
ctx.lineWidth = 2
for (const ship of enemyFleet.filter(sunk)) {
const rs = ship.cells.map(([r]) => r)
const cs = ship.cells.map(([, c]) => c)
ctx.strokeRect(SEA.x + Math.min(...cs) * BIG + 2, SEA.y + Math.min(...rs) * BIG + 2, (Math.max(...cs) - Math.min(...cs) + 1) * BIG - 4, (Math.max(...rs) - Math.min(...rs) + 1) * BIG - 4)
}
```enemyFleet.filter(sunk) → sunk fonksiyonunun kendisini veriyoruz: yalnız batmış gemiler. Neredeyse cümle gibi
okunuyor.ship.cells.map(([r]) => r) → geminin satırları; ([, c]) => c → sütunları (virgül ilk elemanı atlar).Math.min(...cs) → en küçük sütun. ... (yayma) listeyi tek tek sayılar olarak verir: Math.min(3, 4, 5) gibi.Math.max(...cs) - Math.min(...cs) + 1 → gemi kaç sütun kaplıyor; * BIG ile piksel.ctx.strokeRect(x, y, en, boy) → yalnız çerçeve çizer (içi boş). + 2 ve - 4 onu kareların biraz içine alır.strokeStyle çizgi rengi, lineWidth kalınlığı.draw içinde düşman denizini çizen drawSea(SEA, ...) satırının altına çerçeve satırlarını yaz. strokeRect satırı
uzun; tek satırda yaz. Çalıştır ve bir gemi batır: etrafında pembe bir çerçeve belirmeli.
Beceriler: Canvas üzerine çizim, Diziler ve nesneler
← Batık gemide koyu isabetler En az atışla kazan →