Home / JavaScript

Minesweeper

This Minesweeper implementation was a fairly quick and fun project. The JavaScript generates a table of the necessary size and a corresponding grid that holds the mine positions and the number of mines adjacent to each cell. The flood fill that occurs when you click an empty cell was really very simple and satisfying to implement recursively, and I was also able to implement right-clicking to flag squares as well as a feature that was present in the original Minesweeper, where the first click never reveals a mine. If your first click lands on a mine, that mine is moved to a random location. The last feature I was able to code in is the ability to click on a revealed tile whose neighbors you've flagged, and the remaining neighbors will all be revealed automatically. Also, if you've revealed all of the safe mines around a tile, you can click on that tile to automatically flag its remaining neighbors.

I'm also really happy with how it looks visually. That said, I do need to have the grid take up more screen space when there are more cells. As of right now it looks particularly bad at low aspect ratios or with large grids, although it looks fine on mobile devices.

I encountered a fun and very rare glitch while testing, where if your first click landed on a mine with no neighbors, it would show a 0 in the cell (instead of leaving it blank) and wouldn't flood fill. That glitch very nearly lived in this program for all time. I hope there aren't any others!