Workshop › Battleship › Step 3 of 35

Your own sea

What we are doing

Your own fleet sails on a second, smaller sea at the bottom, with a title above it. The same function draws it.

```js
const SMALL = 20 // cell size of your own sea
const HOME = { x: 30, y: 440 }

ctx.fillStyle = 'white'
ctx.font = 'bold 14px sans-serif'
ctx.fillText('Your fleet', HOME.x, HOME.y - 10)
drawSea(HOME, SMALL)
```

What it means

• SMALL is the square size of your sea, HOME its top-left corner.
• font sets the text size and typeface; fillText writes the title 10 pixels above your sea.
• drawSea(HOME, SMALL) reuses the function for the second sea.

Your turn

1. Under const BIG write SMALL; under const SEA write HOME.
2. At the very end, leave an empty line and write the four lines.

Skills: Drawing on a canvas

← A function for any sea Draw again and again →

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