Boing 747

by Hensixteen

HTML

<canvas id="canvas" width="500" height="500" style="border:1px solid black"></canvas>

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var rad = 10;
var x = canvas.width/2;
var y = rad+10;
var direction = ((Math.PI/2));
var negativeX = 10;
var maxBounces = 35;
var bounceCount = 1;
var velocity = 0;
var maxVelocity = 10;
var minVelocity = -10;

ctx.beginPath();
ctx.arc(x, y, rad, 0, 2*Math.PI);
ctx.fill();
ctx.stroke();


setInterval(function() {

if(bounceCount <= maxBounces) {

	if(y>=(canvas.height-rad)) {
  		y--;
  		bounceCount++;
  		velocity = minVelocity/bounceCount;
      negativeX = (negativeX * (0.9));
      
      if(bounceCount==1.5) {
      	negativeX = 10;
      	bounceCount = 1;
        direction = (Math.random() * Math.PI);
        }
  }
  
  if(x>=(canvas.width-rad)) {
  	x-=5;
    negativeX = (negativeX * (-0.5));
  }
  
  if(x<=rad) {
  	x+=5;
    negativeX = (negativeX * (-0.5));
  }
  
  velocity+=0.05;
	y+=velocity;
  x+=(negativeX * Math.cos(direction));
  
  if(velocity>=maxVelocity) {
  	velocity--
  }
  else if(velocity<=minVelocity) {
  	velocity++;
  }
  
  ctx.clearRect(0, 0, 500, 500);
  ctx.beginPath();
	ctx.arc(x, y, rad, 0, 2*Math.PI);
	ctx.fill();
	ctx.stroke();
  
  click=false;
 }

}, 5);

document.getElementById("canvas").onclick = function() {bounceAgain()};
function bounceAgain() {
	
  bounceCount = 0.5;
  
}