Minesweeper

The classic computer game.

Players begin with a rectangular grid of buttons. Clicking a button reveals what is lurking behind.

Behind some of the buttons are mines (bombs). The player loses if they click on a mine.

Behind the other buttons are numbers, indicating how many mines are adjacent to that button. Diagonals are included, so central squares have 8 adjacent squares, whereas corner squares have just 3.

If a square has no adjacent mines, the square is shown as empty, rather than 0. When such a square is revealed, all adjacent squares will also be revealed. This saves the player from having to click the buttons for squares that they already know are not mines.

Players can also place flags on buttons by right-clicking (ctrl+click on Mac). Flags help the player to keep track of where mines are located. If a flag is placed incorrectly, it must be removed before the square can be revealed.

The player wins by revealing all of the squares that do not contain mines.

The game should be implemented to ensure that a player's first click will never reveal a mine.

Example

Live Example

Flagged 0 / 30 mines

View it on the SFC Playground

Features Used

Your implementation doesn't need to use the same Vue features as the example above, but to give you some idea of the knowledge you might need to attempt this:

• The example above is written using a single component.
• It uses a Single-File Component with <script setup>.
• Reactivity comes from reactive(), ref() and computed().
• The template uses:
  • Text interpolation, {{ ... }}.
  • v-if/v-else conditional rendering.
  • v-for for looping.
  • v-on/@ for handling events.
  • Class bindings with :class.