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

Click to start

What we are doing

A game is a 30-second round. Before it starts, the field waits with "Click to start"; the first click calls start, which sets everything up for a new round.

```js
const ROUND = 30000 // a round lasts 30 seconds
let state = 'ready' // 'ready', 'playing' or 'over'
let endsAt = 0

function start() {
  state = 'playing'
  score = 0
  endsAt = now + ROUND
  nextPop = now
  for (const hole of holes) hole.upUntil = 0
}

  if (state !== 'playing') {
    start()
    return
  }

  if (state !== 'playing') return

  ctx.textAlign = 'center'
  if (state === 'ready') {
    ctx.fillText('Click to start', canvas.width / 2, canvas.height / 2)
  }
```

What it means

• endsAt is the time the round ends: 30 000 ms after the start.
• start resets the score, sets the end time, makes the first mole come at once and empties the holes.
• A click when not playing starts a round and does nothing else; update does nothing unless playing.

Your turn

1. Under HOLE_R, write ROUND; under let score, write state and endsAt.
2. Above the pointerdown listener, write start; at the top of the listener, write the start check.
3. Make if (state !== 'playing') return the first line of update.
4. At the end of draw, write the centered "Click to start" block.

Skills: Game states

← Show the score Time's running →

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