Metachecker.net

FontsMadeEasy.com

RankChecker.net

Learn Java Script Today

Over 5000 Free Fonts

Tutorials

Javascript Forum

Other Javascript Resources

Advance DHTML Tutorial

Mine Sweeper

[View Sample]

A well-known windows game realized on java-script. An incredible similarity with an original! Customize the area you are ready to clear of mine and go!

Insert into <HEAD>

Insert into <BODY>

<SCRIPT LANGUAGE="JavaScript">
// *******************************************************************************
// This is the script for the game's windows.
// *******************************************************************************
<!-- Begin
function openAbout() {
msg1=window.open("","msg1","height=200,width=250,left=200,top=200");
msg1.document.write("<html><title>About Minesweeper</title>");
msg1.document.write("<body bgcolor='white' onblur=window.close()>");
msg1.document.write("<center><img src='winmineicon.gif'>");
msg1.document.write("<p><font face='Arial' size=2><b>Minesweeper</b>");
msg1.document.write("<p></font><font face='Arial' size=-1>");
msg1.document.write("by P. Occil<br>JavaScript Version (c) 2000 by P. ");
msg1.document.write("Occil<p><form>");
msg1.document.write("<input type='button' width=50 value='OK'");
msg1.document.write(" onclick='window.close();'>");
msg1.document.write("</form></font></center>");
msg1.document.write("</body></html>");

}

function openHelp() {
msg2=window.open("","msg2","height=600,width=450,left=0,top=0, scrollbars=yes");
msg2.document.write("<html><title>Minesweeper Help</title>");
msg2.document.write("<body bgcolor='white' onblur=window.close()>");
msg2.document.write("<center><img src='winmineicon.gif'>");
msg2.document.write("<p><font face='Arial' size=2><b>Minesweeper Help");
msg2.document.write("</b><p></font><font face='Arial' size=-1>");
msg2.document.write('</center>');
msg2.document.write("<p><p><b>The object of Minesweeper</"
 +"b><p>The object of Minesweeper is to find all "
 +"the mines as quickly as possible without uncoverin"
 +"g any of them.<p><p><b>To play Minesweeper</b> "
 +"<ol> <li> On the <b>Game</b> menu, click <b>New<"
 +"/b>.</li> <li> To start the timer, click any squ"
 +"are on the playing field.</li> </ol><i>Notes</i>"
 +"<ul> <li>The game area consists of the playing"
 +" field, a mine counter, and a timer.<li>You can "
 +"uncover a square by clicking it. If you uncover a "
 +"mine, you lose the game. <li>If a number appears "
 +"on a square, it indicates how many mines are in th"
 +"e eight squares that surround the numbered one. <"
 +"li>To mark a square you suspect contains a mine, h"
 +"old CTRL and click on it.</ul> <p><p> <b>Strateg"
 +"ies and tips</b> <ul> <li>If you are uncertain a"
 +"bout a square, hold CTRL and click on it twice to "
 +"mark it with a question mark (?). Later, you can e"
 +"ither mark the square as a mine or uncover it by r"
 +"ight-clicking again once or twice. <li>Look for c"
 +"ommon patterns in numbers, which often indicate a "
 +"corresponding pattern of mines. For example, the p"
 +"attern 2-3-2 at the edge of a group of uncovered s"
 +"quares indicates a row of three mines next to the "
 +"three numbers.</ul></body></html>");
}

// End -->
</script>
<SCRIPT language="JavaScript">
// *******************************************************************************
// This is the script for controlling the menus in the game.
// *******************************************************************************
var isNav,isIE
var coll = ""
var styleObj = ""
if (navigator.appName == "Netscape") {
	isNav = true
	currWidth = innerWidth
	currHeight = innerHeight
	window.captureEvents(Event.RESIZE)
	window.onresize = handleResize
} else {
	isIE = true
	coll = "all."
	styleObj = ".style"
}

function handleResize() {
	if ((innerWidth != currWidth) || (innerHeight != currHeight)) {
		location.reload()
		return false
	}
}

// Set Style Variables
var navColor = "#BBBBBB"
var navLightColor = "#EDEDED"
var navDarkColor = "#AAAAAA"
var menuColor = "#BBBBBB"
var itemOnColor = "#888888"
var itemOffColor = "#BBBBBB"
var fontOnColor = "#000000"
var fontOffColor = "#AAAAAA"
var fontFace = "ms sans serif"
var fontSize = "6pt"
var semi = ";"
var numberTopLevelMenus = 2

var menu2 =	{
		Name: "Help", nwidth: 22, mwidth: 120,
		item1: { itext: "Help", url: "javascript:openHelp();", isParent: 0 },
		item2: { itext: "About Minesweeper", url: "javascript:openAbout();", isParent: 0 }
		}

