Workshop › Snake › Step 10 of 28

A direction to move in

What we are doing

The head always moves right because update adds 1 to x. We keep the direction in a variable dir instead, so it can change.

```js
let dir = { x: 1, y: 0 }

function update() {
  head.x += dir.x
  head.y += dir.y
}
```

What it means

• dir holds how many cells to move each turn: x: 1, y: 0 is one to the right.
• update adds dir to the head, so changing dir changes where the snake goes.

Your turn

1. Under let head = ... write let dir = { x: 1, y: 0 }.
2. In update, replace head.x += 1 with the two lines using dir.

Skills: Game states

← Slow it down Steer with the arrow keys →

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