S2JS - How to fall and bounce convincingly : Starting motion

We'll tidy up by moving some of the code into the preface and postscript areas, just so it's clearer which bits we're working on.

We'll also give MyBall some velocity.

We've given it an x-velocity of 3 pixels per frame, and a y-velocity of 1 pixel per frame, so it moves across the screen more rapidly than it moves downward. Feel free to try different values for the x and y velocities. Whatever you try, it always moves in a straight line.

Note it pretty quickly moves outside the visible portion of the canvas. If you want to see it again, just make a trivial change to the code so the program reloads. Over-typing a space or even just pressing the Shift key will do fine.

<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 } 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>