HTML5 Game - Bouncing Off Walls

  1. HOME
  2. HTML5 Game
  3. Canvas Animation
  4. Bounce

Introduction

The following code shows that a ball bounces off walls using the rules of physics.

Demo

ResultView the demo in separate window 

<!DOCTYPE html>  
<html> 
<head> 
<style> 
#canvas { // w ww . ja  v a  2  s .  c  o  m
  border:1px solid #03F; 
  background:#CFC; 
} 
</style> 
</head> 
<body> 
<canvas id="canvas" width="640" height="480"></canvas> 
<script> 
  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 += xunits;
    ball.y += yunits;
    context.fillStyle = "#000000";
    context.beginPath();
    context.arc(ball.x,ball.y,15,0,Math.PI*2,true);
    context.closePath();
    context.fill();
    
    if (ball.x > theCanvas.width || ball.x < 0 ) {
      angle = 180 - angle;
      updateBall();
    } else if (ball.y > theCanvas.height || ball.y < 0) {
      angle = 360 - angle;
      updateBall(); 
    }
        
  }
  
  function updateBall() {
    radians = angle * Math.PI/ 180;
    xunits = Math.cos(radians) * speed;
    yunits = Math.sin(radians) * speed;
  }
  
  let speed = 5;
  let p1 = {x:20,y:20};
  let angle = 35;
  let radians =0;
  let xunits = 0;
  let yunits = 0; 
  let ball = {x:p1.x, y:p1.y};
  updateBall();
  
    theCanvas = document.getElementById('canvas');
  context = theCanvas.getContext('2d');
  
  function gameLoop() {
      window.setTimeout(gameLoop, 20);
      drawScreen()  
    }
    
  gameLoop();

</script> 
</body> 


</html>

Related Topic