HTML5 Game - Canvas Animation Acceleration

Creating acceleration

The following code shows how to accelerate a box downwards due to the force of gravity.
Demo

<!DOCTYPE HTML>
<html>
    <head>
        <script>
class MyObject{//w  w w . j  a  v  a2 s  .c o m
   draw(animationController){
      let canvas = animationController.getCanvas();
      let context = animationController.getContext();

      if (animationController.getTime() > 1000) {
         let speedIncrementEachFrame = this.gravity * animationController.getTimeInterval() / 1000; // pixels / second
         this.vy += speedIncrementEachFrame;
         this.y += this.vy * animationController.getTimeInterval();
         
         if (this.y > canvas.height - this.height) {
             this.y = canvas.height - this.height;
             animationController.stop();
         }
      }
    
      animationController.clear();
      // draw
      context.beginPath();
      context.fillStyle = "blue";
      context.fillRect(this.x, this.y, this.width, this.height);
   }
   constructor(){
      this.x = 0;
      this.y = 20;
      this.width = 10;
      this.height = 10;

      this.gravity = 2; // pixels / second^2
      this.vx = 0;
      this.vy = 0;
      
   }
   
}    
class MyAnimation {
   constructor(canvasId){
        this.canvas = document.getElementById(canvasId);
        this.context = this.canvas.getContext("2d");
        this.t = 0;
        this.timeInterval = 0;
        this.startTime = 0;
        this.lastTime = 0;
        this.frame = 0;
        this.animating = false;
        
        window.requestAnimFrame = (function(callback){
            return window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.oRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            function(callback){
                window.setTimeout(callback, 1000 / 60);
            };
        })();
   }
   getContext(){
      return this.context;
   };

   getCanvas(){
      return this.canvas;
   };

   clear(){
       this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
   };

   setDrawStage(func){
       this.drawStage = func;
   };

   isAnimating = function(){
       return this.animating;
   };

   getFrame(){
      return this.frame;
   };

   start(){
        this.animating = true; 
        let date = new Date();
        this.startTime = date.getTime();
        this.lastTime = this.startTime;
        
        if (this.drawStage !== undefined) {
            this.drawStage();
        }
        
        this.animationLoop();
   };

   stop(){
       this.animating = false;
   };

   getTimeInterval(){
       return this.timeInterval;
   };

   getTime(){
    return this.t;
   };

   getFps(){
      return this.timeInterval > 0 ? 1000 / this.timeInterval : 0;
   };

   animationLoop(){
        let that = this;
        
        this.frame++;
        let date = new Date();
        let thisTime = date.getTime();
        this.timeInterval = thisTime - this.lastTime;
        this.t += this.timeInterval;
        this.lastTime = thisTime;
        
        if (this.drawStage !== undefined) {
            this.drawStage();
        }
        
        if (this.animating) {
            requestAnimFrame(function(){
                that.animationLoop();
            });
        }
    }   
} 
            window.onload = function(){
                let myAnimation = new MyAnimation("myCanvas");
                let canvas = myAnimation.getCanvas();
                let context = myAnimation.getContext();
                let myObject = new MyObject();
                myAnimation.setDrawStage(function(){
                    myObject.draw(myAnimation);
                });
                
                myAnimation.start();
            };
        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
        </canvas>
    </body>
</html>
Note

To create an acceleration, increment the velocity of the box.
We can calculate the new y velocity of the box for each frame by adding the change in velocity due to gravity:
HTML5 Game - Canvas Animation Acceleration

Creating acceleration

Demo

Note

Related Topics
