Canyon Run

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Canyon Rush — High-Speed Procedural Racer</title>
<script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script>
<style>
/* ── css: hud ── */
*{box-sizing:border-box;margin:0;padding:0;}html,body,#app{width:100%;height:100%;overflow:hidden;background:#0b0618;font-family:'Segoe UI',system-ui,sans-serif;}canvas{display:block;width:100%;height:100%;}#hud{position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none;}#hud>*{position:absolute;}#hud .left{left:24px;top:24px;}#hud .right{right:24px;top:24px;text-align:right;}#hud .bottom{bottom:24px;left:50%;transform:translateX(-50%);}#hud .score{color:#ffb050;font-size:28px;font-weight:800;text-shadow:0 0 12px #ffb050aa;}#hud .mult{color:#ffdd55;font-size:18px;}#hud .speed{color:#ff6e40;font-size:14px;text-transform:uppercase;letter-spacing:2px;}#hud .energyBar{width:200px;height:8px;background:#1a1a2a;border-radius:4px;overflow:hidden;box-shadow:0 0 8px #ff408055;}#hud .energyFill{height:100%;width:100%;background:linear-gradient(90deg,#ff4080,#ff9a30);border-radius:4px;transition:width .15s;}#hud .turboBar{width:120px;height:6px;background:#1a1a2a;border-radius:3px;overflow:hidden;margin-top:8px;}#hud .turboFill{height:100%;width:0%;background:#30ffaa;border-radius:3px;transition:width .15s;}#gameover{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px);}#gameover .overlay{background:#0b0618dd;border:1px solid #ffb05055;border-radius:24px;padding:48px;text-align:center;color:#ffb050;}#gameover h1{font-size:28px;letter-spacing:4px;margin-bottom:16px;}#gameover p{font-size:16px;letter-spacing:2px;margin:8px 0;}#gameover button{pointer-events:all;cursor:pointer;margin-top:24px;padding:12px 48px;background:#ffb050;color:#0b0618;font-size:18px;font-weight:800;border:none;border-radius:24px;text-transform:uppercase;letter-spacing:3px;}#gameover button:hover{background:#ffcc40;}#gameover button:focus{outline:none;}#gameover.hidden{display:none;}
</style>
</head>
<body>
<canvas id="game" width="1280" height="720"></canvas><div id="hud"></div><div id="gameover" class="hidden"><div class="overlay"><h1 id="finalTitle">FINAL SCORE</h1><p id="finalScore">0</p><p id="maxSpeed">MAX SPEED: 0</p><button id="restartBtn" autofocus="">RESTART</button></div></div>
<script>
(function () {
'use strict';
var __mods = {};
var __cache = {};
var __map = {"src/main.ts":{"./state":"src/state.ts","./audio":"src/audio.ts"},"src/audio.ts":{"./state":"src/state.ts"}};
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 THREE = window.THREE;
const state_1 = require("./state");
const audio_1 = require("./audio");
const canvas = document.getElementById('game');
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
renderer.setSize(1280, 720);
renderer.setClearColor(0x0b0618);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, 1280 / 720, 0.1, 1000);
camera.position.set(0, 10, 0);
const ambientLight = new THREE.AmbientLight(0x404040, 1);
scene.add(ambientLight);
const sun = new THREE.DirectionalLight(0xff6e40, 2);
sun.position.set(0, 100, 0);
scene.add(sun);
const sunset = new THREE.DirectionalLight(0xffb050, 1.5);
sunset.position.set(-100, 0, 0);
scene.add(sunset);
const craft = new THREE.Mesh(new THREE.ConeGeometry(1, 3, 8), new THREE.MeshStandardMaterial({ color: 0xff9a30, roughness: 0.2, metalness: 0.8 }));
craft.rotation.x = Math.PI / 2;
craft.position.z = 0;
scene.add(craft);
let velocity = new THREE.Vector3(0, 0, 0);
let speed = state_1.game.speed;
let energy = state_1.game.energy;
let multiplier = state_1.game.multiplier;
let score = state_1.game.score;
let turboMeter = state_1.game.turboMeter;
let canBoost = state_1.game.canBoost;
let boostActive = false;
let shakeIntensity = 0;
let shakeDuration = 0;
let nearMissTimer = 0;
let multiplierTimer = 0;
let chunks = [];
let obstacles = [];
let orbs = [];
let particles = [];
let maxSpeedReached = state_1.game.maxSpeedReached;
function createCanyonChunk(z) {
    const group = new THREE.Group();
    const wall = new THREE.Mesh(new THREE.BoxGeometry(100, 100, 10), new THREE.MeshStandardMaterial({ color: 0xff6e40, flatShading: true }));
    wall.position.set(0, 0, z);
    group.add(wall);
    const floor = new THREE.Mesh(new THREE.BoxGeometry(100, 0.5, 10), new THREE.MeshStandardMaterial({ color: 0xff9a30, flatShading: true }));
    floor.position.set(0, -5, z);
    group.add(floor);
    const ceiling = new THREE.Mesh(new THREE.BoxGeometry(100, 0.5, 10), new THREE.MeshStandardMaterial({ color: 0xff9a30, flatShading: true }));
    ceiling.position.set(0, 5, z);
    group.add(ceiling);
    const monolith = new THREE.Mesh(new THREE.BoxGeometry(2, 8, 2), new THREE.MeshStandardMaterial({ color: 0xffb050, flatShading: true }));
    monolith.position.set(Math.random() * 40 - 20, 0, z);
    group.add(monolith);
    obstacles.push({
        mesh: monolith,
        position: monolith.position,
        size: { x: 2, y: 8, z: 2 },
        active: true
    });
    if (Math.random() < 0.3) {
        const orb = new THREE.Mesh(new THREE.SphereGeometry(1, 16, 16), new THREE.MeshBasicMaterial({ color: 0xff9a30, transparent: true, opacity: 0.8 }));
        orb.position.set(Math.random() * 30 - 15, Math.random() * 6 - 3, z);
        scene.add(orb);
        orbs.push({
            mesh: orb,
            position: orb.position,
            active: true,
            value: Math.random() * 20 + 10
        });
    }
    scene.add(group);
    chunks.push({
        group,
        z,
        destroyed: false
    });
}
function updateChunks() {
    while (chunks.length < state_1.game.chunkCount) {
        state_1.game.lastChunkZ -= state_1.game.chunkSize;
        createCanyonChunk(state_1.game.lastChunkZ);
    }
    for (let i = chunks.length - 1; i >= 0; i--) {
        const chunk = chunks[i];
        if (chunk.z > craft.position.z + 50) {
            scene.remove(chunk.group);
            obstacles = obstacles.filter(o => o.mesh.parent !== chunk.group);
            orbs = orbs.filter(o => o.mesh.parent !== chunk.group);
            chunks.splice(i, 1);
        }
    }
}
function updatePhysics(dt) {
    const inputX = (keys.right ? 1 : 0) - (keys.left ? 1 : 0);
    const inputY = (keys.down ? 1 : 0) - (keys.up ? 1 : 0);
    velocity.x += inputX * dt * 50;
    velocity.y += inputY * dt * 50;
    velocity.x *= 0.95;
    velocity.y *= 0.95;
    if (boostActive) {
        speed += state_1.game.acceleration * 2;
        shakeIntensity = 0.05;
        shakeDuration = 0.5;
        (0, audio_1.getBoostSound)();
    }
    speed = Math.min(speed, canBoost ? state_1.game.boostSpeed : state_1.game.maxSpeed);
    maxSpeedReached = Math.max(maxSpeedReached, speed);
    velocity.z = -speed * dt * 60;
    craft.position.add(velocity);
    craft.rotation.z = velocity.x * 0.05;
    craft.rotation.x = Math.PI / 2 + velocity.y * 0.05;
    energy -= state_1.game.energyDecay;
    if (energy <= 0) {
        gameOver();
    }
    for (const obstacle of obstacles) {
        if (!obstacle.active)
            continue;
        const dist = craft.position.distanceTo(obstacle.position);
        if (dist < 3) {
            gameOver();
        }
        if (dist < 8) {
            multiplier = Math.max(multiplier, 1.5);
            nearMissTimer = 1;
            shakeIntensity = 0.02;
            shakeDuration = 0.2;
            (0, audio_1.getNearMissSound)();
        }
    }
    if (nearMissTimer > 0) {
        nearMissTimer -= dt;
        multiplier *= 1.01;
    }
    if (multiplierTimer > 0) {
        multiplierTimer -= dt;
        multiplier = Math.max(multiplier, 1);
    }
    if (nearMissTimer <= 0 && multiplierTimer <= 0) {
        multiplier *= 0.99;
    }
    score += speed * multiplier;
    for (const orb of orbs) {
        if (!orb.active)
            continue;
        const dist = craft.position.distanceTo(orb.position);
        if (dist < 3) {
            orb.active = false;
            scene.remove(orb.mesh);
            energy = Math.min(100, energy + orb.value);
            turboMeter = Math.min(100, turboMeter + 20);
            if (turboMeter >= 100) {
                canBoost = true;
            }
            (0, audio_1.getOrbSound)();
        }
    }
    if (canBoost && keys.shift) {
        boostActive = true;
        turboMeter -= dt * 20;
        if (turboMeter <= 0) {
            boostActive = false;
            canBoost = false;
        }
    }
    else {
        boostActive = false;
    }
    shakeDuration -= dt;
    if (shakeDuration <= 0) {
        shakeIntensity = 0;
    }
}
function updateHUD() {
    const scoreEl = document.getElementById('finalScore');
    const maxSpeedEl = document.getElementById('maxSpeed');
    const energyBar = document.querySelector('.energyFill');
    const turboBar = document.querySelector('.turboFill');
    if (scoreEl)
        scoreEl.textContent = `SCORE: ${Math.floor(score)}`;
    if (maxSpeedEl)
        maxSpeedEl.textContent = `MAX SPEED: ${Math.floor(maxSpeedReached * 100)}`;
    if (energyBar)
        energyBar.style.width = `${Math.max(0, energy)}%`;
    if (turboBar)
        turboBar.style.width = `${turboMeter}%`;
}
function updateCamera() {
    camera.position.x = craft.position.x * 0.3;
    camera.position.y = craft.position.y * 0.3 + 10;
    camera.position.z = craft.position.z + 20;
    if (shakeIntensity > 0) {
        camera.position.x += Math.sin(Date.now() * 10) * shakeIntensity;
        camera.position.y += Math.cos(Date.now() * 10) * shakeIntensity;
    }
}
function gameOver() {
    state_1.game.gameOver = true;
    const gameoverEl = document.getElementById('gameover');
    if (gameoverEl)
        gameoverEl.classList.remove('hidden');
}
const keys = {};
window.addEventListener('keydown', (e) => {
    keys[e.key.toLowerCase()] = true;
});
window.addEventListener('keyup', (e) => {
    keys[e.key.toLowerCase()] = false;
});
document.getElementById('restartBtn')?.addEventListener('click', () => {
    location.reload();
});
(0, audio_1.initAudioSystem)();
while (chunks.length < state_1.game.chunkCount) {
    state_1.game.lastChunkZ -= state_1.game.chunkSize;
    createCanyonChunk(state_1.game.lastChunkZ);
}
const clock = new THREE.Clock();
function animate() {
    requestAnimationFrame(animate);
    const dt = clock.getDelta();
    if (state_1.game.gameOver)
        return;
    updateChunks();
    updatePhysics(dt);
    updateHUD();
    updateCamera();
    (0, audio_1.updateAudio)(dt);
    renderer.render(scene, camera);
}
animate();
};

