S2JS - How to fall and bounce convincingly : Simple bouncing

This is pretty easy in code.

To bounce off the left side of the canvas, we check if the left side of the ball is less than the left side of the canvas (zero), and if it is, we reverse the x-velocity.

if (this.x < 0) {this.velocity_x= -this.velocity_x};

To bounce off the right side of the canvas, we check if the right side of the ball (which is it's x-position plus its width) is greater than the width of the canvas, and if it is, we reverse the x-velocity.

if (this.x + this.MyImg.width > myCanvas.width) {this.velocity_x= -this.velocity_x};

Works pretty well, right?

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