<HTML>
<HEAD>
<TITLE>Number Blocks</TITLE>
<!-------------------- Design -------------------->
<STYLE>
.bigcell {
BORDER-RIGHT: #6699ff 5px solid; BORDER-TOP: #6699ff 5px solid;
BORDER-LEFT: #6699ff 5px solid; BORDER-BOTTOM: #6699ff 5px solid;
BACKGROUND-COLOR: #6699ff; TEXT-ALIGN: center
}
.cell {
BORDER-RIGHT: #6699ff 2px solid; BORDER-TOP: #6699ff 2px solid;
FONT-WEIGHT: bold; FONT-SIZE: 10pt;
BORDER-LEFT: #6699ff 2px solid; WIDTH: 55px;
COLOR: #000000; BORDER-BOTTOM: #6699ff 2px solid;
FONT-FAMILY: Verdana, Arial; HEIGHT: 55px;
BACKGROUND-COLOR: #6633ff; TEXT-ALIGN: center
}
.hole {a
WIDTH: 55px;
HEIGHT: 55px;
BACKGROUND-COLOR: #6699ff;
TEXT-ALIGN: center
}
BODY {
FONT-FAMILY: Verdana,Comic Sans MS,Arial
}
H1 {
FONT-FAMILY: Verdana,Comic Sans MS,Arial
}
H2 {
FONT-FAMILY: Verdana,Comic Sans MS,Arial
}
H3 {
FONT-FAMILY: Verdana,Comic Sans MS,Arial
}
.msg {
FONT-FAMILY: Verdana,Comic Sans MS,Arial
}
capt1 {
FONT-FAMILY: Verdana,Comic Sans MS,Arial
}
capt2 {
FONT-FAMILY: Verdana,Comic Sans MS,Arial
}
BODY {
MARGIN: 0px
}
H1 {
FONT-WEIGHT: bold; FONT-SIZE: 28pt; MARGIN-BOTTOM: 0px
}
H2 {
FONT-WEIGHT: bold; FONT-SIZE: 16pt; MARGIN: 0px
}
H3 {
FONT-WEIGHT: bold; FONT-SIZE: 8pt; MARGIN: 0px
}
.msg {
FONT-WEIGHT: bold; FONT-SIZE: 8pt
}
.tab {
CURSOR: hand
}
.capt1 {
FONT-WEIGHT: bold; FONT-SIZE: 10pt
}
.capt2 {
FONT-WEIGHT: bold; FONT-SIZE: 9pt
}
.capt3 {
FONT-WEIGHT: bold; FONT-SIZE: 14pt; COLOR: #0000ff
}
.capt4 {
FONT-WEIGHT: bold; FONT-SIZE: 10pt; COLOR: #000000
}
.but {
FONT-WEIGHT: bold; FONT-SIZE: 10pt; HEIGHT: 35px; BACKGROUND-COLOR: #3399cc
}
.lion {
COLOR: #0099cc
}
</STYLE>
<!-------------------- Design End-------------------->
</HEAD>
<BODY text=black background="Number Blocks_files/RetroTealBlogBG.jpg"
onload=loadBoard(3)>
<SCRIPT>
var gsize, ghrow, ghcol, gtime, gmoves, gintervalid=-1, gshuffling;
//Timer handler
var MAX_TIME = (60*1000)*10;
var gameTimer = 0;
//random number between low and hi
function r(hi,low)
{
return Math.floor((low-hi)*Math.random()+hi);
}
//random number between 1 and hi
function r1(low)
{
return Math.floor((low-1)*Math.random()+1);
}
//random number between 0 and hi
function r0(low)
{
return Math.floor((low)*Math.random());
}
function startGame()
{
shuffle();
gtime = 0;
gmoves = 0;
// Get level
var level = document.getElementById('level').value;
// Calculate game time
gameTimer = parseInt(level)*50;
tickTime();
//speed of time
gintervalid = setInterval("tickTime()",100);
}
//rules
function showrules() {
rules = 'Number Blocks \n\n'
+ '--Choose a level from 1 to 7\n\n'
+ '--The goal of this game is to arrange the blocks \n\n'
+ '--To start the game, press the "Start Game" button. Then the timer will be started.\n\n'
+ '--In order to aim your goal to arrange blocks you must 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 any guess to move those blocks.\n\n'
+ '--You can move multiple blocks (in the same row or column that can be move by replacing the position of any number block in any postion of the "hole") by clicking the farthest block that you need to be moved\n'
+ '--You can also click "Shuffle" button if you want to rearrange the blocks.\n\n'
+ '--And if you want to stop the game just click "Stop Game" button.\n\n\n'
+ '--Order all the numbers in the shortest time possible with a minimum number of moves...'
+ 'When you are finished in arranging the blocks your time and speed will be display and you can now continue and choose another level...';
alert(rules);
}
//stop game
function stopGame()
{
if (gintervalid==-1) return;
clearInterval(gintervalid);
fldStatus.innerHTML = "";
gintervalid=-1;
}
//alert when the time is over!
function tickTime()
{
if(gtime == gameTimer) {
alert("Timer over .... Game over!!");
clearInterval(gintervalid)
gintervalid=-1;
if (gintervalid==-1 && !gshuffling)
{
alert('Please press the "Start Game" button to start.')
return;
}
}
showStatus();
gtime++;
}
//check if the block is in the right position
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();
gshuffling = false;
// display when the game complete
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 += "<tr><td align=center class=capt4>You can now continue and choose another level!</td></tr>";
s += "</table>";
fldStatus.innerHTML = s;
}
//display the time and moves
function showStatus()
{
fldStatus.innerHTML = "Time: " + gtime + "/" + gameTimer + " secs Moves: " + gmoves
}
//display table
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);
}
}
}
//alert when the blocks press yet game not started!
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;
}
}
//shuffle the blocks
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;
}
//load the board
function loadBoard(size)
{
gsize = size;
board.innerHTML = showTable(gsize);
setHole(gsize-1,gsize-1);
}
</SCRIPT>
<CENTER>
<HR>
<H1 class=lion>Number Blocks</H1>
<BR>
<HR>
<DIV id=test></DIV>
<TABLE cellPadding=4>
<TBODY>
<TR>
<TD align=middle>
<!--level button from 1-7-->
<B class=lion>Choose Level:</B>
<SELECT id=level onchange=loadBoard(parseInt(level.value))>
<OPTION value=3 selected>1</OPTION>
<OPTION value=4>2</OPTION>
<OPTION value=5>3</OPTION>
<OPTION value=6>4</OPTION>
<OPTION value=7>5</OPTION>
<OPTION value=8>6</OPTION>
<OPTION value=9>7</OPTION></SELECT>
</TD>
</TR>
<TR>
<TD align=middle>
<BR>
<BR>
<BR>
<BR>
<INPUT class=but onclick=startGame(); type=button value="Start Game"> <!-- Start Button -->
<INPUT class=but onclick=shuffle(); type=button value="Shuffle"> <!-- Shuffle Button -->
<INPUT class=but onclick=stopGame(); type=button value="Stop Game"> <!-- Stop Button -->
<INPUT class=but onclick=showrules(); type=button value="Rules"> <!-- Rules Button -->
<BR>
<BR>
<TR>
<TD class=capt2 id=fldStatus align=middle>
<BR>
</TD>
</TR>
</TBODY>
</TABLE>
<BR>
<BR>
<BR>
<DIV id=board>
</DIV>
<BR>
<BR>
<BR>
<BR>
<BR>
</CENTER>
</BODY>
</HTML>
phoenx 0 Light Poster
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.