S2JS - How to fall and bounce convincingly : Rebound problem 1

If you watched that program running for a few seconds, you may have noticed that there's a bit of a problem: the ball rebounds higher than where it started.

Here's the same code, except we've specified a zero x-velocity so it just bounces up and down on the spot, which makes it clearer there's a problem. Real balls don't rebound higher than they started (unless you hurl them down, which we're not doing here).

Our program says things rebound with the same amount of velocity, just in the opposite direction.

So how can this not be working properly?

<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 ; } var gravity = 0.25; 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 this.velocity_y = this.velocity_y + gravity; // accelerate by gravity if (this.x < 0) {this.velocity_x= -this.velocity_x}; if (this.x + this.MyImg.width > myCanvas.width) {this.velocity_x= -this.velocity_x}; if (this.y + this.MyImg.height > myCanvas.height) {this.velocity_y= -this.velocity_y} } var MyBall= new MySprite("http://s2js.com/img/etc/tennis-ball.png"); MyBall.velocity_x= 0; MyBall.velocity_y= 0; MyBall.y= 80; MyBall.x= myCanvas.width / 2; 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>