HTML Canvas Animation Gravity

Description

HTML Canvas Animation Gravity

View in separate window 

<!doctype html>
<html lang="en">
<head>


</head>/* w  w  w.  ja va2 s . co  m*/
<body>
<canvas id="canvasOne" width="500" height="200">
Your browser does not support the HTML 5 Canvas. 
</canvas>
<script type="text/javascript">
    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);

      if (ball.y + ball.radius <= theCanvas.height) {
        ball.velocityy += gravity;
      } else {
        ball.velocityx = 0;
        ball.velocityy = 0;
        ball.y = theCanvas.height - ball.radius;

      }

      ball.y += ball.velocityy;
      ball.x += ball.velocityx;

      context.fillStyle = "#000000";
      context.beginPath();
      context.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2, true);
      context.closePath();
      context.fill();

    }
    let speed = 6;

    let gravity = .1;
    let angle = 305;
    let radians = angle * Math.PI / 180;
    let radius = 15;
    let vx = Math.cos(radians) * speed;
    let vy = Math.sin(radians) * speed;

    theCanvas = document.getElementById('canvasOne');
    context = theCanvas.getContext('2d');

    let p1 = {
      x : 20,
      y : theCanvas.height - radius
    };
    let ball = {
      x : p1.x,
      y : p1.y,
      velocityx : vx,
      velocityy : vy,
      radius : radius
    };

    function gameLoop() {
      window.setTimeout(gameLoop, 20);
      drawScreen()
    }

    gameLoop();
  </script>

</body>
</html>



PreviousNext

Related