Workshop › Asteroids › Step 5 of 41

Which keys are down?

What we are doing

The arrow keys will steer the ship. We keep the keys held down in an object keys: true while a key is down, false after it is released. Every frame the game can then ask "is left held?".

```js
const keys = {}

document.addEventListener('keydown', (event) => {
  keys[event.key] = true
})
document.addEventListener('keyup', (event) => {
  keys[event.key] = false
})
```

What it means

Your turn

  1. Under let ship write const keys = {}.
  2. Above function drawShip() { write the two listeners, followed by an empty line.

Skills: Keyboard and mouse input

All steps

  1. Black space
  2. Where the ship is
  3. Which way it points
  4. A triangle ship
  5. Which keys are down?
  6. Turning
  7. The game loop
  8. Thrust and drift
  9. A little friction
  10. A speed limit
  11. Around the screen
  12. Making a bullet
  13. Fire!
  14. Bullets fly
  15. A lifetime for bullets
  16. Making a rock
  17. Four big rocks
  18. Drawing the rocks
  19. Jagged rocks
  20. Drifting rocks
  21. When do two circles touch?
  22. Breaking a rock
  23. Bullets hit rocks
  24. Points
  25. Show the score
  26. Losing a life
  27. A rock hits the ship
  28. Show the lives
  29. What time is it?
  30. A moment of safety
  31. Blink while safe
  32. Waves of rocks
  33. The next wave
  34. Faster every wave
  35. One function to start
  36. Playing or over
  37. Game over
  38. Best score
  39. GAME OVER
  40. Play again
  41. Build it yourself: hyperspace