Workshop › 2048 › Step 3 of 26

A grid of numbers

What we are doing

The board's data is a 2D array: an array of 4 rows, each an array of 4 numbers; 0 is an empty cell and board[row][col] reads one. Building it hides one of JavaScript's most famous traps.

```js
let board

function newGame() {
  // Array.from calls the function for every row, so each row is its own array.
  board = Array.from({ length: SIZE }, () => Array(SIZE).fill(0))
}

newGame()
draw()
```

What it means

Your turn

  1. Under TOP, after an empty line, write let board.
  2. Above function cellX(col) { write newGame, with an empty line after it.
  3. At the bottom, write newGame() above draw().

Skills: Arrays and objects

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