Minesweeper – jQuery plugin

minesweeper screenshot

Minesweeper is a jQuery plugin that displays a classic Windows minesweeper game on a page

If you just want to play or see the example in action here is a Minesweeper example.

Features

Custom board sizes and mine counts
Touch friendly alternative controls
Supports multiple boards per page
Per user per page high scores with Local storage
Per user per page persistent last settings
Debug option logs to firebug console
Impossible to hit mine on the first cell
Lightweight – 11kB

Browser support

These browsers were tested and passed. So far only browser that is definitly not supported is IE 6 (and I assume any previous versions of IE)

FF 3.6.13
IE 7, 8
Opera 11.01
Chrome 9.0.597.98

Deployment

Include javascript

Include javascript files in your <head>:

			
<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>
<script type="text/javascript" src="http://minesweeper.tomasreichmann.cz/minesweeper-0.9.js"></script>

Call the plugin

I recommend calling the plugin from a script inserted right above your </body> and ensuring it will be executed after DOM is ready like so:

			
<script type="text/javascript" >//<![CDATA[
$(document).ready(function() {

	$("#board").minesweeper(); // this is how the minesweeper plugin is called.
	//In this case while no settings are set menu will appear
	
});
		
//]]></script>

Options

If you run the plugin without options, it will display menu and try to load last used settings from local storage.

Or you can supply these settings (defaults):

			
			$("#board").minesweeper({
				cols: 9, // (integer) Number of columns for playing board.
				rows: 9, // (integer) Number of rows for playing board
				mines: 10, // (integer) Total number of mines on the field # > 0 && # < cols*rows
				difficulty:	"beginner" ,		// (string) A shortcut for cols, rows and mines setting. cols, rows, mines take precedents if also difficulty is set [beginner, advanced, expert, custom]
				debug: false		// (boolean) with true logs events into firebug console
			});

Option { debug: true } will dump a lot of usefull information about whats going on inside the plugin into Firebug console.

Examples

Standard beginners game

$("#standard-beginners-game").minesweeper({ "difficulty":"beginner" }); // standard beginners game with difficulty: beginner option

No options game

$("#no-options-game").minesweeper(); // game with no options will display a menu

Sample custom game

$("#sample-custom-game").minesweeper({ "cols": 16, "rows": 16, "mines": 48 }); // custom game 16x16 with 48 mines

Try to beat this one

$("#unusual-game").minesweeper({ "cols": 10, "rows": 1, "mines": 5 }); // unusual game setup

Feeling lucky? 20x20 with 399 mines

$("#easiest-game").minesweeper({ "cols": 20, "rows": 20, "mines": 399 }); // You will always win this on the first try because a feature prevents you from stepping on a mine on the first cell

Further development

Add more menu checks to make it more fool-proof
Add options to disable menu, new game button, flag button
Add option to load entirely custom game with exact mine positions
Add callback functions on new game, on victory, on lost game
Add sounds
Make nicer CSS graphics for cells and UI

Download

minesweeper-0.9.zip [11kB] – 17/02/2011

On a serious note

Landmine is a one of the most terrible inventions of humankind along with atom bomb, torture and other products of war and violence. Please consider supporting International Campaign to Ban Landmines.

Conclusion

This is my first plugin. I hope you will have a lot of fun with it. Feel free to use it any way you like. It is licenced under GPL

http://www.gnu.org/licenses/gpl.txt