Workshop › Simon Says Colors › Step 20 of 27

Progress and mistakes

What we are doing

The message now shows how far you are, Your turn: 2/5, and Wrong! Click to retry when the game is over.

```js
let message = state === 'showing' ? 'Watch...' : 'Your turn: ' + inputAt + '/' + sequence.length
if (state === 'over') message = 'Wrong! Click to retry'
ctx.fillText(message, canvas.width - 10, 27)
```

What it means

• message is picked first, then replaced if the game is over, then written.
• 'Your turn: ' + inputAt + '/' + sequence.length glues four parts: 'Your turn: 2/5'.

Your turn

In draw, replace the last fillText line with the three new lines.

Skills: Game states

← Play with the mouse A function for a new game →

All steps

1. Get the canvas and the pen
2. A dark board
3. The first pad
4. Two colors for every pad
5. All four pads
6. A function that draws
7. Light a pad
8. Draw again and again
9. The sequence to remember
10. Show the round
11. Light a pad for a while
12. Go dark again
13. The computer shows a pad
14. Show the whole sequence
15. Watch, then your turn
16. Check each press
17. Play with the keyboard
18. Which pad is at a point?
19. Play with the mouse
20. Progress and mistakes
21. A function for a new game
22. Click to retry
23. Light up when pressed
24. Faster and faster
25. Save the best score
26. Show the best score
27. Build it yourself: no dawdling