Skip to content

Instantly share code, notes, and snippets.

@gullyn
Last active May 4, 2024 15:35
Show Gist options
  • Save gullyn/95b2ab9e465317f1d4e4607cf6e94205 to your computer and use it in GitHub Desktop.
Save gullyn/95b2ab9e465317f1d4e4607cf6e94205 to your computer and use it in GitHub Desktop.
Flappy bird in 205 bytes (improved!)
<body onload=z=c.getContext`2d`,setInterval(`c.width=W=150,Y<W&&P<Y&Y<P+E|9<p?z.fillText(S++${Y=`,9,9|z.fillRect(p`}*0,Y-=--M${Y+Y},P+E,9,W),P))):p=M=Y=S=6,p=p-6||(P=S%E,W)`,E=49) onclick=M=9><canvas id=c>
@wibbuffey
Copy link

@kres0345 Mobile browsers do support Data URIs as shown on this Can I Use page.
Although another two bytes would be nice, I don't think that is enough of a reward for mobile compatibility.

@MDeiml
Copy link

MDeiml commented Dec 28, 2020

You can actually just remove the "Z" and the "H0" from the path:

<svg id=c onload="Y=G=T=0;setInterval('T%99?0:Y>G&Y<G+75?G=T%75:V=Y=T=0;Y-=V-=.04;c.innerHTML=`<path d=\'M${99-T%99} ${G}h9V0h-9Zv75h9V150h-9M0 ${Y}v9h9v-9\'/><text y=11>`+T++',9)"onclick=V=2>

which is 192 bytes. This means the path is no longer closed, but it displays the same way because it is closed implicitly when it gets filled. The downside is that this is not very well defined behavior - I think - so some browsers could display it differently.

@MDeiml
Copy link

MDeiml commented Mar 30, 2021

<svg id=c onload="Y=G=T=0;setInterval('T%99?Y-=V-=.1:Y>G&Y<G+60?G=T%75:V=Y=T=0;c.innerHTML=`<path d=\'M${99-T%99} ${G}h9V0h-9Zv60h9V150h-9M0 ${Y}v9h9v-9\'/><text y=11>`+T++',9)"onclick=V=3>

189 bytes. But a bit more difficult (like the real flappy bird)

@mwaitzman
Copy link

it's been so long that I forgot how to run this...

@MDeiml
Copy link

MDeiml commented Mar 30, 2021

You can try this URL:

data:text/html,%3Csvg id%3Dc onload%3D"Y%3DG%3DT%3D0%3BsetInterval('T%2599%3FY-%3DV-%3D.1%3AY%3EG%26Y%3CG%2B60%3FG%3DT%2575%3AV%3DY%3DT%3D0%3Bc.innerHTML%3D`%3Cpath d%3D%5C'M%24%7B99-T%2599%7D %24%7BG%7Dh9V0h-9Zv60h9V150h-9M0 %24%7BY%7Dv9h9v-9%5C'%2F%3E%3Ctext y%3D11%3E`%2BT%2B%2B'%2C9)"onclick%3DV%3D3%3E

@mwaitzman
Copy link

thanks

@bigoulours
Copy link

bigoulours commented Jun 21, 2021

Easier to read if you only replace % with %25 in the address bar:

data:text/html,<svg id=c onload="Y=G=T=0;setInterval('T%2599?Y-=V-=.1:Y>G&Y<G+60?G=T%2575:V=Y=T=0;c.innerHTML=`<path d=\'M${99-T%2599} ${G}h9V0h-9Zv60h9V150h-9M0 ${Y}v9h9v-9\'/><text y=11>`+T++',9)"onclick=V=3>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment