JavaScript Animation- Bouncing ball

1) Add a border to the ball and a background color (of

your choice) to the ball. You may also change the color

of the container if you wish. (1)

2) Make the ball bounce from the top left to the bottom

middle to the top right of the container. Keep the ball in

the container, coming as close to the edge without

going over - within 20 pixels of the edge.

The code is given to you under DOM Animation. You

need to think of what is happening. Change the pos

variable of x and add a y variable. (this will help you

keeping track of the x and y coordinates. You may need

to tweak the code to make it work. )

I would start by doing this one half at a time. Figure out

the ball moving down to the middle of the bottom.

Then, add moving it back to the top-right.

To give an example of how x and y will be used, this will

affect these two lines as well as your if then statements.

elem.style.top = x + 'px';

elem.style.left = y + 'px';

You'll need to check not only where x hits the wall but

also where y hits the wall. This will take some thought. But, I know you can do it!

You must use the template given to you at w3schools from the DOM Animation section of the tutorial.

Do not go out online and search for a solution and use it. There are other ways to do this. You must

use these functions given to you and add to the code to find THIS solution!