S2JS - How to fall and bounce convincingly : The finished program

Here's the finished program, including a couple of lines so it occupies the entire browser window.

If you haven't already registered a userid, click the button to do so. Otherwise click the
button to log on and copy this program to your own work area.

Once it's in your work area, you can access it from any internet device by entering its web address:

http://s2js.com / userid / bounce
(userid is your S2JS userid)

Try running it on a touch-sensitive device such as an iPad or other tablet, and try the swipes.

See if you can make changes. Try a different image, with different bounciness, or different amounts of gravity.

<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 var gravity = 0.25; 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 off the bottom this.velocity_y = this.velocity_y - (overrun / this.velocity_y * gravity); // adjust the bounce velocity by the overrun 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 tennis= new MySprite("http://s2js.com/img/etc/tennis-ball.png", 0.8); // Our ball tennis.velocity_x= 3; // Start with a bit of horizontal velocity function Do_a_Frame () { ctx.clearRect(0, 0, myCanvas.width, myCanvas.height); // clear the frame tennis.Do_Frame_Things(); // let the ball do ball-things } function MyKeyDownHandler (MyEvent) { if (MyEvent.keyCode == 37) {tennis.velocity_x = tennis.velocity_x - 10}; // left if (MyEvent.keyCode == 38) {tennis.velocity_y = tennis.velocity_y - 10}; // up if (MyEvent.keyCode == 39) {tennis.velocity_x = tennis.velocity_x + 10}; // right if (MyEvent.keyCode == 40) {tennis.velocity_y = tennis.velocity_y + 10}; // down MyEvent.preventDefault(); } addEventListener("keydown", MyKeyDownHandler); // listen for keystrokes var Touch_Start_x; // Variables to remember where the touch started var Touch_Start_y; function MyTouchStartHandler(MyEvent) { // remember where the touch started var rect = myCanvas.getBoundingClientRect(); // find where the canvas actually is Touch_Start_x = MyEvent.touches[0].clientX - rect.left; // store adjusted result Touch_Start_y = MyEvent.touches[0].clientY - rect.top; MyEvent.preventDefault() } function MyTouchEndHandler(MyEvent) { var rect = myCanvas.getBoundingClientRect(); // find where the canvas actually is var Touch_End_x = MyEvent.changedTouches[0].clientX - rect.left; // calculate adjusted coordinates var Touch_End_y = MyEvent.changedTouches[0].clientY - rect.top; var x_diff = Touch_End_x- Touch_Start_x; // calculate difference between start and end of touch var y_diff = Touch_End_y - Touch_Start_y; if (x_diff < -100) {tennis.velocity_x = tennis.velocity_x - 10}; // Swipe Left if (x_diff > 100) {tennis.velocity_x = tennis.velocity_x + 10}; // Swipe Right if (y_diff > 100) {tennis.velocity_y = tennis.velocity_y + 10}; // Swipe Down if (y_diff < -100) {tennis.velocity_y = tennis.velocity_y - 10}; // Swipe Up MyEvent.preventDefault() } addEventListener("touchstart", MyTouchStartHandler); addEventListener("touchend", MyTouchEndHandler); setInterval(Do_a_Frame, 1000/FPS); // set my frame renderer myCanvas.width = window.innerWidth - 20; // fill the entire browser width myCanvas.height = window.innerHeight - 20; // fill the entire browser height </script> </body> </html>