Workshop › Minesweeper › Step 23 of 26

The clock

What we are doing

The clock starts at the first click, not when the page loads (that would punish looking at the board). We keep the start time; the seconds on screen are worked out from it while drawing.

```js
let startTime

  startTime = 0

    state = 'playing'
    startTime = now

  const seconds = state === 'ready' ? 0 : Math.floor((now - startTime) / 1000)

  ctx.textAlign = 'right'
  ctx.fillText('⏱ ' + seconds, canvas.width - 10, TOP / 2)
```

What it means

• startTime is set on the first reveal, where the game starts.
• Before the first click the clock shows 0; after it, the whole seconds since the start.
• Right-aligned: the text ends at 10 pixels from the right edge.

Your turn

1. Under let state ..., write let startTime; in newGame, startTime = 0.
2. In reveal, under state = 'playing', write startTime = now.
3. In draw, under const flags, write const seconds ...; under the 💣 line write the two clock lines.

Skills: Game states, The game loop

← What time is it? Stop the clock →

All steps

1. A grid of cell objects
2. The canvas and the pen
3. Draw the field
4. Draw every frame
5. Neighbours
6. Mines, but not under the first click
7. Shuffle the candidates
8. Count the mines around
9. Open a cell
10. Open cells look different
11. Coloured numbers
12. Click to open
13. Stepping on a mine
14. Show the mines
15. Flood fill
16. Flags with the right button
17. A flag protects its cell
18. Draw the flags
19. Mines left
20. Winning
21. The end and a new game
22. What time is it?
23. The clock
24. Stop the clock
25. The best time
26. Build it yourself: wrong flags