//Set Misc Variables
var done = 0
var currMenuArray
var currItemArray
var currMenu
var currItem
var allNavs = new Array()
var navCoords = new Array()
var navState = 0
var allMenus = new Array()
var iCount
var ciCount
var childCount = 0
var activeItem
var nsGo = 0
var diagOn
    
    var newWind

var preloadArrow = new Image();
preloadArrow.src = "/arrow.gif";

//Mouse Over Nav Buttons
function navUp() {
	if (navState) {
		if (navState != this) {
			for (var i = 1; i <= numberTopLevelMenus; i++) {
				allNavs[i].off()
			}
		}
		this.down()
	} else {
		if (isNav) {
			this.bgColor = navLightColor
		} else {
			this.style.borderBottomColor = navDarkColor
			this.style.borderRightColor = navDarkColor
			this.style.borderTopColor = navLightColor
			this.style.borderLeftColor = navLightColor
			this.style.padding = 0
		}
	}
}

//Turn Off Nav Buttons
function navOff() {
	this.menu.reveal(1)
	if (isNav) {
		this.bgColor = navColor
	} else {
		this.style.borderBottomColor = navColor
		this.style.borderRightColor = navColor
		this.style.borderTopColor = navColor
		this.style.borderLeftColor = navColor
		this.style.padding = 0
	}
}

//Mouse Out Nav Buttons when menu is on
function navOut() {
	if (!navState) {
		if (isNav) {
			this.bgColor = navColor
		} else {
			this.style.borderBottomColor = navColor
			this.style.borderRightColor = navColor
			this.style.borderTopColor = navColor
			this.style.borderLeftColor = navColor
			this.style.padding = 0
		}
	}
}

//Mouse Over Nav Button when navState is On
function navDown() {
	this.menu.reveal()
	closeNewWind()
	if (isNav) {
		navState = allNavs[this.navNumber]
		allNavs[this.navNumber].bgColor = navDarkColor
	} else {
		navState = this
		this.style.borderBottomColor = navLightColor
		this.style.borderRightColor = navLightColor
		this.style.borderTopColor = navDarkColor
		this.style.borderLeftColor = navDarkColor
		this.style.paddingTop = 1
		this.style.paddingLeft = 1
	}
}

//Mouse Down Nav Buttons
function navClick(which) {
	if (!navState) {
		if (isNav) {
			closeNewWind()
			allNavs[which].menu.reveal()
			navState = allNavs[which]
			allNavs[which].bgColor = navDarkColor
			window.captureEvents(Event.MOUSEDOWN)
			window.onmousedown = clearnavState

} else {
			closeNewWind()
			this.menu.reveal()
			navState = this
			this.style.borderBottomColor = navLightColor
			this.style.borderRightColor = navLightColor
			this.style.borderTopColor = navDarkColor
			this.style.borderLeftColor = navDarkColor
			this.style.paddingTop = 1
			this.style.paddingLeft = 1
			document.onmousedown = doNothing
			document.onmousemove = doNothing
			document.onmouseup = releaseIt
		}
	}
	return false
}

//Do Nothing Release 
function releaseIt(evt) {
	document.onmousedown = clearnavState
	document.onmouseup = "default"
	document.onmousemove = "default"
}

//Ignore further mousedowns
function doNothing(evt) {
	return false
}

//Ignore further mousedowns
function doNothing2(evt) {
	return false
}

//Hide All Menus and Return All Nav Buttons to Normal
function clearnavState(evt) {
	var e = new Object()
	if (isNav) {
		window.releaseEvents(Event.MOUSEDOWN)
		var aM = navState.menu
		aM.right = aM.left + aM.width
		aM.bottom = aM.top + aM.clip.bottom - 3
		e.x = evt.pageX; e.y = evt.pageY
	} else {
		e.x = event.clientX; e.y = event.clientY
		document.onmousedown = "default"
	}
	for (var i = 1; i <= numberTopLevelMenus; i++) {
		if (((e.x > allNavs[i].x) && (e.x < allNavs[i].r)) && ((e.y > allNavs[i].y) && (e.y < allNavs[i].b))) {
			navState = 0
			allNavs[i].menu.reveal(1)
			allNavs[i].up()
			continue
		}
		allNavs[i].off()
	}
	navState = 0
}

function hiLight() {
	if (isNav) {
		this.item.bgColor = itemOnColor
		activeItem = this.item
		this.captureEvents(Event.MOUSEUP)
		this.onmouseup = goUrl
		if (this.item.hasChild) {
			if (this.item.container.childOn) {
				this.item.container.child.reveal(1)
			}
			this.item.child.reveal()
			this.item.container.childOn = 1
			this.item.container.child = this.item.child
		} else if (this.item.container.childOn) {
			this.item.container.child.reveal(1)
		}		
	} else {
		this.style.backgroundColor = itemOnColor
		if (this.hasChild) {
			if (this.container.childOn) {
				this.container.child.reveal(1)
			}
			this.child.reveal()
			this.container.childOn = 1
			this.container.child = this.child
		} else if (this.container.childOn) {
			this.container.child.reveal(1)
		}
	}		
}

