Shaving 289 bytes

[SuperMaxusa]

I tried to make unreadable shrink the code and got -206 bytes (2824 -> 2535).
QR code version differences: 2135 - original, 2127 - new.

Most of the tricks were taken from https://github.com/lionleaf/dwitter/wiki/ and https://github.com/jed/140bytes/wiki/Byte-saving-techniques.

Here is my timeline:

• 2824 - initial size: d23d852
• 2785 - removing getElementById function¹, assign variables to the same value: a=rc=fl=t=0 and x=y=4
• 2781 - move canvas width and height inside <canvas> tag
• 2780 - replace the hex color with a shorter CSS alias: #FFA500 -> orange
• 2778 - use the template string as argument and drop the parentheses: h=c.getContext("2d") -> h=c.getContext`2d`
• 2776 - t=0,k.ArrowLeft=k.ArrowRight=k.ArrowUp=0 -> t=k.ArrowLeft=k.ArrowRight=k.ArrowUp=0
• 2774 - h.fillStyle=o.h>50?"#400":"#800" -> h.fillStyle=`#${o.h>50?4:8}00`
• 2773 - use for radiands Math.PI constant: 6.283 -> PI*2
• 2772 - simplify the logic: rc=rc>.02?rc-.02:0 -> rc-=rc>.02?.02:rc
• 2769 - use reverse loop²: for(i=0;i<320;i++) -> for(i=320;i--;)
• 2753 - remove background:#000;
• 2743 - assign CSS styles to all elements: *{margin:0;overflow:hidden;cursor:crosshair;width:100vw;height:100vh;touch-action:none} (thanks to @myfonj: Remove html tags to shave more bytes of minified html #3 (comment)), move in the end without a closing tag
• 2629 - shorter aliases for methods: rd=random,fr="fillRect",fs="fillStyle",ta="textAlign", use square brackets to call/set canvas methods/properties: h.textAlign="center" -> h[ta]="center"
• 2625 - extract some repititive calculations into functions: ao=o=>atan2(o.y-y,o.x-x)-a,ho=o=>hypot(o.x-x,o.y-y)
• 2618 - make a canvas in one tag: <canvas id=c width=320 height=240 />
• 2596 - #f00 -> red, <canvas id=c width=320 height=240> , *{margin:0;cursor:crosshair;width:100%;height:100%;touch-action:none
• 2594 - h[fr](160+r*160-2,120-2,4,4) -> h[fr](160+r*160-2,118,4,4)
• 2567 - aliases for keys: au="ArrowUp",al="ArrowLeft",ar="ArrowRight",ad="ArrowDown"
• 2536 - use bitwise floor³ and extract function: ff=(a,b)=>f(0|a,0|b) (warning: glitched wall collision)
• 2535 - drop the last bracket⁴: h[fs]=`rgb(${g},${g},${g})` -> h[fs]=`rgb(${g},${g},${g}`

Edited code

<canvas id=c width=320 height=240><script>with(Math){h=c.getContext`2d`,x=y=4,H=100,am=25,a=rc=fl=t=0,rd=random,fr="fillRect",ft="fillText",fs="fillStyle",ta="textAlign",al="ArrowLeft",ar="ArrowRight",au="ArrowUp",ad="ArrowDown",ao=o=>atan2(o.y-y,o.x-x)-a,ho=o=>hypot(o.x-x,o.y-y),SEED=rd()*100,f=(i,j)=>(abs(i-4)<4&&abs(j-4)<4)?0:((i+1e3)%7==3||(j+1e3)%7==3)?0:(n=cos(i*12.9898+j*78.233+SEED)*43758.5453,n-=n|0,n<.05?1:0),e=[{x:5,y:4,h:100},{x:4,y:5,h:100}],k={};onkeydown=e=>k[e.key]=1,onkeyup=e=>k[e.key]=0,ontouchstart=e=>{e.preventDefault(),t=1,k[e.touches[0].clientX<innerWidth/2?al:ar]=1,k[au]=1},ontouchend=e=>{t=k[al]=k[ar]=k[au]=0},onclick=_=>{if(am){am--,fl=2,rc=.2,e.forEach(o=>{let d=ho(o),r=ao(o);d<5&&abs(r)<.3&&(o.h-=50,h[fs]="#fff",h[fr](160+r*160-2,118,4,4))})}};ff=(a,b)=>f(0|a,0|b);R=_=>{rc-=rc>.02?.02:rc,fl&&fl--,e=e.filter(o=>o.h>0),h[fs]="#000",h[fr](0,0,320,240),k[al]&&(a-=.1),k[ar]&&(a+=.1),m=.1,(k[au]||k.w)&&(nx=x+cos(a)*m,ny=y+sin(a)*m,ff(nx,ny)!=1&&(x=nx,y=ny)),(k[ad]||k.s)&&(nx=x-cos(a)*m,ny=y-sin(a)*m,ff(nx,ny)!=1&&(x=nx,y=ny)),(k[au]||k.w||k[ad]||k.s||k[al]||k[ar])&&e.length<10&&rd()<.02&&(t=rd()*PI*2,d=1+rd()*2,X=x+cos(t)*d,Y=y+sin(t)*d,ff(X,Y)==0&&e.push({x:X,y:Y,h:100})),rd()<.005&&am<25&&am++,e.forEach(o=>{let d=hypot(dx=x-o.x,dy=y-o.y);d>.2&&(o.x+=dx/d*(.0015+.003/d),o.y+=dy/d*(.0015+.003/d),ff(o.x,o.y)!=1||0),d<.5&&(H--,fl=2,h[fs]="#800",h[fr](0,0,320,240))});let w=[];for(i=320;i--;){r=a+atan((i-160)/160),dx=cos(r),dy=sin(r),ix=floor(x),iy=floor(y),ddx=dx?abs(1/dx):1e30,ddy=dy?abs(1/dy):1e30,sx=dx<0?-1:1,sy=dy<0?-1:1,tmx=dx<0?(x-ix)*ddx:(ix+1-x)*ddx,tmy=dy<0?(y-iy)*ddy:(iy+1-y)*ddy,d=0;for(;;){if(tmx<tmy)ix+=sx,d=tmx,tmx+=ddx;else iy+=sy,d=tmy,tmy+=ddy;if(d>20||f(ix,iy)==1)break}d*=cos(r-a),w[i]=d,h2=min(240,240/d),g=min(255,200/d)|0,h[fs]=`rgb(${g},${g},${g}`,h[fr](i,120-h2/2+rc*20,1,h2)}e.forEach(o=>{d=ho(o),r=ao(o);if(abs(r)<1.2){sz=80/d,px=160+r*160;px>=0&&px<320&&d<w[px|0]*1.1&&(h[fs]=`#${o.h>50?4:8}00`,h[fr](px-sz/2,120-sz/2+rc*20,sz,sz*1.5),h[fs]="red",h[fr](px-sz/4,120-sz/2+rc*20,sz/8,sz/4),h[fr](px+sz/4,120-sz/2+rc*20,sz/8,sz/4))}}),fl&&(h[fs]="orange",h[fr](140,160+rc*20,40,20)),h[fs]="red",h[fr](10,10,H,10),h[fs]="#ff0",h[fr](10,25,am*4,5),h[fs]="#fff",h.font="7px Arial",h[ft]("HP",10,7),h[ft]("AMMO:"+am,10,28),h[ta]="right",h[ft]("<3 KWT",315,235),h[ta]="left",H>0?requestAnimationFrame(R):(h[fs]="red",h.font="20px Arial",h[ta]="center",h[ft]("GAME OVER",160,120))};R()}</script><style>*{margin:0;cursor:crosshair;width:100vw;height:100vh;touch-action:none

QR code

Footnotes

1. In JS, an element with an ID becomes as a global variable, see https://xem.github.io/articles/getelementbyid.html ↩

2. https://github.com/jed/140bytes/wiki/Byte-saving-techniques#use-reverse-loops-where-possible ↩

3. https://codegolf.stackexchange.com/a/61143 ↩

4. https://github.com/lionleaf/dwitter/wiki/Canvas-specific-Golfing-Tricks#color ↩

[myfonj]

replace the hex color with a shorter CSS alias: #FFA500 -> orange

There is 3 × #F00 (i.e., short for #FF0000) that could be just red.

• /> can be just >, the "XML" slash is a lie here anyway, we can safely let everything fall "into" the canvas
• overflow:hidden; does not seem to be necessary, I am not getting any scrollbars without it.
• the final } can be also omitted.

-22 chars:

<canvas id=c width=320 height=240><script>with(Math){h=c.getContext`2d`,x=y=4,H=100,am=25,a=rc=fl=t=0,rd=random,fr="fillRect",ft="fillText",fs="fillStyle",ta="textAlign",ao=o=>atan2(o.y-y,o.x-x)-a,ho=o=>hypot(o.x-x,o.y-y),SEED=rd()*100,f=(i,j)=>(abs(i-4)<4&&abs(j-4)<4)?0:((i+1e3)%7==3||(j+1e3)%7==3)?0:(n=cos(i*12.9898+j*78.233+SEED)*43758.5453,n-=n|0,n<.05?1:0),e=[{x:5,y:4,h:100},{x:4,y:5,h:100}],k={};onkeydown=e=>k[e.key]=1,onkeyup=e=>k[e.key]=0,ontouchstart=e=>{e.preventDefault(),t=1,k[e.touches[0].clientX<innerWidth/2?"ArrowLeft":"ArrowRight"]=1,k.ArrowUp=1},ontouchend=e=>{t=k.ArrowLeft=k.ArrowRight=k.ArrowUp=0},onclick=_=>{if(am){am--,fl=2,rc=.2,e.forEach(o=>{let d=ho(o),r=ao(o);d<5&&abs(r)<.3&&(o.h-=50,h[fs]="#fff",h[fr](160+r*160-2,120-2,4,4))})}};R=_=>{rc-=rc>.02?.02:rc,fl&&fl--,e=e.filter(o=>o.h>0),h[fs]="#000",h[fr](0,0,320,240),k.ArrowLeft&&(a-=.1),k.ArrowRight&&(a+=.1),m=.1,(k.ArrowUp||k.w)&&(nx=x+cos(a)*m,ny=y+sin(a)*m,f(floor(nx),floor(ny))!=1&&(x=nx,y=ny)),(k.ArrowDown||k.s)&&(nx=x-cos(a)*m,ny=y-sin(a)*m,f(floor(nx),floor(ny))!=1&&(x=nx,y=ny)),(k.ArrowUp||k.w||k.ArrowDown||k.s||k.ArrowLeft||k.ArrowRight)&&e.length<10&&rd()<.02&&(t=rd()*PI*2,d=1+rd()*2,X=x+cos(t)*d,Y=y+sin(t)*d,f(floor(X),floor(Y))==0&&e.push({x:X,y:Y,h:100})),rd()<.005&&am<25&&am++,e.forEach(o=>{let d=hypot(dx=x-o.x,dy=y-o.y);d>.2&&(o.x+=dx/d*(.0015+.003/d),o.y+=dy/d*(.0015+.003/d),f(floor(o.x),floor(o.y))!=1||0),d<.5&&(H--,fl=2,h[fs]="#800",h[fr](0,0,320,240))});let w=[];for(i=320;i--;){r=a+atan((i-160)/160),dx=cos(r),dy=sin(r),ix=floor(x),iy=floor(y),ddx=dx?abs(1/dx):1e30,ddy=dy?abs(1/dy):1e30,sx=dx<0?-1:1,sy=dy<0?-1:1,tmx=dx<0?(x-ix)*ddx:(ix+1-x)*ddx,tmy=dy<0?(y-iy)*ddy:(iy+1-y)*ddy,d=0;for(;;){if(tmx<tmy)ix+=sx,d=tmx,tmx+=ddx;else iy+=sy,d=tmy,tmy+=ddy;if(d>20||f(ix,iy)==1)break}d*=cos(r-a),w[i]=d,h2=min(240,240/d),g=min(255,200/d)|0,h[fs]=`rgb(${g},${g},${g})`,h[fr](i,120-h2/2+rc*20,1,h2)}e.forEach(o=>{d=ho(o),r=ao(o);if(abs(r)<1.2){sz=80/d,px=160+r*160;px>=0&&px<320&&d<w[px|0]*1.1&&(h[fs]=`#${o.h>50?4:8}00`,h[fr](px-sz/2,120-sz/2+rc*20,sz,sz*1.5),h[fs]="red",h[fr](px-sz/4,120-sz/2+rc*20,sz/8,sz/4),h[fr](px+sz/4,120-sz/2+rc*20,sz/8,sz/4))}}),fl&&(h[fs]="orange",h[fr](140,160+rc*20,40,20)),h[fs]="red",h[fr](10,10,H,10),h[fs]="#ff0",h[fr](10,25,am*4,5),h[fs]="#fff",h.font="7px Arial",h[ft]("HP",10,7),h[ft]("AMMO:"+am,10,28),h[ta]="right",h[ft]("<3 KWT",315,235),h[ta]="left",H>0?requestAnimationFrame(R):(h[fs]="red",h.font="20px Arial",h[ta]="center",h[ft]("GAME OVER",160,120))};R()}</script><style>*{margin:0;cursor:crosshair;width:100vw;height:100vh;touch-action:none

• -52 chars by centralising "Arrow*" stuff and then using L instead of "ArrowLeft" and [L] instead of .ArrowLeft.

(⚠⚠⚠ This type of optimisation, while already used for other constants/keys, presumably has detrimental effect if the payload is gzipped, since repeated large chunks are in fact good for compression. ⚠⚠⚠)

But it is good for non-zipping non-base64 variant:

2567 bytes dataURI runnable without base64:

data:text/html,<canvas id=c width=320 height=240><script>with(Math){h=c.getContext`2d`,x=y=4,H=100,am=25,a=rc=fl=t=0,rd=random,fr="fillRect",ft="fillText",fs="fillStyle",A="Arrow",D=A+"Down",L=A+"Left",U=A+"Up",G=A+"Right",ta="textAlign",ao=o=>atan2(o.y-y,o.x-x)-a,ho=o=>hypot(o.x-x,o.y-y),S=rd()*100,f=(i,j)=>(abs(i-4)<4&&abs(j-4)<4)?0:((i+1e3)%7==3||(j+1e3)%7==3)?0:(n=cos(i*12.9898+j*78.233+S)*43758.5453,n-=n|0,n<.05?1:0),e=[{x:5,y:4,h:100},{x:4,y:5,h:100}],k={};onkeydown=e=>k[e.key]=1,onkeyup=e=>k[e.key]=0,ontouchstart=e=>{e.preventDefault(),t=1,k[e.touches[0].clientX<innerWidth/2?L:G]=1,k[U]=1},ontouchend=e=>{t=k[L]=k[G]=k[U]=0},onclick=_=>{if(am){am--,fl=2,rc=.2,e.forEach(o=>{let d=ho(o),r=ao(o);d<5&&abs(r)<.3&&(o.h-=50,h[fs]="white",h[fr](160+r*160-2,120-2,4,4))})}};R=_=>{rc-=rc>.02?.02:rc,fl&&fl--,e=e.filter(o=>o.h>0),h[fs]="black",h[fr](0,0,320,240),k[L]&&(a-=.1),k[G]&&(a+=.1),m=.1,(k[U]||k.w)&&(nx=x+cos(a)*m,ny=y+sin(a)*m,f(floor(nx),floor(ny))!=1&&(x=nx,y=ny)),(k[D]||k.s)&&(nx=x-cos(a)*m,ny=y-sin(a)*m,f(floor(nx),floor(ny))!=1&&(x=nx,y=ny)),(k[U]||k.w||k[D]||k.s||k[L]||k[G])&&e.length<10&&rd()<.02&&(t=rd()*PI*2,d=1+rd()*2,X=x+cos(t)*d,Y=y+sin(t)*d,f(floor(X),floor(Y))==0&&e.push({x:X,y:Y,h:100})),rd()<.005&&am<25&&am++,e.forEach(o=>{let d=hypot(dx=x-o.x,dy=y-o.y);d>.2&&(o.x+=dx/d*(.0015+.003/d),o.y+=dy/d*(.0015+.003/d),f(floor(o.x),floor(o.y))!=1||0),d<.5&&(H--,fl=2,h[fs]="%23800",h[fr](0,0,320,240))});let w=[];for(i=320;i--;){r=a+atan((i-160)/160),dx=cos(r),dy=sin(r),ix=floor(x),iy=floor(y),ddx=dx?abs(1/dx):1e30,ddy=dy?abs(1/dy):1e30,sx=dx<0?-1:1,sy=dy<0?-1:1,tmx=dx<0?(x-ix)*ddx:(ix+1-x)*ddx,tmy=dy<0?(y-iy)*ddy:(iy+1-y)*ddy,d=0;for(;;){if(tmx<tmy)ix+=sx,d=tmx,tmx+=ddx;else iy+=sy,d=tmy,tmy+=ddy;if(d>20||f(ix,iy)==1)break}d*=cos(r-a),w[i]=d,h2=min(240,240/d),g=min(255,200/d)|0,h[fs]=`rgb(${g},${g},${g})`,h[fr](i,120-h2/2+rc*20,1,h2)}e.forEach(o=>{d=ho(o),r=ao(o);if(abs(r)<1.2){sz=80/d,px=160+r*160;px>=0&&px<320&&d<w[px|0]*1.1&&(h[fs]=`%23${o.h>50?4:8}00`,h[fr](px-sz/2,120-sz/2+rc*20,sz,sz*1.5),h[fs]="red",h[fr](px-sz/4,120-sz/2+rc*20,sz/8,sz/4),h[fr](px+sz/4,120-sz/2+rc*20,sz/8,sz/4))}}),fl&&(h[fs]="orange",h[fr](140,160+rc*20,40,20)),h[fs]="red",h[fr](10,10,H,10),h[fs]="yellow",h[fr](10,25,am*4,5),h[fs]="white",h.font="7px Arial",h[ft]("HP",10,7),h[ft]("AMMO:"+am,10,28),h[ta]="right",h[ft]("<3 KWT",315,235),h[ta]="left",H>0?requestAnimationFrame(R):(h[fs]="red",h.font="20px Arial",h[ta]="center",h[ft]("GAME OVER",160,120))};R()}</script><style>*{margin:0;cursor:crosshair;width:100vw;height:100vh;touch-action:none

[SuperMaxusa]

Awesome, thank you!

This type of optimisation, while already used for other constants/keys, presumably has detrimental effect if the payload is gzipped, since repeated large chunks are in fact good for compression.

Agreed, on the first try I also tried to use this (minify all "Arrow*" stuff) and it added +4 extra bytes.

About CSS rules, % can be used instead of vw/vh (-2 bytes). however this breaks Chrome Mobile (doesn't affect the Desktop version).

2562 bytes dataURI version

data:text/html,<canvas id=c width=320 height=240><script>with(Math){h=c.getContext`2d`,x=y=4,H=100,am=25,a=rc=fl=t=0,rd=random,fr="fillRect",ft="fillText",fs="fillStyle",ta="textAlign",al="ArrowLeft",ar="ArrowRight",au="ArrowUp",ad="ArrowDown",ao=o=>atan2(o.y-y,o.x-x)-a,ho=o=>hypot(o.x-x,o.y-y),SEED=rd()*100,f=(i,j)=>(abs(i-4)<4&&abs(j-4)<4)?0:((i+1e3)%7==3||(j+1e3)%7==3)?0:(n=cos(i*12.9898+j*78.233+SEED)*43758.5453,n-=n|0,n<.05?1:0),e=[{x:5,y:4,h:100},{x:4,y:5,h:100}],k={};onkeydown=e=>k[e.key]=1,onkeyup=e=>k[e.key]=0,ontouchstart=e=>{e.preventDefault(),t=1,k[e.touches[0].clientX<innerWidth/2?al:ar]=1,k[au]=1},ontouchend=e=>{t=k[al]=k[ar]=k[au]=0},onclick=_=>{if(am){am--,fl=2,rc=.2,e.forEach(o=>{let d=ho(o),r=ao(o);d<5&&abs(r)<.3&&(o.h-=50,h[fs]="%23fff",h[fr](160+r*160-2,118,4,4))})}};ff=(a,b)=>f(0|a,0|b);R=_=>{rc-=rc>.02?.02:rc,fl&&fl--,e=e.filter(o=>o.h>0),h[fs]="%23000",h[fr](0,0,320,240),k[al]&&(a-=.1),k[ar]&&(a+=.1),m=.1,(k[au]||k.w)&&(nx=x+cos(a)*m,ny=y+sin(a)*m,ff(nx,ny)!=1&&(x=nx,y=ny)),(k[ad]||k.s)&&(nx=x-cos(a)*m,ny=y-sin(a)*m,ff(nx,ny)!=1&&(x=nx,y=ny)),(k[au]||k.w||k[ad]||k.s||k[al]||k[ar])&&e.length<10&&rd()<.02&&(t=rd()*PI*2,d=1+rd()*2,X=x+cos(t)*d,Y=y+sin(t)*d,ff(X,Y)==0&&e.push({x:X,y:Y,h:100})),rd()<.005&&am<25&&am++,e.forEach(o=>{let d=hypot(dx=x-o.x,dy=y-o.y);d>.2&&(o.x+=dx/d*(.0015+.003/d),o.y+=dy/d*(.0015+.003/d),ff(o.x,o.y)!=1||0),d<.5&&(H--,fl=2,h[fs]="%23800",h[fr](0,0,320,240))});let w=[];for(i=320;i--;){r=a+atan((i-160)/160),dx=cos(r),dy=sin(r),ix=floor(x),iy=floor(y),ddx=dx?abs(1/dx):1e30,ddy=dy?abs(1/dy):1e30,sx=dx<0?-1:1,sy=dy<0?-1:1,tmx=dx<0?(x-ix)*ddx:(ix+1-x)*ddx,tmy=dy<0?(y-iy)*ddy:(iy+1-y)*ddy,d=0;for(;;){if(tmx<tmy)ix+=sx,d=tmx,tmx+=ddx;else iy+=sy,d=tmy,tmy+=ddy;if(d>20||f(ix,iy)==1)break}d*=cos(r-a),w[i]=d,h2=min(240,240/d),g=min(255,200/d)|0,h[fs]=`rgb(${g},${g},${g}`,h[fr](i,120-h2/2+rc*20,1,h2)}e.forEach(o=>{d=ho(o),r=ao(o);if(abs(r)<1.2){sz=80/d,px=160+r*160;px>=0&&px<320&&d<w[px|0]*1.1&&(h[fs]=`%23${o.h>50?4:8}00`,h[fr](px-sz/2,120-sz/2+rc*20,sz,sz*1.5),h[fs]="red",h[fr](px-sz/4,120-sz/2+rc*20,sz/8,sz/4),h[fr](px+sz/4,120-sz/2+rc*20,sz/8,sz/4))}}),fl&&(h[fs]="orange",h[fr](140,160+rc*20,40,20)),h[fs]="red",h[fr](10,10,H,10),h[fs]="%23ff0",h[fr](10,25,am*4,5),h[fs]="%23fff",h.font="7px Arial",h[ft]("HP",10,7),h[ft]("AMMO:"+am,10,28),h[ta]="right",h[ft]("<3 KWT",315,235),h[ta]="left",H>0?requestAnimationFrame(R):(h[fs]="red",h.font="20px Arial",h[ta]="center",h[ft]("GAME OVER",160,120))};R()}</script><style>*{margin:0;cursor:crosshair;width:100vw;height:100vh;touch-action:none

[myfonj]

Agreed, on the first try I also tried to use this (minify all "Arrow*" stuff) and it added +4 extra bytes.

Ah, thanks for confirming. I guess the version intended for compression should ideally not use any such "minification" at all, since every "hoisted" (or in-place) assignment to single character variable is superfluous in the end. But for this direct dataURI it is fine. Btw, there are still some colours popping back it seems. Some more (or same) changes:

al="ArrowLeft",ar="ArrowRight",au="ArrowUp",ad="ArrowDown" →
A="Arrow",al=A+"Left",ar=A+"Right",au=A+"Up",ad=A+"Down"
A="Arrow",L=A+"Left",I=A+"Right",U=A+"Up",ad=A+"Down" + all instances
%23fff %23fff →
white white
%23000 →
black
fs="fillStyle" .. fs (× 12) →
F="fillStyle" .. F (× 12)
ft="fillText" .. ft (× 4) →
T="fillText" .. T (× 4)
ta="textAlign" + ta →
l="textAlign" + l (× 3 + declaration moved to first use, to save comma)
SEED= SEED →
S= S
"red" "red" "red" →
b="red" b b
%23ff0 →
yellow (I know, same length, but I like it; tempted to also change `%23800` to `maroon` (i.e., #800000), since subjectively the more percent signs taken out the better, but resited.)

-55 bytes, 2508 bytes dataURI

data:text/html,<canvas id=c width=320 height=240><script>with(Math){h=c.getContext`2d`,x=y=4,H=100,am=25,a=rc=fl=t=0,rd=random,fr="fillRect",T="fillText",F="fillStyle",A="Arrow",L=A+"Left",I=A+"Right",U=A+"Up",ad=A+"Down",ao=o=>atan2(o.y-y,o.x-x)-a,ho=o=>hypot(o.x-x,o.y-y),S=rd()*100,f=(i,j)=>(abs(i-4)<4&&abs(j-4)<4)?0:((i+1e3)%7==3||(j+1e3)%7==3)?0:(n=cos(i*12.9898+j*78.233+S)*43758.5453,n-=n|0,n<.05?1:0),e=[{x:5,y:4,h:100},{x:4,y:5,h:100}],k={};onkeydown=e=>k[e.key]=1,onkeyup=e=>k[e.key]=0,ontouchstIt=e=>{e.preventDefUlt(),t=1,k[e.touches[0].clientX<innerWidth/2?L:I]=1,k[U]=1},ontouchend=e=>{t=k[L]=k[I]=k[U]=0},onclick=_=>{if(am){am--,fl=2,rc=.2,e.forEach(o=>{let d=ho(o),r=ao(o);d<5&&abs(r)<.3&&(o.h-=50,h[F]=w="white",h[fr](160+r*160-2,118,4,4))})}};ff=(a,b)=>f(0|a,0|b);R=_=>{rc-=rc>.02?.02:rc,fl&&fl--,e=e.filter(o=>o.h>0),h[F]="black",h[fr](0,0,320,240),k[L]&&(a-=.1),k[I]&&(a+=.1),m=.1,(k[U]||k.w)&&(nx=x+cos(a)*m,ny=y+sin(a)*m,ff(nx,ny)!=1&&(x=nx,y=ny)),(k[ad]||k.s)&&(nx=x-cos(a)*m,ny=y-sin(a)*m,ff(nx,ny)!=1&&(x=nx,y=ny)),(k[U]||k.w||k[ad]||k.s||k[L]||k[I])&&e.length<10&&rd()<.02&&(t=rd()*PI*2,d=1+rd()*2,X=x+cos(t)*d,Y=y+sin(t)*d,ff(X,Y)==0&&e.push({x:X,y:Y,h:100})),rd()<.005&&am<25&&am++,e.forEach(o=>{let d=hypot(dx=x-o.x,dy=y-o.y);d>.2&&(o.x+=dx/d*(.0015+.003/d),o.y+=dy/d*(.0015+.003/d),ff(o.x,o.y)!=1||0),d<.5&&(H--,fl=2,h[F]="%23800",h[fr](0,0,320,240))});let w=[];for(i=320;i--;){r=a+atan((i-160)/160),dx=cos(r),dy=sin(r),ix=floor(x),iy=floor(y),ddx=dx?abs(1/dx):1e30,ddy=dy?abs(1/dy):1e30,sx=dx<0?-1:1,sy=dy<0?-1:1,tmx=dx<0?(x-ix)*ddx:(ix+1-x)*ddx,tmy=dy<0?(y-iy)*ddy:(iy+1-y)*ddy,d=0;for(;;){if(tmx<tmy)ix+=sx,d=tmx,tmx+=ddx;else iy+=sy,d=tmy,tmy+=ddy;if(d>20||f(ix,iy)==1)break}d*=cos(r-a),w[i]=d,h2=min(240,240/d),g=min(255,200/d)|0,h[F]=`rgb(${g},${g},${g}`,h[fr](i,120-h2/2+rc*20,1,h2)}e.forEach(o=>{d=ho(o),r=ao(o);if(abs(r)<1.2){sz=80/d,px=160+r*160;px>=0&&px<320&&d<w[px|0]*1.1&&(h[F]=`%23${o.h>50?4:8}00`,h[fr](px-sz/2,120-sz/2+rc*20,sz,sz*1.5),h[F]=b="red",h[fr](px-sz/4,120-sz/2+rc*20,sz/8,sz/4),h[fr](px+sz/4,120-sz/2+rc*20,sz/8,sz/4))}}),fl&&(h[F]="orange",h[fr](140,160+rc*20,40,20)),h[F]=b,h[fr](10,10,H,10),h[F]="yellow",h[fr](10,25,am*4,5),h[F]="white",h.font="7px Arial",h[T]("HP",10,7),h[T]("AMMO:"+am,10,28),h[l="textAlign"]="right",h[T]("<3 KWT",315,235),h[l]="left",H>0?requestAnimationFrame(R):(h[F]=b,h.font="20px Arial",h[l]="center",h[T]("GAME OVER",160,120))};R()}</script><style>*{margin:0;cursor:crosshair;width:100vw;height:100vh;touch-action:none

Still plenty of multi-char variable names and the "alphabet pool" is not yet exhausted.

Global variable names used in the version above

A
a
b
d
e
F
f
g
H
h
I
i
k
L
l
m
n
R
r
S
T
t
U
X
x
Y
y
ad
am
ao
dx
dy
fl
fr
h2
ho
ix
iy
nx
ny
px
rc
rd
sx
sy
sz
ddx
ddy
tmx
tmy

however this breaks Chrome Mobile

To be honest, I am quite surprised all tested browsers are quite OK with this URI so far: for example these non-encoded % are, strictly speaking invalid, since % is reserved for escaping, Plus most brackets, non alphanumerics can be "dangerous" as well. The technically "valid" payload should pass through decodeURI/encodeURI conversion, so probably should look like this fat boi:

dataURI with proper "encodeURI" format, 3063 bytes

data:text/html,%3Ccanvas%20id%3Dc%20width%3D320%20height%3D240%3E%3Cscript%3Ewith(Math)%7Bh%3Dc.getContext`2d`%2Cx%3Dy%3D4%2CH%3D100%2Cam%3D25%2Ca%3Drc%3Dfl%3Dt%3D0%2Crd%3Drandom%2Cfr%3D"fillRect"%2CT%3D"fillText"%2CF%3D"fillStyle"%2CA%3D"Arrow"%2CL%3DA%2B"Left"%2CI%3DA%2B"Right"%2CU%3DA%2B"Up"%2Cad%3DA%2B"Down"%2Cao%3Do%3D%3Eatan2(o.y-y%2Co.x-x)-a%2Cho%3Do%3D%3Ehypot(o.x-x%2Co.y-y)%2CS%3Drd()*100%2Cf%3D(i%2Cj)%3D%3E(abs(i-4)%3C4%26%26abs(j-4)%3C4)%3F0%3A((i%2B1e3)%257%3D%3D3%7C%7C(j%2B1e3)%257%3D%3D3)%3F0%3A(n%3Dcos(i*12.9898%2Bj*78.233%2BS)*43758.5453%2Cn-%3Dn%7C0%2Cn%3C.05%3F1%3A0)%2Ce%3D%5B%7Bx%3A5%2Cy%3A4%2Ch%3A100%7D%2C%7Bx%3A4%2Cy%3A5%2Ch%3A100%7D%5D%2Ck%3D%7B%7D%3Bonkeydown%3De%3D%3Ek%5Be.key%5D%3D1%2Conkeyup%3De%3D%3Ek%5Be.key%5D%3D0%2ContouchstIt%3De%3D%3E%7Be.preventDefUlt()%2Ct%3D1%2Ck%5Be.touches%5B0%5D.clientX%3CinnerWidth%2F2%3FL%3AI%5D%3D1%2Ck%5BU%5D%3D1%7D%2Contouchend%3De%3D%3E%7Bt%3Dk%5BL%5D%3Dk%5BI%5D%3Dk%5BU%5D%3D0%7D%2Conclick%3D_%3D%3E%7Bif(am)%7Bam--%2Cfl%3D2%2Crc%3D.2%2Ce.forEach(o%3D%3E%7Blet%20d%3Dho(o)%2Cr%3Dao(o)%3Bd%3C5%26%26abs(r)%3C.3%26%26(o.h-%3D50%2Ch%5BF%5D%3Dw%3D"white"%2Ch%5Bfr%5D(160%2Br*160-2%2C118%2C4%2C4))%7D)%7D%7D%3Bff%3D(a%2Cb)%3D%3Ef(0%7Ca%2C0%7Cb)%3BR%3D_%3D%3E%7Brc-%3Drc%3E.02%3F.02%3Arc%2Cfl%26%26fl--%2Ce%3De.filter(o%3D%3Eo.h%3E0)%2Ch%5BF%5D%3D"black"%2Ch%5Bfr%5D(0%2C0%2C320%2C240)%2Ck%5BL%5D%26%26(a-%3D.1)%2Ck%5BI%5D%26%26(a%2B%3D.1)%2Cm%3D.1%2C(k%5BU%5D%7C%7Ck.w)%26%26(nx%3Dx%2Bcos(a)*m%2Cny%3Dy%2Bsin(a)*m%2Cff(nx%2Cny)!%3D1%26%26(x%3Dnx%2Cy%3Dny))%2C(k%5Bad%5D%7C%7Ck.s)%26%26(nx%3Dx-cos(a)*m%2Cny%3Dy-sin(a)*m%2Cff(nx%2Cny)!%3D1%26%26(x%3Dnx%2Cy%3Dny))%2C(k%5BU%5D%7C%7Ck.w%7C%7Ck%5Bad%5D%7C%7Ck.s%7C%7Ck%5BL%5D%7C%7Ck%5BI%5D)%26%26e.length%3C10%26%26rd()%3C.02%26%26(t%3Drd()*PI*2%2Cd%3D1%2Brd()*2%2CX%3Dx%2Bcos(t)*d%2CY%3Dy%2Bsin(t)*d%2Cff(X%2CY)%3D%3D0%26%26e.push(%7Bx%3AX%2Cy%3AY%2Ch%3A100%7D))%2Crd()%3C.005%26%26am%3C25%26%26am%2B%2B%2Ce.forEach(o%3D%3E%7Blet%20d%3Dhypot(dx%3Dx-o.x%2Cdy%3Dy-o.y)%3Bd%3E.2%26%26(o.x%2B%3Ddx%2Fd*(.0015%2B.003%2Fd)%2Co.y%2B%3Ddy%2Fd*(.0015%2B.003%2Fd)%2Cff(o.x%2Co.y)!%3D1%7C%7C0)%2Cd%3C.5%26%26(H--%2Cfl%3D2%2Ch%5BF%5D%3D"%23800"%2Ch%5Bfr%5D(0%2C0%2C320%2C240))%7D)%3Blet%20w%3D%5B%5D%3Bfor(i%3D320%3Bi--%3B)%7Br%3Da%2Batan((i-160)%2F160)%2Cdx%3Dcos(r)%2Cdy%3Dsin(r)%2Cix%3Dfloor(x)%2Ciy%3Dfloor(y)%2Cddx%3Ddx%3Fabs(1%2Fdx)%3A1e30%2Cddy%3Ddy%3Fabs(1%2Fdy)%3A1e30%2Csx%3Ddx%3C0%3F-1%3A1%2Csy%3Ddy%3C0%3F-1%3A1%2Ctmx%3Ddx%3C0%3F(x-ix)*ddx%3A(ix%2B1-x)*ddx%2Ctmy%3Ddy%3C0%3F(y-iy)*ddy%3A(iy%2B1-y)*ddy%2Cd%3D0%3Bfor(%3B%3B)%7Bif(tmx%3Ctmy)ix%2B%3Dsx%2Cd%3Dtmx%2Ctmx%2B%3Dddx%3Belse%20iy%2B%3Dsy%2Cd%3Dtmy%2Ctmy%2B%3Dddy%3Bif(d%3E20%7C%7Cf(ix%2Ciy)%3D%3D1)break%7Dd*%3Dcos(r-a)%2Cw%5Bi%5D%3Dd%2Ch2%3Dmin(240%2C240%2Fd)%2Cg%3Dmin(255%2C200%2Fd)%7C0%2Ch%5BF%5D%3D`rgb(%24%7Bg%7D%2C%24%7Bg%7D%2C%24%7Bg%7D`%2Ch%5Bfr%5D(i%2C120-h2%2F2%2Brc*20%2C1%2Ch2)%7De.forEach(o%3D%3E%7Bd%3Dho(o)%2Cr%3Dao(o)%3Bif(abs(r)%3C1.2)%7Bsz%3D80%2Fd%2Cpx%3D160%2Br*160%3Bpx%3E%3D0%26%26px%3C320%26%26d%3Cw%5Bpx%7C0%5D*1.1%26%26(h%5BF%5D%3D`%23%24%7Bo.h%3E50%3F4%3A8%7D00`%2Ch%5Bfr%5D(px-sz%2F2%2C120-sz%2F2%2Brc*20%2Csz%2Csz*1.5)%2Ch%5BF%5D%3Db%3D"red"%2Ch%5Bfr%5D(px-sz%2F4%2C120-sz%2F2%2Brc*20%2Csz%2F8%2Csz%2F4)%2Ch%5Bfr%5D(px%2Bsz%2F4%2C120-sz%2F2%2Brc*20%2Csz%2F8%2Csz%2F4))%7D%7D)%2Cfl%26%26(h%5BF%5D%3D"orange"%2Ch%5Bfr%5D(140%2C160%2Brc*20%2C40%2C20))%2Ch%5BF%5D%3Db%2Ch%5Bfr%5D(10%2C10%2CH%2C10)%2Ch%5BF%5D%3D"yellow"%2Ch%5Bfr%5D(10%2C25%2Cam*4%2C5)%2Ch%5BF%5D%3D"white"%2Ch.font%3D"7px%20Arial"%2Ch%5BT%5D("HP"%2C10%2C7)%2Ch%5BT%5D("AMMO%3A"%2Bam%2C10%2C28)%2Ch%5Bl%3D"textAlign"%5D%3D"right"%2Ch%5BT%5D("%3C3%20KWT"%2C315%2C235)%2Ch%5Bl%5D%3D"left"%2CH%3E0%3FrequestAnimationFrame(R)%3A(h%5BF%5D%3Db%2Ch.font%3D"20px%20Arial"%2Ch%5Bl%5D%3D"center"%2Ch%5BT%5D("GAME%20OVER"%2C160%2C120))%7D%3BR()%7D%3C%2Fscript%3E%3Cstyle%3E*%7Bmargin%3A0%3Bcursor%3Acrosshair%3Bwidth%3A100vw%3Bheight%3A100vh%3Btouch-action%3Anone

Basically any "violation" against this that slips through is browsers benevolence/resilience (good for us :] ).

[SuperMaxusa]

this breaks Chrome Mobile

I meant it was a rendering bug, sorry for misunderstanding. For some reason when I tested the game with these changes on Chrome (Android), it looks stretched:

I'm tried again right now and problem is gone, huh. So we can change vw/vh to %, this gives -4 bytes on gzip version. By the way, can we use escaped %% for dataURI?

Still plenty of multi-char variable names and the "alphabet pool" is not yet exhausted.

Yeah, I see that long function/variables names almost gone and for compression it's not so good, this is an improvement mostly for dataURI, or am I wrong?