Dust & Shadows - Pixel Shooter

Dust & Shadows

WASD move

Mouse aim • Click shoot

Press R to toggle radar • Press T to restart

\n\n

\n \n

\n\n \n\n \n \n css: /* ...existing styles... */\n:root {\n --bg: #0a0a0a;\n --fg: #111;\n --text: #fff;\n --muted: #9aa0a6;\n}\n\n@font-face {\n font-family: \"CalSans\";\n src: local(\"Cal Sans\"), local(\"CalSans\");\n font-weight: 400 800;\n font-style: normal;\n}\n\nhtml, body {\n margin: 0;\n height: 100%;\n background: #000;\n color: var(--text);\n font-family: CalSans, \"Noto Sans\", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\n display: flex; align-items: center; justify-content: center;\n}\n\n#game {\n display: block;\n image-rendering: pixelated;\n image-rendering: crisp-edges;\n background: #cdbf9a; /* sandy backdrop fallback */\n}\n\n#ui {\n position: fixed;\n top: 0; left: 0; right: 0;\n display: flex;\n justify-content: space-between;\n padding: 12px 14px;\n pointer-events: none;\n}\n\n#ui .panel {\n background: rgba(0,0,0,0.35);\n border: 1px solid rgba(255,255,255,0.1);\n border-radius: 8px;\n padding: 10px 12px;\n backdrop-filter: blur(2px);\n}\n\n#ui .title {\n font-weight: 700;\n letter-spacing: 0.5px;\n margin-bottom: 6px;\n}\n\n#ui .line {\n color: #e6e6e6;\n font-size: 12px;\n}\n\n#ui .line.small {\n opacity: 0.8;\n font-size: 11px;\n}\n\n#ui .line span {\n color: #fff;\n font-weight: 600;\n}\n\n#stats {\n pointer-events: none;\n min-width: 120px;\n text-align: right;\n font-size: 12px;\n opacity: 0.95;\n}\n\n#radarPanel{\n position: fixed;\n left: 50%;\n bottom: 0;\n transform: translate(-50%, 110%);\n transition: transform 0.25s ease;\n pointer-events: none;\n z-index: 10;\n width: min(90vw, 480px);\n}\n\n#radarPanel.active{\n transform: translate(-50%, 0);\n}\n\n#radarPanel .radar-shell{\n position: relative;\n background: rgba(0, 0, 0, 0.55);\n backdrop-filter: blur(5px);\n border: 1px solid rgba(255, 255, 255, 0.12);\n border-radius: 12px 12px 0 0;\n padding: 10px 12px 16px;\n box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.45);\n}\n\n#radarCanvas{\n display: block;\n width: 100%;\n height: auto;\n image-rendering: pixelated;\n background: #000;\n border-radius: 8px;\n border: 1px solid rgba(0, 255, 100, 0.2);\n}\n\n#radarPanel .hands{\n position: absolute;\n left: 0;\n right: 0;\n bottom: 6px;\n display: flex;\n justify-content: space-between;\n padding: 0 24px;\n pointer-events: none;\n}\n\n#radarPanel .hand{\n width: 48px;\n height: 22px;\n background: #2a1f1a;\n border-radius: 12px;\n box-shadow: 0 -2px 0 rgba(255, 255, 255, 0.05) inset, 0 3px 0 rgba(0, 0, 0, 0.35) inset;\n opacity: 0.95;\n}\n\n#radarPanel .hand.left{\n transform: rotate(-6deg);\n}\n\n#radarPanel .hand.right{\n transform: rotate(6deg);\n}\n\n#upgradeOverlay{\n position: fixed; inset: 0; display: none; align-items: center; justify-content: center;\n background: rgba(0,0,0,0.45); backdrop-filter: blur(4px); z-index: 20;\n}\n#upgradeOverlay.active{ display: flex; }\n#upgradeOverlay .upgrade-modal{\n background: #0d0d0d; border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 16px 18px; min-width: 260px;\n}\n#upgradeOverlay .upgrade-title{ font-weight: 700; margin-bottom: 10px; }\n#upgradeOverlay button{ width: 100%; padding: 10px 12px; margin-top: 8px; background:#111; color:#fff; border:1px solid rgba(255,255,255,0.15); border-radius:8px; cursor:pointer; }\n#upgradeOverlay button:hover{ background:#151515; }\n\n#menu{\n position: fixed; inset: 0; background:#d9caa3; display: flex; gap: 28px; padding: 32px; align-items: center; justify-content: center; z-index: 50;\n}\n#menu[aria-hidden=\"true\"]{ display:none; }\n#menu .menu-left{ max-width: 420px; width: 40vw; min-width: 260px; }\n.menu-title{ font-family: \"Press Start 2P\", monospace; font-size: clamp(20px, 3.2vw, 36px); line-height:1.2; color:#111; letter-spacing:1px; }\n.menu-sub{ color:#333; margin:10px 0 18px; font-size:12px; }\n.menu-btn{ width: 100%; padding: 12px 14px; margin-top:10px; font-family: \"Press Start 2P\", monospace; font-size:12px; background:#111; color:#fff; border:none; border-radius:8px; cursor:pointer; }\n.menu-btn.secondary{ background:#2b2b2b; }\n.menu-btn:hover{ transform: translateY(-1px); }\n#menu .menu-right{ background:rgba(0,0,0,0.1); border:1px solid rgba(0,0,0,0.15); border-radius:12px; padding:10px; }\n#diorama{ display:block; image-rendering: pixelated; background:#cdbf9a; border-radius:8px; } js: // Virtual resolution for crisp pixels\nconst VIRTUAL_W = 320;\nconst VIRTUAL_H = 180;\n\nconst canvas = document.getElementById(\"game\");\nconst ctx = canvas.getContext(\"2d\", { alpha: false });\nctx.imageSmoothingEnabled = false;\n\nconst statsEl = document.getElementById(\"stats\");\nconst radarPanel = document.getElementById(\"radarPanel\"); const radarCanvas = document.getElementById(\"radarCanvas\");\nconst radarCtx2 = radarCanvas ? radarCanvas.getContext(\"2d\", { alpha:false }) : null; if (radarCtx2) radarCtx2.imageSmoothingEnabled=false;\nlet radarActive=false; function setRadarActive(b){ radarActive=b; if(radarPanel){ radarPanel.classList.toggle(\"active\",b); radarPanel.setAttribute(\"aria-hidden\",(!b).toString()); } }\nconst upgEl = document.getElementById(\"upgradeOverlay\");\n\n// Input\nconst keys = new Set();\nlet mouse = { x: 0, y: 0, down: false };\n\n// RNG helper\nconst rand = (a = 1) => Math.random() * a;\nconst randi = (a, b) => Math.floor(a + Math.random() * (b - a + 1));\nconst clamp = (v, a, b) => Math.max(a, Math.min(b, v));\nconst lerp = (a, b, t) => a + (b - a) * t;\n\n// World\nconst TILE = 16;\nconst MAP_W = 120; // tiles\nconst MAP_H = 80; // tiles\nconst WORLD_W = MAP_W * TILE;\nconst WORLD_H = MAP_H * TILE;\n\nlet camera = { x: 0, y: 0 };\n\n// Pathfinding grid\nconst GRID_W = MAP_W, GRID_H = MAP_H;\nlet nav = new Uint8Array(GRID_W * GRID_H);\n\nconst menuEl = document.getElementById(\"menu\");\nconst playBtn = document.getElementById(\"btnPlay\");\nconst settingsBtn = document.getElementById(\"btnSettings\");\nconst dio = document.getElementById(\"diorama\");\nconst dioCtx = dio ? dio.getContext(\"2d\", { alpha:false }) : null;\n\nconst state = {\n playing: true,\n score: 0,\n time: 0,\n wave: 1,\n hp: 5,\n maxHp: 5,\n intermission: false, nextWaveT: 0,\n enemiesAlive: 0,\n advancing: false,\n spawnT: 0,\n kills: 0, pausedForUpgrade: false, nextUpgradeAt: 50, bulletDamage: 1\n};\n\n// Offscreen pixel canvas creator\nfunction makePix(w, h, drawFn) {\n const c = document.createElement(\"canvas\");\n c.width = w; c.height = h;\n const g = c.getContext(\"2d\");\n g.imageSmoothingEnabled = false;\n drawFn(g);\n return c;\n}\n\n// Generate textures\nconst textures = {\n ground: null,\n wall: null,\n container: null,\n bloodSplats: [],\n cactus: []\n};\n\nfunction genGround() {\n // Dirt + sand mix with subtle noise\n const tex = makePix(64, 64, (g) => {\n g.fillStyle = \"#cdbf9a\"; // sand base\n g.fillRect(0, 0, 64, 64);\n // dirt speckles\n for (let i = 0; i < 900; i++) {\n const x = randi(0, 63), y = randi(0, 63);\n const d = Math.random();\n g.fillStyle = d < 0.5 ? \"#bba881\" : \"#9b8a67\";\n g.globalAlpha = 0.15 + Math.random() * 0.35;\n g.fillRect(x, y, 1, 1);\n }\n // patches of darker dirt\n g.globalAlpha = 0.2;\n for (let i = 0; i < 40; i++) {\n const cx = randi(0, 63), cy = randi(0, 63);\n const r = 4 + Math.random() * 12;\n g.fillStyle = Math.random() < 0.5 ? \"#b1956d\" : \"#8d7a57\";\n blob(g, cx, cy, r);\n }\n g.globalAlpha = 1;\n });\n return tex;\n}\n\nfunction genWall() {\n // Grey concrete blocks\n return makePix(32, 32, (g) => {\n g.fillStyle = \"#7a7a7a\";\n g.fillRect(0, 0, 32, 32);\n for (let i = 0; i < 200; i++) {\n g.fillStyle = `rgba(0,0,0,${0.05 + Math.random() * 0.1})`;\n g.fillRect(randi(0, 31), randi(0, 31), 1, 1);\n }\n // seams\n g.fillStyle = \"rgba(0,0,0,0.2)\";\n for (let y = 0; y < 32; y += 8) g.fillRect(0, y, 32, 1);\n for (let x = 0; x < 32; x += 8) g.fillRect(x, 0, 1, 32);\n });\n}\n\nfunction genContainer() {\n // Big grey container with ribs\n return makePix(48, 32, (g) => {\n g.fillStyle = \"#868a92\";\n g.fillRect(0, 0, 48, 32);\n g.fillStyle = \"#6f737a\";\n for (let x = 4; x < 48; x += 6) g.fillRect(x, 2, 2, 28);\n // top/bottom rims\n g.fillStyle = \"#5c6066\";\n g.fillRect(0, 0, 48, 2);\n g.fillRect(0, 30, 48, 2);\n });\n}\n\nfunction genBloodVariations() {\n const arr = [];\n for (let i = 0; i < 8; i++) {\n const s = 24;\n const c = makePix(s, s, (g) => {\n g.clearRect(0, 0, s, s);\n g.globalAlpha = 0.95;\n const color = i % 2 ? \"#7a0b0b\" : \"#8f1010\";\n g.fillStyle = color;\n const blobs = 4 + randi(0, 6);\n for (let b = 0; b < blobs; b++) {\n blob(g, randi(6, s - 6), randi(6, s - 6), 3 + Math.random() * 7);\n }\n // drops\n for (let d = 0; d < 20; d++) {\n g.fillRect(randi(0, s - 1), randi(0, s - 1), 1, 1);\n }\n });\n arr.push(c);\n }\n return arr;\n}\n\nfunction genCactusVariations(){\n const out=[];\n for(let i=0;i<4;i++){\n const w=14,h=18;\n const c=makePix(w,h,(g)=>{\n const base=\"#3d7a47\", shade=\"#2f5d38\", hi=\"#4f925a\";\n g.clearRect(0,0,w,h);\n g.fillStyle=base; g.fillRect(6,2,4,14);\n g.fillStyle=hi; g.fillRect(7,3,1,12);\n if(i%2===0){ g.fillStyle=base; g.fillRect(2,8,4,3); g.fillRect(2,8,2,6); g.fillRect(10,5,4,3); g.fillRect(12,3,2,6); }\n else { g.fillStyle=base; g.fillRect(2,5,4,3); g.fillRect(2,3,2,6); g.fillRect(10,8,4,3); g.fillRect(12,8,2,6); }\n g.fillStyle=\"#1e3a22\"; for(let t=0;t<12;t++) g.fillRect(randi(3,11), randi(3,16), 1,1);\n g.fillStyle=\"rgba(0,0,0,0.25)\"; g.fillRect(0,h-2,w,2);\n });\n out.push(c);\n }\n return out;\n}\n\nfunction blob(g, cx, cy, r) {\n for (let a = 0; a < Math.PI * 2; a += 0.2) {\n const rr = r + Math.sin(a * 3 + rand()) * (r * 0.2);\n for (let d = 0; d < rr; d++) {\n const x = Math.round(cx + Math.cos(a) * d);\n const y = Math.round(cy + Math.sin(a) * d);\n g.fillRect(x, y, 1, 1);\n }\n }\n}\n\ntextures.ground = genGround();\ntextures.wall = genWall();\ntextures.container = genContainer();\ntextures.bloodSplats = genBloodVariations();\ntextures.cactus = genCactusVariations();\n\n// Map: walls around, containers scattered\nconst walls = [];\nconst containers = [];\nconst cacti = [];\nfunction buildArena() {\n walls.length = 0;\n containers.length = 0;\n cacti.length = 0;\n\n // Border walls\n const thickness = 16;\n walls.push({ x: 0, y: 0, w: WORLD_W, h: thickness });\n walls.push({ x: 0, y: WORLD_H - thickness, w: WORLD_W, h: thickness });\n walls.push({ x: 0, y: 0, w: thickness, h: WORLD_H });\n walls.push({ x: WORLD_W - thickness, y: 0, w: thickness, h: WORLD_H });\n\n // Some inner grey walls\n for (let i = 0; i < 18; i++) {\n const horizontal = Math.random() > 0.5;\n const w = horizontal ? (24 + randi(0, 14) * 8) : (8 + randi(0, 1) * 8);\n const h = horizontal ? (8 + randi(0, 1) * 8) : (24 + randi(0, 10) * 8);\n const x = randi(thickness + 32, WORLD_W - thickness - w - 32);\n const y = randi(thickness + 32, WORLD_H - thickness - h - 32);\n walls.push({ x, y, w, h });\n }\n\n // Big containers\n for (let i = 0; i < 18; i++) {\n const w = 48, h = 32;\n const x = randi(thickness + 32, WORLD_W - thickness - w - 32);\n const y = randi(thickness + 32, WORLD_H - thickness - h - 32);\n containers.push({ x, y, w, h });\n }\n // Cacti\n cacti.length = 0; cacti.push(...generateCacti());\n rebuildNav(); // update navigation grid after arena creation\n}\n\nfunction generateCacti(){\n const out=[]; const count=38;\n const tex=textures.cactus[0]; if(!tex) return out;\n const cw=tex.width, ch=tex.height, border=24;\n let tries=0; while(out.lengthe.alive).length;\n const CAP = 30; if (alive >= CAP) return;\n const toSpawn = Math.min(count, CAP - alive);\n let mangoLeft = Math.max(1, Math.floor(toSpawn*0.25));\n for (let i = 0; i < toSpawn; i++) {\n const isMango = mangoLeft>0 && (i===toSpawn-1 || Math.random()<0.35); if(isMango) mangoLeft--;\n const p = spawnInOpenFarFromPlayer(isMango?280:240);\n if(isMango){\n enemies.push({ x:p.x,y:p.y,r:11,speed:26+Math.random()*4,hp:6,alive:true,type:\"mango\",path:null,pathIdx:0,repathT:0,stepTimer:0,deadT:0 });\n } else {\n if (Math.random() < 0.3) enemies.push({ x:p.x,y:p.y,r:5,speed:50+Math.random()*10,hp:1,alive:true,type:\"cactismall\",path:null,pathIdx:0,repathT:0,stepTimer:0,deadT:0 });\n else { enemies.push({ x:p.x,y:p.y,r:6,speed:42+Math.random()*22,hp:2,jitter:Math.random()*Math.PI*2,alive:true,path:null,pathIdx:0,repathT:0,stepTimer:0,deadT:0,type:\"spider\" }); initSpiderLegs(enemies[enemies.length - 1]); }\n }\n }\n state.enemiesAlive = enemies.filter(e=>e.alive).length;\n}\n\nfunction spawnInOpenFarFromPlayer(minDist=220){\n let tries = 0;\n while (tries++ < 400){\n const tx = randi(2, GRID_W-3), ty = randi(2, GRID_H-3);\n if (nav[idx(tx,ty)]===0){\n const c = tileCenter(tx,ty);\n if (dist2(c.x,c.y, player.x,player.y) > minDist*minDist) {\n // avoid spawning on top of other enemies (alive or dead)\n let ok = true;\n for (const e of enemies) { if (dist2(c.x,c.y, e.x,e.y) < ((e.r||6)+14)**2) { ok = false; break; } }\n if (ok) return c;\n }\n }\n }\n // fallback: choose the farthest valid open tile inside the map\n let best=null, bestD=-1;\n for(let ty=1; tybestD){ bestD=d; best=c; }\n }\n return best || tileCenter(Math.floor(GRID_W/2), Math.floor(GRID_H/2));\n}\n\nfunction dist2(ax, ay, bx, by) {\n const dx = ax - bx, dy = ay - by;\n return dx * dx + dy * dy;\n}\n\nfunction initSpiderLegs(e){ e.legs=[]; const R=6; for(let i=0;i<8;i++){ const a=i/8*Math.PI*2, fx=e.x+Math.cos(a)*R, fy=e.y+Math.sin(a)*R; e.legs.push({footX:fx,footY:fy,targetX:fx,targetY:fy}); } }\nfunction updateSpiderLegs(e,dt){\n if(!e.legs) return;\n if(!e.alive){ for(const l of e.legs){ l.footX=lerp(l.footX,e.x,dt*2); l.footY=lerp(l.footY,e.y+2,dt*2);} return; }\n const R=6,S=5;\n for(let i=0;iS && !l.stepping){ l.stepping=true; l.stepT=0; l.startX=l.footX; l.startY=l.footY; l.targetX=tx; l.targetY=ty; }\n if(l.stepping){ l.stepT=Math.min(1,(l.stepT||0)+dt*6); const t=l.stepT, lift=Math.sin(t*Math.PI)*2; l.footX=lerp(l.startX,l.targetX,t); l.footY=lerp(l.startY,l.targetY,t)-lift; if(t>=1) l.stepping=false; }\n else { l.footX=lerp(l.footX,l.targetX,dt*10); l.footY=lerp(l.footY,l.targetY,dt*10); }\n }\n}\n\n// Input handlers\nwindow.addEventListener(\"keydown\", (e) => {\n if ([\"KeyW\",\"KeyA\",\"KeyS\",\"ArrowUp\",\"ArrowLeft\",\"ArrowDown\",\"ArrowRight\",\"KeyR\",\"KeyT\"].includes(e.code)) e.preventDefault();\n if (e.code === \"KeyR\") { setRadarActive(!radarActive); return; }\n if (e.code === \"KeyT\") resetGame();\n ensureAudio();\n keys.add(e.code);\n});\nwindow.addEventListener(\"keyup\", (e) => keys.delete(e.code));\ncanvas.addEventListener(\"mousemove\", (e) => {\n const rect = canvas.getBoundingClientRect();\n const scaleX = VIRTUAL_W / rect.width;\n const scaleY = VIRTUAL_H / rect.height;\n mouse.x = (e.clientX - rect.left) * scaleX + camera.x;\n mouse.y = (e.clientY - rect.top) * scaleY + camera.y;\n});\ncanvas.addEventListener(\"mousedown\", () => { mouse.down = true; ensureAudio(); });\ncanvas.addEventListener(\"mouseup\", () => (mouse.down = false));\nwindow.addEventListener(\"blur\", () => { keys.clear(); mouse.down = false; setRadarActive(false); });\n\n// Resize handler keeps crisp pixels\nfunction resize() {\n canvas.width = VIRTUAL_W;\n canvas.height = VIRTUAL_H;\n const scale = Math.max(1, Math.floor(Math.min(window.innerWidth / VIRTUAL_W, window.innerHeight / VIRTUAL_H)));\n canvas.style.width = `${VIRTUAL_W * scale}px`;\n canvas.style.height = `${VIRTUAL_H * scale}px`;\n ctx.imageSmoothingEnabled = false;\n}\nwindow.addEventListener(\"resize\", resize);\nresize();\n\n// Game loop\nlet last = performance.now();\n// start at menu\nstate.playing = false; // don't run game until Play\nrequestAnimationFrame(loop);\n\nfunction loop(t) {\n const dt = Math.min(0.033, (t - last) / 1000);\n last = t;\n if (state.playing) { update(dt); render(); if (radarActive) drawRadar(); }\n else { renderDiorama(dt); }\n requestAnimationFrame(loop);\n}\n\nfunction renderDiorama(dt){\n if(!dioCtx || !dio) return;\n const g = dioCtx, w=dio.width, h=dio.height;\n g.fillStyle=\"#d9caa3\"; g.fillRect(0,0,w,h);\n // faux-3D wall platform\n const cx=w*0.6, cy=h*0.62, pw=280, ph=20, depth=46;\n g.fillStyle=\"#7a7a7a\";\n g.fillRect(cx-pw/2, cy-ph, pw, ph);\n g.fillStyle=\"#676767\"; // front face\n g.beginPath();\n g.moveTo(cx-pw/2, cy);\n g.lineTo(cx-pw/2+depth, cy+depth);\n g.lineTo(cx+pw/2+depth, cy+depth);\n g.lineTo(cx+pw/2, cy);\n g.closePath(); g.fill();\n // player marker\n const t = performance.now()*0.001, bob = Math.sin(t*3)*1.5;\n const px = cx-20, py = cy-10 + bob;\n g.fillStyle=\"rgba(0,0,0,0.25)\"; g.beginPath(); g.ellipse(px, py+6, 9, 4, 0, 0, Math.PI*2); g.fill();\n g.fillStyle=\"#2e7dd6\"; g.fillRect(px-5, py-8, 10, 12); // body\n g.fillStyle=\"#2b2b2b\"; g.fillRect(px-4, py+4, 3, 5); g.fillRect(px+1, py+4, 3, 5); // legs\n g.fillStyle=\"#2a1f1a\"; g.beginPath(); g.arc(px, py-10, 4, 0, Math.PI*2); g.fill(); // head\n // gun\n g.fillStyle=\"#474b52\"; g.fillRect(px+6, py-5, 8, 4); g.fillStyle=\"#1f2226\"; g.fillRect(px+14, py-4, 6, 2);\n // surrounding big spiders\n const spiders = 8, R = 95;\n for(let i=0;i0;\n player.stepTimer -= dt;\n if (moving && player.stepTimer <= 0) { playPlayerStep(player.x, player.y); player.stepTimer = 0.26; }\n // animate\n player.movePhase += (Math.abs(vx) + Math.abs(vy)) > 0 ? 10 * dt : 0;\n player.recoil = Math.max(0, player.recoil - 4 * dt);\n player.flashT = Math.max(0, player.flashT - 10 * dt);\n\n // Aim\n player.face = Math.atan2(mouse.y - player.y, mouse.x - player.x);\n\n // Shooting\n player.fireCd -= dt;\n if (mouse.down && player.fireCd <= 0) {\n shoot();\n player.fireCd = 0.16; // fire rate\n }\n\n // Enemies AI\n for (const e of enemies) {\n if (!e.alive) { e.deadT = Math.min(1, (e.deadT || 0) + dt); updateSpiderLegs(e, dt); continue; }\n e.repathT -= dt;\n const start = worldToTile(e.x, e.y), goal = worldToTile(player.x, player.y);\n if (e.repathT <= 0 || !e.path || e.pathIdx >= e.path.length) {\n e.path = findPath(start.tx, start.ty, goal.tx, goal.ty);\n e.pathIdx = 0; e.repathT = 0.7 + Math.random()*0.4;\n }\n let targetX = player.x, targetY = player.y;\n if (e.path && e.pathIdx < e.path.length) {\n const wp = e.path[e.pathIdx];\n targetX = wp.x; targetY = wp.y;\n if (dist2(e.x, e.y, targetX, targetY) < 6*6) e.pathIdx++;\n }\n const ang = Math.atan2(targetY - e.y, targetX - e.x);\n const j = Math.sin(state.time * 3 + e.jitter) * 0.6;\n const sp = e.speed * (0.8 + Math.random() * 0.2);\n let evx = Math.cos(ang + j * 0.1) * sp * dt;\n let evy = Math.sin(ang + j * 0.1) * sp * dt;\n moveEntityWithCollisions(e, evx, evy);\n e.stepTimer -= dt;\n if ((Math.abs(evx)+Math.abs(evy))>0.0001 && e.stepTimer<=0){\n (e.type===\"mango\"?playMangoStep:playSpiderStep)(e.x,e.y); e.stepTimer = (e.type===\"mango\"?0.35:0.22)+Math.random()*0.08;\n }\n if (e.type===\"spider\") updateSpiderLegs(e, dt);\n // contact damage\n if (dist2(e.x, e.y, player.x, player.y) < (e.r + player.r) ** 2) {\n knockback(player, Math.atan2(player.y - e.y, player.x - e.x), 40);\n damagePlayer(1);\n }\n }\n\n // Bullets\n for (const b of bullets) {\n b.life -= dt;\n if (b.life <= 0) b.dead = true;\n b.x += Math.cos(b.a) * b.speed * dt;\n b.y += Math.sin(b.a) * b.speed * dt;\n\n // wall collision\n if (rectCollisionAny(b.x - 1, b.y - 1, 2, 2, walls) || rectCollisionAny(b.x - 1, b.y - 1, 2, 2, containers) || rectCollisionAny(b.x - 1, b.y - 1, 2, 2, cacti)) {\n b.dead = true;\n }\n\n // enemy hit\n for (const e of enemies) {\n if (!e.alive || b.dead) continue;\n if (dist2(b.x, b.y, e.x, e.y) < (e.r + 1) ** 2) {\n e.hp -= state.bulletDamage;\n b.dead = true;\n if (e.hp <= 0) {\n e.alive = false;\n e.deadT = 0;\n (e.type===\"mango\"?playMangoDeath:playSpiderDeath)(e.x,e.y);\n state.score += 10; state.kills += 1; if (state.kills >= state.nextUpgradeAt) openUpgrade();\n decals.push({ x: e.x - 12 + rand(6), y: e.y - 12 + rand(6), img: textures.bloodSplats[randi(0, textures.bloodSplats.length - 1)] });\n spawnWave(1);\n } else {\n knockback(e, b.a, 30);\n }\n }\n }\n }\n\n // Clean bullets\n for (let i = bullets.length - 1; i >= 0; i--) if (bullets[i].dead) bullets.splice(i, 1);\n\n // Camera\n const margin = 40;\n camera.x = clamp(player.x - VIRTUAL_W / 2, 0, WORLD_W - VIRTUAL_W);\n camera.y = clamp(player.y - VIRTUAL_H / 2, 0, WORLD_H - VIRTUAL_H);\n // keep camera within margins of world\n camera.x = clamp(camera.x, 0, Math.max(0, WORLD_W - VIRTUAL_W));\n camera.y = clamp(camera.y, 0, Math.max(0, WORLD_H - VIRTUAL_H));\n\n // UI stats\n const aliveCountReal = enemies.filter((e) => e.alive).length;\n if (aliveCountReal !== state.enemiesAlive) state.enemiesAlive = aliveCountReal;\n statsEl.textContent = `HP ${state.hp}/${state.maxHp} • Score ${state.score} • Enemies ${aliveCountReal}`;\n}\n\nfunction shoot() {\n const spread = (Math.random() - 0.5) * 0.06;\n const a = player.face + spread;\n const sx = player.x + Math.cos(a) * (player.r + 2);\n const sy = player.y + Math.sin(a) * (player.r + 2);\n bullets.push({ x: sx, y: sy, a, speed: 260, life: 0.7 });\n player.recoil = 0.6; player.flashT = 1;\n playShoot(sx, sy);\n}\n\nfunction damagePlayer(d) {\n state.hp -= d;\n if (state.hp <= 0) {\n state.hp = 0;\n state.playing = false;\n stopBattleMusic();\n statsEl.textContent = `YOU DIED • Score ${state.score} • Press T to restart`;\n }\n}\n\nfunction knockback(ent, ang, force) {\n const vx = Math.cos(ang) * force * 0.02;\n const vy = Math.sin(ang) * force * 0.02;\n moveEntityWithCollisions(ent, vx, vy);\n}\n\nfunction moveEntityWithCollisions(ent, vx, vy) {\n // horizontal\n ent.x += vx;\n const rect = { x: ent.x - ent.r, y: ent.y - ent.r, w: ent.r * 2, h: ent.r * 2 };\n const solid = walls.concat(containers, cacti);\n for (const s of solid) {\n if (rectsOverlap(rect, s)) {\n if (vx > 0) ent.x = s.x - ent.r;\n if (vx < 0) ent.x = s.x + s.w + ent.r;\n rect.x = ent.x - ent.r;\n }\n }\n // vertical\n ent.y += vy;\n rect.y = ent.y - ent.r;\n for (const s of solid) {\n if (rectsOverlap(rect, s)) {\n if (vy > 0) ent.y = s.y - ent.r;\n if (vy < 0) ent.y = s.y + s.h + ent.r;\n rect.y = ent.y - ent.r;\n }\n }\n}\n\nfunction rectsOverlap(a, b) {\n return a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y;\n}\nfunction rectCollisionAny(x, y, w, h, arr) {\n const r = { x, y, w, h };\n for (const a of arr) if (rectsOverlap(r, a)) return true;\n return false;\n}\n\n// --- PATHFINDING UTILS ---\nfunction idx(tx,ty){ return ty*GRID_W+tx; }\nfunction worldToTile(x,y){ return {tx: clamp(Math.floor(x/TILE),0,GRID_W-1), ty: clamp(Math.floor(y/TILE),0,GRID_H-1)}; }\nfunction tileCenter(tx,ty){ return {x: tx*TILE+TILE/2, y: ty*TILE+TILE/2}; }\nfunction findPath(sx,sy,gx,gy){\n if (nav[idx(gx,gy)]===1) { // if goal blocked, try nearby\n const ring = [[0,0],[1,0],[-1,0],[0,1],[0,-1],[1,1],[-1,1],[1,-1],[-1,-1]];\n for (const [dx,dy] of ring){ if(inBounds(gx+dx,gy+dy)&&nav[idx(gx+dx,gy+dy)]===0){ gx+=dx; gy+=dy; break; } }\n }\n const open = new MinHeap((a,b)=>a.f-b.f);\n const came = new Map(), gScore = new Map();\n const key=(x,y)=>x+\"_\"+y, h=(x,y)=>Math.abs(x-gx)+Math.abs(y-gy);\n const startK = key(sx,sy);\n open.push({x:sx,y:sy,f:h(sx,sy)}); gScore.set(startK,0);\n const maxIter = 4000; let iter=0;\n while(open.size() && iter++tileCenter(t.x,t.y));\n for (const [nx,ny] of neighbors4(cur.x,cur.y)){\n if (!inBounds(nx,ny) || nav[idx(nx,ny)]===1) continue;\n const nk=key(nx,ny); const tentative = (gScore.get(ck)||Infinity)+1;\n if (tentative < (gScore.get(nk)||Infinity)){\n came.set(nk, {x:cur.x,y:cur.y});\n gScore.set(nk, tentative);\n open.push({x:nx,y:ny,f: tentative + h(nx,ny)});\n }\n }\n }\n return null;\n}\nfunction reconstruct(came, k){ const out=[]; let curK=k; while(curK){ const [x,y]=curK.split(\"_\").map(Number); out.push({x,y}); curK = came.get(curK) ? (came.get(curK).x+\"_\"+came.get(curK).y) : null; } return out.reverse(); }\nfunction neighbors4(x,y){ return [[x+1,y],[x-1,y],[x,y+1],[x,y-1]]; }\nfunction inBounds(x,y){ return x>=0&&y>=0&&x 0.2) {\n ctx.fillStyle = \"#ffd36a\";\n ctx.fillRect(Math.floor(barrelX + Math.cos(p.face) * 2), Math.floor(barrelY + Math.sin(p.face) * 2), 2, 2);\n }\n}\n\nfunction drawMango(e, dead){\n const alpha = dead ? 0.4*(1 - Math.min(e.deadT||0,1)*0.6) : 1;\n ctx.save(); ctx.translate(e.x,e.y); ctx.globalAlpha=alpha;\n // body (mango yellow/orange)\n ctx.fillStyle = dead ? \"#2a2a2a\" : \"#e3b022\";\n ctx.beginPath(); ctx.ellipse(0, -1, e.r+2, e.r, -0.2, 0, Math.PI*2); ctx.fill();\n // dark slime underside\n ctx.fillStyle = dead ? \"rgba(0,0,0,0.25)\" : \"#1a1205\";\n ctx.beginPath(); ctx.ellipse(0, e.r*0.3, e.r+1, e.r*0.6, 0, 0, Math.PI*2); ctx.fill();\n // black shadow spike legs\n ctx.fillStyle = dead ? \"rgba(0,0,0,0.25)\" : \"#050505\";\n for(let i=0;i<6;i++){ const a=-Math.PI/2 + (i-2.5)*0.35; const lx=Math.cos(a)*(e.r+2), ly=Math.sin(a)*(e.r+4); ctx.beginPath(); ctx.moveTo(lx,ly); ctx.lineTo(lx+Math.cos(a+0.4)*6, ly+Math.sin(a+0.4)*6); ctx.lineTo(lx+Math.cos(a-0.4)*6, ly+Math.sin(a-0.4)*6); ctx.fill(); }\n ctx.restore();\n}\n\nfunction drawShadowSpider(e, dead) {\n // Creepy shadow spider: body + 8 legs\n const bodyR = 4;\n ctx.save();\n ctx.translate(e.x, e.y);\n ctx.fillStyle = dead ? `rgba(0,0,0,${0.35*(1 - Math.min(e.deadT||0,1)*0.6)})` : \"#0a0a0a\";\n // body\n ctx.beginPath();\n ctx.arc(0, 0, bodyR, 0, Math.PI * 2);\n ctx.fill();\n // abdomen for silhouette depth\n ctx.beginPath();\n ctx.arc(-2, 1, bodyR + 2, 0, Math.PI * 2);\n ctx.fill();\n\n // legs\n const hasLegs = e.legs && e.legs.length === 8; const R = bodyR + 1;\n for (let i = 0; i < 8; i++) {\n const a = (i / 8) * Math.PI * 2, ax = Math.cos(a) * R, ay = Math.sin(a) * R;\n let fx, fy; if (hasLegs) { const l = e.legs[i]; fx = l.footX - e.x; fy = l.footY - e.y; } else { fx = Math.cos(a) * 6; fy = Math.sin(a) * 6; }\n const mx = (ax + fx) / 2 + (-(fy - ay)) * (dead ? 0.1 : 0.2), my = (ay + fy) / 2 + ((fx - ax)) * (dead ? 0.1 : 0.2);\n ctx.strokeStyle = dead ? \"rgba(0,0,0,0.25)\" : \"#050505\"; ctx.lineWidth = 2;\n ctx.beginPath(); ctx.moveTo(ax, ay); ctx.lineTo(mx, my); ctx.lineTo(fx, fy); ctx.stroke();\n }\n // subtle red eyes and mandibles\n if (!dead) { ctx.fillStyle = \"#3a0000\"; ctx.fillRect(2, -1, 1, 1); ctx.fillRect(2, 1, 1, 1); }\n ctx.restore();\n}\n\nfunction drawRadar(){\n if(!radarCtx2) return; const g=radarCtx2,w=radarCanvas.width,h=radarCanvas.height;\n g.fillStyle=\"#000\"; g.fillRect(0,0,w,h); g.strokeStyle=\"#0a3\"; g.globalAlpha=0.7;\n for(let x=0;x0){ const p=(i-1>>1); if(c(a[i],a[p])<0){ [a[i],a[p]]=[a[p],a[i]]; i=p; } else break; } }\n down(i){ const a=this.a, c=this.c; for(;;){ let l=i*2+1, r=i*2+2, m=i; if(l {\n if (document.hidden) mouse.down = false;\n});\n\nlet music={started:false,gain:null,iv:null,bar:0};\nfunction startBattleMusic(){ if(!audioCtx||music.started) return; const g=audioCtx.createGain(); g.gain.value=0.15; g.connect(audioCtx.destination); music.gain=g; music.started=true; music.bar=0; scheduleBar(audioCtx.currentTime); music.iv=setInterval(()=>scheduleBar(audioCtx.currentTime),1600); }\nfunction stopBattleMusic(){ if(!music.started) return; clearInterval(music.iv); music.iv=null; music.started=false; if(music.gain){ music.gain.gain.exponentialRampToValueAtTime(0.001,audioCtx.currentTime+0.4); setTimeout(()=>music.gain.disconnect(),500); } }\nfunction scheduleBar(t){ const g=music.gain,ac=audioCtx,q=0.4;\n const kick=tt=>{ const o=ac.createOscillator(),eg=ac.createGain(); o.type=\"sine\"; o.frequency.setValueAtTime(120,tt); o.frequency.exponentialRampToValueAtTime(40,tt+0.18); eg.gain.setValueAtTime(0.9,tt); eg.gain.exponentialRampToValueAtTime(0.001,tt+0.2); o.connect(eg); eg.connect(g); o.start(tt); o.stop(tt+0.21); };\n const sn=tt=>{ const n=ac.createBuffer(1,ac.sampleRate*0.12,ac.sampleRate),d=n.getChannelData(0); for(let i=0;i{ const o=ac.createOscillator(),eg=ac.createGain(); o.type=\"square\"; o.frequency.value=f; eg.gain.value=0.15; eg.gain.setValueAtTime(0.15,tt); eg.gain.exponentialRampToValueAtTime(0.001,tt+q); o.connect(eg); eg.connect(g); o.start(tt); o.stop(tt+q); };\n const bar=(music.bar=(music.bar||0)+1), sec=Math.floor((bar-1)/8)%3, seq=[[65,82,73,82],[73,82,87,82],[65,69,73,69]][sec];\n const hat=tt=>{ const o=ac.createOscillator(),eg=ac.createGain(); o.type=\"square\"; o.frequency.value=800; eg.gain.value=0.08; eg.gain.exponentialRampToValueAtTime(0.001,tt+0.05); o.connect(eg); eg.connect(g); o.start(tt); o.stop(tt+0.06); };\n [0,1,2,3].forEach(b=>kick(t+b*q)); [1,3].forEach(b=>sn(t+b*q+0.2)); [0,1.5,2,3.25].forEach((b,i)=>bass(t+b*q,seq[i]));\n for(let i=0;i<8;i++) hat(t+i*q/2);\n if(((bar-1)%8)>=4){ const lead=(tt,f)=>{ const o=ac.createOscillator(),eg=ac.createGain(); o.type=\"sawtooth\"; o.frequency.value=f; eg.gain.value=0.07; eg.gain.exponentialRampToValueAtTime(0.001,tt+q*0.9); o.connect(eg); eg.connect(g); o.start(tt); o.stop(tt+q); }; const m=[523,587,659,698]; [0,1,2,3].forEach((b,i)=>lead(t+b*q,m[i])); }\n}\n\nfunction openUpgrade(){\n state.pausedForUpgrade = true;\n state.nextUpgradeAt += 50;\n if (upgEl){ upgEl.classList.add(\"active\"); upgEl.setAttribute(\"aria-hidden\",\"false\"); }\n}\nfunction closeUpgrade(){\n if (upgEl){ upgEl.classList.remove(\"active\"); upgEl.setAttribute(\"aria-hidden\",\"true\"); }\n state.pausedForUpgrade = false;\n}\n\nplayBtn?.addEventListener(\"click\", ()=>{\n menuEl?.setAttribute(\"aria-hidden\",\"true\");\n ensureAudio();\n resetGame();\n state.playing = true;\n});\nsettingsBtn?.addEventListener(\"click\", ()=>{\n alert(\"Settings coming soon: audio, radar, controls.\");\n});","url","link_url","/p/c19whnmbwpc7lzyiabn5","versioned_link_url","/p/c19whnmbwpc7lzyiabn5/1","yapping","**Conceptualizing Game Design**\n\nI'm currently focused on the game's core concept, considering the provided HTML, CSS, and JavaScript. I'm exploring how these elements coalesce to form gameplay. Initial thoughts lean toward a puzzle-based mechanic, leveraging the existing structure. I'm prioritizing interactive elements, ensuring they are intuitive. The main challenge will be creating an engaging experience within the given framework.\n\n\n**Deconstructing Code Structure**\n\nI've carefully examined the HTML structure, recognizing its complete document nature and linking to CSS and JavaScript files. The CSS contains extensive styling for UI elements, fonts, and game components. The JavaScript appears to be the game logic, incorporating constants, canvas setup, input handling, and more. My immediate step will be organizing the provided code into `index.html`, `styles.css`, and `main.js` files, retaining the original structure.\n\n\n**File Organization Completed**\n\nI've completed the preliminary stage of organizing the provided code. The process of separating and placing the HTML, CSS, and JavaScript into their respective files has been completed. Currently, `index.html` houses the HTML structure, referencing the `styles.css` for styling and `main.js` for the game logic. The `styles.css` file contains the complete CSS, ensuring a uniform look. I've placed the substantial game logic, encompassing constants, game loop, and rendering functions, within `main.js`.\n\n\n**Constructing the Game Files**\n\nI've completed creating the initial files: `index.html`, `styles.css`, and `main.js`. The HTML structure, CSS styling, and JavaScript game logic are now neatly organized. The current focus is on verifying that the game structure is correct. I will begin by executing `index.html` within a web browser, and checking if all resources have been loaded correctly and the game elements are present as intended. My goal is to confirm the code's functionality within the new structure.\n\n\n**File Generation Complete**\n\nI've now successfully constructed the three files: `index.html`, `styles.css`, and `main.js`, as directed. Each file contains the complete code snippets provided in the user's prompt. `index.html` holds the HTML structure, referencing the CSS and JavaScript files. `styles.css` incorporates all the CSS styling, and `main.js` contains the complete game logic. I will now move to testing to verify.\n\n\n**Generating Necessary Files**\n\nI'm now generating the necessary files, `index.html`, `styles.css`, and `main.js`. I've carefully extracted the HTML, CSS, and JavaScript code from the user's prompt. My current focus is to ensure the code's integrity during the partitioning process. I am verifying that the HTML references the CSS and JavaScript files correctly. I will then test the code's functionality within the new structure.\n\n\n**Organizing Code Elements**\n\nI'm now carefully placing the HTML, CSS, and JavaScript code into the `index.html`, `styles.css`, and `main.js` files, respectively, ensuring a clean and structured implementation. This process involves meticulous parsing and organization of the code snippets provided. I'm taking care to maintain code integrity. The goal is to accurately partition the code.\n\n\n\nI will create a game based on the HTML, CSS, and JavaScript code you've provided. The code will be organized into three separate files: `index.html` for the structure, `styles.css` for the visual presentation, and `main.js` for the game's functionality. This will result in a fully playable top-down pixel shooter game.\n\nindex.html\n\n```index.html\n```\n\nstyles.css\n```styles.css\n```\n\nmain.js\n```main.js\n```","page_description","The page is for an interactive top-down 2D pixel shooter game called \"Dust & Shadows\". It features controls for player movement and shooting, a radar for…","cursor","eyJpZCI6ImMxOXdobm1id3BjN2x6eWlhYm41In0","token","included",[],"routes/browser/layout","actionData","errors"]