Workshop › 2048 › Step 13 of 26

The arrow key

What we are doing

A table turns arrow keys into directions. On a key press we move and then redraw: this game has no loop, the screen changes only when something happens.

```js
const directions = { ArrowLeft: 'left' }

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

What it means

• directions[event.key] is the direction for the key, or undefined for other keys.
• preventDefault() stops the arrow keys from scrolling the page.
• draw() repaints after every key.

Your turn

Write the table and the listener above function cellX(col) {, with an empty line after them.

Skills: Keyboard and mouse input

← Move left Only real moves count →

All steps

1. The board
2. Sixteen cells
3. A grid of numbers
4. A color for every number
5. Numbers on the tiles
6. Big numbers, smaller text
7. Find the empty cells
8. A new tile
9. Two tiles to start
10. Slide a row
11. Merge equal tiles
12. Move left
13. The arrow key
14. Only real moves count
15. Right is left, reversed
16. Up and down are columns
17. Score
18. Is there a move left?
19. Game over
20. Making 2048
21. Win and lose screens
22. Space to go on
23. Best score
24. Swipes
25. A tap is not a swipe
26. Build it yourself: undo