Introduction

Have you ever heard of minesweeper? It is a little classic game that debuted back in 1990 as part of Windows Entertainment.

The rules are simple. There is an N X N board in which some of the squares have bombs you have to find all Square which does not have bombs and you have to mark all bombs correctly. A square in the board can either be a bomb or a numerical value representing the number of bombs adjacent to it.

Eg – If a square has 2. It means there are 2 bombs out of 8 adjacent squares. If Square have 0 values means that its adjacent have no bombs and all adjacent will become visible with their values

If you haven’t played this game, you can give it a try with google minesweeper Here to get an idea of this classic game.

After playing this game I realized that This game is nothing but a good example of the famous graph traversal algorithm Breadth-first search (BFS). This game logic can be made with BFS Algorithm.

Here is a very simple version of this game that we are going to build with React.js

The game is over as soon as you click on any bomb.

Generating Board

Here we are considering an 8X8 board with the number of mines that we can manage for the game difficulties level. For generating the board, we need to take care of a few things

The random distributions of the bomb in some of the squares of the board, so some square contains mines.
If Square has no bomb then populate its value with the count of its nearby bombs.

Below codeSnap contains one way of doing this, where each square contains id, value, and two Boolean to indicate its state (isVisible, isFlag).

Component

Square - The building block of this game is Each Square which can contain either a bomb, flag, or numerical value indicating the total number of nearby bombs. Two event handlers for left click and right click we are passing in props to handle the event properly. Left click to show value and right click to mark with the flag for a potential bomb.

Board - The main component of this game that holds all Individual Square as well as all logic of the game. Here we are using two state variables with useState (board, & noOfBombs). Also, we are using react useEffect to set the newly generated Board whenever noOf bombs change by the user. Second useEffect is used here to handle the wrong move by the user which leads to Game Over or if there are no mines left on the board then the user wins this game and the board is reset., And two functions Related to handling clicks.

The right-click is used to mark the current Square with a flag, and the Click is doing a BFS search from the current Square if it has no bomb and makes all Adjacent Square visible which has no bombs nearby. "tmp" Array is used here to mark the visited square.

And At last, we are returning the board with some minor styling and Now we only need to render this Board Component in React App that we are doing here.