Flappy Bird Clones :)
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('<p id="m"></p>').append('<p id="s"></p>').click(function(){v=100});$('#s').css({position:'relative',margin:'auto',border:'2px solid',width:200,height:r}).append('<img id="b" src="//i.imgur.com/4w6Vgud.gif"/>');$('<style>.p{width:1px;border:1px solid;position:absolute}</style>').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<0||x>r)i();$('.p').remove();for(j=0;j<p.length;j++){p[j].r+=h*w;if(p[j].r>200){p.shift();j--;m++;if(m>n)n=m;u();}else if((p[j].r>165&&p[j].r<185)&&(x<p[j].h||x>p[j].h+o))i();else{$('<div class=p></div>').appendTo('#s').css({bottom:0,right:p[j].r,height:p[j].h});$('<div class=p></div>').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('<div id="score"></div>');
$('#question').append('<div id="scene"></div>');
$('#scene').css({position:'relative',margin:'auto',border:'2px solid black',width:'200',height:'320'});
$('#scene').append('<img id="bird" src="http://fc01.deviantart.net/fs71/f/2014/037/d/0/pixel_art___flappy_bird_by_hipsterli-d75dkyr.gif"></img>');
$('#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<0 || x>roof) init();
//pipes
$('.pipe').remove();
for (i=0; i<pipes.length; i++) {
pipes[i].rightpos += dt*pipevel;
if (pipes[i].rightpos > 200) {
pipes.shift();
i--;
score++;
if (score>maxscore) maxscore=score;
updateScore();
} else if ((pipes[i].rightpos > 165 && pipes[i].rightpos < 185) && (x < pipes[i].holepos || x > pipes[i].holepos+holesize)) {
//collision
init();
} else {
$('#scene').append('<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"></div>');
$('#scene').append('<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"></div>');
}
}
$('#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.
Javascript+jQuery (ASCII Art) - 571 524 491
Open Dev Tools (F12) and run the following code in this page (right now, go ahead!) to make the below demo functional.
l=$('#answer-23452 blockquote pre').click(function(){m=1}),o=[],d=0,e=4,m=1;setInterval(function(){t=Array(153);s=~~(d/10-0.99);d++;d%10?0:o[d+20]=~~(Math.random()*5)+1;for(i=-1;k=o[i+d],i<17;i++)if(k--)for(j=-1;c=j==k||j-k==4?'-':j-k>0&&j-k<4?0:'|',j<9;j++)i>-1?t[j*17+i]=c:0,i<16?t[j*17+i+1]=c:0;m-=.2;e-=m;if(e<0||e>10||t[~~e*17+8])e=4,m=1,d=0,o=[];t[~~e*17+8]='>';r='|-------['+s+']-------';for(i=0;z=t[i]||' ',i<153;i++)i%17?r+=z:r+='|\n|'+z;r+='|\n|-----------------|';l.html(r);},150)
Demo (make it work):
|-------[5]-------| | || -- | | || | | || | | -- | | -- | | || | | || | | -- > || | | || || | |-----------------|
Known minor bugs:
If you get a double-digit score, it messes up the layout
It is NOT easy!!! (but the original wasn't either)
There's a tradeoff between efficiency and golfedness
Feel free to comment with your highscore.
Also, this is my first Code Golf post, so suggestions on compression, etc. will be welcomed
Floppy Dragon, JavaScript, 1024b
I'm making this game for the current js1k compo ( http://js1k.com )
Play: http://js1k.com/2014-dragons/demo/1704
_='c.scale(, ;ontouchH=onmousedown=onkeydowif(e){ }else h=45,d=1};(Eq";Rect(0,0,^,^9Q"-k,0Q+N),0()-k,2E3980-(+3)N(+3)),Y(p="fEFf&{{~_=,;=vviJ.jfVi/.OoyizyhkhEwf74)\\n$fwwuvtU`"+(10<h?"iZ[*)yj:*im**y|Ktdww54#5Dy\\iz[Kzi[Jiijk[e@1!":"zl]LfU{\\lKtBUh{zzU66iigig5\\n&iiyz{vfwwiyDfwiiE"0"v=i-e,w=(j-=h)-eG in p)y=8>>4),z=16&15),Iv+=e?y:z,w+=e?-z:y(dW(h-=6dW!eW(k+=Q,^<kW(k-=^)!dXeX(k+280)%8X(f++,Q<lWl--if(q>jX9q<jX!((k+3)%8)W(j<qXj>2q))e=40;fff";c.font="6em Arial";dWf1,5dX"#FloppyDragon"11,5eW"score"4,4e?"reH":d?"":"H"5,6setTimeout(n,l)})()I40*o-k,a.width/()/2-30* d=e=f=h=0;g=[];G=0;Y>o;o++)=g[o+Y]=8*Math.random()|0;i=j=3;k=Q;l=qc.fill;c.beginPath(c.moveTo(Style="#G=2E3;o--;)o%Q?,a.height/Y1*g[Q*~~(k/8)+Q]+);g[o]-2*(p.charCodeAt(o)Text(00n=function(){4*):(,1*Gfor(oHstartIc.lineTo(N),-4,1*Q20W&&X||Y1E3^4E4q50';for(Y in $='q^YXWQNIHG ')with(_.split($[Y]))_=join(pop());eval(_)
All feedbacks and new ideas are welcome!