Marbles : Game « Page Components « JavaScript DHTML

JavaScript DHTML
1. Ajax Layer
2. Data Type
3. Date Time
4. Development
5. Document
6. Dojo toolkit
7. Event
8. Event onMethod
9. Ext JS
10. Form Control
11. GUI Components
12. HTML
13. Javascript Collections
14. Javascript Objects
15. Javascript Properties
16. jQuery
17. Language Basics
18. Mochkit
19. Mootools
20. Node Operation
21. Object Oriented
22. Page Components
23. Rico
24. Scriptaculous
25. Security
26. SmartClient
27. Style Layout
28. Table
29. Utilities
30. Window Browser
31. YUI Library
Java
Java Tutorial
Java Source Code / Java Documentation
Java Open Source
Jar File Download
Java Articles
Java Products
Java by API
Photoshop Tutorials
Maya Tutorials
Flash Tutorials
3ds-Max Tutorials
Illustrator Tutorials
GIMP Tutorials
C# / C Sharp
C# / CSharp Tutorial
C# / CSharp Open Source
ASP.Net
ASP.NET Tutorial
JavaScript Tutorial
JavaScript Reference
HTML / CSS
HTML CSS Reference
C / ANSI-C
C Tutorial
C++
C++ Tutorial
Ruby
PHP
Python
Python Tutorial
Python Open Source
SQL Server / T-SQL
SQL Server / T-SQL Tutorial
Oracle PL / SQL
Oracle PL/SQL Tutorial
PostgreSQL
SQL / MySQL
MySQL Tutorial
VB.Net
VB.Net Tutorial
Flash / Flex / ActionScript
VBA / Excel / Access / Word
XML
XML Tutorial
Microsoft Office PowerPoint 2007 Tutorial
Microsoft Office Excel 2007 Tutorial
Microsoft Office Word 2007 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
www.java2java.com | Contact Us
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.