Workshop › Battleship › Step 10 of 35

Show the shots

What we are doing

drawSea gets a third parameter, a shots grid. A miss is a small white dot, a hit a big red one, in the middle of the square.

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

What it means

An untried square (null) is skipped with continue.
The dot is a circle in the middle of the square: radius size / 8 for a miss, size / 3 for a hit.
The enemy's sea shows myShots; your sea gets an empty grid for now.

Your turn

Add shotsGrid to drawSea's parameters.
In drawSea, under the square's fillRect, write the six dot lines.
In draw, pass myShots to the enemy's sea and grid(null) to yours.

Skills: Drawing on a canvas

← Fire at a square Your shot →

All steps