DOOM

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>NEON MAZE // Sector 09</title>
<style>
/* ── css: layout ── */
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Space+Grotesk:wght@400;600;700&display=swap');
:root{font-family:'Space Grotesk',system-ui,sans-serif;color:#d7f6ff;background:#07090d}*{box-sizing:border-box}body{margin:0;overflow:hidden;background:#07090d}#game{position:relative;width:100vw;height:100vh;min-height:560px;background:#090d14}#view{display:block;width:100%;height:100%;image-rendering:pixelated}#hud{position:absolute;inset:0;pointer-events:none}.brand{position:absolute;top:24px;left:30px;display:flex;gap:12px;align-items:center}.brand-mark{font:700 30px 'Share Tech Mono';color:#ff3864;text-shadow:0 0 16px #ff3864}.brand b{font-size:15px;letter-spacing:3px;display:block}.brand small,.kicker,.controls,.mission,.stat small{font:11px 'Share Tech Mono';letter-spacing:1px;color:#8ca5b7}.brand small{font-size:9px;color:#65808f}.mission{position:absolute;top:31px;left:50%;transform:translateX(-50%);border:1px solid #26404c;background:#0b141acc;padding:9px 14px;white-space:nowrap}.chip{margin-left:16px;color:#63f5bb;border-left:1px solid #2f5562;padding-left:14px}.stats{position:absolute;right:30px;top:24px;display:flex;gap:20px}.stat{min-width:92px}.stat small{display:block;font-size:9px}.stat strong{font:700 25px 'Share Tech Mono';display:block;color:#f0fbff}.stat span{font:10px 'Share Tech Mono';color:#ffcf57}.meter{display:block;height:3px;background:#182832;margin-top:4px;width:90px}.meter em{display:block;height:100%;background:#ff3864;width:100%;box-shadow:0 0 8px #ff3864}.meter.armor em{background:#53d8ff;box-shadow:0 0 8px #53d8ff}.weapon-stat{min-width:132px}.weapon-stat strong{font-size:15px;color:#53d8ff;margin-top:4px}.weapon-stat span{display:block;margin-top:3px}.crosshair{position:absolute;inset:50%}.crosshair span,.crosshair:before,.crosshair:after{content:'';position:absolute;background:#9bf6ff;box-shadow:0 0 6px #53d8ff}.crosshair span{width:4px;height:4px;border-radius:50%;left:-2px;top:-2px}.crosshair:before{width:14px;height:1px;left:-23px;top:0}.crosshair:after{width:14px;height:1px;left:9px;top:0}.prompt{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);font:11px 'Share Tech Mono';letter-spacing:2px;color:#93a8b2}.hurt{position:absolute;inset:0;background:#ff234d;opacity:0;transition:opacity .15s}.reticle{display:none}#minimap{position:absolute;bottom:25px;right:27px;padding:5px;border:1px solid #385460;background:#09131cd9}#map{display:block;image-rendering:pixelated}.hidden{display:none!important}#start-screen,#message{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,#142631dd,#05070bea 70%);display:grid;place-items:center}.terminal{text-align:left;width:min(520px,85vw);border-left:2px solid #ff3864;padding:10px 0 10px 30px;position:relative}.kicker{color:#ff3864;margin-bottom:14px}.terminal h1{font-size:clamp(62px,12vw,120px);line-height:.78;letter-spacing:-7px;margin:0 0 22px;color:#e9fbff;text-shadow:5px 5px 0 #203845,0 0 32px #53d8ff66}.terminal h1 em{font-style:normal;color:#53d8ff}.terminal p{font:12px 'Share Tech Mono';letter-spacing:3px;color:#9ab1bb;margin-bottom:35px}button{font:700 13px 'Share Tech Mono';letter-spacing:2px;color:#061018;background:#63f5bb;border:0;padding:15px 22px;cursor:pointer;box-shadow:5px 5px 0 #1b7b70;transition:.15s}button:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 #1b7b70}.controls{display:flex;gap:20px;margin-top:38px}.controls i{display:block;color:#6a8490;font-style:normal;font-size:8px;margin-top:5px}.scanlines{position:absolute;inset:0;opacity:.13;background:repeating-linear-gradient(0deg,transparent 0 3px,#d7f6ff 4px)}#message{text-align:center}.message>div{background:#0b141de8;border:1px solid #34525f;padding:40px 65px}.message h2{font-size:45px;margin:0 0 10px;color:#ff3864}.message p{color:#9ab1bb;margin-bottom:26px}#message>div{min-width:360px;padding:40px}.kicker{font-family:'Share Tech Mono'}#message h2{font-size:44px;margin:0 0 12px;color:#ff3864}.message{}
/* ── css: responsive ── */
@media(max-width:700px){.brand{top:15px;left:15px}.stats{top:auto;bottom:16px;left:15px;right:auto;gap:10px}.stat{min-width:70px}.weapon-stat{min-width:110px}.mission{top:80px;font-size:9px}.mission .chip{display:none}#minimap{bottom:80px;right:12px;transform:scale(.75);transform-origin:bottom right}.terminal{padding-left:18px}.controls{gap:10px;flex-wrap:wrap}.terminal h1{letter-spacing:-4px}}
</style>
</head>
<body>
<main id="game"><canvas id="view" aria-label="Retro first person game"></canvas><section id="hud"><div class="brand"><span class="brand-mark">//</span><div><b>NEON MAZE</b><small>SECTOR 09 · NIGHTSHIFT</small></div></div><div class="mission"><span id="objective">OBJECTIVE: PURGE THE SECTOR</span><span class="chip" id="status">LIVE</span></div><div class="stats"><div class="stat"><small>HEALTH</small><strong id="health">100</strong><i class="meter"><em id="healthbar"></em></i></div><div class="stat"><small>ARMOR</small><strong id="armor">25</strong><i class="meter armor"><em id="armorbar"></em></i></div><div class="stat weapon-stat"><small>WEAPON</small><strong id="weapon">ARC PISTOL</strong><span id="ammo">18 / 72</span></div></div><div id="crosshair"><span></span></div><div id="prompt">CLICK TO ENTER THE MAZE</div><div id="hurt"></div><aside id="minimap"><canvas id="map" width="150" height="150"></canvas></aside></section><div id="reticle">+</div><section id="start-screen"><div class="scanlines"></div><div class="terminal"><div class="kicker">NIGHTSHIFT PROTOCOL // 09</div><h1>NEON<br><em>MAZE</em></h1><p>AN ARCADE FPS FOR THE LAST RUNNER</p><button id="start">ENTER SECTOR <span>▶</span></button><div class="controls"><span>WASD <i>MOVE</i></span><span>MOUSE <i>AIM</i></span><span>CLICK <i>FIRE</i></span><span>1 2 3 <i>ARSENAL</i></span></div></div></section><section id="message" class="hidden"><div><div class="kicker" id="message-kicker">SIGNAL LOST</div><h2 id="message-title">YOU FLATLINED</h2><p id="message-copy">The maze keeps its secrets.</p><button id="message-btn">RESPAWN</button></div></section></main>
<script>
(function () {
'use strict';
var __mods = {};
var __cache = {};
var __map = {};
function __require(id) {
  if (__cache[id]) return __cache[id].exports;
  var module = __cache[id] = { exports: {} };
  var factory = __mods[id];
  if (!factory) throw new Error("Module not found: " + id);
  factory(module.exports, function (spec) {
    var target = (__map[id] && __map[id][spec]) || spec;
    return __require(target);
  }, module);
  return module.exports;
}

// ── module: src/main.ts ──
__mods["src/main.ts"] = function (exports, require, module) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const canvas = document.getElementById('view');
const ctx = canvas.getContext('2d');
const mapCanvas = document.getElementById('map');
const mctx = mapCanvas.getContext('2d');
const W = 96, H = 64;
const world = [
    '1111111111111111', '1000000000000001', '1011110111111101', '1000010100000101', '1111010101110101', '1000010001010001', '1011111101011111', '1000000101000001', '1011110101111101', '1000010000000101', '1011011111110101', '1001000000010001', '1001110111011101', '1000000100000001', '1111111111111111'
];
const weapons = [{ name: 'ARC PISTOL', ammo: 18, reserve: 72, damage: 34, cooldown: 210, color: '#63f5bb', spread: .02 }, { name: 'VOLT SMG', ammo: 42, reserve: 126, damage: 13, cooldown: 85, color: '#53d8ff', spread: .08 }, { name: 'SUN HAMMER', ammo: 5, reserve: 20, damage: 100, cooldown: 650, color: '#ffcf57', spread: .01 }];
let weapon = 0, player = { x: 1.7, y: 1.7, a: 0, hp: 100, armor: 25 }, running = false, last = 0, fireAt = 0, hurt = 0, shake = 0, kills = 0;
let enemies = [{ x: 5.5, y: 1.7, hp: 70, alive: true, cool: 0, hit: 0 }, { x: 12.5, y: 3.5, hp: 70, alive: true, cool: 0, hit: 0 }, { x: 3.5, y: 7.5, hp: 70, alive: true, cool: 0, hit: 0 }, { x: 10.5, y: 9.5, hp: 70, alive: true, cool: 0, hit: 0 }, { x: 6.5, y: 12.5, hp: 70, alive: true, cool: 0, hit: 0 }];
let pickups = [{ x: 2.5, y: 5.5, kind: 'health', taken: false }, { x: 12.5, y: 7.5, kind: 'ammo', taken: false }, { x: 8.5, y: 11.5, kind: 'health', taken: false }, { x: 13.5, y: 12.5, kind: 'ammo', taken: false }];
const keys = new Set();
const $ = (id) => document.getElementById(id);
function resize() { canvas.width = Math.floor(innerWidth / 3); canvas.height = Math.floor(innerHeight / 3); }
addEventListener('resize', resize);
resize();
function wall(x, y) { return x < 0 || y < 0 || y >= world.length || x >= world[0].length || world[Math.floor(y)][Math.floor(x)] === '1'; }
function move(dx, dy) { if (!wall(player.x + dx, player.y))
    player.x += dx; if (!wall(player.x, player.y + dy))
    player.y += dy; }
function shoot() { const w = weapons[weapon], now = performance.now(); if (now < fireAt || w.ammo <= 0)
    return; w.ammo--; fireAt = now + w.cooldown; shake = weapon === 2 ? 5 : 2; let best, bd = 99; for (const e of enemies) {
    if (!e.alive)
        continue;
    const dx = e.x - player.x, dy = e.y - player.y, d = Math.hypot(dx, dy), da = Math.atan2(dy, dx) - player.a;
    const norm = Math.atan2(Math.sin(da), Math.cos(da));
    if (Math.abs(norm) < w.spread + .025 && d < bd && line(e.x, e.y)) {
        best = e;
        bd = d;
    }
} if (best) {
    best.hp -= w.damage;
    best.hit = 1;
    if (best.hp <= 0) {
        best.alive = false;
        kills++;
        if (kills === enemies.length)
            win();
    }
} }
function line(x, y) { const d = Math.hypot(x - player.x, y - player.y), s = d * 8; for (let i = 1; i < s; i++) {
    const t = i / s;
    if (wall(player.x + (x - player.x) * t, player.y + (y - player.y) * t))
        return false;
} return true; }
function damage(n) { const absorb = Math.min(player.armor, Math.ceil(n * .45)); player.armor -= absorb; player.hp -= n - absorb; hurt = 1; if (player.hp <= 0)
    die(); }
function die() { running = false; $('message-kicker').textContent = 'SIGNAL LOST'; $('message-title').textContent = 'YOU FLATLINED'; $('message-copy').textContent = 'The maze keeps its secrets. Respawn and run it back.'; $('message-btn').textContent = 'RESPAWN'; $('message').classList.remove('hidden'); }
function win() { running = false; $('message-kicker').textContent = 'SECTOR CLEARED'; $('message-title').textContent = 'NIGHTSHIFT COMPLETE'; $('message-copy').textContent = 'All hostiles purged. The exit signal is yours.'; $('message-btn').textContent = 'RUN AGAIN'; $('message').classList.remove('hidden'); }
function reset() { player = { x: 1.7, y: 1.7, a: 0, hp: 100, armor: 25 }; weapons.forEach((w, i) => { w.ammo = [18, 42, 5][i]; w.reserve = [72, 126, 20][i]; }); enemies.forEach((e, i) => Object.assign(e, { alive: true, hp: 70, x: [5.5, 12.5, 3.5, 10.5, 6.5][i], y: [1.7, 3.5, 7.5, 9.5, 12.5][i] })); pickups.forEach(p => p.taken = false); kills = 0; running = true; $('start-screen').classList.add('hidden'); $('message').classList.add('hidden'); canvas.requestPointerLock?.(); }
function update(dt) { if (!running)
    return; const speed = dt * .0028 * (keys.has('Shift') ? 1.5 : 1); let dx = 0, dy = 0; if (keys.has('w') || keys.has('ArrowUp')) {
    dx += Math.cos(player.a) * speed;
    dy += Math.sin(player.a) * speed;
} if (keys.has('s') || keys.has('ArrowDown')) {
    dx -= Math.cos(player.a) * speed;
    dy -= Math.sin(player.a) * speed;
} if (keys.has('a')) {
    dx += Math.cos(player.a - Math.PI / 2) * speed;
    dy += Math.sin(player.a - Math.PI / 2) * speed;
} if (keys.has('d')) {
    dx += Math.cos(player.a + Math.PI / 2) * speed;
    dy += Math.sin(player.a + Math.PI / 2) * speed;
} move(dx, dy); for (const p of pickups)
    if (!p.taken && Math.hypot(p.x - player.x, p.y - player.y) < .5) {
        p.taken = true;
        if (p.kind === 'health')
            player.hp = Math.min(100, player.hp + 30);
        else
            weapons.forEach(w => w.reserve += Math.ceil(w.reserve * .35));
    } for (const e of enemies)
    if (e.alive) {
        e.cool -= dt;
        const d = Math.hypot(e.x - player.x, e.y - player.y);
        if (d < 7 && line(e.x, e.y)) {
            if (e.cool <= 0) {
                damage(d < 2 ? 12 : 6);
                e.cool = 900 + Math.random() * 700;
            }
        }
        else if (d < 9) {
            const a = Math.atan2(player.y - e.y, player.x - e.x);
            const nx = e.x + Math.cos(a) * dt * .00035, ny = e.y + Math.sin(a) * dt * .00035;
            if (!wall(nx, ny)) {
                e.x = nx;
                e.y = ny;
            }
        }
    } hurt = Math.max(0, hurt - dt * .004); shake = Math.max(0, shake - dt * .01); hud(); }
function hud() { $('health').textContent = Math.max(0, Math.ceil(player.hp)).toString(); $('armor').textContent = Math.max(0, Math.ceil(player.armor)).toString(); $('healthbar').setAttribute('style', `width:${Math.max(0, player.hp)}%`); $('armorbar').setAttribute('style', `width:${Math.max(0, player.armor) * 4}%`); const w = weapons[weapon]; $('weapon').textContent = w.name; $('ammo').textContent = `${w.ammo} / ${w.reserve}`; $('status').textContent = `${kills}/${enemies.length} PURGED`; $('hurt').style.opacity = String(hurt * .32); }
function render() { const cw = canvas.width, ch = canvas.height; ctx.fillStyle = '#101a27'; ctx.fillRect(0, 0, cw, ch / 2); ctx.fillStyle = '#18202a'; ctx.fillRect(0, ch / 2, cw, ch / 2); for (let x = 0; x < cw; x++) {
    const ray = player.a + (x / cw - .5) * 1.12;
    let d = 0;
    while (d < 20 && !wall(player.x + Math.cos(ray) * d, player.y + Math.sin(ray) * d))
        d += .035;
    const corrected = d * Math.cos(ray - player.a), height = Math.min(ch * 2, ch / corrected), top = ch / 2 - height / 2;
    const shade = Math.max(20, 180 - corrected * 13);
    ctx.fillStyle = `rgb(${shade * .45},${shade * .72},${shade})`;
    ctx.fillRect(x, top, 1, height);
    if (corrected < 2.5) {
        ctx.fillStyle = 'rgba(80,210,230,.12)';
        ctx.fillRect(x, top, 1, 2);
    }
} const sprites = enemies.filter(e => e.alive).map(e => ({ e, d: Math.hypot(e.x - player.x, e.y - player.y) })).sort((a, b) => b.d - a.d); for (const s of sprites) {
    const e = s.e, da = Math.atan2(e.y - player.y, e.x - player.x) - player.a, norm = Math.atan2(Math.sin(da), Math.cos(da));
    if (Math.abs(norm) > 0.62 || !line(e.x, e.y))
        continue;
    const sx = cw / 2 + norm / (1.12 / 2) * cw / 2, size = Math.min(ch * 1.1, ch / s.d * .75), sy = ch / 2 - size * .42;
    ctx.fillStyle = e.hit ? '#fff' : '#ff3864';
    ctx.shadowColor = '#ff3864';
    ctx.shadowBlur = 10;
    ctx.fillRect(sx - size * .22, sy, size * .44, size * .7);
    ctx.fillStyle = '#111821';
    ctx.fillRect(sx - size * .14, sy + size * .15, size * .09, size * .08);
    ctx.fillRect(sx + size * .05, sy + size * .15, size * .09, size * .08);
    ctx.shadowBlur = 0;
} if (shake) {
    ctx.fillStyle = weapons[weapon].color;
    ctx.globalAlpha = .18;
    ctx.fillRect(cw / 2 - 3, ch * .7, 6, ch * .2);
    ctx.globalAlpha = 1;
} drawMap(); }
function drawMap() { mctx.fillStyle = '#071018'; mctx.fillRect(0, 0, 150, 150); const sc = 9; for (let y = 0; y < world.length; y++)
    for (let x = 0; x < 16; x++) {
        if (world[y][x] === '1') {
            mctx.fillStyle = '#294954';
            mctx.fillRect(x * sc, y * sc, sc - 1, sc - 1);
        }
    } for (const p of pickups)
    if (!p.taken) {
        mctx.fillStyle = p.kind === 'health' ? '#63f5bb' : '#ffcf57';
        mctx.fillRect(p.x * sc - 2, p.y * sc - 2, 5, 5);
    } for (const e of enemies)
    if (e.alive) {
        mctx.fillStyle = '#ff3864';
        mctx.fillRect(e.x * sc - 2, e.y * sc - 2, 5, 5);
    } mctx.fillStyle = '#fff'; mctx.beginPath(); mctx.arc(player.x * sc, player.y * sc, 3, 0, 7); mctx.fill(); mctx.strokeStyle = '#53d8ff'; mctx.beginPath(); mctx.moveTo(player.x * sc, player.y * sc); mctx.lineTo((player.x + Math.cos(player.a) * .8) * sc, (player.y + Math.sin(player.a) * .8) * sc); mctx.stroke(); }
function loop(t) { const dt = Math.min(40, t - last || 16); last = t; update(dt); render(); requestAnimationFrame(loop); }
addEventListener('keydown', e => { keys.add(e.key.toLowerCase()); if (e.key === '1' || e.key === '2' || e.key === '3')
    weapon = +e.key - 1; if (e.key === 'r') {
    const w = weapons[weapon], need = 42 - w.ammo, take = Math.min(need, w.reserve);
    w.ammo += take;
    w.reserve -= take;
} });
addEventListener('keyup', e => keys.delete(e.key.toLowerCase()));
canvas.addEventListener('click', () => { if (running) {
    canvas.requestPointerLock?.();
    shoot();
} });
addEventListener('mousedown', e => { if (e.button === 0 && running)
    shoot(); });
addEventListener('mousemove', e => { if (running && document.pointerLockElement === canvas)
    player.a += e.movementX * .0025; });
$('start').addEventListener('click', reset);
$('message-btn').addEventListener('click', reset);
hud();
requestAnimationFrame(loop);
};

// ── entry ──
__require("src/main.ts");
})();
</script>
</body>
</html>
<!-- agent-meta {"model":"openai/gpt-5.6-luna-pro","provider":"openrouter","persona":"typescript","sessionId":"c16da97b-1838-4879-92c1-ac64286bc284","tokensIn":342828,"tokensOut":22437,"tokensTotal":365265,"turns":12,"toolCalls":23,"failedToolCalls":3,"timestamp":"2026-07-31T02:38:21.618Z"} -->