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

A score and a fresh start

What we are doing

Matches will score points. reset() sets up everything a game starts with (a new board, nothing selected, a score of 0) and runs once when the page loads. The score is written at the top left.

```js
let score

function reset() {
  newBoard()
  selected = null
  score = 0
}

  ctx.fillStyle = 'white'
  ctx.font = 'bold 18px sans-serif'
  ctx.textAlign = 'left'
  ctx.fillText('Score ' + score, LEFT, 30)

reset()
requestAnimationFrame(loop)
```

What it means

• reset makes a new board and sets selected and score to their starting values. It replaces the newBoard() call at the bottom.
• font sets the text size and style, textAlign = 'left' starts the text at the given x, and fillText writes it. 'Score ' + score joins the word and the number.

Your turn

1. Under let selected write let score.
2. Above the // Every cell that is part... comment write reset.
3. At the bottom, replace newBoard() with reset().
4. In draw, at the end, leave an empty line and write the four text lines.

Skills: Game states, Functions

← No match, no swap Clear the match →

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