Workshop › Snake › Step 18 of 28

A table of turns

What we are doing

Four almost identical if lines become one lookup table: key name → direction. Same behavior, easier to change.

```js
const turns = {
  ArrowUp: { x: 0, y: -1 },
  ArrowDown: { x: 0, y: 1 },
  ArrowLeft: { x: -1, y: 0 },
  ArrowRight: { x: 1, y: 0 },
}

document.addEventListener('keydown', (event) => {
  const turn = turns[event.key]
  if (!turn) return
  dir = turn
})
```

What it means

• turns is an object used as a table: each key name leads to a direction.
• turns[event.key] looks the pressed key up; for other keys there is no entry, so it is undefined.
• if (!turn) return stops early when the key is not an arrow.

Your turn

Replace the whole listener with turns and the shorter listener.

Skills: Refactoring

← Never put food on the snake No U-turns →

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