S2JS - How to fall and bounce convincingly : The framework

Have a look at the program below. It should all be pretty familiar stuff:

An HTML wrapper, and a canvas
A ctx variable, which is our drawing context for the canvas
An FPS variable, where we hold our desired number of frames per second
A MySprite object, with x and y properties, and velocity properties
A Do_Frame_Things method of MySprite, that updates the position according to the velocity and draws the image
A variable called MyBall, which is a MySprite and is an image of a tennis ball
A frame renderer called Do_a_Frame that clears the canvas and then calls MyBall.Do_Frame_Things
A timer that calls Do_a_Frame repeatedly, according to FPS

Because we haven't made it do anything else yet, the ball just sits motionless with it's top-left corner positioned at x=0 y=0.

<html> <head> <title> Bouncing objects</title> </head> <body> <canvas id="myCanvas" width=350 height=300 style="background-color:powderblue"> </canvas> <script> var ctx = myCanvas.getContext("2d"); // Get the drawing context for the canvas var FPS = 40; // How many frames per second function MySprite (img_url) { this.x = 0; this.y = 0; this.visible= true; this.velocity_x = 0; this.velocity_y = 0; this.MyImg = new Image(); this.MyImg.src = img_url ; } MySprite.prototype.Do_Frame_Things = function() { if (this.visible) ctx.drawImage(this.MyImg, this.x, this.y); // draw the thing this.x = this.x + this.velocity_x; this.y = this.y + this.velocity_y; // move the thing } var MyBall= new MySprite("http://s2js.com/img/etc/tennis-ball.png"); function Do_a_Frame () { ctx.clearRect(0, 0, myCanvas.width, myCanvas.height); MyBall.Do_Frame_Things(); } setInterval(Do_a_Frame, 1000/FPS); // set my frame renderer </script> </body> </html>