Workshop › Battleship › Step 18 of 35

Outline sunk ships

What we are doing

Each sunk enemy ship gets a pink outline around all its squares, so the shape of what you sank is clear.

```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)
}
```

What it means

filter(sunk) passes the sunk function itself: only sunk ships are outlined.
rs and cs are the ship's rows and columns; Math.min(...cs) is the leftmost column (... spreads the list).
strokeRect draws only the outline of a rectangle, 2 pixels in from the ship's squares.

Your turn

In draw, under the enemy sea's drawSea(...) line, write the outline lines. The strokeRect line is long; keep it on one line.

Skills: Drawing on a canvas, Arrays and objects

← Darker hits on a sunk ship Win in as few shots as you can →

All steps