HTML5 Game - Multiple Balls Bouncing with a Dynamically Resized Canvas

Description

Multiple Balls Bouncing with a Dynamically Resized Canvas
Demo

<!doctype html>
<html lang="en">
<head>
<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded, false);  
function eventWindowLoaded() {/*from   w w w . ja v a2s  .  com*/
  canvasApp();
}

function canvasApp() {
  
   formElement = document.getElementById("canvasWidth")
  formElement.addEventListener('change', canvasWidthChanged, false);  
  
  formElement = document.getElementById("canvasHeight")
  formElement.addEventListener('change', canvasHeightChanged, false);

  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);
    
    //Place balls
    
    context.fillStyle = "#000000";
    let ball;
    
    for (let i =0; i <balls.length; i++) {
      ball = balls[i];
      ball.x += ball.xunits;
      ball.y += ball.yunits;
      
      context.beginPath();
      context.arc(ball.x,ball.y,ball.radius,0,Math.PI*2,true);
      context.closePath();
      context.fill();
    
      if (ball.x > theCanvas.width || ball.x < 0 ) {
        ball.angle = 180 - ball.angle;
        updateBall(ball);
      } else if (ball.y > theCanvas.height || ball.y < 0) {
        ball.angle = 360 - ball.angle;
        updateBall(ball); 
      }
    }
        
  }
  
  function updateBall(ball) {
    
    ball.radians = ball.angle * Math.PI/ 180;
    ball.xunits = Math.cos(ball.radians) * ball.speed;
    ball.yunits = Math.sin(ball.radians) * ball.speed;
  
  }
  
  let numBalls = 500 ;
  let maxSize = 8;
  let minSize = 5;
  let maxSpeed = maxSize+5;
  let balls = new Array();
  let tempBall;
  let tempX;
  let tempY;
  let tempSpeed;
  let tempAngle;
  let tempRadius;
  let tempRadians;
  let tempXunits;
  let tempYunits;
  
  theCanvas = document.getElementById('canvasOne');
  context = theCanvas.getContext('2d');
  
  for (let i = 0; i < numBalls; i++) {
    tempRadius = Math.floor(Math.random()*maxSize)+minSize;
    tempX = tempRadius*2 + (Math.floor(Math.random()*theCanvas.width)-tempRadius*2);
    tempY = tempRadius*2 + (Math.floor(Math.random()*theCanvas.height)-tempRadius*2);
    tempSpeed = maxSpeed-tempRadius;
    tempAngle =  Math.floor(Math.random()*360);
    tempRadians = tempAngle * Math.PI/ 180;
    tempXunits = Math.cos(tempRadians) * tempSpeed;
    tempYunits = Math.sin(tempRadians) * tempSpeed;
    
    tempBall = {x:tempX,y:tempY,radius:tempRadius, speed:tempSpeed, angle:tempAngle, xunits:tempXunits, yunits:tempYunits}
    balls.push(tempBall);
  }
  
  function gameLoop() {
      window.setTimeout(gameLoop, 20);
      drawScreen()  
    }
    
  gameLoop();
  
  
  function canvasWidthChanged(e) {
    let target =  e.target;
    theCanvas.width =  target.value;
    drawScreen();
  }
  
  function canvasHeightChanged(e) {
    let target =  e.target;
    theCanvas.height =  target.value;
    drawScreen();
  }
  
}

</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>
<form>
  
 Canvas Width:  <input type="range" id="canvasWidth"
       min="0"
       max="1000"
       step="1"
       value="500"/>
 <br>      
   Canvas Height:  <input type="range" id="canvasHeight"
       min="0"
       max="1000"
       step="1"
       value="500"/>
 <br>      
  
  </form>
</div>

</body>
</html>
HTML5 Game - Multiple Balls Bouncing with a Dynamically Resized Canvas

Description

Demo

Related Topic
