Marbles : Game « Page Components « JavaScript DHTML

JavaScript DHTML
1. Ajax Layer
2. Data Type
3. Date Time
4. Development
5. Document
6. Event
7. Event onMethod
8. Form Control
9. GUI Components
10. HTML
11. Javascript Collections
12. Javascript Objects
13. Language Basics
14. Node Operation
15. Object Oriented
16. Page Components
17. Security
18. Style Layout
19. Table
20. Utilities
21. Window Browser
Microsoft Office Word 2007 Tutorial
Java
Java Tutorial
Java Source Code / Java Documentation
Java Open Source
Jar File Download
Java Articles
Java Products
Java by API
C# / C Sharp
C# / CSharp Tutorial
ASP.Net
JavaScript Tutorial
JavaScript Reference
HTML / CSS
HTML CSS Reference
C / ANSI-C
C Tutorial
C++
C++ Tutorial
PHP
Python
SQL Server / T-SQL
Oracle PL / SQL
Oracle PL/SQL Tutorial
PostgreSQL
SQL / MySQL
MySQL Tutorial
VB.Net
VB.Net Tutorial
JavaScript DHTML » 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 !! *********\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!= 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!\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 != 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?\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 * + 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>
           
       
JavaScriptGame.zip( 115 k)
Related examples in the same category
1. Chess: Draughts
2. Mine game
3. Word search game
4. Ranisima english
5. Yasminuroban (by Joan Alba Maldonado)
6. Level editor for Yasminuroban by Joan Alba Maldonado
7. js mine sweeper
8. Another tictactoe
9. Jigsaw
10. Game sudoku
11. Game PunkPong
12. Tetris in Javascript
13. Arrange Game
14. Guess Number
15. Tic tac toe
16. Count Game
17.  A JavaScript Hangman Game
18. Game library
19. Type Tutor
20. Game: Place It (IE only)
21. HylZee
ww__w___.__ja___v_a2s.__com | Contact Us
Copyright 2003 - 08 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.