Game: Place It (IE only)
<!----------------------------------------------------------------\
| |
| Fair License |
| |
| JS Games :: Place It |
| Copyright (C) 2002-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[i] = new 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[k] = new clsCell(num,i);
c = this.cells[k];
if (c.left < this.left) this.left = c.left; //leftmost element
if (c.top < this.top) this.top = c.top; //topmost element
if (c.right > this.right) this.right = c.right; //rightmost element
if (c.bottom > this.bottom) this.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 (!gdrag) return;
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/2 && Math.abs(oldy - newy) < gdt/2)
{
moveBlock(c,oldx + gdt/2 + gleft - document.body.scrollLeft, oldy + gdt/2 + 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!\n\nPress 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!\n\nPress OK to play again."))
createBlocks();
else
quitGame();
}
}
}
function isOk(cellnum)
{
var i, x, y, max, xx, yy;
if (a[cellnum] != -1) return false;
x = cellnum % glevel;
y = parseInt(cellnum / glevel);
if (x == 0 || x == glevel-1) return false;
if (y == 0 || y == glevel-1) return 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] != -1 || a[(y-1)*glevel + x] != -1 ||
a[y*glevel + x + 1] != -1 || a[y*glevel + x - 1] != -1) return 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 != 0 && a[(y-1)*glevel+x]!=a[i])) c.style.borderTop = bstyle;
if ((y == glevel-1) || (y != glevel-1 && a[(y+1)*glevel+x]!=a[i])) c.style.borderBottom = bstyle;
if ((x == 0) || (x != 0 && a[y*glevel+x-1]!=a[i])) c.style.borderLeft = bstyle;
if ((x == glevel-1) || (x != glevel-1 && 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 < 0) nx = 0;
else if (x + nx > glevel - 1) nx = glevel - 1;
n = y * glevel + x + nx;
if (a[n] == -1) a[n] = a[cn];
}
ny = unit();
if (ny != 0)
{
if (y + ny < 0) ny = 0;
else if (y + ny > glevel - 1) ny = glevel - 1;
n = (y + ny) * glevel + x;
if (a[n] == -1) a[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/2 + 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 © 2002-2004 Arun Narayanan</span><br>
<br>
<div id=divMain>
<table width="450" class=fra cellpadding=0 cellspacing=0 border=0><tr><td>
<table width=100% cellpadding=2 cellspacing=0>
<tr><td colspan=2 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=0 cellpadding=0 cellspacing=0>
<tr><td colspan=3 height=16></td></tr>
<tr>
<td width=8> </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> </td>
</tr>
</table>
<table id=help width=620 border=0 cellpadding=0 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=0 cellpadding=0 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>
<select id=selLevel>
<script>for (i=8;i<=20;i++) document.write("<option value='" + i + "'>" + i);</script>
</select>
<input class=but type=button value="Start Game" onclick="createBlocks();">
<p> <p> <p>
</center>
<br>
</div>
</center>
<div id=divSub style="display:none;">
<input type=button class=but value="Quit Game" onclick="quitGame()">
<input type=checkbox checked id=chkAnim>
<label for=chkAnim class=h3>Blink pieces when correctly placed.</label>
<div class=capt2> 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=8 cols=70 cols id=txta></textarea>-->
</body>
</html>
Related examples in the same category