function unLight() {
	if (isNav) {
		this.item.bgColor = itemOffColor
		this.releaseEvents(Event.MOUSEUP)
	} else {
		this.style.backgroundColor = itemOffColor
	}
}

function goUrl() {
	if (isNav) {
		if (this.item.url.length) {
			window.location= this.item.url
		}
	} else {
		if (this.url.length) {
			window.location= this.url
		}
	}
}

function revealIt(state) {
	if (state) {
		if (isNav) {
			this.visibility = "hidden"
			if (this.childOn) {
				this.child.visibility = "hidden"
			}
		} else {
			this.style.visibility = "hidden"
			if (this.childOn) {
				this.child.style.visibility = "hidden"
			}
		}
	} else {
		if (isNav) {
			this.visibility = "visible"
		} else {
			this.style.visibility = "visible"
		}
	}

}

function makeNav(w) {
	this.up = navUp
	this.down = navDown
	this.click = navClick
	this.off = navOff
	this.out = navOut
	this.onmouseover = navUp
	this.onmousedown = navClick
	this.onmouseout = navOut
	if (isNav) {
		this.left = this.x = navX
		this.top = this.y = navY
		this.r = this.x + this.document.width
		this.b = this.y + 24
		this.bgColor = navColor
		this.visibility = "visible"
		this.clip.left = -3
		this.clip.top = -2
		this.clip.bottom = 22
		this.clip.right += 3
	} else {
		this.style.borderStyle = "solid"
		this.style.borderWidth = 2
		this.style.borderColor = navColor
		this.style.pixelLeft = this.x = navX
		this.style.pixelTop = this.y = navY
		this.r = this.x + w
		this.b = this.y + 24
		this.style.backgroundColor = navColor
		this.style.visibility = "visible"
		this.up()
		this.out()
	}
	navX += (w + 10)
}

function makeItem(count) {
	if (isNav) {
		this.bgColor = itemOffColor
		this.visibility = "inherit"
		this.clip.left = -2
		this.clip.top = -2
		this.clip.right = currMenu.width - 3
		this.clip.bottom += 2
		this.container = this.parentLayer
		this.left = 2
		this.top = (count == 1) ? 2 : this.prev.top + this.prev.document.height + 4
	} else {
		this.style.cursor = "default"
		this.style.color = ((this.url || this.hasChild) && this.url.indexOf("nofileError") == -1) ? fontOnColor : fontOffColor
		this.style.backgroundColor = itemOffColor
		this.style.fontFamily = fontFace
		this.style.fontSize = fontSize
		this.style.padding = 2
		this.container = this.offsetParent
		this.onmousedown = goUrl
		this.onmouseover = hiLight
		this.onmouseout = unLight
	}
}

function makeMenu(isChild) {
	this.reveal = revealIt
	if (isNav) {
		this.bgColor = navDarkColor
		this.visibility = "hidden"
		this.top = (isChild) ? this.Parent.container.nav.b + this.Parent.top : this.nav.b + 2
		this.left = (isChild) ? this.Parent.container.nav.x + this.Parent.container.width : this.nav.x
		this.clip.left = -3
		this.clip.top = -3
		this.clip.right = currMenuArray.mwidth + 3
		this.clip.bottom = this.lastItem.top + this.lastItem.document.height + 5
	} else {
		this.style.backgroundColor = itemOffColor
		this.style.visibility = "hidden"
		this.style.top = (isChild) ? (this.Parent.container.nav.b + this.Parent.offsetTop) : this.nav.b
		this.style.left = (isChild) ? (this.Parent.container.nav.x + this.Parent.container.width -2) : this.nav.x
		this.style.borderStyle = "solid"
		this.style.borderWidth = 2
		this.style.borderTopColor = "#EDEDED"
		this.style.borderLeftColor = "#EDEDED"
		this.style.borderRightColor = "#AAAAAA"
		this.style.borderBottomColor = "#AAAAAA"
	}
}

function makeLayer(n,w,wrapper) {
	if (isNav) {
		eval("n = new Layer(w," + wrapper + ")")
	} else {
		divHTML = "<DIV ID=" + n + " STYLE=\"position:absolute \; width:" + w + "\"></DIV>"
		document.body.insertAdjacentHTML("BeforeEnd",divHTML)
	}
	return eval(n)
}

