Minefield

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?

Features

There are several adjustable settings in this game:

Rows (select box) - The game starts with 10 rows, but you can select any number you want from 5 to 20 in increments of 5. Note: You can change this value in the HTML source code, but it must start at 5 and each step increment by 5.
Mines (select box) - The game starts with 10 mines, but you can select any number you want from 5 to 160 in increments of 15. Note: You can change this value in the HTML source code, but it must start at 10 and each step increment by 15.
Cols (select box) - The game starts with 10 columns, but you can select any number you want from 5 to 40 in increments of 5. Note: You can change this value in the HTML source code, but it must start at 5 and each step increment by 5.
Pause (link) - Click the middle link at the bottom of the game area during play to pause the timer if you need to grab a quick snack or whatever. Click the link again to resume the timer. While paused, you cannot click the buttons.
Mine? (link) - One thing I don't like about the real MineHunt game is that if you get stuck and make one wrong decision; BAM!, game over. Click the left link at the bottom of the game area to mark the next available mine for you. This will help you get out of that tight spot. Each click of the link will mark the next available mine in the following way; It will start at the top row and go left to right, and then to the next rows. If you have already marked a mine, it will find the next available mine.
Square? (link) - Click the right link at the bottom of the game area to clear the next available non-marked square. This works in a similar way as the "Mine?" link. If there are any adjacent non-mine squares near it, those will be cleared as well.

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:

showStats(r,c) - This javascript function can show you the stats of any given square. You can call it by typing javascript:showStats(r,c) in the browser address bar. Replace the "r" with the row and the "c" with the column coordinates of the square you want to check. Note: The rows and columns start at 0, not 1.
showGrid() - This javascript function simply shows the whole grid in an alert box. The X's are where bombs are located, the o's are where there are no bombs. You can call this by typing javascript:showGrid() in the browser address bar.

Customization

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 Name	Description	Example
lcd0.gif	The image for timer/mine counter "0"
lcd1.gif	The image for timer/mine counter "1"
lcd2.gif	The image for timer/mine counter "2"
lcd3.gif	The image for timer/mine counter "3"
lcd4.gif	The image for timer/mine counter "4"
lcd5.gif	The image for timer/mine counter "5"
lcd6.gif	The image for timer/mine counter "6"
lcd7.gif	The image for timer/mine counter "7"
lcd8.gif	The image for timer/mine counter "8"
lcd9.gif	The image for timer/mine counter "9"
lcdb.gif	The blank timer/mine counter image
lcdn.gif	The timer/mine counter negative sign image
number0.gif	The blank minefield square image
number1.gif	The "1" minefield square image
number2.gif	The "2" minefield square image
number3.gif	The "3" minefield square image
number4.gif	The "4" minefield square image
number5.gif	The "5" minefield square image
number6.gif	The "6" minefield square image
number7.gif	The "7" minefield square image
number8.gif	The "8" minefield square image
mine1.gif	Image showing a mine location
mine2.gif	Image showing an incorrectly flagged mine
flag.gif	The flagged square image
square.gif	The default grid square
smile1.gif	The default smilie image
smile2.gif	The smilie image as you mousedown on the smilie
smile3.gif	The smilie image as you click a square
smile4.gif	The smilie image when you've blown up
smile5.gif	The 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:

All the lcdN.gif images should all be the same width and height.
All the numberN.gif, flag.gif, square.gif, and mineN.gif images should all be the same width and height.
All the smileN.gif images should all be the same width and height.

Below are the various style-sheet classes and ruls and what part of the game they apply to:

#mineField - This controls what the text in the minefield area will look like. This text is what is shown if the row/column/mine count combination is invalid, and when the game area is built.
.mineTable - This is meant to control the bottom and right border of the game area. You'll notice that the numbered square images have a border line only on the top and left edge. This is so when they are all together, there will be only a 1 pixel border. Hoever, this would leave a missing border of the bottom and right edge of the game area.
.outerTable - This controls the basic look of the rest of the game such as background-color, outside game border, and font attributes.
.paramSelect - This controls the look of the drop down boxes where you choose the rows, mines, and columns.
a, a:link, a:active, a:visited - This controls the look of the bottom three links ("Mine?" , "Pause", "Square?"). This will affect any link thoughout the rest of your page, so be careful.
a:hover - This controls the looks of the same bottom three links when you hover over them. This also will affect any links throughout the rest of the page when you hover over them.

Installation

Installation basically takes three steps:

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...
<style type="text/css"> #mineField{ font-size:10pt; font-weight:bold; font-family:verdana; font-style:italic; } .mineTable{ border-right:1px solid gray; border-bottom:1px solid gray; } .outerTable{ border:2px outset gray; background-color:lightgrey; font-size:8pt; font-weight:bold; font-family:verdana; } .paramSelect{ font-size:7pt; font-weight:bold; font-family:verdana; } a, a:link, a:active, a:visited{ color:black; text-decoration:none; } a:hover{ color:white; text-decoration:none; } </style>
Copy and paste the following HTML in the BODY section of your page wherever you want the game to be:
Select all...
 <div style="position:absolute; top:-40px; left:0px; height:20px; width:20px; overflow:auto"> <img src="lcd0.gif"><img src="lcd1.gif"><img src="lcd2.gif"><img src="lcd3.gif"><img src="lcd4.gif"><img src="lcd5.gif"><img src="lcd6.gif"><img src="lcd7.gif"><img src="lcd8.gif"><img src="lcd9.gif"><img src="lcdn.gif"><img src="lcdb.gif"><img src="smile1.gif"><img src="smile2.gif"><img src="smile3.gif"><img src="smile4.gif"><img src="smile5.gif"><img src="number0.gif"><img src="number1.gif"><img src="number2.gif"><img src="number3.gif"><img src="number4.gif"><img src="number5.gif"><img src="number6.gif"><img src="number7.gif"><img src="number8.gif"><img src="flag.gif"><img src="square1.gif"><img src="square2.gif"><img src="mine1.gif"><img src="mine2.gif"><img src="mine3.gif"> </div> <form name="f"> <table class="outerTable" cellpadding=2 cellspacing=2 border=0> <tr valign="top" align="center"> <td>Rows<br> <select name="r" class="paramSelect"> <option>5<option selected>10<option>15<option>20 </select> </td> <td>Mines<br> <select name="m" class="paramSelect"> <option selected>10<option>25<option>40<option>55<option>70<option>85<option>100<option>115<option>130<option>145<option>160 </select> </td> <td>Cols<br> <select name="c" class="paramSelect"> <option>5<option selected>10<option>15<option>20<option>25<option>30<option>35<option>40 </select> </td> </tr> <tr> <td align="left" width="33%"><img name="cnt_1" src="lcd0.gif"><img name="cnt_2" src="lcd0.gif"><img name="cnt_3" src="lcd0.gif"></td> <td align="center" width="34%"><img name="smilie" src="smile1.gif" onmousedown="if(pL)this.src='smile2.gif'" onmouseup="if(pL){this.src='smile1.gif'; setParameters()}" onmouseout="if(!gO)this.src='smile1.gif'"></td> <td align="right" width="33%"><img name="tmr_1" src="lcd0.gif"><img name="tmr_2" src="lcd0.gif"><img name="tmr_3" src="lcd0.gif"></td> </tr> <tr align="center"> <td colspan=3> <div id="minefield">Please wait while loading images...</div> </td> </tr> <tr> <td colspan="3" align="center"> <a href="javascript:showMine()">Mine?</a> - <a href="javascript:pauseGame()">Pause</a> - <a href="javascript:showSquare()">Square?</a> </td> </tr> </table> </form>
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...
<script language="javascript" src="minefield.js"></script>

Known Issues

I mentioned this at the top of the page, but I'll say it again here: 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.
If anyone would like to take a crack at optimizing the code a bit without losing any present functionality, I will be glad to incorporate the changes to the original code at this site giving you due credit.
Sometimes, if you press down on a square, but move the mouse away from the square before you release the mouse button, the square will not "click". It actually might have, but the logic can get "confused". In this circumstance, simply move your mouse over the square in question (don't click) to "refresh" it.
This game does not work in Netscape4.x. I probably could make it work, but it wouldn't be as pretty and I really don't want to. :) If you are one of those unfortunate souls, you should upgrade!