Open are opened 4 months ago
There seems to be an issue with the third level, I'm hitting an invisible wall right above the hole :(
My bad! This happens when the initial window viewport is too small. Actually fixing this removes 98 bytes from the solution!
Updated source code:
var dt=JSON.parse(atob(`W1siMS4gVXBoaWxsIixbMzI1LDc1XSxbMzI1LDMyNV0sWzQwMCw0MDBd
LFtbMCwwLDQwMCwwXSxbNDAwLDAsNDAwLDE1MF0sWzQwMCwxNTAsMjAwLDE1MF0sWzIwMCwxNTAsMjAw
LDI1MF0sWzIwMCwyNTAsNDAwLDI1MF0sWzQwMCwyNTAsNDAwLDQwMF0sWzQwMCw0MDAsMCw0MDBdLFsw
LDQwMCwwLDBdXSxbWzAsLTAuNSwwLDE1MCwyMDAsMjUwXV1dLFsiMi4gRG93bmhpbGwiLFszNTAsNTBd
LFszNTAsMjUwXSxbNDAwLDYwMF0sW1swLDAsNDAwLDBdLFs0MDAsMCw0MDAsMTAwXSxbNDAwLDEwMCwy
MDAsMTAwXSxbMjAwLDEwMCwyMDAsMjAwXSxbMjAwLDIwMCw0MDAsMjAwXSxbNDAwLDIwMCw0MDAsMzAw
XSxbNDAwLDMwMCwyMDAsMzAwXSxbMjAwLDMwMCwyMDAsNjAwXSxbMjAwLDYwMCwwLDYwMF0sWzAsNjAw
LDAsMF1dLFtbMCwxLDAsMTAwLDIwMCwyMDBdLFswLDEsMCwzMDAsMjAwLDQwMF1dXSxbIjMuIFBlbnJv
c2UiLFsxMDAsMTAwXSxbNzAwLDcwMF0sWzgwMCw4MDBdLFtbMCwwLDgwMCwwXSxbODAwLDAsODAwLDgw
MF0sWzgwMCw4MDAsMCw4MDBdLFswLDgwMCwwLDBdLFsyMDAsMjAwLDIwMCw2MDBdLFsyMDAsNjAwLDYw
MCw2MDBdLFs2MDAsNjAwLDYwMCwyMDBdLFs2MDAsMjAwLDIwMCwyMDBdXSxbWzAsLTEsNjAwLDIwMCw4
MDAsNjAwXSxbLTEsMCwyMDAsMCw2MDAsMjAwXSxbMCwxLDAsMjAwLDIwMCw2MDBdLFsxLDAsMjAwLDYw
MCw2MDAsODAwXV1dLFsiVGhhbmtzIGZvciBwbGF5aW5nISIsWzIwMCwyMDBdLFsxMDAwMDAwMDAsMTAw
MDAwMDAwMF0sWzQwMCw0MDBdLFtbMCwwLDAsNDAwXSxbMCw0MDAsNDAwLDQwMF0sWzQwMCw0MDAsNDAw
LDBdLFs0MDAsMCwwLDBdXSxbXV1d`.replaceAll('\n',''))); c=o.getContext('2d'),x=350,
y=125,gx=gy=vx=vy=0,r=5,W=innerWidth,H=innerHeight,sw=sh=500,msx=msy=-1,mx=my=lt
=0,e=.8,li=-1,pt=0,p1=p2=-1,{sqrt:st,atan2:a2,sin,cos,PI,max,min}=Math,sl=(_i)=>
(li=_i,[ti,[x,y],[gx,gy],[sw,sh],ws,zs]=dt[_i],vx=vy=0); (f=(t)=>{li<0&&sl(0);
requestAnimationFrame(f); o.width=W; o.height=H; c.translate(W/2-sw/2,H/2-sh/2);
c.textAlign='center';l=(d)=>(x+=vx*d,y+=vy*d,vx*=0.9985,vy*=0.9985,
(tv=st(vx**2+vy**2))<0.1&&(vx=0,vy=0),c[_bp='beginPath'](),ws.map(([_1,_2,_3,
_4],_)=>(_5=a2(_4-_2,_3-_1),px=_1+(_t=max(0,min(1,((x-_1)*(_3-_1)+(y-_2)*(_4-_2)
)/((_1-_3)**2+(_2-_4)**2))))*(_3-_1),py=_2+_t*(_4-_2),nvx=x-px,nvy=y-py, ab=(a2(
vy,vx)-_5)*-2,p1!=_1&&p2!=_2&&c.moveTo(_1,_2),c.lineTo(_3,_4),p1=_1,p2=_2,st((gx
-x)**2+(gy-y)**2)<2*r&&(sl(li+1)),st(nvx**2+nvy**2)<r&&(x+=nvx*0.2,y+=nvy*0.2,([
vx,vy]=[(vx*cos(ab)-vy*sin(ab))*e,(vx*sin(ab)+vy*cos(ab))*e])))), c.closePath(),
c[_fs='fillStyle']='#008802',c.fill(),c.stroke(),zs.map(([fx,fy,_1,_2,_3,_4])=>(
c[_fs]=(fy+fx)>0?'#017601':'#349134',c.fillRect(_1,_2,_3-_1,_4-_2), _1<=x&&x<=_3
&&_2<=y&&y<=_4)&&(vx=vx+fx/10,vy=vy+fy/10)));for(let i=0;i<10;i++,l((t-lt)/1000/
10*i)); msx!=-1&&tv<1&&(c[_bp](),c.moveTo(x,y),c.lineTo(x+(msx-mx),y+(msy-my)),
c.strokeStyle='red',c.stroke()),c[_bp]();c.arc(gx,gy,r*2,0,PI*2); c[_fs]='#000';
c.fill(); c[_bp]();c.arc(x,y,r,0,PI*2);c[_fs]=tv<1?'#fff':`#bbb`;c.fill();lt=t;
c.font='16px a';c[_fs]='#555';c.fillText('Score: '+pt,sw/2,-60);c.font='26px a';
c[_fs]='#000';c.fillText(ti,sw/2,-30);})(0);this.onmousedown=(_)=>(msx=_.clientX
,msy=_.clientY);this.onmouseup=()=>(msx!=-1&&tv<1&&(vx=(msx-mx)/4,vy=(msy-my)/4,
pt++),msx=-1,msy=-1);this.onmousemove=(_)=>(mx=_.clientX,my=_.clientY);
this.onkeydown=({key})=>(key=='r'&&sl(li))
Hiya! This is minimal and I only had patience to design 3 levels (although adding your own should be pretty straightforward), but the challenge in itself was very fun.
While I do think this can be golfed quite a bit more, I am pretty satisfied with the ratio of code to result.
Golf score is 3048 bytes (1187 level data + 1843 js code + 18 html).
Playground
https://jsfiddle.net/are1000/qurt3957/
Source code
Screencast
Screencast from 28.03.2024 22:25:06.webm