Workshop › Minesweeper › Step 9 of 26

Open a cell

What we are doing

reveal(cell) opens a cell. The very first reveal also places the mines around it and starts the game: a state goes from 'ready' to 'playing'.

```js
let state // 'ready' (before the first click), 'playing', 'won' or 'lost'

function newGame() {
  grid = Array.from({ length: SIZE }, (_, row) =>
    Array.from({ length: SIZE }, (_, col) => ({ row, col, mine: false, count: 0, revealed: false })),
  )
  state = 'ready'
}

function reveal(start) {
  if (start.revealed) return
  if (state === 'ready') {
    placeMines(start)
    state = 'playing'
  }
  start.revealed = true
}
```

What it means

• Every cell starts with revealed: false; every new game starts 'ready'.
• An open cell cannot be opened again: return right away.
• Only the first reveal places mines, around the cell being opened.

Your turn

1. In newGame, add revealed: false to the cell, and write state = 'ready' at the end.
2. Under let grid, write let state ....
3. Under placeMines, leave an empty line and write reveal. Press Run.

Skills: Game states

← Count the mines around Open cells look different →

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