This is a great online javascript game which is very enjoyable and very addictive. Just like the old "magic square" game that we all have played. Your visitors will keep coming back time and again for more. The game has full instructions on how to play withing the script. Free to download and virtually nothing to alter, simple copy and paste installation.
It is a large script, but follow the installation instructions and you should have no problems getting this great numbers javascript game operating on your site.
STEP 1
Copy and paste the code below into the <head> of your html document.
<style>
.bigcell { background-color:#aa9966; border:4px solid #aa9966; text-align:center;
} .cell { width:40px; height:40px; font-family:Verdana, Arial; font-size:10pt;
font-weight:bold; background-color:#996633; color:#ffff33; border-top:2px solid
#aa9966; border-left:2px solid #aa9966; border-right:2px solid #663300; border-bottom:2px
solid #663300; text-align:center; } .hole { width:40px; height:40px; background-color:#aa9966;
text-align:center; } body,h1,h2,h3,.msg,capt1,capt2 {font-family:Verdana,Comic
Sans MS,Arial;} body {margin:0px;} h1 {font-size:28pt; font-weight:bold; margin-bottom:0px;}
h2 {font-size:16pt; margin:0px; font-weight:bold;} h3 {font-size:8pt; margin:0px;
font-weight:bold;} .msg {font-size:8pt; font-weight:bold;} .tab {cursor:hand;}
.capt1 {font-size:10pt; font-weight:bold;} .capt2 {font-size:9pt; font-weight:bold;}
.capt3 {font-size:14pt; font-weight:bold; color:yellow;} .capt4 {font-size:10pt;
font-weight:bold; color:yellow;} .but {font-size:9pt; font-weight:bold; height:30px;background-color:#aaaa99;}
</style>
Place this event handler code into the <body> tag.
<body onLoad="loadBoard(4)">
STEP 3
Copy and paste this code between the <body> and </body> tags of your html document. There is nothing in this part of the script to alter.
<script>
<!-- Distributed by http://www.hypergurl.com --> var gsize, ghrow, ghcol,
gtime, gmoves, gintervalid=-1, gshuffling; function toggleHelp() { if (butHelp.value
== "Hide Help") { help.style.display = "none"; butHelp.value
= "Show Help"; } else { help.style.display = ""; butHelp.value
= "Hide Help"; } } //random number between low and hi function r(low,hi)
{ return Math.floor((hi-low)*Math.random()+low); } //random number between 1 and
hi function r1(hi) { return Math.floor((hi-1)*Math.random()+1); } //random number
between 0 and hi function r0(hi) { return Math.floor((hi)*Math.random()); } function
startGame() { shuffle(); gtime = 0; gmoves = 0; tickTime(); gintervalid = setInterval("tickTime()",1000);
} function stopGame() { if (gintervalid==-1) return; clearInterval(gintervalid);
fldStatus.innerHTML = ""; gintervalid=-1; } function tickTime() { showStatus();
gtime++; } function checkWin() { var i, j, s; if (gintervalid==-1) return; //game
not started! if (!isHole(gsize-1,gsize-1)) return; for (i=0;i<gsize;i++) for
(j=0;j<gsize;j++) { if (!(i==gsize-1 && j==gsize-1)) //ignore last
block (ideally a hole) { if (getValue(i,j)!=(i*gsize+j+1).toString()) return;
} } stopGame(); s = "<table cellpadding=4>"; s += "<tr><td
align=center class=capt3>!! CONGRATS !!</td></tr>"; s += "<tr
class=capt4><td align=center>You have done it in " + gtime + "
secs "; s += "with " + gmoves + " moves!</td></tr>";
s += "<tr><td align=center class=capt4>Your speed is " +
Math.round(1000*gmoves/gtime)/1000 + " moves/sec</td></tr>";
s += "</table>"; fldStatus.innerHTML = s; // shuffle(); } function
showStatus() { fldStatus.innerHTML = "Time: " + gtime + "
secs Moves: " + gmoves } function showTable()
{ var i, j, s; stopGame(); s = "<table border=3 cellpadding=0 cellspacing=0
bgcolor='#666655'><tr><td class=bigcell>"; s = s + "<table
border=0 cellpadding=0 cellspacing=0>"; for (i=0; i<gsize; i++) { s
= s + "<tr>"; for (j=0; j<gsize; j++) { s = s + "<td
id=a_" + i + "_" + j + " onclick='move(this)' class=cell>"
+ (i*gsize+j+1) + "</td>"; } s = s + "</tr>";
} s = s + "</table>"; s = s + "</td></tr></table>";
return s; } function getCell(row, col) { return eval("a_" + row + "_"
+ col); } function setValue(row,col,val) { var v = getCell(row, col); v.innerHTML
= val; v.className = "cell"; } function getValue(row,col) { // alert(row
+ "," + col); var v = getCell(row, col); return v.innerHTML; } function
setHole(row,col) { var v = getCell(row, col); v.innerHTML = ""; v.className
= "hole"; ghrow = row; ghcol = col; } function getRow(obj) { var a =
obj.id.split("_"); return a[1]; } function getCol(obj) { var a = obj.id.split("_");
return a[2]; } function isHole(row, col) { return (row==ghrow && col==ghcol)
? true : false; } function getHoleInRow(row) { var i; return (row==ghrow) ? ghcol
: -1; } function getHoleInCol(col) { var i; return (col==ghcol) ? ghrow : -1;
} function shiftHoleRow(src,dest,row) { var i; //conversion to integer needed
in some cases! src = parseInt(src); dest = parseInt(dest); if (src < dest)
{ for (i=src;i<dest;i++) { setValue(row,i,getValue(row,i+1)); setHole(row,i+1);
} } if (dest < src) { for (i=src;i>dest;i--) { setValue(row,i,getValue(row,i-1));
setHole(row,i-1); } } } function shiftHoleCol(src,dest,col) { var i; //conversion
to integer needed in some cases! src = parseInt(src); dest = parseInt(dest); if
(src < dest) {//alert("src=" + src +" dest=" + dest + "
col=" + col); for (i=src;i<dest;i++) {//alert(parseInt(i)+1); setValue(i,col,getValue(i+1,col));
setHole(i+1,col); } } if (dest < src) { for (i=src;i>dest;i--) { setValue(i,col,getValue(i-1,col));
setHole(i-1,col); } } } function move(obj) { var r, c, hr, hc; if (gintervalid==-1
&& !gshuffling) { alert('Please press the "Start Game" button
to start.') return; } r = getRow(obj); c = getCol(obj); if (isHole(r,c)) return;
hc = getHoleInRow(r); if (hc != -1) { shiftHoleRow(hc,c,r); gmoves++; checkWin();
return; } hr = getHoleInCol(c); if (hr != -1) { shiftHoleCol(hr,r,c); gmoves++;
checkWin(); return; } } function shuffle() { var t,i,j,s,frac; gshuffling = true;
frac = 100.0/(gsize*(gsize+10)); s = "% "; for (i=0;i<gsize;i++)
{ s += "|"; for (j=0;j<gsize+10;j++) { window.status = "Loading
" + Math.round((i*(gsize+10) + j)*frac) + s if (j%2==0) { t = r0(gsize);
while (t == ghrow) t = r0(gsize); //skip holes getCell(t,ghcol).click(); } else
{ t = r0(gsize); while (t == ghcol) t = r0(gsize); //skip holes getCell(ghrow,t).click();
} } } window.status = ""; gshuffling = false; } function loadBoard(size)
{ gsize = size; board.innerHTML = showTable(gsize); setHole(gsize-1,gsize-1);
//shuffle(); } </script>
Copy and paste the code below into your html document directly after step 3.
You can change the home url in the top part of this code snippet. (7th line.) Nothing else to alter if you are happy with the setup and look.
<h2>Numbers
Game!</h2> <span class=msg>Original Games by ©Arun Narayanan,
Dec 2002<br> </span> <table border=6 width="80%"
cellpadding=4 cellspacing=0> <tr><td width="98%"> <h2>Arrange
the Numbers</h2> </td> <td align=center><input type=button
class=but value="Home Page" onclick="window.location.href='http://www.hypergurl.com/index.html'"></td><td
align=center><input type=button id=butHelp value="Hide Help" class="but"
onclick="toggleHelp()"></td></tr> <tr id=help><td
colspan=3><h3> <ol> <li>Choose a Level (3 to 10).</li>
<li>The game board has blocks with numbers in it. Also there is a single
"hole" that can be used for moving the blocks.</li> <li>The
objective of the game is to place the numbers in order using the "hole"
for temporary movement.</li> <li>Press the "Start Game"
button. The timer will be started.</li> <li>Move blocks in a row by
clicking on them. A block can be moved only if it is in the same row or column
as the "hole". Make a guess by typing in a number in the box provided.</li>
<li>You can move multiple blocks (in the same row or column as the "hole")
by clicking the farthest block that you need to be moved.</li> </ol>
Place all the numbers in the shortest time possible with a minimum number of moves...
</h3> </td></tr> </table> <p> <div id=test></div>
<table cellpadding=4> <tr><td align=center> <b>Choose
Level: </B> <select id=level onchange="loadBoard(parseInt(level.value))">
<option value='3'>3</option> <option value='4' selected>4</option>
<script> for (var i=5;i<=10;i++) { document.write("<option value='"
+ i + "'>" + i + "</option>"); } </script>
</select> </td></tr> <tr><td align=center> <input
type=button class=but value="Start Game" onclick="startGame();">
<tr><td align=center id=fldStatus class=capt2> </td></tr>
</table> <div id=board></div>
Please do not ask for help if you have altered the script and it then does not work. Use your undo button or start again from scratch. This will save both your time and mine
No comments:
Post a Comment