function Navs() {
	for (var i = 1; i <= numberTopLevelMenus; i++) {
		currMenuArray = eval("menu" + i)
		currNav = currMenuArray.Name
		currNav = makeLayer(currMenuArray.Name,currMenuArray.nwidth,"window")
		allNavs[i] = currNav
		var imgString = "<IMG SRC=\"\menu" + i + ".gif\" border=0 width=" + currMenuArray.nwidth + " height=14>"
		if (isNav) {
			imgString = "<A HREF=\"javascript: void doNothing2()\" onclick=\"navClick(" + i + ")\">" + imgString + "</A>"
			currNav.document.write(imgString)
			currNav.document.close()
		} else {
			currNav.innerHTML = imgString
		}
		currNav.make = makeNav
		currNav.make(currMenuArray.nwidth)
		currNav.navNumber = i
	}
}

function NSChild(cNumber,mNumber) {
	childMenuArray = eval("menu" + mNumber + "" + cNumber)
	childMenu = makeLayer(childMenuArray.Name,childMenuArray.mwidth,"window")
	childMenu.make = makeMenu
	ciCount = 1
	while (childMenuArray["item" + ciCount]) {
		cprevious = (ciCount > 1) ? childItem : null
		childItemArray = eval(childMenuArray["item" + ciCount])
		childItemName = childMenuArray.Name + "Item" + ciCount
		childItem = makeLayer(childItemName,childMenuArray.mwidth,"childMenu")
		childItem.url = childItemArray.url
		childItem.text = "\ \;\ \;\ \;" + childItemArray.itext
		childItem.html = "<SPAN ID=" + childItemName + ">" + childItem.text + "</SPAN>"
		var cfColor = (childItemArray.url && childItemArray.url.indexOf("nofileError") == -1) ? fontOnColor : fontOffColor
		childItem.html = "<FONT FACE=\"tahoma,arial,helvetica\" SIZE=2 COLOR=\"" + cfColor + "\">" + childItem.html + "</FONT>"
		childItem.document.open()
		childItem.document.write(childItem.html)
		childItem.document.close()
		childItem.prev = cprevious
		childItem.make = makeItem
		childItem.make(ciCount)
			childItem.cover = makeLayer(childItemName + "cover",childMenuArray.mwidth,"childMenu")
			childItem.cover.item = childItem
			childItem.cover.visibility = "inherit"
			childItem.cover.top = childItem.top
			childItem.cover.left = childItem.left 
			childItem.cover.clip.left = childItem.clip.left
			childItem.cover.clip.top = childItem.clip.top 
			childItem.cover.clip.right = childItem.clip.right
			childItem.cover.clip.bottom  = childItem.clip.bottom
			childItem.cover.onmouseover = hiLight
			childItem.cover.onmouseout = unLight
		ciCount++
	}
	childMenu.Parent = currItem
	childMenu.lastItem = childItem
	childMenu.make(1)
	return childMenu
}

function makeNewWindow(theURL,winName,features) {
	if (isNav) {
		features += ",screenX=100,screenY=75"
	} else {
		features += ",left=100,top=75"
	}
	newWind = window.open(theURL,winName,features)
	if (newWind != null && newWind.opener == null) {
		newWind.opener = self
	}

}

//-->
</SCRIPT>
</HEAD>
<BODY onKeyDown="javascript:keyDown();" onKeyUp="javascript:keyUp();" onload="init()">
<SCRIPT LANGUAGE="JavaScript">
// *******************************************************************************
// This is the script for the start of the game.
// *******************************************************************************

<!-- Begin

dir = "";
// Global Variables
var mines = [];
var shown = [];
var gridx, gridy, maxmines;
gridx = window.prompt("Please enter a width.","8");
gridxverify();

function gridxaccept(){
gridy = window.prompt("Please enter a height.","8");
gridyverify();
}

function gridyaccept(){
maxmines = window.prompt("Please enter the number of mines you want.","10");
maxminesverify();
}

// Checking variables before applying them.
function gridxverify(){
if (gridx > 50){
alert("That width is too big. Please enter a new width.");
gridxreenter();
}
else if (gridx < 8){
alert("That width is too small. Please enter a new width.");
gridxreenter();
}
else gridxaccept();
}

function accepted(){
var squaresleft, flagsleft;
var elapsedtime;
var playing;
var placeflag;
var clicked;
}

// Measurements for different elements of the
// Minesweeper board.
var gridSq = gridx * 16;
var grid8 = gridSq - 128;
var grid16 = gridx - 8
var grid32 = grid16 * 8
var grid64 = grid16 * 16
var topBarWidth = 8 + grid64;
var menuBarWidth = 86 + grid64;
var wideWidth = gridx * 16;
var highHeight = gridy * 16;
var cplLeft = 6 + grid32;
var cplRight = 4 + grid32;
var totalWidth = gridSq + 32;
var tW6 = totalWidth - 6;
var ww2 = wideWidth + 2;

// Assigning names to number images
num=new Array(10);

for (var i=0;i<10;i++) {
  num[i]=new Image()
  num[i].src=i+".gif"
  }

