S2JS - A scrolling game - Flappy Bird : Running with pipes

Here it is running.

It works pretty well !

We've only have three pipes defined, but obviously it's a simple matter to add more pipes exactly where we want them.

We can design a game of any chosen difficulty.

<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 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 pipe_speed = -2; // how quickly the pipes move left var game_mode = ''; // what state is the game in var pipes = []; // all our pipe-halves 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; } 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 show_the_pipes() { for (var i=0; i < pipes.length; i++) { pipes[i].Do_Frame_Things(); } } function Do_a_Frame () { ctx.clearRect(0, 0, myCanvas.width, myCanvas.height); bird.Do_Frame_Things(); show_the_pipes(); make_bird_slow_and_fall(); make_bird_tilt_appropriately(); } function add_pipe(x_pos, top_of_gap, gap_width) { // First the top pipe var top_pipe = new MySprite(); top_pipe.MyImg = pipe_piece; top_pipe.x = x_pos; top_pipe.y = top_of_gap - pipe_piece.height; top_pipe.velocity_x = pipe_speed; pipes.push(top_pipe); // Then the bottom pipe var bottom_pipe = new MySprite(); bottom_pipe.MyImg = pipe_piece; bottom_pipe.flipV = true; bottom_pipe.x = x_pos; bottom_pipe.y = top_of_gap + gap_width; bottom_pipe.velocity_x = pipe_speed; pipes.push(bottom_pipe ); } function add_all_my_pipes() { add_pipe(500, 100, 140); add_pipe(800, 50, 140); add_pipe(1000, 250, 140); } var pipe_piece = new Image(); pipe_piece.onload = add_all_my_pipes; pipe_piece.src = "http://s2js.com/img/etc/flappypipe.png" ; 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>