Workshop › Battleship › Step 31 of 35

Move with the arrows

What we are doing

The arrow keys move the cursor. Going off one edge brings it back on the other.

```js
const moves = { ArrowUp: [-1, 0], ArrowDown: [1, 0], ArrowLeft: [0, -1], ArrowRight: [0, 1] }
if (moves[event.key]) {
  const [dr, dc] = moves[event.key]
  cursor = { r: (cursor.r + dr + N) % N, c: (cursor.c + dc + N) % N }
} else if (event.key === 'h' || event.key === 'H') showHeat = !showHeat
```

What it means

• moves is a table: each arrow key gives a row change and a column change.
• const [dr, dc] = ... takes the two numbers out of the pair.
• (cursor.r + dr + N) % N wraps around: from row 0 going up gives 9.

Your turn

At the top of the keydown listener, write moves and the arrow block, and turn the H line into } else if.

Skills: Keyboard and mouse input

← A keyboard cursor Fire with Enter, play 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