function keyDown(e) {
if(document.layers)
placeflag = (e.modifiers & Event.CONTROL_MASK) > 0;
else
placeflag = window.event.ctrlKey;
setStatus();
}
function keyUp(e) {
placeflag = false;
setStatus();
}

function newgame() {
// reset state arrays. mines holds the position of each mine. shown keeps
// track of the image shown at each grid location
var y;
for(y = 0; y < gridy; ++y)
{
mines[y] = [false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false];
shown[y] = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
}

// Place the mines, making sure positions are unique
var m;
for(m = 0; m < maxmines; ++m) {
var x,y;
do {
x = Math.floor(Math.random() * gridx);
y = Math.floor(Math.random() * gridy);
} while(mines[y][x]);
mines[y][x] = true;
}

// initialize game variables
squaresleft = gridy * gridx;
flagsleft = maxmines;
elapsedtime = 0;
playing = true;
clicked = false
placeflag = false;

// insert the grid into the document
buildgrid();

// Set up keypress handlers
if (document.layers)
window.captureEvents(Event.KEYDOWN | Event.KEYUP);
window.onKeyDown = keyDown;
window.onKeyUp = keyUp;

// start the clock
setInterval("ticker()", 1000);
}

// clock tick handler
function ticker() {
if (playing) {
if (clicked) {
elapsedtime++;
setStatus();
   }
  }
}

// Refreshing control panel
function setStatus() {
document.images.elapse3.src=num[elapsedtime-(Math.floor(elapsedtime/10))*10].src;
document.images.elapse2.src=num[Math.floor((elapsedtime-(Math.floor(elapsedtime/100))*100)/10)].src;
document.images.elapse1.src=num[Math.floor(elapsedtime/100)].src;
document.images.flag3.src=num[flagsleft-(Math.floor(flagsleft/10))*10].src;
document.images.flag2.src=num[Math.floor((flagsleft-(Math.floor(flagsleft/100))*100)/10)].src;
document.images.flag1.src=num[Math.floor(flagsleft/100)].src;

}

