HTML5 Game - Oscillating a bubble

Introduction

The following creates an oscillating bubble using the principles of harmonic oscillation and canvas transformations.

Demo

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

      let widthScale = Math.sin(animationController.getTime() / 200) * 0.1 + 0.9;
      let heightScale = -1 * Math.sin(animationController.getTime() / 200) * 0.1 + 0.9;

      // clear
      animationController.clear();
      
      //draw
      context.beginPath();
      context.save();
      context.translate(canvas.width / 2, canvas.height / 2);
      context.scale(widthScale, heightScale);
      context.arc(0, 0, 65, 0, 2 * Math.PI, false);
      context.restore();
      context.fillStyle = "#8ED6FF";
      context.fill();
      context.lineWidth = 2;
      context.strokeStyle = "#555";
      context.stroke();
      
      context.beginPath();
      context.save();
      context.translate(canvas.width / 2, canvas.height / 2);
      context.scale(widthScale, heightScale);
      context.arc(-30, -30, 15, 0, 2 * Math.PI, false);
      context.restore();
      context.fillStyle = "white";
      context.fill();
   }
   constructor(){
      this.x = 0;
      this.y = 20;
      this.width = 10;
      this.height = 10;

      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 stretch a bubble horizontally, translate the context to the center of the canvas, scale the context horizontally, and then draw a bubble.

To stretch a bubble vertically, translate it to the center of the canvas, scale the context vertically, and then draw the bubble.

HTML5 Game - Oscillating a bubble

Introduction

Demo

Note

Related Topic