Minesweeper

The classic look, with 3 difficulties available: Easy, Medium and Hard.

Players can flag potential mines with right-click. A second right-click will cycle to a temporary flag used while determining if there is a mine in the cell. The game ends when a mine is uncovered or when all the mines are successfully detected.

Link to project: https://minesweeper-jb.netlify.app

Built With

React.js, TypeScript

This game runs using a Minesweeper Clone API with the basic minesweeper game. When the player opens a cell by clicking on it, all mine-free cells adjacent to the clicked-cell are opened. When cells are adjacent to a mine, a number, 1-8 appears in the cell. The number corresponds to the number of mines that are in adjacent cells.

The player can mark where they believe a mines is by right-clicking. This places a flag on the cell and will not allow the player to choose that cell unless the player clears the flag. The player can cycle to a question mark by right-clicking again. This allows the player to track places that could potentially have a mine without the player being sure or being prevented from clicking on it.

If the player flags all of the mines and opens the remaining cells, the player wins. If the player clicks on a mine the game is over.

Optimizations

In trying to implement a cycling system with right-clicking, bugs arose due to click-timing and state updates. I attempted various methods to prevent the user from clicking multiple times and interrupting the cycle. During this process, I improved the speed of the path between renders.

Lessons Learned

This was my first real project with React and it was definitely challenging. I battled against asynchronous state updates for a long time. The simple architecture I chose, with only 2 components, helped minimize my confusion with React hooks. There was pure joy (and relief) when desired results began to happen.

Acknowledgements

• My Awesome Project
• Best-README
• Img Shields