Level to HN: A corpulent game of snake encoded in a url

A bit experiement with seeing how complex of an app I’m in a position to store fully within a url.

The typical belief revolves around the indisputable truth that a info urls can elaborate their encoding as text/html.

i.e info:text/html;charset=utf-8,hiya world is a sound url (strive pasting it for your url bar).

So is
info:text/html;charset=utf-8,

Hello world!.

Aditionally, so is info:text/html;charset=utf-8,

Hello world!.

So, if we are in a position to put html, css and js in a url and salvage that render a sound html web page, how powerful of a web page could maybe well perchance additionally we make?

Result

I’ve advance up with a 1033 byte resolution that is an fully playable game of snake.

let e=myth,t=e.physique,r=Math,l='Press rental to commence/finish/reset, arrow keys to transfer

',i=40,o=400,n=o,s=0,f=1,d=0,c=1,h=0,p=[[3,3],[4,3],[5,3]],u=p,y=[5,5],b="#000",g=(e,t,r=b,l=i,o=i)=>{S.fillStyle=r,S.fillRect(e,t,l,o)},v=(e,t,r,l="center")=>{S.fillStyle=b,S.textAlign=l,S.fillText(e,t,r)},x=e=>r.flooring(r.random()*e),ok=()=>{if(!d&&!c){let[e,t]=p.pop(),r=p[0][0] s,l=p[0][1] f;if(rr==e&&l==t))return m();r==y[0]&&l==y[1]&&(h ,p.push([...p[p.length-1]]),y=[x(9),x(9)]),p.unshift([r,l]),g(0,0,"#fff",n,o);for([e,t]of p)g(e*i,t*i);g(y[0]*i,y[1]*i,"#0f0"),v("Score: " h,n-9,30,"honest")}},m=()=>{c=1,g(0,0,"#f00",n,o),v("You died :(",n/2,o/2)},w=()=>{c=0,p=[...u],s=0,h=0,f=1},S=(t.innerHTML=l,a.getContext("2nd"));a.height=o,a.width=n,S.font="30px Arial",e.addEventListener("keyup",e=>{e=e.which;37==e&&(s=-1,f=0),38==e&&(s=0,f=-1),39==e&&(s=1,f=0),40==e&&(s=0,f=1),32==e&&(c?w():d=d?0:1)}),setInterval(ok,n);

Encoded as a url it’s some distance 1464 bytes prolonged:

info:text/html;charset=utf-8,

Working the code

The game is constructed internal of index.html. race.js is a node script that takes that html file and encodes it as a url.

$ node race.js
info:text/html;charset=utf-8,

You may maybe well be in a plight to salvage some debugging info by passing the DEBUG flag

$ DEBUG=a node race.js
{
  js: 'const d=myth,n'  
    '    b=d.physique,n'  
    "    a=d.createElement('canvas'),n"  
    '    c=a.getContext("2nd");n'  
    '  b.append(a)n'  
    '  c.height=400;n'  
    '  c.width=400;n'  
    '  c.rect(0,0,100,100);n'  
    '  c.stroke();',
  minified: 'const d=myth,b=d.physique,a=d.createElement("canvas"),c=a.getContext("2nd");b.append(a),c.height=400,c.width=400,c.rect(0,0,100,100),c.stroke();',
  codeLength: 178,
  minifiedLength: 143,
  minSaved: 35,
  urlLength: 276
}
info:text/html;charset=utf-8,