S2JS - How to fall and bounce convincingly : Kick-along by keys

It's pretty easy using the keyboard (although if you haven't done the previous topic on "Responding to keystrokes", you'll be lost, so maybe you'll need to backtrack).

The upshot is:

Add a listener for keystrokes
Depending on which key is pressed, add some velocity in the appropriate direction

This is quite cool, for example, you can press the right key a couple of times to impart even more velocity. You can also press the up key for a falling ball to slow its descent. You can even hurl a ball at the ground and have it rebound higher than its starting height, just like in the real world.

Remember you'll need to click on the canvas before it starts receiving your keystrokes

<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 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 tennis= new MySprite("http://s2js.com/img/etc/tennis-ball.png", 0.8); tennis.velocity_x= 3; function Do_a_Frame () { ctx.clearRect(0, 0, myCanvas.width, myCanvas.height); tennis.Do_Frame_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 setInterval(Do_a_Frame, 1000/FPS); // set my frame renderer </script> </body> </html>