S2JS - How to fall and bounce convincingly : Multiple bouncing objects

We'll move our MySprite definition up to the preface area, just to tidy things up.

Let's make several bouncing objects, each with different bounciness. This really shows the power of objects and the way they can hide complexity and let us deal with more complex code without our brains exploding.

Try some experiments

Try increasing gravity
Try reducing gravity
Try zero gravity
Try a bounciness of 1.0
Try a bounciness of 1.1

<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, bounce) { this.x = 0; this.y = 0; this.visible= true; this.velocity_x = 0; this.velocity_y = 0; this.bounciness = bounce; 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}; // bounce off sides if (this.x + this.MyImg.width > myCanvas.width) {this.velocity_x= -this.velocity_x}; if (this.y + this.MyImg.height > myCanvas.height) { var overrun = this.y + this.MyImg.height - myCanvas.height; // calculate overrun this.velocity_y = this.velocity_y - (overrun / this.velocity_y * gravity); //adjust this.y = this.y - overrun; // be exactly at the bottom this.velocity_y= -this.velocity_y * this.bounciness; // bounce off the bottom this.velocity_x= this.velocity_x * this.bounciness // also slow horizontally } else { // accelerate by gravity, but only if we're not actually bouncing at this moment this.velocity_y = this.velocity_y + gravity; } } var gravity = 0.25; var tennis= new MySprite("http://s2js.com/img/etc/tennis-ball.png", 0.8); tennis.velocity_x= 3; var bball= new MySprite("http://s2js.com/img/etc/basketball.png", 0.5); bball.velocity_x= 3; var fruit= new MySprite("http://s2js.com/img/etc/tomato.png", 0); fruit.velocity_x= 3; function Do_a_Frame () { ctx.clearRect(0, 0, myCanvas.width, myCanvas.height); bball.Do_Frame_Things(); fruit.Do_Frame_Things(); tennis.Do_Frame_Things(); } setInterval(Do_a_Frame, 1000/FPS); // set my frame renderer </script> </body> </html>