// *******************************************************************************
// This is the function to build the game's grid.
// *******************************************************************************
function buildgrid() {
document.write("<DIV align=center> "
 +" <table width="
 + totalWidth
 +" border=0 cells"
 +"pacing=0 cellpadding=0> <tr bgcolor=#bbbbbb heigh"
 +"t=1> <td width=1 bgcolor=#bbbbbb></td><td width"
 +"=1 bgcolor=#bbbbbb></td> <td width=1 bgcolor=#bbb"
 +"bbb></td><td width="
 + tW6
 +" bgcolor=#bbbbbb></td> <t"
 +"d width=1 bgcolor=#bbbbbb></td> <td width=1 bgcol"
 +"or=#bbbbbb></td> <td width=1 bgcolor=#000000></td"
 +"></tr><tr height=1><td width=1 bgcolor=#bbbb"
 +"bb></td><td width=1 bgcolor=#ffffff></td><td w"
 +"idth=1 bgcolor=#ffffff></td><td bgcolor=#ffffff>"
 +"</td><td width=1 bgcolor=#ffffff></td><td widt"
 +"h=1 bgcolor=#888888></td><td width=1 bgcolor=#00"
 +"0000></td></tr><tr height=1><td width=1 bgco"
 +"lor=#bbbbbb></td><td width=1 bgcolor=#ffffff></t"
 +"d><td width=1 bgcolor=#bbbbbb></td><td bgcolor"
 +"=#bbbbbb></td><td width=1 bgcolor=#bbbbbb></td> "
 +"<td width=1 bgcolor=#888888></td><td width=1 bg"
 +"color=#000000></td></tr></table>"
 +"<table border=0 cellspacing=0 cellpadding=0><t"
 +"r height=18><td width=1 bgcolor=#bbbbbb></td><"
 +"td width=1 bgcolor=#ffffff></td><td width=1 bgco"
 +"lor=#bbbbbb></td><td bgcolor=#000088><img src='t"
 +"itle.gif'><img src='a.gif' height=1 width="
 + topBarWidth
 +" name="
 +"'titleBarEmptySpace'></td><td><img src='buttons."
 +"gif'></td><td width=1 bgcolor=#bbbbbb></td><td"
 +" width=1 bgcolor=#888888></td><td width=1 bgcolo"
 +"r=#000000></td></tr></table> "
 +"<table border=0 cellspacing=0 cellpadding=0> <tr"
 +" height=20 bgcolor=#bbbbbb> <td width=1 bgcolor=#"
 +"bbbbbb></td> <td>"
 +"<img src='c.gif' width=1 height=20>"
 +"<img src='a.gif' NAME='markerImg' width=35 height=18>"
 +"<img src='a.gif' width=34 height=18>"
 +"</td><td> <"
 +"img src='a.gif' height=1 width="
 + menuBarWidth
 +" name='menuBarEmp"
 +"tySpace'></td> <td width=1 bgcolor=#bbbbbb></td> "
 +"<td width=1 bgcolor=#888888></td> <td width=1 bg"
 +"color=#000000></td> </tr></table>  <table border=0 cellspacing=0 cellpadding=0"
 +"> <tr height=11 width=160> <td width=1 bgcolor=#"
 +"bbbbbb></td> <td width=1 bgcolor=#ffffff></td> <"
 +"td width=1 bgcolor=#bbbbbb></td> <td><img src='tl"
 +".gif'></td> <td><img src='header.gif' width="
 + ww2
 +" height=11></td> <td><img src='tr.gif'></td><td><"
 +"img src='right.gif' width=5 height=11></td> </tr>"
 +"</table><table width="
 + totalWidth
 +" border=0 cellspacing=0 cellpadd"
 +"ing=0> <tr height=33> <td width=1 bgcolor=#bbbbb"
 +"b></td> <td width=1 bgcolor=#ffffff></td> <td wi"
 +"dth=1 bgcolor=#bbbbbb></td> <td><img src='cplleft"
 +".gif' height=33 width=11></td> <td>  <table width="
 + ww2
 +" border=0 cellspacing="
 +"0 cellpadding=0><tr height=4 width="
 + ww2
 +"><td bgcolor=#bbbbbb"
 +"></td></tr></table> <table width="
 + ww2
 +" border=0 cel"
 +"lspacing=0 cellpadding=0><tr height=26><td "
 +"width=5 bgcolor=#bbbbbb></td><td> <table width=41 border=0 cellspacing=0 c"
 +"ellpadding=0><tr bgcolor=#888888><td></td><td>"
 +"</td><td></td> <td></td><td></td><td></td> <td><"
 +"/td><td></td> <td width=1 bgcolor=#bbbbbb></td></"
 +"tr> <tr bgcolor=#000000> <td width=1 bgcolor=#88"
 +"8888></td> <td></td><td></td> <td></td><td></td>"
 +"<td></td><td></td><td></td> <td width=1 bgcolor"
 +"=#ffffff></td></tr> <tr bgcolor=#000000> <td wid"
 +"th=1 bgcolor=#888888></td> <td width=1 bgcolor=#0"
 +"00000></td> <td><img src='0.gif' name='flag1'></t"
 +"d><td width=2></td><td><img src='1.gif' name='"
 +"flag2'></td><td width=2></td><td><img src='0.g"
 +"if' name='flag3'></td><td width=1></td> <td wid"
 +"th=1 bgcolor=#ffffff></td></tr> <tr bgcolor=#0000"
 +"00> <td width=1 bgcolor=#888888></td> <td></td><"
 +"td></td> <td></td><td></td><td></td> <td></td><t"
 +"d></td> <td width=1 bgcolor=#ffffff></td></tr> <"
 +"tr bgcolor=#ffffff> <td width=1 bgcolor=#bbbbbb><"
 +"/td> <td></td><td></td> <td></td><td></td><td></"
 +"td> <td></td><td></td> <td></td></tr><"
 +"tr bgcolor=#bbbbbb> <td width=1 bgcolor=#bbbbbb><"
 +"/td> <td></td><td></td> <td></td><td></td><td></"
 +"td> <td></td><td></td> <td></td></tr></table> </td> <td bgcolor=#bbbbbb><img height=1 "
 +"src='a.gif' width=" + cplLeft + "name='cplLeft'>"
 +"<td><img src='btnsmile.gif' name='condition' onmo"
 +"usedown='document.images.condition.s"
 +'rc="btnsmil2.gif"'
 +";' onmouseu"
 +"p='document.images.condition.s"
 +'rc="btnsmile.gif";location.reload();'
 +";'></td> <td width=4 bgcolor=#bbbbbb>"
 +"<img height=1 src='a.gif'"
 +" width=" + cplRight + ">"
 +"</td> <td>  <table width=4"
 +"1 border=0 cellspacing=0 cellpadding=0> <tr bgcol"
 +"or=#888888> <td></td><td></td><td></td> <td></td"
 +"><td></td><td></td><td></td><td></td> <td width"
 +"=1 bgcolor=#bbbbbb></td></tr> <tr bgcolor=#000000"
 +"> <td width=1 bgcolor=#888888></td> <td></td><td"
 +"></td> <td></td><td></td><td></td> <td></td><td>"
 +"</td> <td width=1 bgcolor=#ffffff></td></tr> <tr"
 +" bgcolor=#000000> <td width=1 bgcolor=#888888></t"
 +"d> <td width=1 bgcolor=#000000></td> <td><img sr"
 +"c='0.gif' name='elapse1'></td> <td width=2></td> "
 +"<td><img src='0.gif' name='elapse2'></td> <td wi"
 +"dth=2></td> <td><img src='0.gif' name='elapse3'><"
 +"/td> <td width=1></td> <td width=1 bgcolor=#ffff"
 +"ff></td></tr> <tr bgcolor=#000000> <td width=1 b"
 +"gcolor=#888888></td> <td></td><td></td> <td></td"
 +"><td></td><td></td> <td></td><td></td> <td width"
 +"=1 bgcolor=#ffffff></td></tr> <tr bgcolor=#ffffff"
 +"> <td width=1 bgcolor=#bbbbbb></td> <td></td><td"
 +"></td> <td></td><td></td><td></td> <td></td><td>"
 +"</td> <td></td></tr> <"
 +"tr bgcolor=#bbbbbb> <td width=1 bgcolor=#bbbbbb><"
 +"/td> <td></td><td></td> <td></td><td></td><td></"
 +"td> <td></td><td></td> <td></td></tr> "
 +"</table>  </td> <td "
 +"width=7 bgcolor=#bbbbbb></td></tr></table><table "
 +"width=" 
 + ww2
 +" border=0 cellspacing=0 cellpadding=0> "
 +"<tr height=3><td bgcolor=#bbbbbb></td></tr></table"
 +">  </td> <td><img src"
 +"='cplright.gif' height=33 width=11></td> <td><img"
 +" src='right.gif' height=33 width=5></td> </tr></t"
 +"able> <table border=0 cells"
 +"pacing=0 cellpadding=0> <tr height=11 width="
 + totalWidth
 +"> "
 +"<td width=1 bgcolor=#bbbbbb></td> <td width=1 bg"
 +"color=#ffffff></td> <td width=1 bgcolor=#bbbbbb><"
 +"/td> <td><img src='ml.gif'></td><td><img src='"
 +"separatr.gif' width="
 + wideWidth
 +" height=11></td><td><img"
 +" src='mr.gif'></td><td><img src='right.gif' width"
 +"=5></td></tr></table>  <table"
 +" width="
 + totalWidth
 +" border=0 cellspacing=0 cellpadding=0> "
 +"<tr height="
 + highHeight
 +"> <td width=1 bgcolor=#bbbbbb></td>"
 +" <td width=1 bgcolor=#ffffff></td> <td width=1 b"
 +"gcolor=#bbbbbb></td> <td><img src='fielside.gif' "
 +"width=12 height="
 + highHeight
 +"></td> <td> </td><td'
 +' valign=right><img src="fielside.gif" width=12 heig'
 +'ht='
 + highHeight
 +'></td> <td valign=right><img src="right.gif'
 +'" width=5 height='
 + highHeight
 +'></td></tr></table><table width='
 + totalWidth
 +' border=0 cellspacing=0 cellpadding=0><tr heigh'
 +'t=12> <td width=1 bgcolor=#bbbbbb></td> <td widt'
 +'h=1 bgcolor=#ffffff></td> <td width=1 bgcolor=#bb'
 +'bbbb></td> <td><img src="bl.gif"></td> <td><img '
 +'src="footer.gif" width='
 + wideWidth
 +' height=12></td> <td><i'
 +'mg src="br.gif"></td> <td><img src="right.gif" he'
 +'ight=12></td></tr></table> <ta'
 +'ble width='
 + totalWidth
 +' border=0 cellspacing=0 cellpadding=0'
 +'> <tr bgcolor=#bbbbbb height=1> <td width=1 bgco'
 +'lor=#bbbbbb></td><td width=1 bgcolor=#ffffff></t'
 +'d> <td width=1 bgcolor=#bbbbbb></td><td width='
 + tW6
 +' bgcolor=#bbbbbb></td><td width=1 bgcolor=#bbb'
 +'bbb></td> <td width=1 bgcolor=#888888></td> <td '
 +'width=1 bgcolor=#000000></td> </tr> <tr height=1'
 +'> <td width=1 bgcolor=#bbbbbb></td> <td width=1 '
 +'bgcolor=#888888></td> <td width=1 bgcolor=#888888'
 +'></td> <td bgcolor=#888888></td> <td width=1 bgc'
 +'olor=#888888></td> <td width=1 bgcolor=#888888></'
 +'td> <td width=1 bgcolor=#000000></td> </tr> <tr'
 +' height=1> <td width=1 bgcolor=#000000></td> <td'
 +' width=1 bgcolor=#000000></td> <td width=1 bgcolo'
 +'r=#000000></td> <td bgcolor=#000000></td> <td wi'
 +'dth=1 bgcolor=#000000></td> <td width=1 bgcolor=#'
 +'000000></td> <td width=1 bgcolor=#000000></td> <'
 +'/tr></table> </div>');
}

