Workshop › Snake › Step 11 of 28

Steer with the arrow keys

What we are doing

Now the player takes control: when an arrow key is pressed, we change dir.

```js
document.addEventListener('keydown', (event) => {
  if (event.key === 'ArrowUp') dir = { x: 0, y: -1 }
  if (event.key === 'ArrowDown') dir = { x: 0, y: 1 }
  if (event.key === 'ArrowLeft') dir = { x: -1, y: 0 }
  if (event.key === 'ArrowRight') dir = { x: 1, y: 0 }
})
```

What it means

• addEventListener('keydown', ...) runs the function each time a key goes down.
• event.key is the key's name, such as 'ArrowUp'.
• Each if checks one arrow and sets the matching direction. === means "is exactly equal to".

Your turn

Write the listener under let last = 0, after an empty line. Run, click the game and use the arrow keys.

Skills: Keyboard and mouse input

← A direction to move in A body made of a list →

All steps

1. Find the canvas
2. Get the pen
3. Paint the board
4. Think in cells
5. Keep the position in a variable
6. A function that draws
7. A function that moves
8. The game loop
9. Slow it down
10. A direction to move in
11. Steer with the arrow keys
12. A body made of a list
13. Move the whole body
14. Pick a spot for the food
15. Draw the food
16. Eat and grow
17. Never put food on the snake
18. A table of turns
19. No U-turns
20. Crash into the walls
21. Crash into yourself
22. The game over message
23. Show the score
24. One function that starts a game
25. Play again with Space
26. Remember the best score
27. Speed up as you grow
28. Build it yourself: through the walls