Game : Game : Page Components JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » Page Components » Game »

 

Game



<!----------------------------------------------------------------
|                                                                 |
|  Fair License                                                   |
|                                                                 |
|  JS Games :: Place It                                           |
|  Copyright (C2002-2004 Arun Narayanan                         |
|                                                                 |
|  For latest release information and downloads visit:            |
|  http://jsgames.sourceforge.net/                                |
|                                                                 |
|  Usage of the works is permitted provided that this             |
|  instrument is retained with the works, so that any entity      |
|  that uses the works is notified of this instrument.            |
|                                                                 |
|  DISCLAIMER: THE WORKS ARE WITHOUT WARRANTY.                    |
|                                                                 |
|  [2004, Fair License: rhid.com/fair]                            |
|                                                                 |
----------------------------------------------------------------->

<html>
<head>
<title>!!! JS Games :: Place It !!!</title>
<style>
body,h1,h2,h3,.msg,td {font-family:Verdana,Comic Sans MS,Arial;}
body {margin:0px;}
h1 {font-size:28pt; font-weight:bold; margin-bottom:0px;}
h2,.h2 {font-size:22pt; margin:0px; font-weight:bold; padding:0px;}
h3,.h3 {font-size:8pt; margin:0px; font-weight:bold;}
.capt1 {font-size:9pt; margin:0px; font-weight:bold;}
.capt2 {font-size:8pt; margin:0px; font-weight:normal; color:white;}
.msg {font-size:8pt; font-weight:bold;}
.tab {cursor:hand;}
.board {font-size:9pt; font-weight:bold;}
.status {font-size:9pt; font-weight:bold; color:#99ff99;}
.progress {font-size:8pt; font-weight:bold;}
.success {font-size:14pt; font-weight:bold; color:#33ccff;}
.but {font-size:8pt; font-weight:bold; height:24px; background-color:#606060; background-image:url(images/butbase.gif);
      border:0px solid #cccccc; border-left:none; border-right:none; color:white;}
.bnote {font-size:8pt; font-weight:normal;color:white;}
a.notelnk,a.notelnk:visited,a.notelnk:active {font-size:8pt; font-weight:normal; color:#66ffcc;}
.bnotehead {font-size:10pt; font-weight:bold;color:#66ffcc;}
.email {font-size:8pt; font-weight:bold; color:white;}
.fra {border:2px solid #999999; background-color:#606060;}
.clsThisGame, .clsBar {font-size:8pt; font-weight:bold; color:#cccccc;}
.clsBar {margin:0px; font-size:8pt; font-weight:bold; color:#ffffff;}
.clsOtherGame {margin:0px; font-size:8pt; font-weight:bold; color:#ffffff; text-decoration:none;}
.help {font-size:8pt; margin:0px; font-weight:bold;}
.menubar {padding:0px; margin:0px; brder-top:1px solid white; brder-bottom:1px solid white; background-color:#606060;
          background-image:url(images/menu.gif);}
</style>
<SCRIPT LANGUAGE=javascript>
<!--
var glevel = 12;
var gdt = 24;
var gboardwidth = 400;
var gcolor = new Array();
var gtop = 200//168;
var gleft = 20;
var gdrag = false;
var gcellid = "";
var a;
var gblocks;
var gzmax=0;

function toggleHelp()
{
  if (butHelp.value == "Hide Help")
  {
    help.style.display = "none";
    butHelp.value = "Show Help";
  }
  else
  {
    help.style.display = "";
    butHelp.value = "Hide Help";
  }  
}

Array.prototype.add = ArrayAdd;
function ArrayAdd(val) { this[this.length= val; }

function storeBlocks()
{
  var i;
  
  gblocks = new Array(glevel);
  for(i=0;i<glevel;i++)
    gblocks[inew Array();
  for(i=0;i<glevel*glevel;i++)
    gblocks[a[i]].add(i);
}

function BLOCK(index)
{
  c = eval("a" + index);
  this.index = index;
  this.block = a[index];
  this.left = -1;
  this.bottom = -1;
  this.right = -1;  
  this.top = -1;
  this.obj = c;
  this.add = BLOCK_Add;
}

function clsBlock(num)
{
  var i, k=0, c;
  
  this.left = 10000//some big number!
  this.top = 10000//some big number!
  this.bottom = 0;
  this.right = 0;  
  
  for(i=0;i<glevel*glevel;i++)
  {
    if (a[i== num)
    {
      this.block = num;
      this.cells[knew clsCell(num,i);
      c = this.cells[k];
      if (c.left < this.leftthis.left = c.left; //leftmost element
      if (c.top < this.topthis.top = c.top; //topmost element
      if (c.right > this.rightthis.right = c.right; //rightmost element
      if (c.bottom > this.bottomthis.bottom = c.bottom; //bottommost element
      k++;
    }
  }
  this.width = this.right - this.left;
  this.height = this.bottom - this.top;
 // this.move = BlockMoveFunc;
}

function clsCell(num,index)
{
  var c;
  
  this.id = "a" + index;
  c = eval(this.id);
  this.block = num;
  this.object = c;
  this.id = c.id;
  this.left = c.style.pixelLeft;
  this.top = c.style.pixelTop;
  this.right = c.style.pixelRight;
  this.bottom = c.style.pixelBottom; 
  this.x = c.style.pixelLeft;
  this.y = c.style.pixelTop;
  this.z = c.style.zIndex;
}

function populateColor()
{
  var r,g,b,l,n;
  var arr = new Array("FF","33","99");
  
  l = arr.length;
  //gcolor[0] = "#000000"
  n = 0;
  for (r=0;r<l;r++)
    for (g=0;g<l;g++)
      for (b=0;b<l;b++)
      {
        gcolor[n"#" + arr[r+ arr[g+ arr[b];
        if (gcolor[n!= "#333333"n++; //omit the blackish color
      }
}

function isWin()
{
  for (i=0;i<gblocks.length;i++//check each block
  {
    n = gblocks[i][0]//first cell
    oldx = (n % glevel* gdt;
    oldy = (parseInt(n / glevel)) * gdt;   

    c = eval("a" + gblocks[i][0]);
    if (c.style.pixelLeft != oldx || c.style.pixelTop != oldy)
      return false;
  }
  return true;
}

//inclusive of low, excludes hi
function rand(low,hi)
{
  return Math.floor((hi-low)*Math.random()+low)
}

function getLeft()
{
}

function moveBlock(cell,x,y)
{
  var i, max, b, c, n, xoff, yoff;
  
  max = glevel * glevel;
  n = parseInt(cell.id.substr(1));
  xoff = x - cell.style.pixelLeft - gleft - parseInt(gdt/2+ document.body.scrollLeft;
  yoff = y - cell.style.pixelTop - gtop - parseInt(gdt/2+ document.body.scrollTop;
  b = gblocks[a[n]];
  for (i=0;i < b.length;i++)
  {
    c = eval("a" + b[i]);
    c.style.pixelLeft += xoff;
    c.style.pixelTop += yoff;  
  }  
}

function fnMouseDown(obj)
{
  var b, c, n;
  
  if (event.button == 1)
  {
    gdrag = true;
    gcellid = obj.id;
    
    max = glevel * glevel;
    n = parseInt(obj.id.substr(1));    
    b = gblocks[a[n]];
    gzmax++;
    for (i=0;i < b.length;i++)
    {
      c = eval("a" + b[i]);
      c.style.zIndex = gzmax;
    }  
  }
}

function fnMouseMove()
{
  if (gdrag)
    moveBlock(document.getElementById(gcellid),event.clientX,event.clientY);
}

function fnMouseUp()
{
  var c, n, oldx, oldy, newx, newy;

  if (!gdragreturn;

  c = eval(gcellid);
  n = parseInt(gcellid.substr(1));   
  oldx = (n % glevel* gdt;
  oldy = (parseInt(n / glevel)) * gdt;   
  newx = c.style.pixelLeft;
  newy = c.style.pixelTop;
  if (Math.abs(oldx - newx< gdt/&& Math.abs(oldy - newy< gdt/2)
  {
    moveBlock(c,oldx + gdt/+ gleft - document.body.scrollLeft, oldy + gdt/+ gtop -  + document.body.scrollTop);
    if (chkAnim.checked)
      setTimeout("animate(" + n + ",0)",80);
    else
    {
      if (isWin()) 
      {
        if (confirm("!! C O N G R A T S !!nYou have done it!nnPress OK to play again."))
          createBlocks();
        else
          quitGame();
      }    
    }
  }
  gdrag = false;
  gcellid = "";  
}

function animate(num,count)
{
  var b;
  
  count++;

  b = gblocks[a[num]];
  
  if (count < 5)
  {
    for (i=0;i < b.length;i++)
    {
      c = eval("a" + b[i]);
      c.style.backgroundColor = gcolor[count];
    }    
    setTimeout("animate(" + num + "," + count + ")",200);
  }
  else
  {
    for (i=0;i < b.length;i++)
    {
      c = eval("a" + b[i]);
      c.style.backgroundColor = gcolor[a[num]];
    }    
    if (isWin()) 
    {
      if (confirm("!! C O N G R A T S !!nYou have done it!nnPress OK to play again."))
        createBlocks();
      else
        quitGame();
    }       
  }
}

function isOk(cellnum)
{
  var i, x, y, max, xx, yy;
  
  if (a[cellnum!= -1return false;
  
  x = cellnum % glevel;
  y = parseInt(cellnum / glevel);

  if (x == || x == glevel-1return false;
  if (y == || y == glevel-1return false;
    
  //look for all cells around the selected cell to see if any are not empty
//  for(xx=x-1;xx<=x+1;xx++)
//    for(yy=y-1;yy<=y+1;yy++)
//      if (a[yy*glevel + xx] != -1) return false;
  if (a[(y+1)*glevel + x!= -|| a[(y-1)*glevel + x!= -||
      a[y*glevel + x + 1!= -|| a[y*glevel + x - 1!= -1return false;
  
  return true;
}

function setBorder()
{
  var i, x, y, max, bstyle="1px solid black", c;
  
  max = glevel * glevel;
  
  for (i=0;i<max;i++)
  {    
    x = i % glevel;
    y = parseInt(i / glevel);
    c = eval("a" + i);
     
    if ((y == 0|| (y != && a[(y-1)*glevel+x]!=a[i])) c.style.borderTop = bstyle;
    if ((y == glevel-1|| (y != glevel-&& a[(y+1)*glevel+x]!=a[i])) c.style.borderBottom = bstyle;
    if ((x == 0|| (x != && a[y*glevel+x-1]!=a[i])) c.style.borderLeft = bstyle;
    if ((x == glevel-1|| (x != glevel-&& a[y*glevel+x+1]!=a[i])) c.style.borderRight = bstyle;    
  }
}

function createBlocks()
{
  var i, max, x, y, rr, done, j, tries;
  
  divMain.style.display = "none";
  
  glevel = parseInt(selLevel.value);
  gdt = parseInt(gboardwidth / glevel);
  board.style.pixelLeft = gleft;
  board.style.pixelTop = gtop;
  
  max = glevel * glevel;
  a = new Array(max);
  
  for (i=0;i<max;i++a[i= -1;
  
  for (i=0;i<glevel;i++)
  {
    tries = 0;
    do
    {
      rr = rand(0,max);
      tries++;
    }
    while(!isOk(rr&& tries < glevel*glevel && a[rr]!=-1);
    a[rr= i;
  }
  do
  {
    //draw();
    //if (!confirm("Continue?")) break;
    done = true;
    for (i=0;i<max;i++)
    {
      if (a[i== -1//found an empty cell
      {
        done = false;
      }
      else
      {
        growCell(i);
      }
    }        
  }  
  while (!done);
  draw();
  setBorder();
  storeBlocks();
  shuffle();
  divSub.style.display = "block";  
}

function unit()
{
  //return (rand(0,2) == 0) ? -1 : 1;
  return rand(-1,2);
}

function growCell(cellnum)
{
  var x, y, cn, nx, ny, n;
  
  cn = cellnum;
  x = cn % glevel;
  y = parseInt(cn / glevel);
  
  nx = unit();
  
  if (nx != 0)
  {
    if (x + nx < 0nx = 0;
    else if (x + nx > glevel - 1nx = glevel - 1;

    n = y * glevel + x + nx;
    if (a[n== -1a[n= a[cn];
  }
  
  ny = unit();

  if (ny != 0)
  {
    if (y + ny < 0ny = 0;
    else if (y + ny > glevel - 1ny = glevel - 1;
  
    n = (y + ny* glevel + x;
    if (a[n== -1a[n= a[cn];
  }
}

function shuffle()
{
  for (i=0;i<glevel;i++)
  {
    moveBlock(eval("a" + gblocks[i][0]),rand(gboardwidth + gleft,1.5*gboardwidth + gleft),rand(gtop,gboardwidth/+ gtop));
  }
}

function draw()
{
  var i, x, y, max, s;
  
  max = glevel * glevel;
  
  s = "";
  for (i=0;i<max;i++)
  {
    x = i % glevel;
    y = parseInt(i / glevel);
    
    s = s + '<div id=a' + i + ' style="position:absolute;width:' + gdt + 'px;height:' + gdt
        + 'px;left:' + (x*gdt) + 'px;top:' + (y*gdt) + 'px;background-color:' + gcolor[a[i]]
        + ';z-index:' + a[i] + '" onmousedown="fnMouseDown(this);"></div>';
  }
  gzmax = glevel;
  board.style.width = glevel * gdt;
  board.style.height = glevel * gdt;
//  s += '<div class=capt2 style="position:relative;top=-20px">Drag the pieces onto the square using the mouse...</div>';
  board.innerHTML = s;
}

function quitGame()
{
  divSub.style.display = "none";
  divMain.style.display = "block";
}

function init()
{
  populateColor();
  //createBlocks();
  document.onmousemove = "fnMouseMove()";
  document.onmouseup = "fnMouseUp()";
  toggleHelp();
}
//-->
</SCRIPT>
</head>
<body bgcolor="black" text="white" onload="init()" onmousemove="fnMouseMove()" onmouseup="fnMouseUp()"
 background="images/bkg.gif">
<body bgcolor="black" text="white" onload="toggleHelp();stopGame()" background="images/bkg.gif">
<center>
<h1>JS Games!</h1>
<span class=msg>Copyright &copy; 2002-2004 Arun Narayanan</span><br>

<br>&nbsp;
<div id=divMain>

<table width="450" class=fra cellpadding=cellspacing=border=0><tr><td>

<table width=100% cellpadding=cellspacing=0>
<tr><td colspan=class=bnotehead height=31>Important Note:</td></tr>
<tr><td class=bnote valign=top>This game is written entirely using JavaScript. It requires Internet Explorer 5.0 or above
for proper functioning.
</td>
</tr></table>

</td></tr></table>
<br>

<table width=620 height=47 border=cellpadding=cellspacing=0>
<tr><td colspan=height=16></td></tr>
<tr>
<td width=8>&nbsp;</td><td class=h2 align=center width=98%>Place It</td>
<td align=right valign=bottom><input type=button id=butHelp value="Hide Help" class="but" onclick="toggleHelp()"></td>
<td width=8>&nbsp;</td>
</tr>
</table>

<table id=help width=620 border=cellpadding=cellspacing=0>
<tr><td height="10"></td></tr>
<tr><td class=help>
<ol>
<li>Choose the number of pieces for the puzzle from the drop down.</li>
<li>Press the "Start Game" button.</li>
<li>Drag the coloured pieces onto the black square.</li>
<li>An option is provided to blink the pieces when placed correctly.</li>
<li>Use the 'Quit Game' button during the game to end game or to play a new game.</li>
</ol>
</td></tr>
</table>

<table width=620 border=cellpadding=cellspacing=0>
<tr><td height=29><td valign=middle align=center>
<h3>Recreate the square from the crazy pieces...</h3>
</td></tr>
</table>
<p>
<span class=capt1>Choose No. of Pieces:</npan>&nbsp;
<select id=selLevel>
<script>for (i=8;i<=20;i++document.write("<option value='" + i + "'>" + i);</script>
</select>&nbsp;
<input class=but type=button value="Start Game" onclick="createBlocks();">
<p>&nbsp;<p>&nbsp;<p>&nbsp;
</center>

<br>
</div>

</center>
<div id=divSub style="display:none;">
&nbsp;&nbsp;&nbsp;&nbsp;<input type=button class=but value="Quit Game" onclick="quitGame()">&nbsp;
&nbsp;<input type=checkbox checked id=chkAnim>
<label for=chkAnim class=h3>Blink pieces when correctly placed.</label>
<div class=capt2>&nbsp;&nbsp;&nbsp;&nbsp;Drag the pieces onto the square using the mouse...</div>
<div id=board style="border:1px solid white;background-color:black;position:absolute"></div>
<p>
</div>
<!--<textarea rows=cols=70 cols id=txta></textarea>-->
</body>
</html>


           
       



-

Leave a Comment / Note


 
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo Page Components
» Game