We need an editor to write and save a code file. Go to the Start menu, find Assessories, and then the NotePad editor.

Copy the code shown in blue above and paste it into the editor.

Save the file as "Ball1.html" on the desktop. Note: Change "Save as type" from (.txt) to "All Files".*

Go to the desktop, right click on the new file named Ball1.html, and open with Google Chrome.

A web page should appear showing a simple blue circle.

Simple static ball:

Step 2 - Move the ball

Now that we have the circle, let’s try to move it. We’ll replace the hardcoded values of the coordinates in the .arc method (100, 100 — the first two arguments) with variables x and y, which we will then increment by an amount of dx and dy.

Also since we need to redraw the circle at the new positions, we’ll move the code into a function called draw() and call it every 20 ms (milliseconds) using JavaScript ’s setInterval() function.

Try the code below the same way, naming it "Ball2.html". Simply add the new code shown in blue.

This bouncing ball illustrates some fundamental methods used in programs to simulate moving objects. Similar animations are used in movies and game development, and this program could be rather easily extended to build a ping-pong game or a breaker-type of game.

Step 5

Can you try to add some more features?

Change the size of the ball, or the dimensions of the area.

Change the color of the ball whenever it hits the wall.

Adjust the boundary conditions so that the ball changes direction as soon as its edge hits a wall, instead of compressing to the center of the ball.

Draw more than one ball.

Simulate the effects of gravity and friction (the ball's height decreases with each bounce, and the side to side motion slows down)