Race the Sun

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SOLAR//DRIFT — Endless Solar Run</title>
<style>
/* ── css: base ── */
:root{font-family:'Barlow Condensed',Arial,sans-serif;color:#fff;background:#090b18}*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden}body{background:#090b18}#game-shell{position:relative;width:100%;height:100%;overflow:hidden;background:#111}canvas{display:block;width:100%;height:100%}.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding-left:10vw;background:linear-gradient(90deg,rgba(8,10,26,.76),rgba(8,10,26,.18) 62%,transparent);transition:opacity .35s,transform .35s;z-index:4}.screen.hidden{opacity:0;pointer-events:none;transform:translateY(14px)}.eyebrow{font:700 12px monospace;letter-spacing:.28em;color:#ffcf6b;margin-bottom:18px}.screen h1,.screen h2{font-size:clamp(64px,10vw,148px);line-height:.78;letter-spacing:-.045em;margin:0 0 30px;font-weight:800;text-shadow:7px 8px 0 rgba(6,7,20,.25)}em{font-style:normal;color:#ff8a5b}.screen h2{font-size:clamp(58px,9vw,120px)}.screen p{font-size:21px;letter-spacing:.04em;color:#d4d8f3;margin:0 0 34px}.screen button{border:0;background:#ffbd5c;color:#171529;font:800 17px Arial,sans-serif;letter-spacing:.08em;padding:16px 25px;cursor:pointer;box-shadow:0 7px 0 #d85e59;transition:transform .12s,box-shadow .12s}.screen button:hover{transform:translateY(-2px);box-shadow:0 9px 0 #d85e59}.screen button:active{transform:translateY(5px);box-shadow:0 2px 0 #d85e59}.screen button span{margin-left:25px}.best{margin-top:40px;font:11px monospace;letter-spacing:.13em;color:#aeb3db}.best strong{color:#fff;margin-left:12px}.results{display:flex;gap:48px;margin:0 0 32px}.results small{display:block;font:10px monospace;letter-spacing:.18em;color:#aeb3db}.results strong{font:700 32px monospace;color:#fff}.results div{min-width:110px}#hud{position:absolute;z-index:3;inset:0;pointer-events:none;padding:25px 32px;opacity:0;transition:opacity .3s}.playing #hud{opacity:1}.brand{font:700 15px monospace;letter-spacing:.16em}.brand span{color:#ffb85d}.stats{display:flex;gap:28px;margin-top:22px}.stats small,.energy-wrap>span{display:block;font:10px monospace;letter-spacing:.16em;color:#bbc0e1}.stats b{display:block;font:700 20px monospace;margin-top:4px}.energy-wrap{position:absolute;right:32px;top:27px;width:200px}.energy{height:8px;margin-top:8px;background:rgba(255,255,255,.18);transform:skewX(-20deg)}.energy i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff6c62,#ffd468);box-shadow:0 0 14px #ffc968;transition:width .15s}.hint{position:absolute;bottom:24px;left:32px;color:rgba(230,235,255,.55);font:10px monospace;letter-spacing:.09em}.flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:5}.low-energy{animation:pulse 1s infinite}@keyframes pulse{50%{opacity:.55}}
/* ── css: responsive ── */
@media(max-width:600px){.screen{padding-left:8vw}.screen p{font-size:16px}.stats{gap:14px}.stats b{font-size:14px}.energy-wrap{right:18px;width:120px}.hint{left:18px;font-size:8px;white-space:nowrap}.brand{font-size:11px}#hud{padding:18px}.stats{margin-top:14px}}
</style>
</head>
<body>
<main id="game-shell"><canvas id="game" aria-label="Solar Drift game"></canvas><section id="hud" aria-live="polite"><div class="brand">SOLAR<span>//</span>DRIFT</div><div class="stats"><div><small>DISTANCE</small><b id="distance">0m</b></div><div><small>SCORE</small><b id="score">0</b></div><div><small>MULTIPLIER</small><b id="multiplier">x1</b></div><div><small>SPEED</small><b id="speed">0</b></div></div><div class="energy-wrap"><span>ENERGY</span><div class="energy"><i id="energy-bar"></i></div></div><div class="hint">A / D or ← / →  STRAFE&nbsp;&nbsp; · &nbsp;&nbsp;W / S or ↑ / ↓  PITCH&nbsp;&nbsp; · &nbsp;&nbsp;SPACE  BOOST</div></section><section id="title-screen" class="screen"><div class="eyebrow">A PROCEDURAL SUNRUN</div><h1>CHASE<br><em>THE LIGHT</em></h1><p>Stay in the glow. Cut through the impossible.</p><button id="start">LAUNCH RUN <span>↗</span></button><div class="best">BEST DISTANCE <strong id="best-title">0m</strong></div></section><section id="game-over" class="screen hidden"><div class="eyebrow">SIGNAL LOST</div><h2>THE SUN<br><em>SET</em></h2><p id="cause">The horizon swallowed your light.</p><div class="results"><div><small>DISTANCE</small><strong id="final-distance">0m</strong></div><div><small>SCORE</small><strong id="final-score">0</strong></div></div><button id="restart">RELAUNCH <span>R</span></button><div class="best">BEST DISTANCE <strong id="best-over">0m</strong></div></section><div id="flash"></div><div id="vignette"></div></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 });
// === SETUP / TUNING ===
const C = { ACCEL: .0022, MAX_SPEED: 1.18, STRAFE: 8.2, PITCH: 3.8, ENERGY_DRAIN: .0032, BOOST_COST: 18, SPAWN: 900, LANES: 3 };
const cv = document.querySelector('#game'), ctx = cv.getContext('2d');
const $ = (s) => document.querySelector(s.startsWith('#') || s.startsWith('.') ? s : '#' + s);
const keys = new Set();
let W = innerWidth, H = innerHeight, dpr = 1, state = 'title', last = 0, t = 0, speed = 0, dist = 0, score = 0, mult = 1, seed = 0, shake = 0, flash = 0, spawn = 0, sun = 0;
let p = { x: 0, y: 0, vx: 0, vy: 0, energy: 100, boost: 0 };
let obs = [];
let particles = [];
let audio, drone;
function resize() { dpr = Math.min(devicePixelRatio, 2); W = innerWidth; H = innerHeight; cv.width = W * dpr; cv.height = H * dpr; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); }
addEventListener('resize', resize);
resize();
// === AUDIO ===
function tone(freq, dur, type = 'sine', vol = .04) { if (!audio)
    return; const o = audio.createOscillator(), g = audio.createGain(); o.type = type; o.frequency.value = freq; g.gain.setValueAtTime(vol, audio.currentTime); g.gain.exponentialRampToValueAtTime(.001, audio.currentTime + dur); o.connect(g).connect(audio.destination); o.start(); o.stop(audio.currentTime + dur); }
function soundOn() { audio ?? (audio = new AudioContext()); audio.resume(); if (!drone) {
    drone = audio.createOscillator();
    const g = audio.createGain();
    drone.type = 'triangle';
    drone.frequency.value = 68;
    g.gain.value = .018;
    drone.connect(g).connect(audio.destination);
    drone.start();
} }
// === DETERMINISTIC WORLD ===
function rnd() { seed = (seed * 1664525 + 1013904223) >>> 0; return seed / 4294967296; }
function spawnWave() { const z = 125; const roll = rnd(); if (roll < .3) {
    const lane = Math.floor(rnd() * 3) - 1;
    obs.push({ x: lane * 1.7, y: 0, z, w: 1.1, h: 3 + rnd() * 3, kind: 'tower', hit: false, near: false });
}
else if (roll < .52) {
    const lane = Math.floor(rnd() * 3) - 1;
    obs.push({ x: lane * 1.7, y: -.2, z, w: 1.1, h: 1.1, kind: 'gate', hit: false, near: false });
    if (rnd() < .65)
        obs.push({ x: (lane + (rnd() < .5 ? -1 : 1)) * 1.7, y: -.2, z: z + 8, w: .55, h: .55, kind: 'cell', hit: false, near: false });
}
else {
    const lane = Math.floor(rnd() * 3) - 1;
    const kind = rnd() < .5 ? 'token' : 'orb';
    obs.push({ x: lane * 1.7, y: (rnd() - .5) * 2, z, w: .55, h: .55, kind, hit: false, near: false });
} }
function addBurst(x, y, col, n = 8) { for (let i = 0; i < n; i++)
    particles.push({ x: x + (rnd() - .5) * .7, y: y + (rnd() - .5) * .7, z: 3 + rnd() * 5, life: .35 + rnd() * .5, col, size: 2 + rnd() * 4 }); }
// === INPUT ===
addEventListener('keydown', e => { if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Space'].includes(e.code))
    e.preventDefault(); keys.add(e.code); if (e.code === 'Space' && state === 'play' && p.energy > C.BOOST_COST && p.boost <= 0) {
    p.energy -= C.BOOST_COST;
    p.boost = .55;
    tone(330, .12, 'sawtooth', .06);
    addBurst(p.x, p.y, '#ffe28a', 14);
} if ((e.code === 'KeyR' || e.code === 'Enter') && state === 'over')
    start(); });
addEventListener('keyup', e => keys.delete(e.code));
$('start').onclick = start;
$('restart').onclick = start;
function start() { soundOn(); state = 'play'; $('title-screen').classList.add('hidden'); $('game-over').classList.add('hidden'); seed = (Date.now() ^ ((Math.random() * 1e9) | 0)) >>> 0; last = performance.now(); t = 0; speed = .32; dist = score = 0; mult = 1; sun = 0; spawn = 0; shake = 0; flash = 0; p = { x: 0, y: 0, vx: 0, vy: 0, energy: 100, boost: 0 }; obs = []; particles = []; $('.screen').classList.add('hidden'); $('game-shell').classList.add('playing'); requestAnimationFrame(loop); }
function end(reason) { state = 'over'; drone?.stop(); drone = undefined; $('game-shell').classList.remove('playing'); $('game-over').classList.remove('hidden'); $('cause').textContent = reason; $('final-distance').textContent = Math.floor(dist) + 'm'; $('final-score').textContent = Math.floor(score).toLocaleString(); const best = Math.max(Number(localStorage.getItem('solarBest') || 0), Math.floor(dist)); localStorage.setItem('solarBest', String(best)); $('best-over').textContent = best + 'm'; tone(70, .5, 'sine', .13); addBurst(p.x, p.y, '#ff665e', 30); }
$('best-title').textContent = (localStorage.getItem('solarBest') || '0') + 'm';
// === RENDERING ===
function poly(points, fill) { ctx.beginPath(); ctx.moveTo(points[0], points[1]); for (let i = 2; i < points.length; i += 2)
    ctx.lineTo(points[i], points[i + 1]); ctx.closePath(); ctx.fillStyle = fill; ctx.fill(); }
function render() {
    const horizon = H * .38 + sun * 25;
    const sx = W * .73, sy = horizon + 5;
    const grad = ctx.createLinearGradient(0, 0, 0, H);
    grad.addColorStop(0, '#11152e');
    grad.addColorStop(.42, '#58385d');
    grad.addColorStop(.7, '#e27664');
    grad.addColorStop(1, '#f6b66a');
    ctx.fillStyle = grad;
    ctx.fillRect(0, 0, W, H);
    // sun glow
    const rg = ctx.createRadialGradient(sx, sy, 4, sx, sy, 135);
    rg.addColorStop(0, '#fff7c2');
    rg.addColorStop(.18, '#ffd476');
    rg.addColorStop(1, 'rgba(255,125,84,0)');
    ctx.fillStyle = rg;
    ctx.fillRect(sx - 140, sy - 140, 280, 280);
    ctx.fillStyle = '#fff3a8';
    ctx.beginPath();
    ctx.arc(sx, sy, 30, 0, 7);
    ctx.fill();
    // distant mountains and road
    poly([0, horizon + 35, W * .16, horizon - 12, W * .29, horizon + 28, W * .43, horizon - 22, W * .58, horizon + 30, W * .75, horizon - 8, W, horizon + 30, W, H, 0, H], '#252545');
    poly([W * .43, horizon + 8, W * .57, horizon + 8, W * .88, H, W * .12, H], '#171b34');
    const cx = W / 2 + p.x * 35, base = H * 1.05;
    ctx.strokeStyle = 'rgba(255,205,122,.2)';
    ctx.lineWidth = 2;
    for (let i = -7; i <= 7; i++) {
        ctx.beginPath();
        ctx.moveTo(cx + i * 8, horizon + 8);
        ctx.lineTo(cx + i * 110, base);
        ctx.stroke();
    }
    for (let i = 1; i < 8; i++) {
        const yy = horizon + Math.pow(i / 8, 1.7) * (H - horizon);
        ctx.strokeStyle = 'rgba(255,190,120,' + (i / 10) + ')';
        ctx.beginPath();
        ctx.moveTo(0, yy);
        ctx.lineTo(W, yy);
        ctx.stroke();
    }
    // world objects back to front
    const sorted = [...obs].sort((a, b) => b.z - a.z);
    for (const o of sorted) {
        const q = Math.max(.02, 1 - o.z / 140), x = W / 2 + (o.x - p.x) * q * W * .2, y = horizon + (o.y - p.y) * q * H * .13 + q * q * (H - horizon) * .65, w = o.w * q * W * .08, h = o.h * q * H * .13;
        if (o.kind === 'tower') {
            poly([x - w, y - h, x + w, y - h, x + w * 1.2, y, x + w * .85, y + h, x - w * .85, y + h, x - w * 1.2, y], o.hit ? '#ff595f' : '#27284d');
            ctx.fillStyle = 'rgba(255,202,112,.35)';
            ctx.fillRect(x - w * .45, y - h, w * .25, h);
        }
        else if (o.kind === 'gate') {
            ctx.strokeStyle = '#ff9063';
            ctx.lineWidth = Math.max(2, w * .3);
            ctx.strokeRect(x - w, y - h, w * 2, h * 2);
        }
        else {
            ctx.save();
            ctx.translate(x, y);
            ctx.rotate(t * 3 + (o.x));
            ctx.strokeStyle = o.kind === 'cell' ? '#ffe084' : o.kind === 'token' ? '#8df4df' : '#e892ff';
            ctx.lineWidth = 3;
            ctx.beginPath();
            ctx.moveTo(0, -h);
            ctx.lineTo(w, 0);
            ctx.lineTo(0, h);
            ctx.lineTo(-w, 0);
            ctx.closePath();
            ctx.stroke();
            ctx.restore();
        }
    }
    // craft
    const px = W / 2 + p.x * 35, py = H * .78 + p.y * 24;
    ctx.save();
    ctx.translate(px, py);
    ctx.rotate(-p.vx * .035);
    poly([-25, 12, 0, -24, 25, 12, 8, 9, 0, 16, -8, 9], '#dce6ff');
    poly([-25, 12, -6, 7, 0, -24, -4, 11], '#ff8b63');
    poly([25, 12, 6, 7, 0, -24, 4, 11], '#6ce3df');
    ctx.fillStyle = '#fff3ae';
    ctx.globalAlpha = .8;
    ctx.fillRect(-5, 17, 10, 8);
    ctx.restore();
    // particles
    for (const a of particles) {
        const q = 1 - a.z / 12;
        ctx.globalAlpha = Math.max(0, a.life * 1.8);
        ctx.fillStyle = a.col;
        ctx.beginPath();
        ctx.arc(W / 2 + (a.x - p.x) * 40 * q, H * .78 + (a.y - p.y) * 26 * q + a.z * 10, a.size * q, 0, 7);
        ctx.fill();
    }
    ctx.globalAlpha = 1;
    if (speed > .78) {
        ctx.strokeStyle = 'rgba(255,239,190,.35)';
        for (let i = 0; i < 18; i++) {
            const x = (rnd() * W), yy = H * .45 + rnd() * H * .45;
            ctx.beginPath();
            ctx.moveTo(x, yy);
            ctx.lineTo(x + (x - W / 2) * .05, yy + 35 + speed * 35);
            ctx.stroke();
        }
    }
}
// === SIMULATION ===
function update(dt) {
    t += dt;
    speed = Math.min(C.MAX_SPEED, speed + C.ACCEL * dt * 60);
    if (p.boost > 0) {
        p.boost -= dt;
        speed = Math.min(1.55, speed + .18);
    }
    dist += speed * dt * 18;
    sun += dt * .0025;
    spawn -= dt * 1000;
    if (spawn <= 0) {
        spawnWave();
        spawn = C.SPAWN - (speed * 220);
    }
    const ax = (keys.has('ArrowRight') || keys.has('KeyD') ? 1 : 0) - (keys.has('ArrowLeft') || keys.has('KeyA') ? 1 : 0), ay = (keys.has('ArrowDown') || keys.has('KeyS') ? 1 : 0) - (keys.has('ArrowUp') || keys.has('KeyW') ? 1 : 0);
    p.vx += (ax * C.STRAFE - p.vx) * Math.min(1, dt / .1);
    p.vy += (ay * C.PITCH - p.vy) * Math.min(1, dt / .1);
    p.x += p.vx * dt;
    p.y += p.vy * dt;
    p.x = Math.max(-4.2, Math.min(4.2, p.x));
    p.y = Math.max(-2.8, Math.min(2.8, p.y));
    p.energy -= C.ENERGY_DRAIN * dt * 60 * (Math.abs(p.x) > 3.4 ? 2.6 : 1);
    if (p.energy <= 0)
        return end('Your craft faded beyond the sunline.');
    if (sun > 1)
        return end('The horizon swallowed your light.');
    for (const o of obs) {
        o.z -= speed * dt * 20;
        if (o.z < 7 && !o.hit) {
            const dx = Math.abs(o.x - p.x), dy = Math.abs(o.y - p.y);
            if ((o.kind === 'tower' || o.kind === 'gate') && dx < o.w * .72 && dy < o.h * .65) {
                o.hit = true;
                flash = .22;
                shake = .5;
                return end('Impact detected. The run ends here.');
            }
            if ((o.kind === 'tower' || o.kind === 'gate') && !o.near && dx < o.w * 1.7) {
                o.near = true;
                score += 100 * mult;
                shake = .16;
                tone(180, .08, 'square', .035);
            }
        }
        if (o.z < 4 && !o.hit && (o.kind === 'cell' || o.kind === 'token' || o.kind === 'orb') && Math.abs(o.x - p.x) < o.w * 1.7 && Math.abs(o.y - p.y) < o.h * 1.7) {
            o.hit = true;
            addBurst(o.x, o.y, o.kind === 'cell' ? '#ffe084' : o.kind === 'token' ? '#8df4df' : '#e892ff', 12);
            tone(o.kind === 'cell' ? 520 : o.kind === 'token' ? 760 : 260, .13, 'sine', .06);
            if (o.kind === 'cell')
                p.energy = Math.min(100, p.energy + 27);
            if (o.kind === 'token') {
                score += 250 * mult;
                mult = Math.min(9, mult + 1);
            }
            if (o.kind === 'orb') {
                mult = Math.min(9, mult + 2);
                score += 400 * mult;
            }
        }
    }
    obs = obs.filter(o => o.z > -8 && !o.hit);
    for (const a of particles) {
        a.z -= speed * dt * 15;
        a.life -= dt;
    }
    particles = particles.filter(a => a.life > 0);
    shake = Math.max(0, shake - dt);
    flash = Math.max(0, flash - dt);
    render();
    $('distance').textContent = Math.floor(dist) + 'm';
    $('score').textContent = Math.floor(score).toLocaleString();
    $('multiplier').textContent = 'x' + mult;
    $('speed').textContent = Math.floor(speed * 180) + ' km/h';
    $('energy-bar').style.width = Math.max(0, p.energy) + '%';
    $('energy-bar').classList.toggle('low-energy', p.energy < 25);
}
function loop(now) { if (state !== 'play')
    return; const dt = Math.min(.04, (now - last) / 1000); last = now; ctx.save(); if (shake) {
    ctx.translate((Math.random() - .5) * shake * 22, (Math.random() - .5) * shake * 22);
} update(dt); ctx.restore(); if (flash) {
    $('flash').style.opacity = String(flash * 2);
}
else
    $('flash').style.opacity = '0'; requestAnimationFrame(loop); }
render();
};

// ── entry ──
__require("src/main.ts");
})();
</script>
</body>
</html>
<!-- agent-meta {"model":"openai/gpt-5.6-luna-pro","provider":"openrouter","persona":"typescript","sessionId":"75f57b90-de84-4083-a260-a9799bd56b55","tokensIn":378430,"tokensOut":14367,"tokensTotal":392797,"turns":11,"toolCalls":16,"failedToolCalls":1,"timestamp":"2026-07-31T03:34:26.998Z"} -->