Color Animation and Physics; Pure JavaScript, 457 (335) bytes
This is my first post in this forum; I made this code and retrospectively found this thread to post it in.
Here's the code encapsulated in HTML, ready to be copy/pasted in to an html file:
<body><script>A=120;B=280;d=document;y=180;x=v=n=s=0;f=140;c=d.createElement('canvas');p=c.getContext('2d');c.width=B;c.height=400;c.onclick=()=>{v-=6};p.font='50px Arial';d.body.appendChild(c);r=(h,t,k=0,i='#0f0',w=40)=>{p.fillStyle=i;p.fillRect(h,k,w,t)};b=setInterval(()=>{if(x==0){n=f;f=Math.floor(B*Math.random());x=160}x--;v+=.1;y+=v;r(0,400,0,'#08f',B);r(20,40,y,'#fc0');r(x-40,n);r(x+A,f);r(x-40,B-n,n+A);r(x+A,B-f,f+A);if(x==60)s++;p.strokeText(s,A,80);if(x>20&&x<100&&(y<n||y>n+80)){clearInterval(b);location.reload()}},15)</script><br>Made by Thomas Kaldahl</body>
It has pixel perfect collisions, accurate quadratic physics, and smooth color animations, all in 457 bytes worth of purely independent offline Javascript code, shown ungolfed here in greater detail and explanation:
<!--entire HTML shell is omitted in golf-->
<body>
<script>
//common numbers and the document are assigned shortcut letters
A = 120;
B = 280;
d = document;
y = 180; //y position of the top of the bird
x = //x position of scrolling for pipes
v = //vertical velocity of bird
n = //y position of the top of the nearest pipe opening
s = 0; //score
f = 140; //y position of the top of the farther pipe opening
c = d.createElement('canvas'); //canvas
p = c.getContext('2d'); //canvas context
//set canvas dimensions
c.width = B;
c.height = 400;
c.onclick = () => { v -= 6 }; //apply jump velocity to bird when clicked
p.font = '50px Arial'; //font for scoring (omitted in golf)
d.body.appendChild(c); //add canvas to html page
//draw a rectangle on the canvas
r = (h, t, k = 0, i = '#0f0', w = 40) => {
p.fillStyle = i;
p.fillRect(h, k, w, t)
};
//main loop (not assigned to b in golf)
b = setInterval( () => {
if (x == 0) { //the x position is a countdown. when it hits 0:
n = f; //the far pipe is now the near pipe, overwriting the old near pipe
f = B * Math.random() //assign the far pipe a new vertical location
x = 160; //restart the countdown back at 160
//(score increments here in golf)
}
x--; //count down
v += .1; // apply gravity to velocity
y += v; // apply velocity to bird
r(0, 400, 0, '#08f', B); //draw background
r(20, 40, y, '#fc0'); //draw bird (non-default color is omitted in golf)
r(x - 40, n); //draw first pipe upper half
r(x + A, f); //draw second pipe upper half
r(x - 40, B - n, n + A); //draw first pipe lower half
r(x + A, B - f, f + A); //draw second pipe lower half
if (x == 60)
s++; //(this is done earlier on golf)
p.strokeText(s, A, 80); //draw score
// if the bird is in range of the pipes horizontally,
// and is not in between the pipes,
if (x > 20 && x < 100 && (y < n || y > n + 80)) {
clearInterval(b); location.reload() //omit interval clear in golf
}
}, 15) //(reduced the frame delay to 9, a 1 digit number, in golf)
</script><br>
Made by Thomas Kaldahl <!-- GG -->
</body>
For fun, here's a 1066 byte version with fancier graphics:
<body style='margin:0'><script>var y=180,x=v=n=s=0,f=140,c=document.createElement('canvas'),p=c.getContext('2d');c.width=280;c.height=400;c.onclick=function(){v-=6};c.style='width:68vh;height:97vh';document.body.appendChild(c);p.font="50px Arial";p.shadowColor='#444';p.shadowBlur=9;p.shadowOffsetX=p.shadowOffsetY=5;function r(h,t,k=0,i='#0f0',j='#0a0',u=0,l=0,w=40){var g=p.createLinearGradient(h,l,h+40,u);g.addColorStop(0,i);g.addColorStop(1,j);p.fillStyle=g;p.fillRect(h,k,w,t);}b=setInterval(function(){if(x==0){n=f;f=Math.floor(280*Math.random());}x=x==0?159:x-1;v+=.1;y+=v;r(0,400,0,'#08c','#0cf',280,0,280);r(20,40,y,'#ff0','#fa0',y+40,y);r(x-40,n);r(x-50,20,n-20,'#0f0','#0a0',n+20,n,60);r(x+120,f);r(x+110,20,f-20,'#0f0','#0a0',f+20,f,60);r(x-40,280-n,n+120);r(x-50,20,n+120,'#0f0','#0a0',n+140,n+100,60);r(x+120,280-f,f+120);r(x+110,20,f+120,'#0f0','#0a0',f+140,f+100,60);if(x==60){s++;}p.fillStyle='#fff';p.fillText(s,120,80);if(x>20&&x<100&&(y<n||y>n+80)||y<0||y>360){clearInterval(b);location.reload();}},15);</script><br>Made by Thomas Kaldahl</body>
Also, is it cheating to use a compression system like DEFLATE?
Below is the ASCII85 code for a DEFLATEd version of the code:
By the way, compressed it is 335 bytes total.
Gapon95_Wi'Kf'c(i##6'h,+cM\JZeFO<h;$W'#A1',RqNigBH02C'#R$m]<i<X#6GR`2pE<Ri5mu-n%cVPrsJe:*R^pnr9bI@[DAZnPP02A^!.$MN/@`U7l5gm!!Vr4>A;P?u[Pk8]jCnOP%dIu?`fWql>"tuO4/KbIWgK;7/iJN'f2,hnFg8e.^SO*t\*`,3JBn6j(f`O#],M0;5Sa35Zc@*XaBs@N%]k\M76qa[.ie7n(^*Z5G-lfhUZ3F#'%,X17Pj1u]L)LjpO6XbIl%N3tJhTsab8oV1T(?MC$9mT;90VMmnfBNKEY(^'UV4c?SW':X(!4,*WCY+f;19eQ?`FK0I"(uDe:f&XV&^Rc+'SWRIbd8Lj9bG.l(MRUc1G8HoUsn#H\V(8"Y$/TT(^kATb(OreGfWH7uIf
2A question should ideally be self-contained, and should certainly contain at least a broad-brush spec. – Peter Taylor – 2014-02-12T16:38:08.760
3As it stands, there appears to be a little too much subjectivity in what's considered a valid submission – Cruncher – 2014-02-12T16:50:24.330
2There. I put some guidelines as to makes up a "flappy bird clone" – Taconut – 2014-02-12T20:28:48.370
I did this a couple weeks ago. Maybe I'll golf it when I get some time: http://cwhart.co/nyanpybird/
– Shmiddty – 2014-02-18T17:46:38.8171I really really want to see an ASCII art version! – Robbie Wxyz – 2014-03-05T00:13:31.043
@SuperScript Checkout my answer... http://codegolf.stackexchange.com/a/23556/4178
– Max Chuquimia – 2014-03-09T07:11:04.120