Workshop › Candy Crush-style Match 3 › Step 4 of 29

A board of random gems

What we are doing

There are six gem colors. The board is a list of 8 rows, each a list of 8 numbers from 0 to 5: not the color itself but its index in COLORS. newBoard() fills it with random gems.

```js
const COLORS = ['#ef4444', '#f59e0b', '#22c55e', '#3b82f6', '#a855f7', '#ec4899']

let board // board[row][col]: a color index

const randomGem = () => Math.floor(Math.random() * COLORS.length)

function newBoard() {
  board = []
  for (let r = 0; r < N; r++) {
    board.push([])
    for (let c = 0; c < N; c++) {
      board[r].push(randomGem())
    }
  }
}

newBoard()
requestAnimationFrame(loop)
```

What it means

• randomGem is a short arrow function: Math.random() is a number from 0 up to 1, times 6 and rounded down it is a whole number 0 to 5.
• newBoard starts with an empty list, adds an empty row for each r, and pushes 8 random gems into it.
• board[r][c] is the gem in row r, column c. newBoard() at the bottom makes the first board.

Your turn

1. Under TOP write COLORS.
2. Above function draw() { write let board, randomGem and newBoard.
3. At the bottom, write newBoard() above requestAnimationFrame(loop).

Skills: Arrays and objects

← The game loop Draw the gems →

All steps

1. A place for the board
2. A checkered grid
3. The game loop
4. A board of random gems
5. Draw the gems
6. Start without matches
7. Click a gem
8. Show the selection
9. Swap two neighbours
10. Find every match
11. No match, no swap
12. A score and a fresh start
13. Clear the match
14. Let the gems fall
15. Two halves of a clear
16. Wait before clearing
17. Flash, and hands off
18. Cascades
19. Where a gem came from
20. Slide down
21. Out from under the top
22. Is there any move?
23. Never stuck
24. A hint after five seconds
25. Show the hint
26. Twenty moves
27. The end of a game
28. Remember the best score
29. Build it yourself: swipe to swap