🍔 Press Space to Exercise

press-space-to-exercise.html

<p id=z style=float:left></p><script>onerror=(a,b,c,d,e)=>z.innerHTML=[c,d,e].join`:`</script>
<style>html,body{overflow:hidden;margin:0;box-sizing:border-box;}</style><canvas id=a></canvas><script>
M=Math;;d=document;c=a.getContext`2d`;
k={};onkeyup=onkeydown=e=>k[e.keyCode]=!!e.type[5];
r=(max,min=0)=>min+(M.random()*(max||1)-min);
sw=sh=0;
draw=o=> {
let{x,y,w,h,t}=o
	c.font='50px serif';c.fillStyle=o.c||'gray';c.fillRect((x-(w/2)),(y-(h/2)),(w|| 30),(h||30));
  if(t){c.fillStyle='#000';c.fillText(t,x-(c.measureText(t).width/2),y);}
};
dist=(h,j)=>{a=h.x-j.x;b=h.y-j.y;return M.sqrt(a * a + b * b)}
resize=()=>{sw=a.width=innerWidth;sh=a.height=innerHeight}
resize();window.addEventListener('resize', resize);
p={x:a.width/2,y:a.height/2,w:20,h:20,c:"blue",t:'you'};
f={x:~~r(a.width),y:~~r(a.height),w:20,h:20,t:"🍔"};
g=0;//exercise
l=()=>{
  if(p.w>sw)return;
	c.fillStyle='gray';
  c.fillRect(0,0,sw,sh);
  draw(p);
  draw(f);
  if (dist(p,f)<p.w){
    p.w=p.h=p.w+20;
    f.x=~~r(sw-60,30);
    f.y=~~r(sh-60,30);
  }
  p.y+=(k[40]||k[83]?1:k[38]||k[87]?-1:0)*5;
  p.x+=(k[39]||k[68]?1:k[37]||k[65]?-1:0)*5;
  if(k[32])g=1;
  else if(g){g=0;p.w=p.h=M.max(p.w-10,20);}
  draw({x:sw/2,y:50,t:p.w>sw?"END":`Press Space to Exercise`,c:"#000"});
};setInterval(l)
</script>