// ── types: globals.d.ts ──
__mods["globals.d.ts"] = function (exports) {};

// ── module: src/state.ts ──
__mods["src/state.ts"] = function (exports, require, module) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.game = void 0;
exports.game = {
    score: 0,
    energy: 100,
    energyDecay: 0.03,
    speed: 0.3,
    maxSpeed: 0.8,
    acceleration: 0.002,
    boostSpeed: 1.5,
    boostDuration: 0,
    boostCooldown: 0,
    multiplier: 1,
    nearMissBonus: 100,
    nearMissThreshold: 3,
    chunkCount: 10,
    chunkSize: 100,
    obstacles: [],
    orbs: [],
    particles: [],
    gameOver: false,
    maxSpeedReached: 0,
    turboMeter: 0,
    canBoost: false,
    shakeIntensity: 0,
    shakeDuration: 0,
    scoreMultiplier: 1,
    difficulty: 1,
    lastChunkZ: 0,
};
};

// ── module: src/audio.ts ──
__mods["src/audio.ts"] = function (exports, require, module) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.initAudioSystem = initAudioSystem;
exports.updateAudio = updateAudio;
exports.getOrbSound = getOrbSound;
exports.getNearMissSound = getNearMissSound;
exports.getBoostSound = getBoostSound;
const state_1 = require("./state");
let audioCtx;
let engineOsc;
let engineGain;
function initAudio() {
    if (audioCtx)
        return;
    audioCtx = new AudioContext();
    engineOsc = audioCtx.createOscillator();
    engineGain = audioCtx.createGain();
    engineOsc.type = 'sawtooth';
    engineOsc.frequency.value = 120;
    engineGain.gain.value = 0;
    engineOsc.connect(engineGain);
    engineGain.connect(audioCtx.destination);
    engineOsc.start();
}
function updateEngineSound() {
    if (!audioCtx)
        return;
    const speed = Math.min(state_1.game.speed / state_1.game.maxSpeed, 1);
    engineOsc.frequency.value = 120 + speed * 200;
    engineGain.gain.value = 0.05 + speed * 0.05;
}
function playOrbSound() {
    if (!audioCtx)
        return;
    const osc = audioCtx.createOscillator();
    const gain = audioCtx.createGain();
    osc.type = 'sine';
    osc.frequency.value = 880;
    gain.gain.value = 0.3;
    gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.1);
    osc.connect(gain);
    gain.connect(audioCtx.destination);
    osc.start();
    osc.stop(audioCtx.currentTime + 0.1);
}
function playNearMissSound() {
    if (!audioCtx)
        return;
    const osc = audioCtx.createOscillator();
    const gain = audioCtx.createGain();
    osc.type = 'sine';
    osc.frequency.value = 1500;
    osc.frequency.exponentialRampToValueAtTime(200, audioCtx.currentTime + 0.3);
    gain.gain.value = 0.4;
    gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.3);
    osc.connect(gain);
    gain.connect(audioCtx.destination);
    osc.start();
    osc.stop(audioCtx.currentTime + 0.3);
}
function playBoostSound() {
    if (!audioCtx)
        return;
    const osc = audioCtx.createOscillator();
    const gain = audioCtx.createGain();
    osc.type = 'sawtooth';
    osc.frequency.value = 100;
    osc.frequency.exponentialRampToValueAtTime(800, audioCtx.currentTime + 0.2);
    gain.gain.value = 0.15;
    gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.2);
    osc.connect(gain);
    gain.connect(audioCtx.destination);
    osc.start();
    osc.stop(audioCtx.currentTime + 0.2);
}
function initAudioSystem() {
    initAudio();
}
function updateAudio(dt) {
    updateEngineSound();
}
function getOrbSound() {
    playOrbSound();
}
function getNearMissSound() {
    playNearMissSound();
}
function getBoostSound() {
    playBoostSound();
}
};

// ── entry ──
__require("src/main.ts");
})();
</script>
</body>
</html>
<!-- agent-meta {"model":"bartowski/ProCreations_grug-27b-GGUF-IQ4","provider":"brigid","persona":"typescript","sessionId":"3ca78c89-43ae-49f6-a6f6-e478281bc5d4","tokensIn":132768,"tokensOut":6320,"tokensTotal":139088,"cost":0,"turns":13,"toolCalls":15,"failedToolCalls":1,"timestamp":"2026-08-05T17:45:39.230Z"} -->