Workshop › Whack-a-Mole › Step 13 of 18

Best score

What we are doing

The best score is kept in the browser's localStorage, so it survives a reload, and shown before and after a round.

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

    if (score > best) {
      best = score
      localStorage.setItem('mole-best', best)
    }

    ctx.font = '16px sans-serif'
    ctx.fillText('Best: ' + best, canvas.width / 2, canvas.height / 2 + 28)

    ctx.fillText('Best: ' + best, canvas.width / 2, 252)
```

What it means

• getItem reads the saved text (null the first time), Number(...) turns it into a number and || 0 falls back to 0.
• When a round ends with a higher score, best is updated and saved with setItem.

Your turn

1. Under let endsAt, write the best line.
2. In update, save the record in the time-up block, before return.
3. In draw, add a Best line to the ready block and to the over block.

Skills: Game states

← Time's up How far into the round? →

All steps

1. A green field
2. Nine holes
3. Draw the holes
4. A clock and a loop
5. A mole in a hole
6. Moles pop up
7. Which hole was clicked?
8. Whack!
9. Show the score
10. Click to start
11. Time's running
12. Time's up
13. Best score
14. How far into the round?
15. Faster and faster
16. Remember each hit
17. Floating +1
18. Build it yourself: combos