HTML5 Game - Canvas Animation Linear Motion

  1. HOME
  2. HTML5 Game
  3. Canvas Animation
  4. Linear Motion

Creating a linear motion

The following code creates a linear motion animation by moving a box from the left of the canvas to the right of the canvas.

Demo

ResultView the demo in separate window 

<!DOCTYPE HTML>
<html>
    <head>
        <script>
      //from www .j a  v a2 s.  c  o  m
class MyObject{
   draw(animationController){
      let canvas = animationController.getCanvas();
      let context = animationController.getContext();
      let distanceEachFrame = this.linearSpeed * animationController.getTimeInterval() / 1000;
      if (this.x < canvas.width - this.width) {
         this.x += distanceEachFrame;
      }
      else {
         animationController.stop();
      }      
      animationController.clear();
      context.beginPath();
      context.fillStyle = "red";
      context.fillRect(this.x, this.y, this.width, this.height);
   }
   constructor(){
      this.x = 0;
      this.y = 20;
      this.width = 10;
      this.height = 50;
      this.linearSpeed = 100; // pixels / second
   }
   
}    
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>

Related Topics