2. Make a ball bouncing. The ball can be an image (Redball.png as attached). You are welcome draw your own, which might be better. You are expected to submit three files: ball.html, ball.css, and ball.js. You can access its tyle attribute by using document.getElementByID(ball). You can create a .css for the html so that the ball and its box look like this:

The ball should start bouncing as soon as the web page is loaded (look up window.onload). E.g. window.onload = function()

Write two separate .js file and make sure your code can do the following:

1. (4pts) The ball keep bounces at a constant speed without decay( constant bouncing).

2. (3pts) The ball bounces but the speed decays to zero.

3. (3pts)The ball bounces but also moves to the right end of the wall and disappears.

4. (5pts) Modify your code so that when you press the Z key, the ball slows down, and when you press the X key, it speeds up. Once that is working, use C to make the ball smaller and V make it larger.

Hint: the animation is created by changing the position of the ball.

You might find the following code snippets helpful:

var ball = document.getElementById("ball");

ball.style.top = ballY + "px";