Exercise : Bouncing Ball

Create a page which contains an animated bouncing ball. You are given ball.html and ball.css, and you will write ball.js. (sample solution)

• The bounce area is 600px by 400px, and the ball is a 40px square.
• Every frame of animation (every 20ms), apply a "gravity" to the ball and increase its downward speed by 1.
• If the ball hits the ground, make it "bounce" up at 3/4 the velocity it previously had.
• Center the ball within the ballarea and use that element's width/height as boundaries.
• Optional- Make the code generic enough to work with any size ball and any size bounce area (ie don't hard code those numbers)

Exercise Solution

var ballY = 0;
var ballVelocity = 0;

window.onload = function() {
	var ball = document.getElementById("ball");
	ball.style.top = ballY + "px";
	ball.style.left = 600/2 - 40/2 + "px";
	setInterval(update, 20);
};

function update() {
	var ball = document.getElementById("ball");
	ball.style.top = ballY + "px";
	ballY = Math.min(ballY + ballVelocity, 360);
	ballVelocity += 1;

	if (ballY >= 360) {
		ballVelocity = parseInt(-3 * ballVelocity / 4);
	}
}