Workshop › 15 Puzzle › Step 20 of 27

Remember the slide

What we are doing

A tile that jumps to its new square is hard to follow. To make it slide, we first remember which tile is moving, from where to where, and how far the animation is: slide.

```js
const SLIDE_FRAMES = 8

let slide // the tile sliding right now: { tile, from, to, frame }, or null

  slide = null

  slide = { tile: tiles[i], from: i, to: gap, frame: 0 }
```

What it means

• A slide lasts SLIDE_FRAMES = 8 frames (about 0.13 seconds).
• slide is null when nothing slides: null means "nothing, on purpose".
• move fills it in before changing the board: the tile's number, its old square, its new square (the gap), frame 0.

Your turn

1. Under const TOP = 60 write const SLIDE_FRAMES = 8.
2. Under let moves write let slide ....
3. At the end of reset write slide = null.
4. In move, under the neighbour check, write the slide = { ... } line. Press Run.

Skills: Game states

← Is it solved? Count the frames →

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