Adding time-based animation

Here are the parts we changed:

• Declaration of the monster object - now the speed is in pixels/s instead of in pixels per frame

// The monster !

var monster = {

   x:10,

   y:10,

   speed:100, // pixels/s this time !

};

• We added a timer(currentTime) function that returns the delta of the time elapsed since its last call

We refer to it from the game loop, to measure the time between frames. Notice that here we pass the delta as a parameter to the updateMonsterPosition call:

function timer(currentTime) {

   var delta = currentTime - oldTime;

   oldTime = currentTime;

   return delta;

}

var mainLoop = function(time){

   //main function, called each frame

   measureFPS(time);

   // number of ms since last frame draw

   delta = timer(time);

   // Clear the canvas

   clearCanvas();

   // draw the monster

   drawMyMonster(monster.x, monster.y);

   // Check inputs and move the monster

   updateMonsterPosition(delta);

   // call the animation loop every 1/60th of second

   requestAnimationFrame(mainLoop);

};

• Finally, we use the time-delta in the updateMonsterPosition(...) function

function updateMonsterPosition(delta) {

   ...

   // Compute the incX and inY in pixels depending

   // on the time elapsed since last redraw

   monster.x += calcDistanceToMove(delta, monster.speedX);

   monster.y += calcDistanceToMove(delta, monster.speedY);

 }