<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- This page has been freely adapted. The correct code is presented within the main article. -->
<HTML><HEAD><TITLE>JavaScript game by Guy Laor</TITLE>
<META content="text/html; charset=unicode" http-equiv=Content-Type>
<!-- page copyright 2001 internet.com -->
<SCRIPT language=JavaScript1.2>
// script by guy laor - all rights reserved 2000 
var cells = 16;
var rows = 4;
var lines = 4;
var Ihight, Iwidth, cellH, cellW;
HoldDiv = new Array;
InnerDiv = new Array;
RandNum = new Array;
RandNum.length =0;
var Itop = Ileft = 100;
var Ctop = Cleft = 0;
img1 = new Image;
img1.src = 

function init(valueimg) 
{
if (document.layers) {
	alert("Not suitable for Netscape.Sorry!");
	return;
}
	BaseImg = new Image;
	//BaseImg.src = document.selection.image.value;
	IMAGE = valueimg; 
	BaseImg.src = valueimg; //"campbell.jpg";
	Ihight = BaseImg.height;
	Iwidth = BaseImg.width;
	//alert (Ihight + "  " + Iwidth);	
	cellH = parseFloat(Ihight/rows);
	cellW = parseFloat(Iwidth/lines);
	var Divnum=0;
	for (i=0; i<rows; i++) {
		for (a=0; a<lines; a++) {
			Makeholder(Divnum, Itop, Ileft, cellH, cellW);
			Ileft = Ileft+cellW;
			MakeInner(Divnum, Ctop, Cleft);
			Cleft = Cleft-cellW;			
			Divnum++;
		}
		Ileft = 100;
		Cleft = 0;
		Itop = Itop+cellH;
		Ctop = Ctop-cellH;
	}
	MakeRound();
	document.write('<html><body vlink="Gray" link="Gray" alink="Gray">');
	document.write('<BR><a href="game.html"><font face="Verdana">Back</font></a>');
	document.write('<div style="visibility:hidden"><img src="campbell.jpg" width="1" height="1" border="0" alt=""></div>');
	document.write(Scrip);
	for (q=0; q<cells; q++) {
		//document.body.insertAdjacentHTML("BeforeEnd", HoldDiv[q]);
		document.write(HoldDiv[q]);
		var Rnumber = RandNum[q];
		//document.body.insertAdjacentHTML("BeforeEnd", InnerDiv[Rnumber]);
		document.write(InnerDiv[Rnumber]);
		if (q != cells-1){  
			//document.body.insertAdjacentHTML("BeforeEnd", '<img src="" name="mag'+q+'" border="0">');
			document.write('<img src="'+IMAGE+'" name="mag'+q+'" border="0">');
			eval ("document.mag"+q+".src = BaseImg.src");
		}
		//document.body.insertAdjacentHTML("BeforeEnd","</div></div>"); 
		document.write("</div></div>");
	
	}
	
	//document.close();	
}

function Makeholder(number, top, left, ctop, cleft) 
{
	HoldDiv[number] = '<div id="Holder'+number+'" style="position: absolute; top: '+top+'; left:'+left+'; clip : rect(0px, '+cleft+'px, '+ctop+'px, 0px)" onclick="pop('+number+')" >';

}

function MakeInner(number, top, left) {
		InnerDiv[number] = '<div id="Inn'+number+'" style="position: absolute; top:'+top+'; left:'+left+';">';
}

function MakeRound() {

var rand1 = Math.random();
var rand2 = Math.random();
var rand3 = Math.random();
//if (rand1 > rand2) {
	//RandNum = new Array(0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16);
	//}
////if (rand1 < rand2) {	
	RandNum = new Array(7,12,14,3,9,6,0,8,5,10,4,11,1,13,2,15,16);
	//}
	//else {
	//RandNum = new Array //('10','13','2','14','4','15','6','3','8','9','0','11','12','1','7','5','16');
	//}
	
//alert (RandNum[2]);

}

var Scrip = '<script language="JavaScript1.2">';
Scrip += 'AName = new Array(0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15);';
Scrip += 'AHolder = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0);';
Scrip += 'var Cell=null;';
Scrip += 'function pop(val) {';
Scrip += 'for (a=0; a<AName.length; a++) {';
Scrip += 'if (AName[a] == val) {';
Scrip += 'Cell = a; ';
Scrip += '}}';
Scrip += 'if (AName[Cell-1] == 15 || AName[Cell+1] == 15 || AName[Cell+4] == 15 || AName[Cell-4] == 15 ) {';
Scrip += 'var NewDiv = eval("document.all.Holder"+AName[Cell]);';
Scrip += 'var NewTop = NewDiv.style.top;';
Scrip += 'var NewLeft = NewDiv.style.left;';
Scrip += 'for (i=0; i<AHolder.length; i++) {';
Scrip += 'if (AHolder[i] == 0) {';
Scrip += 'var OldNum = i;';
Scrip += '	}';
Scrip += '}';
Scrip += 'var OldDiv = eval("document.all.Holder"+AName[OldNum]);';
Scrip += 'var OldTop = OldDiv.style.top;';
Scrip += 'var OldLeft = OldDiv.style.left;';
Scrip += 'AHolder[OldNum] = 1;';
Scrip += 'AHolder[Cell] = 0;';
Scrip += 'OldDiv.style.left = NewLeft;';
Scrip += 'OldDiv.style.top = NewTop;';
Scrip += 'NewDiv.style.top = OldTop;';
Scrip += 'NewDiv.style.left = OldLeft;';
Scrip += 'var save = AName[OldNum];';
Scrip += 'AName[OldNum] = AName[Cell];';
Scrip += 'AName[Cell] = save;';
Scrip += 'OldTop = NewTop = OldLeft = NewLeft = OldNum = null;';
Scrip += '}}';
Scrip += '</';
Scrip += 'script>';


</SCRIPT>

<META content="MSHTML 5.00.2614.3500" name=GENERATOR></HEAD>
<BODY><BR>
<DIV align=center><FONT face=Verdana>JavaScript game by Guy 
Laor<BR>Internet Explorer only<BR><BR>
<A href="javascript:init('campbell.jpg')">Click here to start the game. If the puzzle doesn't appear due to caching problems, try a second time.</A><BR>
<BR><A href="javascript_puzzle.html">Back to explanatory article.</A> 
<BR><br>
For versions using other pictures, or your own choice of picture, visit <a href= "http://www.har-tzion.com/guy/game.html">Guy Laor's own pages</a>.   
</FONT></DIV></BODY></HTML>