Full version: jsB@nk » Game » Puzzle » Arrange
URL: https://www.javascriptbank.com/arrange.html
A nice implementation of the magic squares game where the objective is to arrange the numbers in order. Multiple levels, timer and counter included. Warning: Tthe game is very addictive.
Full version: jsB@nk » Game » Puzzle » Arrange
URL: https://www.javascriptbank.com/arrange.html
<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; cursor: hand; 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><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script>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 hifunction r(low,hi){ return Math.floor((hi-low)*Math.random()+low); }//random number between 1 and hifunction r1(hi){ return Math.floor((hi-1)*Math.random()+1); }//random number between 0 and hifunction 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><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><BODY onLoad="loadBoard(4)"><table border=6 width="80%" cellpadding=4 cellspacing=0><tr><td width="98%"><h2>Help</h2></td><td align=center><input type=button class=but value="JavaScriptBank.com" onclick="window.location.href='http://JavaScriptBank.com'"></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> </h3><ol style="font-family: Arial; font-size: 10pt; font-weight: bold"><li>Choose a level.</li><li>Click a cell to move it.</li><li>Click "Start Game" button to begin.</li></ol></td></tr></table><p><div id=test></div><table cellpadding=4><tr><td align=center><b>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></body><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->