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_2  
Updated Dec 14, 2007 by satoshi....@gmail.com

Game Programmig II - custom effect

While the first game template is a good start, it's not exciting. Don't get me wront. I am not taking about the lack of score or game logic, I am talking about the lack of excitement in the animation.

So, I added a tiny bit of animation effect. See the example and experience the difference.

How was it? Did you notice the significant difference in your emotion when you play? This is the power of animation effect, which is actually much more important than many people think.

Here is the 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, effect:'bounce', y:top, duration:msec });
      }
    }
  }
  anime.pause(false);
}

iAnime.effects.bounce = function(e,t,x,y) {
    this.move(e,t,x,y);
}

iAnime.effects.bounce.ratio = function(t) {
   return (t<0.6) ? ((t*t)/0.6) : (0.90+2.5*(t-0.8)*(t-0.8));
} 
  </script>
</head>
<body onload="fillCells()"></body>
</html>

I made only two changes. First, I added "effect:'bounce'" to the parameter object I give to add method.

anime.add({ element:obj, effect:'bounce', y:top, duration:msec });

Then, I defined two additional functions, which extends the capability of the animation engine by telling what 'bounce' effect means.

iAnime.effects.bounce = function(e,t,x,y) {
    this.move(e,t,x,y);
};

iAnime.effects.bounce.ratio = function(t) {
   return (t<0.6) ? ((t*t)/0.6) : (0.90+2.5*(t-0.8)*(t-0.8));
} 

The function iAnime.effects.bounce actually performs the exact same thing as the default implement, but iAnime.effects.bounce.ratio modifies the ratio parameter (which changes from 0 to 1.0 during the animtion). By slighly modifying the ratio parameter using this simple formula, we have achieved the 'bounce' effect.

Powered by Google Project Hosting