Workshop › 15 Puzzle › Step 21 of 27

Count the frames

What we are doing

Every frame, update() moves the slide one frame on, and clears it after SLIDE_FRAMES. While a tile is sliding, other moves wait.

```js
function move(i) {
  if (slide) return
  // ...

function update() {
  if (!slide) return
  slide.frame += 1
  if (slide.frame >= SLIDE_FRAMES) slide = null
}

function loop() {
  update()
  draw()
  requestAnimationFrame(loop)
}
```

What it means

• if (slide) return in move: while something slides, ignore moves.
• update does nothing without a slide; otherwise it counts one frame, and at 8 the slide is over (null).
• The loop now updates, then draws.

Your turn

1. In move, write if (slide) return as the first line.
2. Above function squareX(i), write update and leave an empty line.
3. In loop, write update() above draw(). Press Run.

Skills: The game loop, Game states

← Remember the slide Smooth sliding →

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