Workshop › 15 Puzzle › Step 16 of 27

Count the moves

What we are doing

A move counter at the top left shows how many slides you needed. It starts at 0 and goes up on every real slide.

```js
let moves

function reset() {
  tiles = solvedTiles()
  moves = 0
}

  tiles[i] = 0
  moves += 1

  ctx.fillStyle = 'white'
  ctx.font = 'bold 18px sans-serif'
  ctx.textBaseline = 'alphabetic'
  ctx.textAlign = 'left'
  ctx.fillText('Moves ' + moves, LEFT, 36)
```

What it means

• moves starts at 0 in reset.
• moves += 1 is the last line of move: a tile far from the gap has already returned, so it is not counted.
• textBaseline = 'alphabetic' puts the text back on a normal line (the tiles set it to 'middle').

Your turn

1. Under let tiles ... write let moves.
2. In reset, write moves = 0; at the end of move, write moves += 1.
3. In draw, under the forEach block, leave an empty line and write the five text lines. Press Run.

Skills: Game states

← Arrow keys Shuffle with real slides →

All steps

1. A board in one list
2. The canvas and the pen
3. Paint the table
4. A function that draws
5. Row and column
6. Where each square is
7. Draw one tile
8. The number on the tile
9. All the tiles
10. Draw again and again
11. The solved board from N
12. Neighbours
13. Slide a tile
14. Click a tile
15. Arrow keys
16. Count the moves
17. Shuffle with real slides
18. Which boards can be solved?
19. Is it solved?
20. Remember the slide
21. Count the frames
22. Smooth sliding
23. Solved!
24. Show the win
25. Play again
26. A record to beat
27. Build it yourself: a timer