Workshop › Minesweeper › Step 16 of 26

Flags with the right button

What we are doing

Players mark cells they are sure hide a mine with a flag, using the right mouse button. A right click fires a contextmenu event; event.preventDefault() stops the browser's menu from opening.

```js
    Array.from({ length: SIZE }, (_, col) => ({ row, col, mine: false, count: 0, revealed: false, flagged: false })),

function toggleFlag(cell) {
  if (cell.revealed || state === 'lost') return
  cell.flagged = !cell.flagged
}

canvas.addEventListener('contextmenu', (event) => {
  event.preventDefault() // no browser menu: right click places a flag
  const cell = cellAt(event)
  if (cell) toggleFlag(cell)
})
```

What it means

• cell.flagged = !cell.flagged flips the flag: !true is false, !false is true.
• Open cells and lost games get no flags.
• The listener reuses cellAt to find the cell under the pointer.

Your turn

1. In newGame, add flagged: false to the cell.
2. Above function lose(), write toggleFlag.
3. Above function draw(), write the contextmenu listener. Press Run.

Skills: Keyboard and mouse input

← Flood fill A flag protects its cell →

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