HTML5 Game - Canvas Animation Bounce

Bouncing objects off a boundary

Demo

<!DOCTYPE html>

<html>
  <head>
    <title>Making things move</title>
    <meta charset="utf-8">
    //  w  w  w.  jav a  2 s  . c  o m
    <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");
        
        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.reverseX = true;
          this.reverseY = false;
        };
        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];
            if (!tmpShape.reverseX) {
              tmpShape.x += 2;
            } else {
              tmpShape.x -= 2;
            }
            
            if (!tmpShape.reverseY) {
              tmpShape.y += 2;
            } else {
              tmpShape.y -= 2;
            }
            context.fillRect(tmpShape.x, tmpShape.y, tmpShape.width, tmpShape.height);
            if (tmpShape.x < 0) {
              tmpShape.reverseX = false;
            } else if (tmpShape.x + tmpShape.width > canvasWidth) {
              tmpShape.reverseX = true;
            }            
            if (tmpShape.y < 0) {
              tmpShape.reverseY = false;
            } else if (tmpShape.y + tmpShape.height > canvasHeight) {
              tmpShape.reverseY = true;
            }

          }
          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>
HTML5 Game - Canvas Animation Bounce

Bouncing objects off a boundary

Demo

Related Topics
