Workshop › Sudoku › Step 15 of 28

A clock

What we are doing

Sudoku players race the clock. The loop counts frames until the puzzle is solved, and the time is shown as minutes and seconds.

```js
let frames
  frames = 0

  if (!won) frames += 1

  const seconds = Math.floor(frames / 60)
  const clock = (s) => Math.floor(s / 60) + ':' + String(s % 60).padStart(2, '0')
  ctx.fillStyle = '#0f172a'
  ctx.font = 'bold 18px sans-serif'
  ctx.textAlign = 'left'
  ctx.fillText('Time ' + clock(seconds), LEFT, 34)
```

What it means

• frames counts loop turns while the puzzle is not solved; 60 frames are one second.
• clock turns seconds into m:ss: 75 becomes 1:15, and padStart(2, '0') makes 5 seconds 05.

Your turn

1. Under let selected, write let frames; in reset, set it to 0.
2. In loop, count frames while not won.
3. At the end of draw, write the time lines.

Skills: The game loop

← Solved! The solved message →

All steps

1. Nine by nine
2. Lines and boxes
3. A puzzle from a string
4. The puzzle's own digits
5. Keep drawing
6. The selected cell
7. Light up row, column and box
8. The same digit everywhere
9. Click to select
10. Move with the arrows
11. Write digits
12. The three rules in one loop
13. Show mistakes
14. Solved!
15. A clock
16. The solved message
17. Play again
18. The easiest cell
19. The solver
20. Random order
21. Invent a puzzle
22. A new puzzle every game
23. Hints
24. Best time
25. N for a new puzzle
26. A number pad
27. Tap the pad
28. Build it yourself: undo