Parag’s Den

Dedicated to my adored friends…..

Arrange block.

Posted by paragdongre on November 1, 2007


Hi friends!
Just Copy paste this JavaScript code in to notepad, Save it in “.HTML” format.
And start playing. 
Hope you will enjoy this.
[Note: Plz dont make any type of updation in the code before copying it.]

———————————————————————
Javascript Code->
<HEAD>
<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>

<BODY onLoad=”loadBoard(4)”>
<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 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>

<body bgcolor=”#666655″ text=”white”>

<center>

<h1>Just Games!</h1>

<table border=6 width=”80%” cellpadding=4 cellspacing=0>

<tr><td width=”98%”><h2>Arrange</h2></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 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>

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

<!– Script Size:  10.06 KB –>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: