Workshop › Battleship › Step 30 of 35

A keyboard cursor

What we are doing

To play without a mouse, a yellow frame marks the square the keyboard is on.

```js
let cursor // { r, c } for the keyboard
  cursor = { r: 0, c: 0 }

  if (state === 'playing') {
    ctx.strokeStyle = '#fde047'
    ctx.strokeRect(SEA.x + cursor.c * BIG + 1, SEA.y + cursor.r * BIG + 1, BIG - 2, BIG - 2)
  }
```

What it means

• cursor holds a row and a column; a new game starts it in the top-left corner.
• While playing, a yellow frame (strokeRect draws only the outline) is drawn around that square.

Your turn

1. Under let showHeat, write let cursor; in reset, under showHeat = false, write the cursor line.
2. In draw, right after the loop that outlines sunk ships, write the if (state === 'playing') block.

Skills: Drawing on a canvas

← Show their ships at the end Move with the arrows →

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