DOOM

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Neon Catacomb</title>
<style>
html,body{margin:0;background:#050609;color:#ddd;height:100%;overflow:hidden;font-family:monospace}body{display:grid;place-items:center}#wrap{position:relative;width:min(100vw,calc(100vh * 1.6));aspect-ratio:16/10;background:#111;box-shadow:0 0 45px #000}canvas{width:100%;height:100%;display:block;image-rendering:pixelated}#tip{position:absolute;inset:0;display:grid;place-items:center;text-align:center;pointer-events:none;color:#fff;text-shadow:2px 2px #000;font-weight:bold;font-size:clamp(12px,2vw,20px)}#tip small{color:#aaa;font-size:.7em}b{color:#f44}</style>
</head><body><div id="wrap"><canvas id="game" width="960" height="600"></canvas><div id="tip">CLICK TO ENTER<br><small>WASD move · mouse aim · click fire · 1/2/3 switch weapons · R reload</small></div></div>
<script>
const c=document.querySelector('canvas'),x=c.getContext('2d'),W=c.width,H=c.height,FOV=Math.PI/3,depth=new Float32Array(W),TAU=Math.PI*2;
const map=["1111111111111111","1000000000000001","1011110111111101","1000010100000101","1111010101110101","1000010001010001","1011111101011111","1000000001000001","1011110111110101","1000010000000101","1011011111110101","1001000000010001","1001110111011101","1000000100000001","1000000000000001","1111111111111111"];
let p={x:1.8,y:1.8,a:0,hp:100,ammo:18,clips:3,weapon:0,dead:0,score:0},spawn={x:1.8,y:1.8},keys={},mouse=false,won=false,last=0,flash=0;
const guns=[{name:'SIDEARM',damage:28,rate:330,mag:12,max:12,color:'#ffd34e'},{name:'BURST RIFLE',damage:16,rate:105,mag:30,max:30,color:'#67e8ff'},{name:'ARC CANNON',damage:90,rate:850,mag:3,max:3,color:'#d68cff'}];let cooldown=0;
let foes=[{x:5.5,y:1.7,h:60,alive:1,hit:0},{x:12.5,y:3.5,h:60,alive:1,hit:0},{x:3.3,y:5.7,h:70,alive:1,hit:0},{x:10.5,y:5.4,h:70,alive:1,hit:0},{x:6.5,y:8.5,h:80,alive:1,hit:0},{x:12.5,y:8.5,h:100,alive:1,hit:0},{x:4.5,y:12.2,h:110,alive:1,hit:0},{x:10.5,y:12.4,h:120,alive:1,hit:0}];
let items=[{x:2.7,y:3.3,t:'health'},{x:8.5,y:1.7,t:'ammo'},{x:13.2,y:6.8,t:'weapon',w:1},{x:2.5,y:10.5,t:'ammo'},{x:8.4,y:11.7,t:'weapon',w:2},{x:13.4,y:13.3,t:'health'}];
function wall(a,b){let X=Math.floor(a),Y=Math.floor(b);return Y<0||Y>=map.length||X<0||X>=map[0].length||map[Y][X]=='1'}
function move(dx,dy){if(!wall(p.x+dx,p.y)&&!wall(p.x+dx,p.y+.25)&&!wall(p.x+dx,p.y-.25))p.x+=dx;if(!wall(p.x,p.y+dy)&&!wall(p.x+.25,p.y+dy)&&!wall(p.x-.25,p.y+dy))p.y+=dy}
function norm(a){return Math.atan2(Math.sin(a),Math.cos(a))}
function shoot(){if(p.dead||won||cooldown>0)return;let g=guns[p.weapon];if(p.ammo<=0){flash=8;return}p.ammo--;cooldown=g.rate;flash=7;let best=null,bd=99;for(let e of foes)if(e.alive){let dx=e.x-p.x,dy=e.y-p.y,d=Math.hypot(dx,dy),ang=Math.abs(norm(Math.atan2(dy,dx)-p.a));if(ang<.075+g.weapon*.02&&d<bd&&line(p.x,p.y,e.x,e.y)){best=e;bd=d}}if(best){best.h-=g.damage;best.hit=8;if(best.h<=0){best.alive=0;p.score++;if(p.score===foes.length)won=true}}}
function line(ax,ay,bx,by){let d=Math.hypot(bx-ax,by-ay),n=Math.ceil(d*12);for(let i=1;i<n;i++){let q=i/n;if(wall(ax+(bx-ax)*q,ay+(by-ay)*q))return false}return true}
function respawn(){p.x=spawn.x;p.y=spawn.y;p.a=0;p.hp=100;p.ammo=guns[p.weapon].max;p.clips=3;p.dead=0;foes.forEach((e,i)=>{e.alive=1;e.h=60+i*9})}
function cast(a){let dx=Math.cos(a),dy=Math.sin(a),d=0;while(d<30&&!wall(p.x+dx*d,p.y+dy*d))d+=.025;return d}
function drawWorld(){x.fillStyle='#16151d';x.fillRect(0,0,W,H/2);x.fillStyle='#252329';x.fillRect(0,H/2,W,H/2);for(let i=0;i<W;i++){let a=p.a-FOV/2+FOV*i/W,d=cast(a)*Math.cos(a-p.a);depth[i]=d;let h=Math.min(H*1.5,H/d*.72),y=(H-h)/2;x.fillStyle=`hsl(${(i%23)*2+5},${30+Math.min(35,d*3)}%,${Math.max(12,43-d*2)}%)`;x.fillRect(i,y,1,h);if(d<1.7){x.fillStyle='rgba(255,220,150,.06)';x.fillRect(i,y,1,h)}}}
function sprites(){let arr=[];for(let e of foes)if(e.alive)arr.push({...e,t:'foe'});for(let q of items)arr.push({...q,t:q.t});arr.sort((a,b)=>Math.hypot(b.x-p.x,b.y-p.y)-Math.hypot(a.x-p.x,a.y-p.y));for(let q of arr){let dx=q.x-p.x,dy=q.y-p.y,d=Math.hypot(dx,dy),ang=norm(Math.atan2(dy,dx)-p.a);if(Math.abs(ang)>FOV*.7||!line(p.x,p.y,q.x,q.y))continue;let sx=W/2+Math.tan(ang)/Math.tan(FOV/2)*W/2, size=Math.min(260,H/d*.55),base=H/2+size*.45;if(d<=depth[Math.max(0,Math.min(W-1,sx|0))]+.25){if(q.t==='foe'){x.fillStyle=q.hit?'#fff':'#a52d3f';x.fillRect(sx-size*.28,base-size*.7,size*.56,size*.7);x.fillStyle='#f4bf7b';x.fillRect(sx-size*.18,base-size*.88,size*.36,size*.22);x.fillStyle='#111';x.fillRect(sx-size*.11,base-size*.79,size*.07,size*.07);x.fillRect(sx+size*.04,base-size*.79,size*.07,size*.07);x.fillStyle='#541c31';x.fillRect(sx-size*.38,base-size*.48,size*.76,size*.14)}else{let col=q.t==='health'?'#31e06f':q.t==='ammo'?'#f6c344':q.w===2?'#c77dff':'#55dbff';x.fillStyle=col;x.shadowColor=col;x.shadowBlur=14;x.fillRect(sx-size*.22,base-size*.35,size*.44,size*.44);x.shadowBlur=0;x.fillStyle='#17202c';x.font=`${size*.3}px monospace`;x.textAlign='center';x.fillText(q.t==='health'?'+':q.t==='ammo'?'A':'W',sx,base-size*.05)}}}}
function gun(){let g=guns[p.weapon],bob=Math.sin(Date.now()/100)*3;x.save();x.translate(W/2,H+15+bob);x.fillStyle='#171923';x.strokeStyle='#555';x.lineWidth=4;if(p.weapon===0){x.fillRect(-48,-140,96,140);x.fillStyle='#303647';x.fillRect(-22,-220,44,120)}if(p.weapon===1){x.fillRect(-65,-130,130,130);x.fillRect(-18,-260,36,150);x.fillStyle='#87909c';x.fillRect(-8,-270,16,140)}if(p.weapon===2){x.fillRect(-80,-110,160,110);x.fillStyle='#c77dff';x.fillRect(-27,-255,54,160);x.fillRect(-62,-185,124,35)}x.strokeRect(-50,-130,100,100);x.restore();if(flash>0){x.fillStyle=g.color;x.globalAlpha=.7;x.beginPath();x.arc(W/2,H*.43,35+Math.random()*25,0,TAU);x.fill();x.globalAlpha=1}}
function hud(){x.fillStyle='rgba(5,6,9,.86)';x.fillRect(0,H-68,W,68);x.font='bold 21px monospace';x.fillStyle=p.hp<30?'#ff4141':'#72ed79';x.fillText('VIT '+Math.max(0,p.hp),22,H-28);x.fillStyle='#ddd';x.fillText(`${guns[p.weapon].name}  ${p.ammo}/${guns[p.weapon].max*p.clips}`,220,H-28);x.fillStyle='#f1cf48';x.fillText('FRAGS '+p.score+'/'+foes.length,650,H-28);x.font='14px monospace';x.fillStyle='#aaa';x.fillText('1 2 3 WEAPONS   R RELOAD',22,25);x.textAlign='right';x.fillText('NEON CATACOMB',W-22,25);x.textAlign='left'}
function update(dt){if(p.dead||won)return;let sp=dt*.003*(keys.shift?1.45:1),mx=(keys.d?1:0)-(keys.a?1:0),my=(keys.w?1:0)-(keys.s?1:0),l=Math.hypot(mx,my)||1;move(Math.cos(p.a)*my/l*sp+Math.cos(p.a+Math.PI/2)*mx/l*sp,Math.sin(p.a)*my/l*sp+Math.sin(p.a+Math.PI/2)*mx/l*sp);cooldown=Math.max(0,cooldown-dt);flash=Math.max(0,flash-1);if(mouse&&cooldown===0)shoot();for(let q of items){if(Math.hypot(q.x-p.x,q.y-p.y)<.55){if(q.t==='health'){p.hp=Math.min(100,p.hp+35);q.x=-9}else if(q.t==='ammo'){p.ammo=Math.min(guns[p.weapon].max,p.ammo+guns[p.weapon].max*.6|0);q.x=-9}else{p.weapon=q.w;p.ammo=guns[p.weapon].max;q.x=-9}}}for(let e of foes)if(e.alive){let d=Math.hypot(e.x-p.x,e.y-p.y);if(d<.62){p.hp-=dt*.018;if(p.hp<=0){p.dead=1;mouse=false}}else if(d<7){let a=Math.atan2(p.y-e.y,p.x-e.x),v=dt*.00035;if(line(e.x,e.y,p.x,p.y)){let nx=e.x+Math.cos(a)*v,ny=e.y+Math.sin(a)*v;if(!wall(nx,ny))e.x=nx,e.y=ny}}}}
function frame(t){let dt=Math.min(50,t-last);last=t;update(dt);drawWorld();sprites();gun();hud();if(p.dead||won){x.fillStyle='rgba(0,0,0,.7)';x.fillRect(0,0,W,H);x.textAlign='center';x.font='bold 44px monospace';x.fillStyle=won?'#83ff91':'#ff4c4c';x.fillText(won?'CATACOMB CLEARED!':'YOU WERE OVERRUN',W/2,H/2-20);x.font='18px monospace';x.fillStyle='#fff';x.fillText(won?'All wardens eliminated — click to play again':'CLICK TO RESPawn',W/2,H/2+25);x.textAlign='left'}requestAnimationFrame(frame)}
addEventListener('keydown',e=>{keys[e.key.toLowerCase()]=1;if(e.key==='1'||e.key==='2'||e.key==='3'){p.weapon=+e.key-1;p.ammo=Math.min(p.ammo,guns[p.weapon].max)}if(e.key.toLowerCase()==='r')p.ammo=guns[p.weapon].max});addEventListener('keyup',e=>keys[e.key.toLowerCase()]=0);c.addEventListener('mousedown',()=>{if(p.dead){respawn();return}if(won){location.reload();return}mouse=true;document.querySelector('#tip').style.display='none';c.requestPointerLock()});addEventListener('mouseup',()=>mouse=false);addEventListener('mousemove',e=>{if(document.pointerLockElement===c)p.a+=e.movementX*.0025});requestAnimationFrame(frame);
</script></body></html>