// *******************************************************************************
// These are functions that run during the game.
// *******************************************************************************
// Function to calculate the number of mines adjacent to a grid location
function surrounding(y,x) {
var count = 0;
if (y > 0 && x > 0 && mines[y-1][x-1]) count++;
if (y > 0 && mines[y-1][x]) count++;
if (y > 0 && x < gridx-1 && mines[y-1][x+1]) count++;
if (x > 0 && mines[y][x-1]) count++;
if (x < gridx-1 && mines[y][x+1]) count++;
if (y < gridy-1 && x > 0 && mines[y+1][x-1]) count++;
if (y < gridy-1 && mines[y+1][x]) count++;
if (y < gridy-1 && x < gridx-1 && mines[y+1][x+1]) count++;
return count;
}

// Recursive function to 'roll back' the grid when user clicks on a tile
// with no surrounding mines
function rollback(y,x) {
if (y >= 0 && y < gridy && x >=0 && x < gridx) {
if (shown[y][x] != 3) {
var c = surrounding(y,x);
shown[y][x] = 3;
squaresleft--;
document.images["grd"+y+"_"+x].src = dir + "sq"+c+".gif";
if (c == 0) {
rollback(y-1,x-1);
rollback(y-1,x);
rollback(y-1,x+1);
rollback(y,x-1);
rollback(y,x+1);
rollback(y+1,x-1);
rollback(y+1,x);
rollback(y+1,x+1);
         }
      }
   }
}

