This is my variation of the ever-popular computer game. I'm sure you've seen it, and probably played it before. It comes free with pretty much any OS, and goes by various names like MineSweeper, MineHunt, MineField, etc. There are even some freeware/shareware programs like it on the web, usually with variations. Well, this is done via Javascript. There have been other versions done in javascript too, but I like this one the best (of course) :)

This version looks very much like the one that comes with Windows, with a few minor differences. I'm not really crazy about it since I've seen it so many times though. The squares are pretty small, so it will fit on most web pages without too much difficulty. Click the picture at left to play this version.
This version includes custom graphics and color themes. I was going for more of a red theme, but the lighter colors turned out pinkish. Oh well.
The buttons are larger which makes it easier to use in my opinion. The underlying code is exactly the same, just the stylesheet and graphics have changed. Click the picture at left to play this version.

This game allows you to choose various combinations of rows, columns, and mine counts. However, the larger the game area, the longer it takes to "build" the game. At the maximum row value of 20 and column value of 40, it takes about 6 seconds (on my computer) to build the gamefield. While this is happening, the browser acts like it has locked up (but hasn't). Slower computers will take longer. Just be patient, or choose smaller values.

How To Play

Basic gameplay works just like you are used to: Try to find all the squares without bombs. Left-click a square to tell you how many bombs are adjacent to it. If you accidentally left-click a square that contains a bomb, you've blown up and the game is over. Uncover all the squares without bombs and you've won the game. There is also a timer; Try to play as fast as you can to uncover all the squares to beat your previous time.

To help you keep track of which square may have a bomb, you can right-click a square to place a marker. Right-click again to remove the marker. Just because you placed a marker doesn't mean there is a bomb there, it just mean you think there may be a bomb there. If a square has been marked, you cannot click it until you remove the marker. This prevents you from accidentally clicking a square that may have a bomb.

Pretty simple, eh?


There are several adjustable settings in this game: There are a couple of hidden functions as well. These were made more for development reasons, but hey, I'll throw those in as well:


Customization is pretty easy. It just requires you to make a few changes to the style sheet rules and some new graphics. The graphics must be in GIF format and named in the following way:

File NameDescriptionExample
lcd0.gifThe image for timer/mine counter "0"
lcd1.gifThe image for timer/mine counter "1"
lcd2.gifThe image for timer/mine counter "2"
lcd3.gifThe image for timer/mine counter "3"
lcd4.gifThe image for timer/mine counter "4"
lcd5.gifThe image for timer/mine counter "5"
lcd6.gifThe image for timer/mine counter "6"
lcd7.gifThe image for timer/mine counter "7"
lcd8.gifThe image for timer/mine counter "8"
lcd9.gifThe image for timer/mine counter "9"
lcdb.gifThe blank timer/mine counter image
lcdn.gifThe timer/mine counter negative sign image
number0.gifThe blank minefield square image
number1.gifThe "1" minefield square image
number2.gifThe "2" minefield square image
number3.gifThe "3" minefield square image
number4.gifThe "4" minefield square image
number5.gifThe "5" minefield square image
number6.gifThe "6" minefield square image
number7.gifThe "7" minefield square image
number8.gifThe "8" minefield square image
mine1.gifImage showing a mine location
mine2.gifImage showing an incorrectly flagged mine
flag.gifThe flagged square image
square.gifThe default grid square
smile1.gifThe default smilie image
smile2.gifThe smilie image as you mousedown on the smilie
smile3.gifThe smilie image as you click a square
smile4.gifThe smilie image when you've blown up
smile5.gifThe smilie image when you've won

You can make these images any size you want, but some of their dimensions have to be consistent with each other: Below are the various style-sheet classes and ruls and what part of the game they apply to:


Installation basically takes three steps:
  1. Copy and paste the following style sheet declaration in the HEAD section of your page (these style sheet rules are the ones I used for the plain gray MineField version):
    Select all...

  2. Copy and paste the following HTML in the BODY section of your page wherever you want the game to be:
    Select all...

  3. Copy and paste the following external javascript tag at the bottom of your page. This should be the very last item in your HTML source code:
    Select all...

Known Issues