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

Nine holes

What we are doing

The field has 3 × 3 holes. We work out where each hole's middle is and keep them all in a list.

```js
const SIZE = 3 // holes per row and per column
const CELL = 120
const TOP = 40 // room for the score and timer
const HOLE_R = 40

const holes = []
for (let row = 0; row < SIZE; row++) {
  for (let col = 0; col < SIZE; col++) {
    holes.push({ x: col * CELL + CELL / 2, y: TOP + row * CELL + CELL / 2 })
  }
}
```

What it means

• The constants name the numbers once: 3 holes a side, 120-pixel squares, a 40-pixel bar on top, holes of radius 40.
• Two nested loops visit every row and, inside it, every column: 9 turns in all.
• Each turn adds the middle of that square to holes.

Your turn

Write the constants and the loops under const ctx = ..., after an empty line.

Skills: Loops, Arrays and objects

← A green field Draw the holes →

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