Minesweeper Game — Free HTML CSS JS Snippet

Minesweeper is one of the oldest and most instructive logic puzzles to implement, because a correct version is not just a grid of clickable squares — it requires a genuine flood-fill algorithm, deferred board generation, and careful state tracking for flags, reveals, and win detection. This snippet builds a fully playable 9x9 grid with 10 mines using nothing but vanilla JavaScript and CSS Grid, and every rule that makes Minesweeper feel fair and satisfying is implemented rather than faked.

Safe first click, generated after the fact

The classic frustration in a badly made Minesweeper clone is losing on your very first click through no fault of your own. This snippet avoids that entirely: the board starts completely empty of mines, and placeMines(excludeR, excludeC) only runs the moment the player clicks their first cell, deliberately skipping that cell and its eight neighbours when scattering the 10 mines with Math.random(). This guarantees the opening click always lands on a safe, typically zero-adjacency area, which is the standard fairness convention every reference implementation of Minesweeper follows.

Iterative flood fill, not a single-cell reveal

Clicking a cell with zero adjacent mines should cascade outward and reveal every connected empty region along with its numbered border — this is the heart of what makes Minesweeper fun to play quickly. The floodReveal() function implements this with an explicit stack rather than naive recursion (which risks call-stack depth issues on larger boards): it pushes the starting cell, pops cells one at a time, marks each revealed, and — only when that cell's adjacent count is zero — pushes all eight unrevealed neighbours back onto the stack. Cells with a positive adjacency count are still revealed and rendered with their colour-coded number, but the fill does not continue past them, exactly matching the classic Windows Minesweeper behaviour.

Colour-coded numbers and flag mode

Revealed cells with adjacent mines get a class like .n3 that maps to the traditional colour convention — 1 is blue, 2 is green, 3 is red, and so on up through 8 — purely through CSS class selectors keyed off the stored adjacent integer. Flagging is handled two ways: a right-click (contextmenu event, with preventDefault() to suppress the browser menu) toggles a flag on desktop, while a dedicated "Flag mode" toggle button lets touch users tap to flag instead of reveal, since touch devices have no reliable right-click equivalent.

Win and loss detection

Every reveal increments a revealedCount counter; the game is won the instant that count equals the total non-mine cell count (81 minus 10 mines), which is checked after every successful reveal in checkWin(). Losing triggers revealAllMines(), which reveals every mine on the board and highlights the specific one that was clicked in a brighter red so the player can see exactly what ended the round. A live mine counter subtracts placed flags from the total mine count, and a timer starts on the first click and stops the instant the game ends, both rendered in a retro seven-segment style display for authenticity.