S2JS - A scrolling game - Flappy Bird : Running the nodding algorithm

Here it is running. The effect is pretty pleasing for not much code.

Try changing some of the numbers to alter the details of the effect.

The "-15" is how much the bird tilts upward when it's moving upward.
The "70" is the maximum amount of downward tilt it can take on during a plummet.
The "4" is how rapidly the bird goes from tilting up to tilting down.

<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 Got_Player_Input(MyEvent) { bird.velocity_y = jump_amount; } addEventListener("touchstart", Got_Player_Input); addEventListener("mousedown", Got_Player_Input); addEventListener("keydown", Got_Player_Input); 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 make_bird_tilt_appropriately() { if (bird.velocity_y < 0) { bird.angle= -15; // going up, point up } else if (bird.angle < 70) { // max downward tilt is 70 degrees bird.angle = bird.angle + 4; // going down, point more and more down } } function Do_a_Frame () { ctx.clearRect(0, 0, myCanvas.width, myCanvas.height); bird.Do_Frame_Things(); make_bird_slow_and_fall(); make_bird_tilt_appropriately(); } 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>