S2JS - A scrolling game - Flappy Bird : The bird goes up and down

Here's those fragments added to our program.

Press a key (or click the mouse, or touch the screen) and check the bird leaps upward, and then falls back down.

The physics doesn't accurately simulate our world, but our goal here is to accurately simulate Flappy Bird!

<html> <head> <title>Flappy Bird</title> </head> <body> <canvas id="myCanvas" width=320 height=480 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 ; this.angle = 0; // How many degrees we are rotated this.flipV = false; // Are we flipped vertically this.flipH = false; // Are we flipped horizontally } MySprite.prototype.Do_Frame_Things = function() { ctx.save(); ctx.translate(this.x + this.MyImg.width/2, this.y + this.MyImg.height/2); ctx.rotate(this.angle * Math.PI / 180); // rotating if (this.flipV) ctx.scale(1,-1); // flipping if (this.flipH) ctx.scale(-1,1); if (this.visible) ctx.drawImage(this.MyImg, -this.MyImg.width/2, -this.MyImg.height/2); this.x = this.x + this.velocity_x; this.y = this.y + this.velocity_y; // move the thing ctx.restore(); // unwarp the context } function ImagesTouching(thing1, thing2) { // // This function detects whether two MySprites are touching - very useful function // if (!thing1.visible || !thing2.visible) return false; if (thing1.x >= thing2.x + thing2.MyImg.width || thing1.x + thing1.MyImg.width <= thing2.x) return false; if (thing1.y >= thing2.y + thing2.MyImg.height || thing1.y + thing1.MyImg.height <= thing2.y) return false; return true; } var jump_amount = -10; // how much the bird jumps var max_fall_speed= +10; // how fast the bird can fall var acceleration = 1; // how quickly it goes from jumping to falling var game_mode = ''; // what state is the game in function make_bird_slow_and_fall() { if (bird.velocity_y < max_fall_speed) { bird.velocity_y = bird.velocity_y + acceleration; } if (bird.y > myCanvas.height - bird.MyImg.height) { // gone off bottom bird.velocity_y = 0; game_mode = 'over'; } } function Do_a_Frame () { ctx.clearRect(0, 0, myCanvas.width, myCanvas.height); bird.Do_Frame_Things(); make_bird_slow_and_fall(); } function Got_Player_Input(MyEvent) { bird.velocity_y = jump_amount; } addEventListener("touchstart", Got_Player_Input); addEventListener("mousedown", Got_Player_Input); addEventListener("keydown", Got_Player_Input); var bird = new MySprite("http://s2js.com/img/etc/flappybird.png"); bird.x = myCanvas.width / 3; bird.y = myCanvas.height / 2; setInterval(Do_a_Frame, 1000/FPS); // set my frame renderer </script> </body> </html>