Canyon Run

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>High-Speed Procedural Canyon Racer</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            overflow: hidden;
            background: #000;
            font-family: 'Arial', sans-serif;
        }
        canvas {
            display: block;
        }
        #gameUI {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 10;
        }
        .hud {
            position: absolute;
            color: #fff;
            text-shadow: 0 0 10px rgba(255, 165, 0, 0.8);
            font-weight: bold;
        }
        #speedometer {
            top: 20px;
            left: 20px;
            font-size: 24px;
        }
        #multiplier {
            top: 60px;
            left: 20px;
            font-size: 36px;
            transition: all 0.3s ease;
        }
        #energyBar {
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            width: 300px;
            height: 20px;
            background: rgba(0, 0, 0, 0.5);
            border: 2px solid #ff6b35;
            border-radius: 10px;
            overflow: hidden;
        }
        #energyFill {
            height: 100%;
            background: linear-gradient(90deg, #ff6b35, #ffd93d);
            transition: width 0.3s ease;
            box-shadow: 0 0 10px rgba(255, 107, 53, 0.8);
        }
        #gameOver {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0, 0, 0, 0.9);
            padding: 40px;
            border-radius: 20px;
            text-align: center;
            display: none;
            border: 2px solid #ff6b35;
            box-shadow: 0 0 30px rgba(255, 107, 53, 0.5);
        }
        #gameOver h2 {
            color: #ff6b35;
            margin-bottom: 20px;
            font-size: 48px;
        }
        #gameOver p {
            color: #fff;
            margin: 10px 0;
            font-size: 24px;
        }
        #restartBtn {
            margin-top: 30px;
            padding: 15px 40px;
            font-size: 24px;
            background: #ff6b35;
            color: #000;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        #restartBtn:hover {
            background: #ffd93d;
            transform: scale(1.05);
        }
    </style>
