HTML Canvas Animation Bouncing Ball with Gravity

Description

HTML Canvas Animation Bouncing Ball with Gravity

View in separate window 

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

</head>//w w w .ja  va 2 s .c o m
<body>
<canvas id="canvasOne" width="500" height="500">
 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);

      ball.velocityy += gravity;

      if ((ball.y + ball.radius) > theCanvas.height) {
        ball.velocityy = -(ball.velocityy)
      }
      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 = 5;

    let gravity = .1;
    let angle = 295;
    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