Flappy Bird Clones :) Everyone's been freaking out about that stupid "Flappy Bird" game being removed. So, your task is to crate a Flappy Bird Clone game. Its really simple. Here are the guide lines:


It can use either ascii art or real images
You can make your "bird" flap with either a click or a key press
It should try to be as short as possible, hence the code-golf tag.


Here's an example: http://www.reddit.com/r/learnprogramming/comments/1xiimx/i_couldnt_sleep_so_i_cloned_your_flappy_bird/

In order to be a "Flappy Bird Clone," your game needs to have the following:


A bird, or other character
The "bird" should move slightly up when a key is pressed or you click/tap
If there is no clicking/tapping/etc, the "bird" should rapidly move downwards
Pipes or other obstacles should move leftwards on the screen, creating the illusion that the bird is moving
The pipes should have a small gap for the bird to fly through.
Every time you pass through a gap between pipes, your score increases by 1.
If you hit a pipe or the ground, the game ends and your score is displayed.


It doesn't really need to be a "bird" or a "pipe," it can all be ascii. Here's a very minimal example of a flappy bird screen:


/-----[4]-----\
| ||      ||  |
| ||      ¯¯  |
| ||  O>      |
| ¯¯      __  |
| __      ||  |
| ||      ||  |
\-------------/
Javascript + jQuery (997)

Tested on Chrome 32, Firefox 27, IE9  

Open Console (F12) from this page and copy/paste the following code.  

scroll(0,0);h=1/30;p=[];r=320;n=0;w=80;f=2.5;o=80;t=setInterval;$('#question').children().hide().end().append('&lt;p id="m"&gt;&lt;/p&gt;').append('&lt;p id="s"&gt;&lt;/p&gt;').click(function(){v=100});$('#s').css({position:'relative',margin:'auto',border:'2px solid',width:200,height:r}).append('&lt;img id="b" src="//i.imgur.com/4w6Vgud.gif"/&gt;');$('&lt;style&gt;.p{width:1px;border:1px solid;position:absolute}&lt;/style&gt;').appendTo('head');function u(){$('#m').text('score '+m+' (max '+n+')')}function i(){x=r/2;v=0;m=0;p.length=0;u()}i();t("v-=h*100;x+=h*v;if(x&lt;0||x&gt;r)i();$('.p').remove();for(j=0;j&lt;p.length;j++){p[j].r+=h*w;if(p[j].r&gt;200){p.shift();j--;m++;if(m&gt;n)n=m;u();}else if((p[j].r&gt;165&amp;&amp;p[j].r&lt;185)&amp;&amp;(x&lt;p[j].h||x&gt;p[j].h+o))i();else{$('&lt;div class=p&gt;&lt;/div&gt;').appendTo('#s').css({bottom:0,right:p[j].r,height:p[j].h});$('&lt;div class=p&gt;&lt;/div&gt;').appendTo('#s').css({bottom:p[j].h+o,right:p[j].r,height:320-p[j].h-o})}}$('#b').css({position:'absolute',left:0,bottom:x-25})",h*1e3);t("p.push({h:Math.random()*(r-o),r:0})",f*1e3)



  
  The game replace the question block of this page.
  You have to click on the game frame to make the bird fly.


Ungolfed and commented version :

$('#question').children().hide();
$('#question').append('&lt;div id="score"&gt;&lt;/div&gt;');
$('#question').append('&lt;div id="scene"&gt;&lt;/div&gt;');
$('#scene').css({position:'relative',margin:'auto',border:'2px solid black',width:'200',height:'320'});
$('#scene').append('&lt;img id="bird" src="http://fc01.deviantart.net/fs71/f/2014/037/d/0/pixel_art___flappy_bird_by_hipsterli-d75dkyr.gif"&gt;&lt;/img&gt;');
$('#bird').css({display:'block',position:'absolute',left:0,'pointer-events':'none',margin:'0 auto'});
$(window).scrollTop(0);

//CONFIGURATION
var dt=1/30,      //delta timestep (typically 30Hz)
    pipevel=80,   //pipe velocity (in pixels per second)
    pipefreq=2.5, //pipe spawn frequency (in second)
    holesize=80,  //hole size (in pixels)
    gravity=-100, //gravity (in pixels per square second)
    punchvel=100; //velocity punch when clicked (in pixels per second)

var x, y, pipes=[], roof=$('#scene').height(), score, maxscore=0;

function updateScore() {
  $('#score').text('Score : '+score+' (max : '+maxscore+')');
}

function init() {
  x=roof/2; //position
  v=0; //velocity
  score=0;
  pipes.length=0;

  updateScore();
}

function step() {
  //euler integration
  v+=dt*gravity;
  x+=dt*v;

  if (x&lt;0 || x&gt;roof)  init();

  //pipes
  $('.pipe').remove();
  for (i=0; i&lt;pipes.length; i++) {
    pipes[i].rightpos += dt*pipevel;
    if (pipes[i].rightpos &gt; 200) {
      pipes.shift();
      i--;
      score++;
      if (score&gt;maxscore) maxscore=score;
      updateScore();
    } else if ((pipes[i].rightpos &gt; 165 &amp;&amp; pipes[i].rightpos &lt; 185) &amp;&amp; (x &lt; pipes[i].holepos || x &gt; pipes[i].holepos+holesize)) {
      //collision
      init();
    } else {
      $('#scene').append('&lt;div class="pipe" style="background-color:#000; width:1px;border:1px solid #000; position:absolute; bottom:0; right:'+Math.floor(pipes[i].rightpos)+'px; height:'+pipes[i].holepos+'px"&gt;&lt;/div&gt;');
      $('#scene').append('&lt;div class="pipe" style="background-color:#000; width:1px;border:1px solid #000; position:absolute; bottom:'+(pipes[i].holepos+holesize)+'; right:'+Math.floor(pipes[i].rightpos)+'px; height:'+(320-(pipes[i].holepos+holesize))+'px"&gt;&lt;/div&gt;');
    }
  }

  $('#bird').css({bottom:Math.floor(x)-25});

  setTimeout(step, dt*1000);
}

$('#question').click(function() {
  v=punchvel;
});

function addPipe() {
  pipes.push({holepos:Math.random()*(roof-holesize),rightpos:0});
  setTimeout(addPipe, pipefreq*1000);
}

init();
setTimeout(step, dt*1000);
setTimeout(addPipe, pipefreq*1000);


You can easily modify the configuration (gravity, pipe velocity...), have a look at commented version.