HTML5 Game - Flying Along Circle

Animating and along a circle

Demo

<!DOCTYPE html>

<html>
   <head>
      <title>Making things move</title>
      <meta charset="utf-8">
      /*  www .  j  a v a2s  . 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;
               
               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() {
               // Clear
               context.clearRect(0, 0, canvasWidth, canvasHeight);
               
               // Loop through every object
               let shapesLength = shapes.length;
               for (let i = 0; i < shapesLength; i++) {
                  let tmpShape = shapes[i];
                  let x = tmpShape.x+(tmpShape.radius*Math.cos(tmpShape.angle*(Math.PI/180)));
                  let y = tmpShape.y+(tmpShape.radius*Math.sin(tmpShape.angle*(Math.PI/180)));
                  tmpShape.angle += 5;
                  if (tmpShape.angle > 360) {
                     tmpShape.angle = 0;   
                  }              
                  context.fillRect(x, 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 - Flying Along Circle

Animating and along a circle

Demo

Related Topics
