HTML5 Game - Randomizing shapes and changing its direction for animation

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

Introduction

The following code shows how to create random shapes. 

let Shape = function(x, y, width, height) {  
        this.x = x;  
        this.y = y;  
        this.width = width;  
        this.height = height;  
};  

for (let i = 0; i < 10; i++) {  
        let x = Math.random()*250;  
        let y = Math.random()*250;  
        let width = height = Math.random()*50;  
        shapes.push(new Shape(x, y, width, height));  
};

In the following code, the shapes will move randomly forward and backward, appearing to wiggle on the spot.

Demo

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {  
        let canvas = $("#myCanvas");
        let context = canvas.get(0).getContext("2d");
          //from  www .j  a v  a2  s  .  co m
        let canvasWidth = canvas.width();
        let canvasHeight = canvas.height();
        
        let playAnimation = true;
        
        let startButton = $("#startAnimation");
        let stopButton = $("#stopAnimation");
        
        startButton.hide();
        startButton.click(function() {
          $(this).hide();
          stopButton.show();
          
          playAnimation = true;
          animate();
        });
        
        stopButton.click(function() {
          $(this).hide();
          startButton.show();
          
          playAnimation = false;
        });
        let Shape = function(x, y, width, height) {
          this.x = x;
          this.y = y;
          this.width = width;
          this.height = height;
          
          this.radius = Math.random()*30;
          this.angle = 0;
        }
        let shapes = new Array();
        for (let i = 0; i < 10; i++) {
          let x = Math.random()*250;
          let y = Math.random()*250;
          let width = height = Math.random()*30;
          shapes.push(new Shape(x, y, width, height));
        }
        function animate() {
          context.clearRect(0, 0, canvasWidth, canvasHeight);
          let shapesLength = shapes.length;
          for (let i = 0; i < shapesLength; i++) {
            let tmpShape = shapes[i];
            tmpShape.x++;
            tmpShape.x += 2;
            tmpShape.y++;
            tmpShape.x += Math.random()*2-1;
            tmpShape.y += Math.random()*2-1;            
            context.fillRect(tmpShape.x, tmpShape.y, tmpShape.width, tmpShape.height);
          };
          
          if (playAnimation) {
            setTimeout(animate, 33);
          };
        };
        animate();
      });
    </script>
  </head>
  
  <body>
    <canvas id="myCanvas" width="500" height="500">
      <!-- Insert fallback content here -->
    </canvas>
    <div>
      <button id="startAnimation">Start</button>
      <button id="stopAnimation">Stop</button>
    </div>
  </body>
</html>

Related Topic