My favorites | Sign in
Project Home Downloads Wiki Issues Source
READ-ONLY: This project has been archived. For more information see this post.
Search
for
GameProgramming_1  
Updated Nov 30, 2007 by satoshi....@gmail.com

Game Programming I

After reading the very first example, Hello World. You are probably wondering what is coming next. Instead of bothering you with a set of boring list of primitive examples, I will jump into the game programming using iAnime.js, which, I believe, you are interested in.

Let's start with a very simple game template which has 8x8 grid, to where random set of icons will fall from above. When you click one of those icons, it will dissapear, and icons above will fall to fill the gap - which is very hard to explain (see the actual application).

Here is the sample code.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <script src="ianime025.js" type="text/javascript"></script>
  <script type="text/javascript">
var anime = new iAnime();
var iconSize = 40;
var rows = 8;
var cols = 8
var cells = [[],[],[],[],[],[],[],[]];
var images = ["map","photo","clock","ipod","tools","browser","weather","graph"];

function onClick(e)
{
  document.body.removeChild(this);
  cells[this.col][this.row] = null;
  fillCells();
}

function addCell(col, extra)
{
  var obj = document.createElement("img");
  obj.index = Math.floor(Math.random()*8);
  obj.src = "images/"+images[obj.index]+"_40.png";
  obj.style.position = "absolute";
  obj.style.left = (320-iconSize*cols)/2+iconSize*col+"px";
  obj.style.top = (-iconSize*extra)+"px";
  document.body.appendChild(obj);
  obj.onclick = onClick;
  obj.col = col;
  return obj;
}

function fillCells()
{
  anime.pause(true);
  for (var col=0; col<cols; col++) {
    var extra = 0;
    for (var row=0; row<rows; row++) {
      if (!cells[col][row]) {
         var obj = null;
         for (k=row+1; k<rows; k++) {
            if (obj = cells[col][k]) {
               cells[col][k] = null;
               break;
            }
         }
         if (!obj) {
            obj = addCell(col,++extra);
         }
         obj.row = row;
         cells[col][row] = obj;
         var top = 340-(row+1)*iconSize;
         var msec = Math.sqrt(top - obj.offsetTop)*100;
         anime.add({ element:obj, y:top, duration:msec });
      }
    }
  }
  anime.pause(false);
}
  </script>
</head>
<body onload="fillCells()"></body>
</html>

The function fillCells(), which is called on onload event as well as after removing a cell in function onClick(), will check each cell and fills it by either bringing an icon from above or adding a new icon (by calling addCell). It calls the add method of iAnime object for each cell needs to be filled.

It is important to notice that you can just call add method multiple times in order to animate multiple objects concurrently. iAnime.js has been optimized to handle this type of concurrent animations. There is no limit in the number of concurrent animations, especially on PC. If you consider iPhone as a target device, I recommand to keep the number below 30 when the user is interacting (and 100 during the initialization phase). Although iAnime.js is able to animating large number objects concurrently, the animation becomes choppy if you try to animate too many objects at the same time.

Calling pause with false will temporarily stop the internal clock of the animation engine, which allows developers to precisely sychronize the animation of multiple objects. The animation engine store the current timestamp when add method was called, and use it as the starting point when it animates objects. When you are adding multiple objects without pause, the timestamp associated with each animation will be slightly different because of the small amount of time required to run Javascript code between. This small difference becomes noticeable to the user if you move multiple objects into the same direction. Calling pause before and after the series of add method calls will eliminate this side-effect.

Powered by Google Project Hosting