Workshop › Battleship › Step 5 of 35

Grids and ships as lists

What we are doing

Two small helpers. grid(value) makes a 10 by 10 table: a list of 10 rows, each a list of 10 squares. shipCells makes the list of squares a ship covers.

```js
const grid = (value) => Array.from({ length: N }, () => Array(N).fill(value))
const shipCells = (r, c, length, down) => Array.from({ length }, (_, i) => (down ? [r + i, c] : [r, c + i]))
```

What it means

• These are arrow functions stored in constants; a one-line arrow function returns its result by itself.
• Array(N).fill(value) is one row; Array.from({ length: N }, ...) makes 10 separate rows.
• In shipCells, i counts 0, 1, 2...; a ship going down adds i to the row, otherwise to the column.

Your turn

Write the two lines above function drawSea(, followed by an empty line.

Skills: Arrays and objects, Functions

← Draw again and again A random fleet →

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