Marbles
<!----------------------------------------------------------------\
| |
| Fair License |
| |
| JS Games :: Marbles |
| 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 :: Marbles !!!</title>
<style>
body,h1,h2,h3,.msg,td {font-family:Verdana,Comic Sans MS,Arial;}
body {margin:0px;}
.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;}
.menubar {padding:0px; margin:0px; brder-top:1px solid white; brder-bottom:1px solid white; background-color:#606060; background-image:url(images/menu.gif);}
.msg {font-size:8pt; font-weight:bold;}
.info {font-family:Arial; font-size:8pt; color:#C0FFC0; font-weight:bold;}
.score {font-family:Arial; font-size:12pt; color:#ffffff; font-weight:bold;}
.button {font-family:Arial; font-size:8pt; background-color:#5581FF; color:#ffffff; font-weight:bold; text-align:center;}
.elapsed {font-family:Arial; font-size:12pt; color:#ffFF00; font-weight:bold;}
</style>
<script>
var INVALID=0, MARBLE=1, HOLE=2;
var a = new Array(
0,0,0,0,0,0,0,0,0,
0,0,0,1,1,1,0,0,0,
0,0,0,1,1,1,0,0,0,
0,1,1,1,1,1,1,1,0,
0,1,1,1,2,1,1,1,0,
0,1,1,1,1,1,1,1,0,
0,0,0,1,1,1,0,0,0,
0,0,0,1,1,1,0,0,0,
0,0,0,0,0,0,0,0,0
);
var b = new Array();
var marbles_left = 32;
var currcell = -1;
var gintervalid = -1, gtime = 0;
var game_over = true;
function tick()
{
elapsed.innerHTML = gtime + " sec" + (gtime==1?"":"s");
gtime++;
}
function copyArray(src,dest)
{
for(var ii=0;ii<src.length;ii++) dest[ii]=src[ii];
}
function cell(i)
{
return eval('c' + i);
}
function cellxy(x,y)
{
return eval('c' + (y * 9 + x) );
}
function setHilite(i)
{
cell(i).src = "marbles/marble_hilite.gif";
}
function setMarble(i)
{
cell(i).src = "marbles/marble_hole.gif";
}
function setHole(i)
{
cell(i).src = "marbles/hole.gif";
}
function move(src,middle,dest)
{
var msgs = new Array("Hey, that's a lazy game! You need more practice!",
"WOW! You cleared all the marbles!\nYou must be a Genius!!",
"That's a great show!\nYou're brilliant!",
"Good show! You are intelligent.\n" +
"A little more effort and you'll be at the top!",
"Hmmm, not bad! But I'm sure you can do better!",
"You surely can improve! Learn the tricks as you go!");
setHole(src);
setHole(middle);
setMarble(dest);
b[src] = b[middle] = HOLE;
b[dest] = MARBLE;
currcell = -1;
marbles_left--;
score.innerHTML = marbles_left + "/32";
game_over = isGameOver();
if (game_over)
{
clearInterval(gintervalid);
gintervalid = -1;
newbut.value = "S T A R T";
alert("********* !! G A M E O V E R !! *********\n\n" +
((marbles_left > 5) ? msgs[0] : msgs[marbles_left]) + "\n\n" +
"No. of marbles left: " + marbles_left + "\n" +
"Time Elapsed: " + gtime + " secs"
);
gtime = 0;
}
}
function canMove(n)
{
if (b[n] != MARBLE) return false;
//does a marble plus hole combination exists left, right, up or down?
return (b[n-2]==HOLE && b[n-1]==MARBLE) ||
(b[n+2]==HOLE && b[n+1]==MARBLE) ||
(b[n-18]==HOLE && b[n-9]==MARBLE) ||
(b[n+18]==HOLE && b[n+9]==MARBLE);
}
function isGameOver()
{
var moveable = false;
for(y=1;y<8;y++)
for(x=1;x<8;x++)
if (canMove(y * 9 + x)) return false;
return true;
}
function hit(n)
{
if (gintervalid == -1) //if game is not running, start it
{
gintervalid = setInterval("tick()",1000);
tick();
newbut.value = "S T O P !";
}
if (b[n] == MARBLE)
{
if (currcell!=-1) setMarble(currcell);
setHilite(n);
currcell = n;
}
if (b[n] == HOLE)
{
if (currcell == -1)
{
alert("Please select a marble to move");
return;
}
if (currcell - n == 2) move(currcell,n+1,n);
else if (n - currcell == 2) move(currcell,n-1,n);
else if (n - currcell == 18) move(currcell,n-9,n);
else if (currcell - n == 18) move(currcell,n+9,n);
else alert("Sorry. Invalid move!\n\n" +
"You can move the selected marble only to\n" +
"a hole that is exactly one marble away.\n\n" +
"Diagonal moves are not allowed.");
}
}
function dropped()
{
var imgid = document.elementFromPoint(event.clientX,event.clientY).id;
var d = imgid.match(/c(\d+)/); //extract value for i from the cell id
if (d != null) hit(parseInt(d[1]));
}
function newGame()
{
if (gintervalid==-1) //game is stopped, so start it.
{
if (game_over || (gtime != 0 && !confirm("Do you wish to continue with the old game?\n\nClick 'Cancel' to start a new game.")))
{
gtime = 0;
boardarea.innerHTML=drawBoard();
game_over = false;
}
gintervalid = setInterval("tick()",1000);
tick();
newbut.value = "S T O P !";
}
else //game running, stop it
{
//stop it!
clearInterval(gintervalid);
gintervalid = -1;
newbut.value = "S T A R T";
}
}
function drawBoard()
{
var i, x, y, s, func;
copyArray(a,b);
marbles_left = 32;
s = "<table border=0 cellspacing=0 cellpadding=0>";
for(y=1;y<8;y++)
{
s += "<tr>";
for(x=1;x<8;x++)
{
i = y * 9 + x;
func = 'onmousedown="hit(' + i + ')"'
+ ' ondragend="dropped()"';
if (i==10 || i == 16 || i==55 || i==60)
{
s += "<td width=120 height=120 colspan=2 rowspan=2 valign=bottom align=right>";
if (i == 60)
s += "<table cellpadding=0 cellspacing=0><tr><td class=info align=right>Marbles Left:</td></tr>" +
"<tr><td id=score class=score align=center>32/32</td></tr>" +
"<tr><td id=elapsed class=elapsed align=center> </td></tr>" +
/* "<tr><td class=elapsed> </td></tr>" + */
"<tr><td align=center>" +
"<input id=newbut type=button class=button value='S T A R T' onclick='newGame()'>" +
"<td></tr></table>";
s += "</td>";
}
else if (b[i] != INVALID)
{
s += "<td>";
if (b[i]==MARBLE) s += '<img id=c' + i + ' src="marbles/marble_hole.gif" ' + func + '>';
if (b[i]==HOLE) s += '<img id=c' + i + ' src="marbles/hole.gif" ' + func + '>';
s += "</td>";
}
}
s += "</tr>";
}
s += "</table>";
return s;
}
</script>
</head>
<body bgcolor="black" text="white" background="images/bkg.gif"
onload="boardarea.innerHTML=drawBoard();">
<center>
<h1>JS Games!</h1>
<span class=msg>Copyright © 2002-2004 Arun Narayanan</span><br>
<a class=notelnk href="http://jsgames.sourceforge.net/">http://jsgames.sourceforge.net/</a>
<br>
<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 background="images/framebase.gif">Important Note:</td></tr>
<tr><td class=bnote valign=top>This game is written entirely using JavaScript. It requires Internet Explorer Version 4 or above
for proper functioning.
</td>
<td>
<a href="http://www.microsoft.com/windows/ie/" target="_blank"><img border="0" src="images/ie.gif" alt="Download Internet Explorer"></a>
</td></tr></table>
</td></tr></table>
<br>
<table border=0 background='marbles/bkg4.gif' cellspacing=0 cellpadding=0 height=480 width=480>
<tr><td valign=center align=center id=boardarea>
</td></tr></table>
<p>
</center>
<br>
</body>
</html>
JavaScriptGame.zip( 115 k)Related examples in the same category