HTML5 Game - Create object for animation

Description

Create object for animation
Demo

<!DOCTYPE html>

<html>
   <head>
      <title>Making things move</title>
      <meta charset="utf-8">
      /*from  w w w.  java2  s.  c om*/
      <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;
            };
            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++;
                  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>
HTML5 Game - Create object for animation

Description

Demo

Related Topic
