<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>

<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:&nbsp;" + gtime + " secs&nbsp;&nbsp;&nbsp;Moves:&nbsp;" + 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>

STEP 4

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 &copy;Arun Narayanan, Dec 2002<br>&nbsp;</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>