Workshop › 15 Puzzle › Step 26 of 27

A record to beat

What we are doing

Here fewer moves is better. We keep the best result in localStorage so it survives a reload, and show it at the top right while playing.

```js
let best = Number(localStorage.getItem('fifteen-best')) || 0

    state = 'solved'
    if (best === 0 || moves < best) {
      best = moves
      localStorage.setItem('fifteen-best', best)
    }

  ctx.fillText(state === 'solved' ? 'Solved! Click to shuffle' : best ? 'Best ' + best : '', canvas.width - LEFT, 36)
```

What it means

• localStorage.getItem reads the saved text (or null); Number(...) || 0 makes it a number, 0 if there is none.
• A new record: no record yet (best === 0) or fewer moves than the record.
• The top-right text: the solved message, else the best if there is one, else nothing.

Your turn

1. Under let slide ... write the best line.
2. In move, under state = 'solved', write the if block.
3. In draw, change : '' in the last line to : best ? 'Best ' + best : ''. Press Run.

Skills: Game states

← Play again Build it yourself: a timer →

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