Workshop › Sokoban › Step 14 of 29

Walk with the arrows

What we are doing

Arrow keys call move. A lookup object maps each key name to its [dx, dy], and after every key the picture is drawn again. Sokoban is turn-based, so it needs no game loop.

```js
const directions = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], ArrowDown: [0, 1] }

document.addEventListener('keydown', (event) => {
  if (directions[event.key]) {
    event.preventDefault()
    move(...directions[event.key])
  }
  draw()
})
```

What it means

• directions is a lookup object: directions['ArrowUp'] is [0, -1]. For any other key it is undefined, so the if asks "is this an arrow?".
• event.preventDefault() stops the arrows from scrolling the page.
• ... spreads the pair into two arguments: move(0, -1).
• draw() shows the new state after every key.

Your turn

Above function draw() {, write directions and the listener, and leave an empty line. Press Run, click the game and use the arrows.

Skills: Keyboard and mouse input

← One step Boxes are in the way →

All steps

1. A level written as text
2. The canvas and the pen
3. The warehouse floor
4. A function that draws
5. A name for every tile
6. Read the walls
7. Draw the walls
8. Center the level
9. The goals
10. The boxes
11. The player
12. Two more levels
13. One step
14. Walk with the arrows
15. Boxes are in the way
16. Push a box
17. A box on a goal turns green
18. Solved!
19. On to the next level
20. Which level?
21. A line at the bottom
22. Count the moves
23. A photo of the game
24. A photo before every move
25. Undo
26. Restart
27. A record for every level
28. Show the record
29. Build it yourself: count the pushes