</head>
<body>
    <div id="gameUI">
        <div id="speedometer" class="hud">SPEED: 0</div>
        <div id="multiplier" class="hud">MULTIPLIER: 1x</div>
        <div id="energyBar">
            <div id="energyFill"></div>
        </div>
        <div id="gameOver">
            <h2>GAME OVER</h2>
            <p>Final Score: <span id="finalScore">0</span></p>
            <p>Max Speed: <span id="maxSpeed">0</span></p>
            <button id="restartBtn">RESTART</button>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/postprocessing/EffectComposer.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/postprocessing/RenderPass.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/postprocessing/UnrealBloomPass.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/postprocessing/ShaderPass.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/shaders/CopyShader.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/shaders/LuminosityHighPassShader.js"></script>
    
    <script>
        // Game state
        const gameState = {
            isPlaying: false,
            score: 0,
            multiplier: 1,
            energy: 100,
            speed: 0,
            maxSpeed: 0,
            turbo: 0,
            nearMissDistance: Infinity,
            momentum: { x: 0, y: 0, z: 0 },
            lastNearMiss: 0
        };

        // Three.js setup
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setPixelRatio(window.devicePixelRatio);
        document.body.appendChild(renderer.domElement);

        // Post-processing setup
        const composer = new THREE.EffectComposer(renderer);
        const renderPass = new THREE.RenderPass(scene, camera);
        composer.addPass(renderPass);

        const bloomPass = new THREE.UnrealBloomPass(
            new THREE.Vector2(window.innerWidth, window.innerHeight),
            1.5, 0.4, 0.85
        );
        composer.addPass(bloomPass);

        // Add motion blur
        const shaderPass = new THREE.ShaderPass(THREE.CopyShader);
        composer.addPass(shaderPass);
        shaderPass.renderToScreen = true;

        // Particle system for trail
        const trailParticles = new THREE.Points(
            new THREE.BufferGeometry(),
            new THREE.PointsMaterial({
                color: 0x00ffff,
                size: 0.1,
                transparent: true,
                opacity: 0.6
            })
        );
        scene.add(trailParticles);

        // Particle system for dust/debris
        const dustParticles = new THREE.Points(
            new THREE.BufferGeometry(),
            new THREE.PointsMaterial({
                color: 0xffa500,
                size: 0.05,
                transparent: true,
                opacity: 0.3
            })
        );
        scene.add(dustParticles);

        // Lighting
        const ambientLight = new THREE.AmbientLight(0x404040, 0.5);
        scene.add(ambientLight);

        const directionalLight = new THREE.DirectionalLight(0xffa500, 1);
        directionalLight.position.set(5, 10, 5);
        scene.add(directionalLight);

        // Add more dramatic lighting
        const pointLight = new THREE.PointLight(0xff6b35, 1, 100);
        pointLight.position.set(0, 5, 0);
        scene.add(pointLight);

        // Player object
        const playerGeometry = new THREE.ConeGeometry(0.3, 1, 4);
        const playerMaterial = new THREE.MeshPhongMaterial({ 
            color: 0x00ffff,
            emissive: 0x00ffff,
            emissiveIntensity: 0.3,
            shininess: 100
        });
        const player = new THREE.Mesh(playerGeometry, playerMaterial);
        player.position.z = -5;
        scene.add(player);

        // Camera setup
        camera.position.set(0, 2, 5);
        camera.lookAt(player.position);

        // Procedural generation
        const chunks = [];
        const chunkSize = 50;
        let currentChunk = 0;

        function generateChunk(index) {
            const chunk = new THREE.Group();
            
            // Generate canyon walls with variation
            const wallHeight = 15 + Math.random() * 10;
            const wallGeometry = new THREE.BoxGeometry(20, wallHeight, 10);
            const wallMaterial = new THREE.MeshPhongMaterial({ 
                color: 0x8b4513,
                emissive: 0x4a2c17,
                emissiveIntensity: 0.2
            });
            
            const leftWall = new THREE.Mesh(wallGeometry, wallMaterial);
            leftWall.position.set(-10, 0, index * chunkSize);
            chunk.add(leftWall);
            
            const rightWall = new THREE.Mesh(wallGeometry, wallMaterial);
            rightWall.position.set(10, 0, index * chunkSize);
            chunk.add(rightWall);
            
            // Add floating monoliths
            if (Math.random() > 0.3) {
                const monolithGeometry = new THREE.BoxGeometry(3, 10 + Math.random() * 10, 3);
                const monolithMaterial = new THREE.MeshPhongMaterial({ 
                    color: 0x696969,
                    emissive: 0x2f2f2f,
                    emissiveIntensity: 0.1
                });
                const monolith = new THREE.Mesh(monolithGeometry, monolithMaterial);
                monolith.position.set(
                    (Math.random() - 0.5) * 15,
                    0,
                    index * chunkSize + Math.random() * 10 - 5
                );
                chunk.add(monolith);
            }
            
            // Add tight squeezes
            if (Math.random() > 0.5) {
                const gapWidth = 5 + Math.random() * 5;
                leftWall.scale.x = (20 - gapWidth) / 20;
                rightWall.scale.x = (20 - gapWidth) / 20;
                rightWall.position.x = 10 + gapWidth / 2;
            }
            
            return chunk;
        }

        // Initialize chunks
        for (let i = 0; i < 10; i++) {
            chunks.push(generateChunk(i));
            scene.add(chunks[i]);
        }

        // Controls
        const keys = {};
        document.addEventListener('keydown', (e) => keys[e.code] = true);
        document.addEventListener('keyup', (e) => keys[e.code] = false);

        // Game loop
        function animate() {
            requestAnimationFrame(animate);
            
            if (gameState.isPlaying) {
                // Update player physics
                updatePlayer();
                
                // Update camera
                updateCamera();
                
                // Update game state
                updateGameState();
                
                // Update particles
                updateParticles();
                
                // Update HUD
                updateHUD();
                
                // Check collisions
                checkCollisions();
            }
            
            composer.render();
        }

        function updatePlayer() {
            // Apply momentum
            gameState.momentum.x *= 0.95; // Damping
            gameState.momentum.y *= 0.95;
            
            // Basic movement with momentum
            if (keys['ArrowUp']) {
                gameState.speed = Math.min(gameState.speed + 0.2, 30);
            }
            if (keys['ArrowDown']) {
                gameState.speed = Math.max(gameState.speed - 0.2, 0);
            }
            
            // Banking/rolling with momentum
            if (keys['ArrowLeft']) {
                gameState.momentum.x -= 0.05;
            }
            if (keys['ArrowRight']) {
                gameState.momentum.x += 0.05;
            }
            
            // Pitch control
            if (keys['Space']) {
                gameState.momentum.y += 0.02;
            } else {
                gameState.momentum.y -= 0.01;
            }
            
            // Apply momentum to player
            player.position.x += gameState.momentum.x;
            player.position.y += gameState.momentum.y;
            
            // Limit player movement
            player.position.x = Math.max(-8, Math.min(8, player.position.x));
            player.position.y = Math.max(-3, Math.min(3, player.position.y));
            
            // Apply rotation based on momentum
            player.rotation.z = gameState.momentum.x * 0.5;
            player.rotation.x = gameState.momentum.y * 0.3;
            
            // Move forward
            player.position.z += gameState.speed * 0.1;
            
            // Energy decay
            gameState.energy = Math.max(0, gameState.energy - 0.05);
            if (gameState.energy <= 0) {
                gameOver();
            }
        }

        function checkCollisions() {
            // Simple collision detection with walls
            const playerBounds = {
                x: player.position.x,
                y: player.position.y,
                z: player.position.z,
                radius: 0.5
            };
            
            // Check distance to walls
            const leftWall = chunks[currentChunk].children[0];
            const rightWall = chunks[currentChunk].children[1];
            
            const distToLeft = Math.abs(player.position.x - leftWall.position.x) - leftWall.scale.x * 10;
            const distToRight = Math.abs(player.position.x - rightWall.position.x) - rightWall.scale.x * 10;
            
            // Near miss detection
            const minDist = Math.min(distToLeft, distToRight);
            if (minDist < 2) {
                gameState.nearMissDistance = minDist;
                gameState.multiplier = Math.min(gameState.multiplier + 0.1, 10);
                gameState.lastNearMiss = Date.now();
            } else {
                // Gradually reduce multiplier if no near miss
                if (Date.now() - gameState.lastNearMiss > 2000) {
                    gameState.multiplier = Math.max(1, gameState.multiplier - 0.01);
                }
                gameState.nearMissDistance = Infinity;
            }
        }

        function updateCamera() {
            // Camera follows player with some lag
            camera.position.x = player.position.x;
            camera.position.y = player.position.y + 2;
            camera.position.z = player.position.z + 5;
            camera.lookAt(player.position);
            
            // Camera shake on near miss
            if (gameState.nearMissDistance < 2) {
                const shake = gameState.nearMissDistance * 0.1;
                camera.position.x += (Math.random() - 0.5) * shake;
                camera.position.y += (Math.random() - 0.5) * shake;
            }
        }

        function updateGameState() {
            // Update score
            gameState.score += gameState.speed * gameState.multiplier * 0.1;
            
            // Update max speed
            if (gameState.speed > gameState.maxSpeed) {
                gameState.maxSpeed = gameState.speed;
            }
            
            // Difficulty scaling
            if (gameState.score > 0 && gameState.score % 1000 === 0) {
                gameState.speed = Math.min(gameState.speed + 0.5, 30);
            }
        }

        function updateParticles() {
            // Update trail particles
            const trailPositions = [];
            for (let i = 0; i < 20; i++) {
                trailPositions.push(
                    player.position.x - (i * 0.2),
                    player.position.y,
                    player.position.z - (i * 0.5)
                );
            }
            
            const trailGeometry = new THREE.BufferGeometry();
            trailGeometry.setAttribute('position', new THREE.Float32BufferAttribute(trailPositions, 3));
            trailParticles.geometry.dispose();
            trailParticles.geometry = trailGeometry;
            
            // Update dust particles
            const dustPositions = [];
            for (let i = 0; i < 50; i++) {
                dustPositions.push(
                    (Math.random() - 0.5) * 20,
                    (Math.random() - 0.5) * 10,
                    player.position.z - Math.random() * 50
                );
            }
            
            const dustGeometry = new THREE.BufferGeometry();
            dustGeometry.setAttribute('position', new THREE.Float32BufferAttribute(dustPositions, 3));
            dustParticles.geometry.dispose();
            dustParticles.geometry = dustGeometry;
        }

        function updateHUD() {
            document.getElementById('speedometer').textContent = `SPEED: ${Math.floor(gameState.speed)}`;
            document.getElementById('multiplier').textContent = `MULTIPLIER: ${gameState.multiplier.toFixed(1)}x`;
            document.getElementById('energyFill').style.width = `${gameState.energy}%`;
            
            // Pulse multiplier on near miss
            if (gameState.nearMissDistance < 2) {
                document.getElementById('multiplier').style.transform = 'scale(1.2)';
                document.getElementById('multiplier').style.color = '#ff6b35';
                setTimeout(() => {
                    document.getElementById('multiplier').style.transform = 'scale(1)';
                    document.getElementById('multiplier').style.color = '#fff';
                }, 300);
            }
            
            // Energy bar color based on level
            const energyBar = document.getElementById('energyFill');
            if (gameState.energy > 50) {
                energyBar.style.background = 'linear-gradient(90deg, #00ff00, #00cc00)';
            } else if (gameState.energy > 20) {
                energyBar.style.background = 'linear-gradient(90deg, #ffcc00, #ff9900)';
            } else {
                energyBar.style.background = 'linear-gradient(90deg, #ff0000, #cc0000)';
            }
        }

        function gameOver() {
            gameState.isPlaying = false;
            document.getElementById('gameOver').style.display = 'block';
            document.getElementById('finalScore').textContent = Math.floor(gameState.score);
            document.getElementById('maxSpeed').textContent = Math.floor(gameState.maxSpeed);
        }

        function restart() {
            // Reset game state
            gameState.isPlaying = true;
            gameState.score = 0;
            gameState.multiplier = 1;
            gameState.energy = 100;
            gameState.speed = 0;
            gameState.maxSpeed = 0;
            gameState.turbo = 0;
            gameState.nearMissDistance = Infinity;
            gameState.lastNearMiss = 0;
            
            // Reset player
            player.position.set(0, 0, -5);
            player.rotation.set(0, 0, 0);
            gameState.momentum = { x: 0, y: 0, z: 0 };
            
            // Reset chunks
            for (let i = 0; i < chunks.length; i++) {
                scene.remove(chunks[i]);
                chunks[i] = generateChunk(i);
                scene.add(chunks[i]);
            }
            
            // Hide game over screen
            document.getElementById('gameOver').style.display = 'none';
        }

        // Event listeners
        document.getElementById('restartBtn').addEventListener('click', restart);

        // Start game
        gameState.isPlaying = true;
        animate();

        // Handle window resize
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
            composer.setSize(window.innerWidth, window.innerHeight);
        });
    </script>
</body>
</html>