Marbles : Game : Page Components JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » Page Components » Game »

 

Marbles




<!----------------------------------------------------------------
|                                                                 |
|  Fair License                                                   |
|                                                                 |
|  JS Games :: Marbles                                            |
|  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 :: 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 + "&nbsp;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 * + 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 !! *********nn" +
          ((marbles_left > 5? msgs[0: msgs[marbles_left]) "nn" +
          "No. of marbles left: " + marbles_left + "n" +
          "Time Elapsed: " + gtime + " secs"
         );
    gtime = 0;
  }
}

function canMove(n)
{
    if (b[n!= MARBLEreturn 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 * + 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!=-1setMarble(currcell);
    setHilite(n);
    currcell = n;
  }
  if (b[n== HOLE)
  {
    if (currcell == -1)
    {
      alert("Please select a marble to move");
      return;
    }

    if (currcell - n == 2move(currcell,n+1,n);     
    else if (n - currcell == 2move(currcell,n-1,n);
    else if (n - currcell == 18move(currcell,n-9,n);     
    else if (currcell - n == 18move(currcell,n+9,n);
    else alert("Sorry. Invalid move!nn" +
               "You can move the selected marble only ton" +
               "a hole that is exactly one marble away.nn" +
               "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 != nullhit(parseInt(d[1]));
}

function newGame()
{
  if (gintervalid==-1//game is stopped, so start it.
  {
    if (game_over || (gtime != && !confirm("Do you wish to continue with the old game?nnClick '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 * + 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>&nbsp;</td></tr>" 
/*               "<tr><td class=elapsed>&nbsp;</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]==MARBLEs += '<img id=c' + i + ' src="marbles/marble_hole.gif" ' + func + '>';
        if (b[i]==HOLEs += '<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 &copy; 2002-2004 Arun Narayanan</span><br>
<a class=notelnk href="http://jsgames.sourceforge.net/">http://jsgames.sourceforge.net/</a>

<br>&nbsp;
<table width="450" class=fra cellpadding=cellspacing=border=0><tr><td>

<table width=100% cellpadding=cellspacing=0>
<tr><td colspan=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 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=background='marbles/bkg4.gif' cellspacing=cellpadding=height=480 width=480>
<tr><td valign=center align=center id=boardarea>
</td></tr></table>
<p>
</center>

<br>
</body>
</html>
           
       

Download : Download nav_JavaScriptGame.zip nav_JavaScriptGame.zip


-

Leave a Comment / Note


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

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo Page Components
» Game