Workshop › Sokoban › Step 22 of 29

Count the moves

What we are doing

A move counter shows how good a solution is. Every step that really happens adds one; blocked steps do not count.

```js
let moves

function loadLevel(index) {
  // ...
  moves = 0
}

function move(dx, dy) {
  // ...
  player = { x, y }
  moves += 1
}

  ctx.textAlign = 'right'
  ctx.fillText('Moves: ' + moves, canvas.width - 12, TOP / 2)
```

What it means

• moves starts at 0 on every load.
• moves += 1 comes after player = { x, y }: blocked steps have already returned, so they are not counted.
• textAlign = 'right' puts the end of the text at x, 12 pixels from the right edge.

Your turn

1. Under let player write let moves.
2. At the end of loadLevel write moves = 0; at the end of move, under player = { x, y }, write moves += 1.
3. In draw, under the Level line, write the two lines. Press Run.

Skills: Game states

← A line at the bottom A photo of the game →

All steps

1. A level written as text
2. The canvas and the pen
3. The warehouse floor
4. A function that draws
5. A name for every tile
6. Read the walls
7. Draw the walls
8. Center the level
9. The goals
10. The boxes
11. The player
12. Two more levels
13. One step
14. Walk with the arrows
15. Boxes are in the way
16. Push a box
17. A box on a goal turns green
18. Solved!
19. On to the next level
20. Which level?
21. A line at the bottom
22. Count the moves
23. A photo of the game
24. A photo before every move
25. Undo
26. Restart
27. A record for every level
28. Show the record
29. Build it yourself: count the pushes