bounce_ball.js

var w = 470;
var h = 235;

var startForce = 0.5;
var gravity = 0.1;
var squash = 0.2;

var p = {x:0, y:0};
var g = {x:0, y:gravity};
var f = {x:startForce, y:0};

reset();

$("#dom").css("width", w +"px");
$("#dom").css("height", h +"px");

$("#dom .ball").css("position", "absolute");
$("#dom .ball").css("top", $("#dom").position().top);
$("#dom .ball").css("left", $("#dom").position().left);


function update(){
	f.x += g.x;
	f.y += g.y;

	var maxY = $("#dom").height() - $("#dom .ball").height()/2;

	if(p.y >= maxY){
		f.y = -f.y*(1 - squash);
	}

	p.x += f.x;
	p.y += f.y;
}

function reset(){
	p = {x:0, y:0};
	g = {x:0, y:gravity};
	f = {x:startForce, y:0};
}

function animate(){
	update();

	if(p.x > $("#dom").width()){
		reset();
	}

	$("#dom .ball").css("left", $("#dom").position().left + p.x);
	$("#dom .ball").css("top", $("#dom").position().top + p.y);
}

setInterval(animate, 1)