flappy-bird.html

<p id="p"></p>
<canvas style="border: 1px solid black"></canvas>
<script defer>
const q = document.querySelector("canvas")
let canstart = true
J=q.width=q.height=Math.min(500, document.querySelector("#p").clientWidth);Q='50px monospace';with(Math)with(C=q.getContext`2d`)with(X=Y=R=0,init=e=(e=>{w=f=Y=X=0,R=1,H=250,q.focus(),canstart=false,V=-10,P=[],(F=(e=>{e-w>1/60&&(Y&&(V=-10,Y=0),H+=V,V+=.8,P.forEach(e=>e.P-=3),f%50||P.push({P:J,L:150+(0|200*random()),C:'rgb('+255*random()+','+255*random()+','+255*random()+')'}),(P.some(e=>abs(e.L-H+2)>60&&0<e.P&&e.P<25)||H>J||H<0)&&(R=0,setTimeout(e=>{font=Q,fillStyle='red',fillText(':(',50,90),canstart=true},99)),clearRect(0,0,J,J),P.forEach(e=>{with(e){fillStyle=C,fillRect(P,0,20,L-60),fillRect(P,L+60,20,J-(L+60))}}),fillStyle='red',fillRect(20,H,10,10),font=Q,fillStyle='red',fillText(ceil(f/50-10/3),40,40),f++,w=e),R&&requestAnimationFrame(F)}))()}),document)onkeydown=(e=>{' '==e.key&&R?++Y:' '==e.key; if (canstart) {init()}}),onmousedown=(e=>{R&&++Y; if (canstart) {init()}});
window.addEventListener('keydown', function(e) {
  if(e.keyCode == 32 && e.target == document.body) {
    e.preventDefault();
  }
});
</script>