webdevpuneet.com

Minesweeper Game with 20 Levels, No-Guess Boards & Hints

Minesweeper Puzzle Game · Games · Plain HTML, CSS & JS · Live preview

CategoryGames

For supporters

Source Code

Want the source code?

Play the game for free. Become a WebDevPuneet supporter to unlock the complete HTML, CSS and JavaScript source code, the exports (HTML, React, Vue, Angular, Tailwind) and Fork.

Play freeSource code: Patreon

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

20 levels in four tiers from 8x8 to 26x15, defined as data with columns, rows, mines and lives
Boards generated so that logic alone solves them from a revealed opening: no 50/50 guesses, ever
Seeded generator: every level and the Daily Board are the same for all players
Solver with the single-number rules and the subset rule, shared by the generator and the hint system
Hints that explain the deduction in words, highlight the clue numbers and the target cell, and flag wrong flags first
Chording (click a satisfied number), flag mode, press-and-hold flagging for touch and full keyboard control
Extra lives on the early levels: a mine costs a life, is marked, and play continues
Stars for clearing, for a clean run and for beating par, plus best times and a daily streak saved to localStorage inside try/catch
Flood-fill ripple, explosion with screen shake, win wave, confetti and Web Audio sounds, with flags and mines drawn as SVG
Scales to its preview area (down to 40 percent) and stacks on phones

About this UI Snippet

Minesweeper — 20 Levels, Boards Solvable Without Guessing, Hints That Explain, Chording and a Daily Board

Screenshot of the Minesweeper Puzzle Game snippet rendered live

Minesweeper is a logic puzzle: numbers tell you how many mines touch a cell, and you clear the field using deduction alone. This version is a complete game rather than a demo. It has 20 levels in four tiers, a Daily Board with a streak, boards that can always be solved without guessing, hints that explain the deduction in words, chording, extra lives on the easier levels, stars and best times. It is plain HTML, CSS and JavaScript with no libraries, images or audio files.

Boards that never force a guess

The classic frustration in Minesweeper is a 50/50 guess at the end of a long game. generateBoard() removes it. It picks a start cell, places the mines away from that cell and its neighbours, and then runs the logic solver on the finished board. Only boards that the solver can clear completely from the opening are kept, otherwise another seed is tried. The opening is revealed when the level starts, so a first-click guess is not needed either. A seeded random generator (mulberry32) means a level is the same board for every player.

The solver is the hint system too

findSteps() applies two rules to every revealed number. If a number already has all its mines marked, its other hidden neighbours are safe. If it has exactly as many hidden neighbours as mines left, they are all mines. When neither applies, the subset rule compares two numbers: if the hidden neighbours of one number are all neighbours of another, subtracting them settles the difference. The Hint button runs the same function on your current board and explains the result in words, for example "Every hidden cell next to the 1 at C3 is also next to the 2 at D3, and they need the same number of mines, so E3 is safe." It highlights the clue numbers in amber and the target cell in green (safe) or red (mine). If you have placed a wrong flag, the hint points that out first.

Controls for mouse, keyboard and touch

Left-click reveals, right-click flags, and clicking a revealed number does a chord: if the number of flags around it matches, every other neighbour is revealed at once, which is the fastest way to play. A press-and-hold flags on a touch screen, and a Flag mode button is there too. The keyboard works as well: arrow keys move a cursor, Space or Enter reveals, F flags, C chords, H hints and R restarts.

Lives, stars and the daily board

The first levels give three lives and later ones two or one: stepping on a mine costs a life, marks that mine and lets you carry on. Winning earns one star, a second star for a clean run with no mines hit and no hints, and a third for finishing under the par time. Clearing a level unlocks the next, and best times are saved. The Daily Board is a seeded 16 by 16 board with 40 mines, the same for everyone, and clearing it on consecutive days builds a streak.

Feel and scaling

Flood fills ripple outwards from the clicked cell, explosions shake the panel and flash the cell, a wave sweeps across the board when you win, and the sounds (clicks, flags, an explosion made of filtered noise and a win jingle) come from a Web Audio synth. Flags and mines are drawn as inline SVG, so they look the same everywhere. Progress, best times and the streak are saved to localStorage inside try/catch, and the whole game scales to short preview areas, from an 8 by 8 board up to 26 by 15.

Step by step

How to Use

  1. 1
    Pick a level or the Daily BoardThe menu shows 20 levels in four tiers, from 8 by 8 with three lives to 26 by 15 with one life. Level 1 is open at first and each cleared level unlocks the next. The gold card starts the Daily Board, the same for everyone.
  2. 2
    Start from the openingEvery board starts with an opening already revealed, so you never have to guess. Read the numbers: a number is how many of the 8 cells around it contain a mine.
  3. 3
    Reveal and flagClick a cell to reveal it. Right-click it, or press and hold on a touch screen, to flag a suspected mine. The Flag mode button (or F) switches the click to flagging. The counter shows the mines left minus your flags.
  4. 4
    Chord to go fasterClick a revealed number when you have flagged exactly that many mines around it, and every other neighbour opens at once. A wrong flag will make you hit a mine, so be sure.
  5. 5
    Ask for a hint when stuckThe Hint button (H) finds a deduction that is certain and explains it, highlighting the numbers it used and the cell it settles. You get three hints per game and using one costs the clean-run star.
  6. 6
    Earn starsOne star for clearing the board, a second for no mines hit and no hints, a third for finishing under the par time. A mine costs a life, and on the later levels one mine ends the game.

Real-world uses

Common Use Cases

Teaching constraint solving with a real example
The two rules in findSteps() are a compact introduction to constraint propagation. The subset rule shows how combining two constraints reveals something neither says alone, an idea that carries over to Sudoku, Kakuro and many scheduling problems.
Generating puzzles that are fair by construction
Generating a board and keeping it only if a solver can finish it is a simple pattern that guarantees fairness. The same approach works for any puzzle where you can write a solver.
A classic with a reason to return
Levels, stars, best times and a daily board with a streak turn Minesweeper into something players come back to, and everything is saved in the browser with no account.
Input handling for mouse, touch and keyboard
Right-click, middle-click, shift-click, press-and-hold and arrow keys all map to the same few functions, which is a useful pattern for any grid game that has to work on desktop and phones.
Explaining an algorithm to the user
Turning a solver result into a sentence with highlighted cells is a good model for any hint or tutorial feature: the explanation comes from the same code that makes the decision.
Related: Pixel Platformer Game
See the Pixel Platformer Game for a related games pattern worth pairing with this one.
Related: Mini Sudoku Puzzle (6x6)
See the Mini Sudoku Puzzle for another logic puzzle with a generator, a solver and explained hints.

Got questions?

Frequently Asked Questions

generateBoard() places mines at random away from a chosen start cell, then plays the whole board with the solver. isLogicSolvable() reveals the opening, then repeatedly applies findSteps(): flag the certain mines, reveal the certain safe cells and repeat. If every safe cell gets revealed this way, the board is kept. If the solver gets stuck, the board is thrown away and the next seed is tried, up to 400 times.

They run the same solver on your current board. Mines you have flagged correctly count as known, wrong flags are ignored and pointed out first. The first certain step is explained in a sentence, the clue numbers are highlighted in amber and the target cell in green (safe) or red (mine). A hint costs the clean-run star, and you get three per game.

Clicking a revealed number whose count equals the number of flags around it. The game reveals every other hidden neighbour at once. It is much faster than clicking each cell, but if one of your flags is wrong you will hit a mine, which is why the Flag mode and hints exist.

The early levels have three lives, then two, then one. A mine costs a life, shows the mine and lets you continue. A level gives one star for clearing it, a second if you hit no mine and used no hint, and a third if you finish under the par time (a function of the board size and the number of mines). The next level unlocks when the previous one has a star.

Edit the LEVELS array: each row is columns, rows, mines and lives. Keep mines below about 22 percent of the cells, because very dense boards are rarely solvable by logic alone and the generator then needs many attempts. The cell size adapts to the board, and the menu shows five levels per tier.

Yes. All localStorage access is in try/catch, so a blocked storage only means progress is not saved, and every sound call is wrapped. Press and hold flags on a touch screen, and Flag mode is a button. On narrow screens the layout stacks and the page scrolls.