Workshop › Minesweeper › Step 1 of 26

Minesweeper: A grid of cell objects

Clear the field without touching a mine, reading the numbers as clues. Neighbour counting, a safe first click, flood fill with a stack, flags and a timer.

What we are doing

Minesweeper: a 9 by 9 field hides 10 mines; open every safe cell, using the numbers as clues. A cell has to remember several things (a mine? opened? flagged?), so each cell is an object, and the board is a 2D array of objects built with Array.from.

```js
const SIZE = 9

let grid

function newGame() {
  grid = Array.from({ length: SIZE }, (_, row) =>
    Array.from({ length: SIZE }, (_, col) => ({ row, col })),
  )
}

newGame()
```

What it means

• Array.from({ length: 9 }, fn) makes an array of 9 items, each made by fn, which gets the item's index as its second argument. _ is a common name for an argument you do not use.
• The outer Array.from makes 9 rows; the inner one makes 9 cells per row, each { row, col }.
• The object is wrapped in ( ) so its { } is not read as a function body.
• newGame() builds a fresh board; we call it once at the start.

Your turn

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

Skills: Arrays and objects

The canvas and the pen →

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