HTML5 Game - Moving object in a Simple Spiral

Introduction

The following code shows how to move object on spiral.

We increase the radius of the flying path.

Demo

<!doctype html>
<html lang="en">
<head>
<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded, false);  
function eventWindowLoaded() {// ww w  .j  a  va 2  s  . c  o  m
  canvasApp();
}
function canvasApp() {
  function  drawScreen () {
    context.fillStyle = '#EEEEEE';
    context.fillRect(0, 0, theCanvas.width, theCanvas.height);
    //Box
    context.strokeStyle = '#000000'; 
    context.strokeRect(1,  1, theCanvas.width-2, theCanvas.height-2);
    
  
    ball.x = circle.centerX + Math.cos(circle.angle) * circle.radius;
    ball.y = circle.centerY + Math.sin(circle.angle) * circle.radius;
    circle.angle += ball.speed;
    circle.radius += radiusInc; 
    
    context.fillStyle = "#000000";
    context.beginPath();
    context.arc(ball.x,ball.y,15,0,Math.PI*2,true);
    context.closePath();
    context.fill();
  }
  
  let radiusInc = 2;
  let circle = {centerX:250, centerY:250, radius:2, angle:0, radiusInc:2}
  let ball = {x:0, y:0,speed:.1};
  let points = new Array();
  
    theCanvas = document.getElementById('canvasOne');
  context = theCanvas.getContext('2d');
  
  function gameLoop() {
      window.setTimeout(gameLoop, 20);
      drawScreen()  
    }
    
  gameLoop();
  
  
}


</script>

</head>
<body>  
<div style="position: absolute; top: 50px; left: 50px;">

<canvas id="canvasOne" width="500" height="500">
 Your browser does not support the HTML 5 Canvas. 
</canvas>
</div>



</body>
</html>

HTML5 Game - Moving object in a Simple Spiral

Introduction

Demo

Related Topic