Arrange

Arun Narayanan Jan 3, 2003

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: The game is very addictive! (Internet Explorer only)

Jus' Games!

Original Games by ©Arun Narayanan, Dec 2002

Arrange
Choose a Level (3 to 10). The game board has blocks with numbers in it. Also there is a single "hole" that can be used for moving the blocks. The objective of the game is to order the numbers using the "hole" for temporary movement. Press the "Start Game" button. The timer would be started. 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. 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. Order all the numbers in the shortest time possible with a minimum number of moves...

Choose Level:

The JavaScript Source: Games: Arrange

Simply click inside the window below, use your cursor to highlight the script, and copy (type Control-c or Apple-c) the script into a new file in your text editor (such as Note Pad or Simple Text) and save (Control-s or Command-s). The script is yours!!!

<!-- THREE STEPS TO INSTALL ARRANGE:

1.  Copy the coding into the HEAD of your HTML document

2.  Add the onLoad event handler into the BODY tag

3.  Put the last coding into the BODY of your HTML document  -->

<HEAD>

!-- This script and many more are available free online at -->

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

</HEAD>

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>

<h1>Jus' Games!</h1>

<tr><td width="98%"><h2>Arrange</h2></td>

<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 order the numbers using the "hole" for temporary movement.</li>

<li>Press the "Start Game" button. The timer would 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>

Order all the numbers in the shortest time possible with a minimum number of moves...

</h3></td></tr>

</table>

<p>

<b>Choose Level: </B>

for (var i=5;i<=10;i++)

{

document.write("<option value='" + i + "'>" + i + "</option>");

}

</script>

</select>

</td></tr>

</td></tr>

</table>

<p>

<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>

by <a href="http://javascriptsource.com">The JavaScript Source</a></font>

</center><p>

Did you use this script? Do you like this site? Please link to us!

Leave a Response

(0 comments)

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details

Arrange

Jus' Games!

Arrange

Leave a Response

Attention JavaScript Coders

Go Deeper