// Function called when player steps on a mine. All mine locations are uncovered
function dead() {
var y, x;
for(y = 0; y < gridy; ++y) {
for(x = 0; x < gridx; ++x) {
if (mines[y][x]) {
if (shown[y][x] != 1) {
document.images["grd"+y+"_"+x].src = dir + "mine.gif";
   }
}
else if (shown[y][x] == 1) {
document.images["grd"+y+"_"+x].src = dir + "nomine.gif";
      }
   }
}
document.images.condition.src = dir + "btndead.gif";
playing = false;
clicked = false;
}

// handler called whenever the grid is clicked
function gridclick(y, x) {
if (playing) {
clicked = true;
if (placeflag) {
if (shown[y][x] < 3) {
var s = shown[y][x];
var change = true;
if (s == 1) {
flagsleft++;
squaresleft++;
}
if (flagsleft == 0 && s == 0) {
change = false;
}
else {
if (s == 2) s = 0;
else s++;
if (s == 1) {
flagsleft--;
squaresleft--;
   }
}
if (change) {
shown[y][x] = s;
document.images["grd"+y+"_"+x].src = dir + "sqt"+s+".gif";
setStatus();
}
if (squaresleft == 0) {
document.images.condition.src = dir + "btncool.gif";
playing = false;
      }
   }
}

// check not flagged as a mine
else if (shown[y][x] != 1) {
if (mines[y][x]) {
document.images["grd"+y+"_"+x].src = dir + "minered.gif";
dead();
}
else  {
rollback(y,x);
         }
      }
   }
}

// Start the game
newgame();
// End -->
</script>

Other Related Resources (Books)

		Web Game Developer's Cookbook, The: Using JavaScript and HTML5 to Develop Games	Web Game Developer's Cookbook, The: Using JavaScript and HTML5 to Develop Games Want to start building great web games with HTML5 and JavaScript? Moving from Flash or other game platforms? Already building HTML5 games and want to get better and faster at it? This book brings together everything you need: expert guidance, sample projects, and working code! Evan Burchard walks you step-by-step through quickly building 10 popular types of games.
		WebGL Programming Guide: Interactive 3D Graphics Programming with WebGL	WebGL Programming Guide: Interactive 3D Graphics Programming with WebGL WebGL brings plugin-free 3D to the web, enabling you to create sophisticated interactive 3D graphics right inside web browsers - perfect for games, user interfaces, and information visualization. The WebGL Programming Guide will help you get started quickly with interactive WebGL 3D programming, even if you have no prior knowledge of HTML5, JavaScript, 3D computer graphics, mathematics, or OpenGL.
		A Beginner's Guide to Writing Minecraft Plugins in JavaScript	A Beginner's Guide to Writing Minecraft Plugins in JavaScript The book is for anyone who wants to learn how to modify Minecraft-no previous programming experience required! The book uses JavaScript, a popular programming language for creating websites and scripting. Aimed at kids who already play Minecraft, this guide will teach coding through a series of "Recipes" (the term used in-game when crafting new objects).

Other Related Resources (Paid Courses)
	Learn HTML5, CSS and JavaScript Basics from Scratch	Learn HTML5, CSS and JavaScript Basics from Scratch Everything You Need to Know to Start Creating your own Websites, Web Apps and Games with HTML5, JavaScript & CSS
	Remake Classic Games with HTML5 and JavaScript - Part Two	Remake Classic Games with HTML5 and JavaScript - Part Two Part Two: Indie game developers and programmers can learn HTML5 and Javascript by remaking classic games

Mine Sweeper

[View Sample]

Insert into <HEAD>

Insert into <BODY>

Other Related Resources (Books)

Other Related Resources (Paid Courses)