const canvas = document.getElementById("gameCanvas"); const ctx = canvas.getContext("2d"); const scoreValue = document.getElementById("scoreValue"); const lootValue = document.getElementById("lootValue"); const alertValue = document.getElementById("alertValue"); const objectiveText = document.getElementById("objectiveText"); const objectiveIcon = document.getElementById("objectiveIcon"); const startScreen = document.getElementById("startScreen"); const gameOverScreen = document.getElementById("gameOverScreen"); const startButton = document.getElementById("startButton"); const restartButton = document.getElementById("restartButton"); const resultTitle = document.getElementById("resultTitle"); const resultEyebrow = document.getElementById("resultEyebrow"); const finalScore = document.getElementById("finalScore"); const finalLoot = document.getElementById("finalLoot"); const finalTime = document.getElementById("finalTime"); const bestScore = document.getElementById("bestScore"); const messageEl = document.getElementById("message"); let W = 0, H = 0, dpr = 1; let running = false; let last = 0; let elapsed = 0; let score = 0; let lootCollected = 0; let escaped = false; let messageTimer = 0; let alarmFlash = 0; let best = Number(localStorage.getItem("office_escape_best") || 0); let extraGuardAdded = false; const keys = new Set(); const world = { w: 1400, h: 900, walls: [], furniture: [], objectives: [], guards: [], cameras: [], exit: { x: 1310, y: 770, w: 44, h: 92 } }; const player = { x: 235, y: 150, r: 12, speed: 170, sprintSpeed: 265, vx: 0, vy: 0, caught: false }; const PLAYER_SPAWN = { x: 235, y: 150 }; const camera = { x: 0, y: 0 }; function resize() { dpr = Math.min(window.devicePixelRatio || 1, 2); W = innerWidth; H = innerHeight; canvas.width = Math.round(W * dpr); canvas.height = Math.round(H * dpr); canvas.style.width = W + "px"; canvas.style.height = H + "px"; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); draw(); } addEventListener("resize", resize); function rect(x,y,w,h,type="wall") { return {x,y,w,h,type}; } function clamp(v,a,b){ return Math.max(a,Math.min(b,v)); } function dist(a,b){ return Math.hypot(a.x-b.x,a.y-b.y); } function rand(a,b){ return Math.random()*(b-a)+a; } function buildOffice() { world.walls = [ rect(0,0,1400,30), rect(0,870,1400,30), rect(0,0,30,900), rect(1370,0,30,900), rect(280,30,18,250), rect(280,360,18,240), rect(280,680,18,190), rect(650,30,18,180), rect(650,285,18,315), rect(650,680,18,190), rect(1030,30,18,250), rect(1030,360,18,240), rect(1030,680,18,190), rect(30,280,160,18), rect(270,280,250,18), rect(600,280,250,18), rect(930,280,250,18), rect(1260,280,110,18), rect(30,600,180,18), rect(290,600,230,18), rect(600,600,260,18), rect(940,600,250,18), rect(1270,600,100,18) ]; world.furniture = [ // Cubicles / desks rect(70,70,135,55,"desk"), rect(80,175,135,55,"desk"), rect(355,75,180,62,"meeting"), rect(355,165,180,62,"meeting"), rect(735,70,105,48,"desk"), rect(870,70,105,48,"desk"), rect(735,170,105,48,"desk"), rect(870,170,105,48,"desk"), rect(1110,70,175,72,"boss"), rect(65,360,120,52,"desk"), rect(65,470,120,52,"desk"), rect(350,350,210,95,"meeting"), rect(405,490,100,55,"cabinet"), rect(730,350,100,48,"desk"), rect(870,350,100,48,"desk"), rect(730,480,100,48,"desk"), rect(870,480,100,48,"desk"), rect(1110,365,175,80,"kitchen"), rect(1130,495,135,48,"counter"), rect(65,685,135,55,"desk"), rect(65,790,135,45,"desk"), rect(355,685,205,55,"storage"), rect(355,785,205,45,"storage"), rect(730,685,105,48,"desk"), rect(870,685,105,48,"desk"), rect(730,785,105,48,"desk"), rect(870,785,105,48,"desk"), rect(1115,690,150,52,"desk") ]; world.objectives = [ { x: 1210, y: 178, icon:"☕", name:"Steal the boss's coffee", points:300, taken:false }, { x: 535, y: 535, icon:"📱", name:"Retrieve your phone", points:500, taken:false }, { x: 815, y: 235, icon:"💻", name:"Delete your browser history", points:750, taken:false }, { x: 1090, y: 545, icon:"🍕", name:"Steal the break-room pizza", points:400, taken:false }, { x: 575, y: 750, icon:"📁", name:"Grab the secret file", points:1500, taken:false } ]; // Guarantee that every optional objective is reachable. world.objectives.forEach(objective => { const safe = findNearestOpenPoint(objective.x, objective.y, 28); objective.x = safe.x; objective.y = safe.y; }); world.guards = [ makeGuard(340,320, [ [340,320],[590,320],[590,565],[340,565] ], 78), makeGuard(710,320, [ [710,320],[990,320],[990,565],[710,565] ], 88), makeGuard(1080,640, [ [1080,640],[1320,640],[1320,830],[1080,830] ], 82) ]; world.cameras = [ {x:1010,y:315,angle:2.4,base:2.4,range:190,sweep:.85,t:0}, {x:305,y:625,angle:-.6,base:-.6,range:175,sweep:.9,t:1.7}, {x:1055,y:255,angle:.8,base:.8,range:170,sweep:.75,t:3.1} ]; } function makeGuard(x,y,points,speed){ return { x,y,r:13,speed,points,index:1, angle:0, fov:Math.PI*.48, range:175, alert:0, chase:false, lost:0 }; } function circleRectCollide(cx,cy,r,o){ const nx=clamp(cx,o.x,o.x+o.w); const ny=clamp(cy,o.y,o.y+o.h); return Math.hypot(cx-nx,cy-ny)circleRectCollide(x,y,r,o)) || world.furniture.some(o=>circleRectCollide(x,y,r,o)); } function findNearestOpenPoint(x, y, padding = 28){ if( x > padding && x < world.w - padding && y > padding && y < world.h - padding && !blocked(x, y, padding * .45) ){ return {x, y}; } for(let radius=20; radius<=180; radius+=20){ for(let angle=0; angle padding && px < world.w - padding && py > padding && py < world.h - padding && !blocked(px, py, padding * .45) ){ return {x:px, y:py}; } } } return {x:240, y:150}; } function findSafeSpawn(preferred = PLAYER_SPAWN){ if(!blocked(preferred.x, preferred.y, player.r)){ return { x: preferred.x, y: preferred.y }; } // Search outward from the preferred spawn until we find open floor. for(let radius=20; radius<=220; radius+=20){ for(let angle=0; angle 45 && x < world.w - 45 && y > 45 && y < world.h - 45 && !blocked(x, y, player.r) ){ return {x, y}; } } } // Guaranteed open fallback corridor. return { x: 240, y: 150 }; } function lineHitsRect(x1,y1,x2,y2,r){ const steps=Math.ceil(Math.hypot(x2-x1,y2-y1)/12); for(let i=1;i=r.x&&x<=r.x+r.w&&y>=r.y&&y<=r.y+r.h) return true; } return false; } function hasLineOfSight(x1,y1,x2,y2){ for(const r of [...world.walls,...world.furniture]){ if(lineHitsRect(x1,y1,x2,y2,r)) return false; } return true; } function inVisionCone(observer, px, py){ const dx=px-observer.x, dy=py-observer.y; const d=Math.hypot(dx,dy); if(d>observer.range) return false; const a=Math.atan2(dy,dx); let diff=Math.atan2(Math.sin(a-observer.angle),Math.cos(a-observer.angle)); if(Math.abs(diff)>observer.fov/2) return false; return hasLineOfSight(observer.x,observer.y,px,py); } function resetGame(){ buildOffice(); const spawn = findSafeSpawn(); player.x = spawn.x; player.y = spawn.y; player.vx = 0; player.vy = 0; player.caught = false; // Start the camera on the player immediately rather than waiting // for the first update frame. camera.x = clamp( player.x - W / 2, 0, Math.max(0, world.w - W) ); camera.y = clamp( player.y - H / 2, 0, Math.max(0, world.h - H) ); elapsed=0; score=0; lootCollected=0; escaped=false; alarmFlash=0; extraGuardAdded=false; running=true; startScreen.classList.add("hidden"); gameOverScreen.classList.add("hidden"); updateHUD(); last=performance.now(); requestAnimationFrame(loop); } function updatePlayer(dt){ let dx=0,dy=0; if(keys.has("w")||keys.has("arrowup"))dy--; if(keys.has("s")||keys.has("arrowdown"))dy++; if(keys.has("a")||keys.has("arrowleft"))dx--; if(keys.has("d")||keys.has("arrowright"))dx++; const sprint=keys.has("shift"); const speed=sprint?player.sprintSpeed:player.speed; const m=Math.hypot(dx,dy)||1; dx/=m; dy/=m; const tx=dx*speed, ty=dy*speed; const response=1-Math.exp(-18*dt); player.vx+=(tx-player.vx)*response; player.vy+=(ty-player.vy)*response; const nx=player.x+player.vx*dt; if(!blocked(nx,player.y)) player.x=nx; else player.vx=0; const ny=player.y+player.vy*dt; if(!blocked(player.x,ny)) player.y=ny; else player.vy=0; // Sprint noise can attract nearby guards. if(sprint && Math.hypot(player.vx,player.vy)>80){ for(const g of world.guards){ if(dist(g,player)<135 && hasLineOfSight(g.x,g.y,player.x,player.y)){ g.alert=Math.max(g.alert,.45); } } } } function difficultyLevel(){ // Difficulty rises with both greed and time spent in the office. return Math.min( 1, lootCollected * .16 + elapsed / 150 ); } function addReinforcementGuard(){ if(extraGuardAdded) return; extraGuardAdded = true; const reinforcement = makeGuard( 1010, 585, [ [1010,585], [1010,335], [690,335], [690,585] ], 92 ); reinforcement.fov = Math.PI * .52; reinforcement.range = 190; world.guards.push(reinforcement); showMessage("⚠ EXTRA SECURITY CALLED"); } function updateGuards(dt){ let anyAlert=false; const difficulty = difficultyLevel(); if( !extraGuardAdded && (lootCollected >= 3 || elapsed >= 75) ){ addReinforcementGuard(); } for(const g of world.guards){ const originalRange = g.range; const originalFov = g.fov; g.range = originalRange * (1 + difficulty * .18); g.fov = originalFov * (1 + difficulty * .10); const sees=inVisionCone(g,player.x,player.y); g.range = originalRange; g.fov = originalFov; if(sees){ g.alert=Math.min(1,g.alert+dt*(2.5+difficulty*1.8)); g.lost=0; if(g.alert>=1) g.chase=true; } else { g.alert=Math.max(0,g.alert-dt*(.8-difficulty*.28)); if(g.chase) g.lost+=dt; if(g.lost>2.2){ g.chase=false; g.lost=0; } } if(g.alert>.1||g.chase) anyAlert=true; let tx,ty,currentSpeed=g.speed; if(g.chase){ tx=player.x; ty=player.y; currentSpeed=g.speed*(1.7+difficulty*.35); }else{ const p=g.points[g.index]; tx=p[0]; ty=p[1]; currentSpeed=g.speed*(1+difficulty*.22); if(Math.hypot(tx-g.x,ty-g.y)<10){ g.index=(g.index+1)%g.points.length; } } const a=Math.atan2(ty-g.y,tx-g.x); g.angle=a; const nx=g.x+Math.cos(a)*currentSpeed*dt; const ny=g.y+Math.sin(a)*currentSpeed*dt; if(!blocked(nx,g.y,g.r)) g.x=nx; if(!blocked(g.x,ny,g.r)) g.y=ny; if(dist(g,player) { if(dist(g, player) < 430){ g.alert = Math.max( g.alert, Math.min(.55, lootCollected * .10) ); } }); updateHUD(); } } const e=world.exit; const inside=player.x>e.x-15&&player.xe.y-15&&player.ybest){ best=final; localStorage.setItem("office_escape_best",best); } if(window.Arcade && typeof window.Arcade.submitScore==="function"){ window.Arcade.submitScore({ score:final, duration:elapsed, stats:{ escaped:success, loot:lootCollected, totalLoot:world.objectives.length } }); } resultEyebrow.textContent=success?"SUCCESSFUL ESCAPE":"RUN OVER"; resultTitle.textContent=title; finalScore.textContent=final.toLocaleString(); finalLoot.textContent=`${lootCollected}/${world.objectives.length}`; finalTime.textContent=elapsed.toFixed(1)+"s"; bestScore.textContent=best.toLocaleString(); setTimeout(()=>gameOverScreen.classList.remove("hidden"),220); } function updateHUD(){ scoreValue.textContent=Math.floor(score).toLocaleString(); lootValue.textContent=`${lootCollected} / ${world.objectives.length}`; if(lootCollected===world.objectives.length){ objectiveText.textContent="Everything grabbed — escape!"; }else if(lootCollected>=3){ objectiveText.textContent="Security is high — get out!"; }else if(lootCollected>=1){ objectiveText.textContent="Grab more loot or escape now"; }else{ objectiveText.textContent="Reach the exit or grab more loot"; } objectiveIcon.textContent=lootCollected===world.objectives.length?"🏃":"🚪"; } function showMessage(text){ messageEl.textContent=text; messageEl.classList.add("show"); messageTimer=1.5; } function update(dt){ elapsed+=dt; if(messageTimer>0){ messageTimer-=dt; if(messageTimer<=0)messageEl.classList.remove("show"); } updatePlayer(dt); updateGuards(dt); if(!running)return; checkObjectives(); camera.x=clamp(player.x-W/2,0,Math.max(0,world.w-W)); camera.y=clamp(player.y-H/2,0,Math.max(0,world.h-H)); } function drawFloor(){ ctx.fillStyle="#20282e"; ctx.fillRect(0,0,world.w,world.h); // Carpet zones ctx.fillStyle="#273239"; ctx.fillRect(40,40,220,220); ctx.fillRect(315,40,310,220); ctx.fillRect(685,40,320,220); ctx.fillRect(1065,40,280,220); ctx.fillStyle="#242f35"; ctx.fillRect(40,320,220,250); ctx.fillRect(315,320,310,250); ctx.fillRect(685,320,320,250); ctx.fillRect(1065,320,280,250); ctx.fillStyle="#29343a"; ctx.fillRect(40,640,220,200); ctx.fillRect(315,640,310,200); ctx.fillRect(685,640,320,200); ctx.fillRect(1065,640,280,200); // Subtle carpet grid ctx.strokeStyle="rgba(255,255,255,.025)"; ctx.lineWidth=1; for(let x=0;xw.h) ctx.fillRect(w.x,w.y,w.w,4); else ctx.fillRect(w.x,w.y,4,w.h); } } function drawFurniture(){ for(const f of world.furniture){ ctx.fillStyle="rgba(0,0,0,.22)"; ctx.fillRect(f.x+5,f.y+6,f.w,f.h); if(f.type==="desk"){ ctx.fillStyle="#9b704e"; ctx.fillRect(f.x,f.y,f.w,f.h); ctx.fillStyle="#b98b62"; ctx.fillRect(f.x+4,f.y+4,f.w-8,8); ctx.fillStyle="#10161a"; ctx.fillRect(f.x+f.w*.35,f.y+10,f.w*.3,18); ctx.fillStyle="#6f7e86"; ctx.fillRect(f.x+f.w*.39,f.y+13,f.w*.22,12); }else if(f.type==="meeting"){ ctx.fillStyle="#795e49"; ctx.beginPath(); ctx.roundRect(f.x,f.y,f.w,f.h,18); ctx.fill(); for(let i=0;i<5;i++){ ctx.fillStyle="#39454c"; ctx.beginPath(); ctx.arc(f.x+25+i*(f.w-50)/4,f.y-8,7,0,Math.PI*2); ctx.fill(); } }else if(f.type==="boss"){ ctx.fillStyle="#6e4c38"; ctx.fillRect(f.x,f.y,f.w,f.h); ctx.fillStyle="#b18b65"; ctx.fillRect(f.x+5,f.y+5,f.w-10,8); ctx.fillStyle="#172027"; ctx.fillRect(f.x+60,f.y+18,55,28); }else if(f.type==="kitchen"||f.type==="counter"){ ctx.fillStyle="#5d6c70"; ctx.fillRect(f.x,f.y,f.w,f.h); ctx.fillStyle="#8f9b9e"; ctx.fillRect(f.x+4,f.y+4,f.w-8,10); }else{ ctx.fillStyle="#56636a"; ctx.fillRect(f.x,f.y,f.w,f.h); ctx.strokeStyle="rgba(255,255,255,.12)"; for(let x=f.x+20;x0 && !g.chase){ ctx.fillStyle="#efc84a"; ctx.font="900 16px system-ui"; ctx.textAlign="center"; ctx.fillText("!",g.x,g.y-22); } } } function drawCameras(){ for(const c of world.cameras){ drawVisionCone({...c,fov:Math.PI*.38},"rgba(107,185,255,ALPHA)"); ctx.save(); ctx.translate(c.x,c.y); ctx.rotate(c.angle); ctx.fillStyle="#bac4c9"; ctx.fillRect(-8,-5,16,10); ctx.fillStyle="#182127"; ctx.fillRect(5,-3,8,6); ctx.restore(); } } function drawObjectives(){ for(const o of world.objectives){ if(o.taken)continue; const pulse=1+Math.sin(elapsed*4)*.08; ctx.save(); ctx.translate(o.x,o.y); ctx.scale(pulse,pulse); ctx.fillStyle="rgba(239,200,74,.16)"; ctx.beginPath();ctx.arc(0,0,24,0,Math.PI*2);ctx.fill(); ctx.strokeStyle="#efc84a"; ctx.lineWidth=2; ctx.beginPath();ctx.arc(0,0,18,0,Math.PI*2);ctx.stroke(); ctx.font="18px system-ui"; ctx.textAlign="center";ctx.textBaseline="middle"; ctx.fillText(o.icon,0,1); ctx.restore(); } } function drawExit(){ const e=world.exit; ctx.fillStyle="#3eaa70"; ctx.fillRect(e.x,e.y,e.w,e.h); ctx.fillStyle="#b7f1cf"; ctx.fillRect(e.x+6,e.y+6,e.w-12,e.h-12); ctx.fillStyle="#1b6f48"; ctx.font="900 13px system-ui"; ctx.textAlign="center"; ctx.fillText("EXIT",e.x+e.w/2,e.y+e.h/2+4); } function drawPlayer(){ ctx.save(); ctx.translate(player.x,player.y); // Visibility ring makes it immediately obvious which character is yours. ctx.beginPath(); ctx.arc(0,0,19,0,Math.PI*2); ctx.fillStyle="rgba(239,200,74,.13)"; ctx.fill(); ctx.beginPath(); ctx.arc(0,0,16,0,Math.PI*2); ctx.strokeStyle="rgba(239,200,74,.72)"; ctx.lineWidth=2; ctx.stroke(); ctx.fillStyle="rgba(0,0,0,.25)"; ctx.beginPath(); ctx.ellipse(4,8,14,8,0,0,Math.PI*2); ctx.fill(); // Body. ctx.fillStyle="#27323a"; ctx.beginPath(); ctx.roundRect(-8,0,16,15,5); ctx.fill(); // Shirt/accent. ctx.fillStyle="#efc84a"; ctx.fillRect(-8,2,16,5); // Head. ctx.fillStyle="#f1c5a0"; ctx.beginPath(); ctx.arc(0,-6,7,0,Math.PI*2); ctx.fill(); // Small facing indicator based on movement. const moving = Math.hypot(player.vx, player.vy) > 5; if(moving){ const a = Math.atan2(player.vy, player.vx); ctx.strokeStyle="#fff"; ctx.lineWidth=2; ctx.beginPath(); ctx.moveTo(Math.cos(a)*10, Math.sin(a)*10); ctx.lineTo(Math.cos(a)*16, Math.sin(a)*16); ctx.stroke(); } ctx.restore(); } function draw(){ ctx.clearRect(0,0,W,H); ctx.save(); ctx.translate(-camera.x,-camera.y); drawFloor(); drawVisionAndObjects(); ctx.restore(); if(alarmFlash>0){ ctx.fillStyle=`rgba(255,40,40,${alarmFlash*.08})`; ctx.fillRect(0,0,W,H); } } function drawVisionAndObjects(){ // Vision goes under physical objects so walls visually occlude it. for(const g of world.guards){ drawVisionCone(g,g.chase?"rgba(255,65,65,ALPHA)":"rgba(245,211,85,ALPHA)"); } for(const c of world.cameras){ drawVisionCone({...c,fov:Math.PI*.38},"rgba(107,185,255,ALPHA)"); } drawFurniture(); drawWalls(); drawObjectives(); drawExit(); // Draw guard bodies without re-drawing cones. for(const g of world.guards){ ctx.save(); ctx.translate(g.x,g.y); ctx.rotate(g.angle); ctx.fillStyle="rgba(0,0,0,.25)"; ctx.beginPath();ctx.ellipse(4,6,15,9,0,0,Math.PI*2);ctx.fill(); ctx.fillStyle=g.chase?"#d94c49":"#506f89"; ctx.beginPath();ctx.arc(0,0,13,0,Math.PI*2);ctx.fill(); ctx.fillStyle="#e8c5a6"; ctx.beginPath();ctx.arc(8,0,6,0,Math.PI*2);ctx.fill(); ctx.fillStyle="#1a2228"; ctx.fillRect(8,-3,7,6); ctx.restore(); if(g.alert>0&&!g.chase){ ctx.fillStyle="#efc84a"; ctx.font="900 16px system-ui"; ctx.textAlign="center"; ctx.fillText("!",g.x,g.y-22); } } for(const c of world.cameras){ ctx.save(); ctx.translate(c.x,c.y); ctx.rotate(c.angle); ctx.fillStyle="#bac4c9"; ctx.fillRect(-8,-5,16,10); ctx.fillStyle="#182127"; ctx.fillRect(5,-3,8,6); ctx.restore(); } drawPlayer(); } function loop(now){ if(!running)return; const dt=Math.min(.033,(now-last)/1000||0); last=now; update(dt); draw(); if(running)requestAnimationFrame(loop); } addEventListener("keydown",e=>{ const k=e.key.toLowerCase(); if(["w","a","s","d","arrowup","arrowdown","arrowleft","arrowright","shift"].includes(k)){ e.preventDefault(); keys.add(k); } },{passive:false}); addEventListener("keyup",e=>keys.delete(e.key.toLowerCase())); startButton.addEventListener("click",resetGame); restartButton.addEventListener("click",resetGame); buildOffice(); resize();

OFFICEESCAPE

CAUGHT

OFFICE
ESCAPE