The Essential Guide to HTML5

BOUNCING BALL

Code Explanation

There are many ways you can make this application your own. You can select your own image for the ball

and experiment with the colors for the walls, with or without the gradients. You can change the position

and the dimensions of each wall. You can add text and HTML markup to the page. You can change the

look of the form.

You can include more than one ball, keeping track of the positions of each. If you decide to use two balls,

you need two sets of variables and two lines of code for each one line you had before. One systematic

way to do this is to use the search function in the editor to find all instances of ball and, for each line,

substitute two lines, so in place of ballx, you have ball1x and ball2x, and in place of the var ballx =

50; use

var ball1x = 50;

var ball2x = 250;

This puts the second ball 200 pixels over on the canvas.

You would also need a second set of all the comparisons for the walls.