Workshop › Battleship › Step 15 of 35

See your own fleet

What we are doing

You can see your own ships, grey on your sea; the enemy's stay hidden. drawSea gets the fleet and whether to show it.

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

      if (showShips && shipAt(fleet, r, c)) ctx.fillStyle = '#64748b'

  drawSea(SEA, BIG, myShots, enemyFleet, false)

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

What it means

• A square is grey only if ships are shown and a ship of that fleet is on it.
• The enemy's sea is drawn with false (hidden), yours with true.

Your turn

1. Add fleet, showShips to drawSea's parameters.
2. Under ctx.fillStyle = '#1e3a8a' in drawSea, write the grey line.
3. In draw, add enemyFleet, false to the first call and myFleet, true to the second.

Skills: Drawing on a canvas

← Hit or miss? Sinking ships →

All steps

1. A 10 by 10 sea
2. A function for any sea
3. Your own sea
4. Draw again and again
5. Grids and ships as lists
6. A random fleet
7. Two fleets
8. Which ship is here?
9. Fire at a square
10. Show the shots
11. Your shot
12. Tap to fire
13. A message line
14. Hit or miss?
15. See your own fleet
16. Sinking ships
17. Darker hits on a sunk ship
18. Outline sunk ships
19. Win in as few shots as you can
20. A record of their shots
21. Take turns
22. The computer shoots back
23. You can lose too
24. A heat map
25. Shoot the hottest square
26. Hunt around a hit
27. See the heat map
28. H for heat
29. Show their ships at the end
30. A keyboard cursor
31. Move with the arrows
32. Fire with Enter, play again
33. Your best game
34. A side panel
35. Build it yourself: ships apart