Workshop › Simon Says Colors › Step 1 of 27

Simon Says Colors: Get the canvas and the pen

Watch the pads light up and repeat the sequence, one more color every round. Timers that drive a show, turns between the computer and the player, checking answers step by step, and a game that speeds up.

What we are doing

Simon is drawn on a <canvas> 400 pixels wide and 440 high, with the id game. We find it from JavaScript and ask it for its 2D context, the object that holds every drawing command.

```js
const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')
```

What it means

• document is the page; getElementById('game') finds the element whose id is game.
• const canvas = gives what was found a name, so later lines can use it.
• canvas.getContext('2d') asks the canvas for its 2D drawing tools; we call them ctx (short for context).

Your turn

Write the two lines under the three comment lines, then press Run.

Skills: Drawing on a canvas

A dark board →

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