Workshop › 15 Puzzle › Step 10 of 27

Draw again and again

What we are doing

Tiles will move and later even slide smoothly, so we redraw all the time: a loop that draws and asks the browser to run it again before the next screen refresh.

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

reset()
requestAnimationFrame(loop)
```

What it means

• loop draws once, then books itself for the next frame.
• The last line starts the loop, replacing the single draw() call.

Your turn

Above reset() at the bottom, write loop. Replace the last draw() with requestAnimationFrame(loop).

Skills: The game loop

← All the tiles The solved board from N →

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