3D-GAME

Running

App Files Files Community

ginipick commited on Mar 7

Commit

5ec2448

verified ·

1 Parent(s): 12bcf64

Update index.html

Browse files

Files changed (1) hide show

index.html +366 -456

index.html CHANGED Viewed

@@ -1,506 +1,416 @@
 <!DOCTYPE html>
-<html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Personalized Baby Name Generator</title>
     <style>
-        :root {
-            --primary: #FF9FB0;
-            --secondary: #A6D9F7;
-            --accent: #B6E6BD;
-            --dark: #2D3748;
-            --light: #F7FAFC;
-            --shadow: rgba(0, 0, 0, 0.1);
-        }
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-            font-family: 'Segoe UI', Arial, sans-serif;
-        }
-        body {
-            background: linear-gradient(135deg, #f6f8fc 0%, #fff 100%);
-            color: var(--dark);
-            min-height: 100vh;
-            padding: 2rem;
-        }
-        .container {
-            max-width: 1000px;
-            margin: 0 auto;
-        }
-        .header {
-            text-align: center;
-            padding: 2rem;
-            background: white;
-            border-radius: 1rem;
-            box-shadow: 0 4px 6px var(--shadow);
-            margin-bottom: 2rem;
-        }
-        .header h1 {
-            color: var(--primary);
-            font-size: 2.5rem;
-            margin-bottom: 0.5rem;
-        }
-        .generator-form {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-            gap: 2rem;
-        }
-        .form-section {
-            background: white;
-            padding: 1.5rem;
-            border-radius: 1rem;
-            box-shadow: 0 4px 6px var(--shadow);
-        }
-        .form-section h2 {
-            color: var(--secondary);
-            margin-bottom: 1rem;
-            font-size: 1.5rem;
-        }
-        .input-group {
-            margin-bottom: 1rem;
-        }
-        .input-group label {
-            display: block;
-            margin-bottom: 0.5rem;
-            color: var(--dark);
-            font-weight: 500;
-        }
-        select, input {
             width: 100%;
-            padding: 0.75rem;
-            border: 2px solid #E2E8F0;
-            border-radius: 0.5rem;
-            font-size: 1rem;
-            transition: all 0.3s ease;
-        }
-        select:focus, input:focus {
-            border-color: var(--primary);
-            outline: none;
-            box-shadow: 0 0 0 3px rgba(255, 159, 176, 0.2);
-        }
-        .traits-container {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-            gap: 0.5rem;
-            margin-top: 0.5rem;
-        }
-        .trait-chip {
-            padding: 0.5rem;
-            background: var(--light);
-            border: 1px solid #E2E8F0;
-            border-radius: 2rem;
-            cursor: pointer;
-            text-align: center;
-            transition: all 0.3s ease;
         }
-        .trait-chip.selected {
-            background: var(--primary);
-            color: white;
-            border-color: var(--primary);
-        }
-        .generate-btn {
-            background: var(--primary);
-            color: white;
-            border: none;
-            padding: 1rem 2rem;
-            border-radius: 0.5rem;
-            font-size: 1.1rem;
-            font-weight: 600;
-            cursor: pointer;
-            width: 100%;
-            transition: all 0.3s ease;
-            margin-top: 1rem;
-        }
-        .generate-btn:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 4px 12px rgba(255, 159, 176, 0.3);
-        }
-        .results-section {
-            margin-top: 2rem;
-            background: white;
-            padding: 2rem;
-            border-radius: 1rem;
-            box-shadow: 0 4px 6px var(--shadow);
-        }
-        .name-card {
-            background: var(--light);
-            padding: 1.5rem;
-            border-radius: 0.5rem;
-            margin-bottom: 1rem;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            transition: all 0.3s ease;
-        }
-        .name-card:hover {
-            transform: translateX(5px);
-            background: #F0F7FF;
         }
-        .name-details h3 {
-            color: var(--primary);
-            font-size: 1.5rem;
-            margin-bottom: 0.5rem;
-        }
-        .name-meaning {
-            font-size: 0.9rem;
-            color: #666;
         }
-        .personality-tags {
-            display: flex;
-            gap: 0.5rem;
-            flex-wrap: wrap;
-            margin-top: 0.5rem;
-        }
-        .personality-tag {
-            background: var(--secondary);
-            color: white;
-            padding: 0.25rem 0.75rem;
-            border-radius: 1rem;
-            font-size: 0.8rem;
-        }
-        .favorite-btn {
-            background: none;
-            border: none;
-            font-size: 1.5rem;
-            cursor: pointer;
-            transition: all 0.3s ease;
-        }
-        .favorite-btn:hover {
-            transform: scale(1.2);
         }
-        .favorites-section {
-            margin-top: 2rem;
-            background: white;
-            padding: 2rem;
-            border-radius: 1rem;
-            box-shadow: 0 4px 6px var(--shadow);
         }
-        .favorites-section h2 {
-            color: var(--primary);
-            margin-bottom: 1rem;
         }
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(10px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        .name-card {
-            animation: fadeIn 0.5s ease forwards;
-        }
-        @media (max-width: 768px) {
-            .container {
-                padding: 1rem;
             }
-            .generator-form {
-                grid-template-columns: 1fr;
             }
-        }
-    </style>
-</head>
-<body>
-    <div class="container">
-        <div class="header">
-            <h1>👶 Personalized Baby Name Generator</h1>
-            <p>Create the perfect name based on your family's unique characteristics</p>
-        </div>
-        <div class="generator-form">
-            <div class="form-section">
-                <h2>Basic Information</h2>
-                <div class="input-group">
-                    <label for="gender">Baby's Gender</label>
-                    <select id="gender">
-                        <option value="all">All</option>
-                        <option value="boy">Boy</option>
-                        <option value="girl">Girl</option>
-                        <option value="neutral">Gender Neutral</option>
-                    </select>
-                </div>
-                <div class="input-group">
-                    <label for="origin">Cultural Background</label>
-                    <select id="origin" multiple>
-                        <option value="english">English</option>
-                        <option value="french">French</option>
-                        <option value="spanish">Spanish</option>
-                        <option value="italian">Italian</option>
-                        <option value="greek">Greek</option>
-                        <option value="celtic">Celtic</option>
-                        <option value="nordic">Nordic</option>
-                        <option value="hebrew">Hebrew</option>
-                        <option value="arabic">Arabic</option>
-                        <option value="persian">Persian</option>
-                        <option value="indian">Indian</option>
-                        <option value="chinese">Chinese</option>
-                        <option value="japanese">Japanese</option>
-                        <option value="korean">Korean</option>
-                    </select>
-                </div>
-            </div>
-            <div class="form-section">
-                <h2>Mother's Characteristics</h2>
-                <div class="input-group">
-                    <label>Select Personality Traits</label>
-                    <div class="traits-container" id="motherTraits">
-                        <div class="trait-chip" data-trait="creative">Creative</div>
-                        <div class="trait-chip" data-trait="intelligent">Intelligent</div>
-                        <div class="trait-chip" data-trait="caring">Caring</div>
-                        <div class="trait-chip" data-trait="strong">Strong</div>
-                        <div class="trait-chip" data-trait="artistic">Artistic</div>
-                        <div class="trait-chip" data-trait="adventurous">Adventurous</div>
-                        <div class="trait-chip" data-trait="peaceful">Peaceful</div>
-                        <div class="trait-chip" data-trait="wise">Wise</div>
-                    </div>
-                </div>
-            </div>
-            <div class="form-section">
-                <h2>Father's Characteristics</h2>
-                <div class="input-group">
-                    <label>Select Personality Traits</label>
-                    <div class="traits-container" id="fatherTraits">
-                        <div class="trait-chip" data-trait="protective">Protective</div>
-                        <div class="trait-chip" data-trait="loyal">Loyal</div>
-                        <div class="trait-chip" data-trait="brave">Brave</div>
-                        <div class="trait-chip" data-trait="gentle">Gentle</div>
-                        <div class="trait-chip" data-trait="ambitious">Ambitious</div>
-                        <div class="trait-chip" data-trait="wise">Wise</div>
-                        <div class="trait-chip" data-trait="humorous">Humorous</div>
-                        <div class="trait-chip" data-trait="athletic">Athletic</div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <button class="generate-btn" onclick="generateNames()">Generate Perfect Names</button>
-        <div class="results-section" id="results">
-            <!-- Generated names will appear here -->
-        </div>
-        <div class="favorites-section">
-            <h2>❤️ Favorite Names</h2>
-            <div id="favoritesList"></div>
-        </div>
-    </div>
-    <script>
-        // Extended name database with meanings and trait associations
-        const nameDatabase = {
-            boy: {
-                creative: ['Leonardo', 'Byron', 'Vincent', 'Aiden'],
-                intelligent: ['Solomon', 'Ethan', 'Adrian', 'Theodore'],
-                strong: ['Alexander', 'Thor', 'Viktor', 'Bruno'],
-                protective: ['William', 'Guardian', 'Ward', 'Reign'],
-                brave: ['Valor', 'Leo', 'Wyatt', 'Ethan'],
-                gentle: ['Oliver', 'Liam', 'Noah', 'Benjamin'],
-                wise: ['Sage', 'Solomon', 'Alvis', 'Kenneth']
-            },
-            girl: {
-                creative: ['Luna', 'Aurora', 'Aria', 'Maya'],
-                intelligent: ['Sophia', 'Athena', 'Claire', 'Ada'],
-                caring: ['Grace', 'Hannah', 'Lily', 'Mira'],
-                artistic: ['Melody', 'Violet', 'Iris', 'Aria'],
-                peaceful: ['Serena', 'Dove', 'Paz', 'Shanti'],
-                wise: ['Sophia', 'Minerva', 'Sage', 'Alena']
-            },
-            neutral: {
-                creative: ['Alex', 'River', 'Sky', 'Phoenix'],
-                strong: ['Morgan', 'Kai', 'Atlas', 'Storm'],
-                wise: ['Sage', 'Quinn', 'Blair', 'Eden'],
-                peaceful: ['Harmony', 'Peace', 'Robin', 'Dawn']
             }
-        };
-        // Name meanings database
-        const nameMeanings = {
-            'Alexander': 'Defender of the people',
-            'Sophia': 'Wisdom',
-            'Luna': 'Moon',
-            'Ethan': 'Strong, enduring',
-            'Grace': 'Elegance and divine favor',
-            // Add more meanings as needed
-        };
-        let favorites = new Set();
-        let selectedTraits = {
-            mother: new Set(),
-            father: new Set()
-        };
-        // Setup trait selection
-        document.querySelectorAll('.trait-chip').forEach(chip => {
-            chip.addEventListener('click', () => {
-                const parent = chip.parentElement.id;
-                const trait = chip.dataset.trait;
-                const traitSet = parent === 'motherTraits' ? selectedTraits.mother : selectedTraits.father;
-                chip.classList.toggle('selected');
-                if (traitSet.has(trait)) {
-                    traitSet.delete(trait);
-                } else {
-                    traitSet.add(trait);
-                }
-            });
-        });
-        function generateNames() {
-            const gender = document.getElementById('gender').value;
-            const origins = Array.from(document.getElementById('origin').selectedOptions).map(option => option.value);
-            let names = new Set();
-            const traits = [...selectedTraits.mother, ...selectedTraits.father];
-            // Generate names based on selected traits
-            traits.forEach(trait => {
-                if (gender === 'all' || gender === 'neutral') {
-                    if (nameDatabase.neutral[trait]) {
-                        nameDatabase.neutral[trait].forEach(name => names.add(name));
-                    }
-                }
-                if (gender === 'all' || gender === 'boy') {
-                    if (nameDatabase.boy[trait]) {
-                        nameDatabase.boy[trait].forEach(name => names.add(name));
-                    }
-                }
-                if (gender === 'all' || gender === 'girl') {
-                    if (nameDatabase.girl[trait]) {
-                        nameDatabase.girl[trait].forEach(name => names.add(name));
-                    }
-                }
-            });
-            displayResults(Array.from(names));
         }
-        function displayResults(names) {
-            const resultsDiv = document.getElementById('results');
-            resultsDiv.innerHTML = '<h2>Suggested Names</h2>';
-            if (names.length === 0) {
-                resultsDiv.innerHTML += '<p>No names match your criteria. Try selecting different traits.</p>';
-                return;
             }
-            names.forEach((name, index) => {
-                const nameCard = document.createElement('div');
-                nameCard.className = 'name-card';
-                nameCard.style.animationDelay = `${index * 0.1}s`;
-                const relatedTraits = findRelatedTraits(name);
-                const meaning = nameMeanings[name] || 'A beautiful name';
-                nameCard.innerHTML = `
-                    <div class="name-details">
-                        <h3>${name}</h3>
-                        <div class="name-meaning">${meaning}</div>
-                        <div class="personality-tags">
-                            ${relatedTraits.map(trait =>
-                                `<span class="personality-tag">${trait}</span>`
-                            ).join('')}
-                        </div>
-                    </div>
-                    <button class="favorite-btn" onclick="toggleFavorite('${name}')">
-                        ${favorites.has(name) ? '❤️' : '🤍'}
-                    </button>
-                `;
-                resultsDiv.appendChild(nameCard);
-            });
         }
-        function findRelatedTraits(name) {
-            let traits = new Set();
-            Object.entries(nameDatabase).forEach(([gender, traitGroups]) => {
-                Object.entries(traitGroups).forEach(([trait, names]) => {
-                    if (names.includes(name)) {
-                        traits.add(trait);
-                    }
-                });
-            });
-            return Array.from(traits);
         }
-        function toggleFavorite(name) {
-            if (favorites.has(name)) {
-                favorites.delete(name);
-            } else {
-                favorites.add(name);
             }
-            updateFavorites();
-            generateNames(); // Refresh current results
         }
-        function updateFavorites() {
-            const favoritesList = document.getElementById('favoritesList');
-            favoritesList.innerHTML = '';
-            if (favorites.size === 0) {
-                favoritesList.innerHTML = '<p>No favorite names yet</p>';
-                return;
             }
-            [...favorites].forEach(name => {
-                const nameCard = document.createElement('div');
-                nameCard.className = 'name-card';
-                const relatedTraits = findRelatedTraits(name);
-                const meaning = nameMeanings[name] || 'A beautiful name';
-                nameCard.innerHTML = `
-                    <div class="name-details">
-                        <h3>${name}</h3>
-                        <div class="name-meaning">${meaning}</div>
-                        <div class="personality-tags">
-                            ${relatedTraits.map(trait =>
-                                `<span class="personality-tag">${trait}</span>`
-                            ).join('')}
-                        </div>
-                    </div>
-                    <button class="favorite-btn" onclick="toggleFavorite('${name}')">❤️</button>
-                `;
-                favoritesList.appendChild(nameCard);
-            });
         }
-        // Initialize with empty results
-        generateNames();
     </script>
 </body>
 </html>

 <!DOCTYPE html>
+<html>
 <head>
+    <title>Forest Explorer</title>
     <style>
+        body { margin: 0; background: black; overflow: hidden; }
+        canvas { width: 100vw; height: 100vh; }
+        .ui {
+            position: fixed;
+            color: white;
+            text-shadow: 2px 2px 2px rgba(0,0,0,0.5);
+            pointer-events: none;
+            font-family: Arial, sans-serif;
+        }
+        #stamina {
+            bottom: 20px;
+            left: 20px;
+            width: 200px;
+            height: 5px;
+            background: rgba(0,0,0,0.5);
+            border-radius: 3px;
+        }
+        #stamina-bar {
             width: 100%;
+            height: 100%;
+            background: #4CAF50;
+            border-radius: 3px;
+            transition: width 0.2s;
+        }
+        #crosshair {
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-size: 20px;
+        }
+        #flashlight-status {
+            top: 20px;
+            right: 20px;
+        }
+        .vignette {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: radial-gradient(circle, transparent 50%, rgba(0,0,0,0.4) 100%);
+            pointer-events: none;
         }
+    </style>
+</head>
+<body>
+    <div id="stamina" class="ui"><div id="stamina-bar"></div></div>
+    <div id="crosshair" class="ui">+</div>
+    <div id="flashlight-status" class="ui">Flashlight [F]</div>
+    <div class="vignette"></div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script>
+        const SPAWN_POSITION = new THREE.Vector3(0, 1.7, 30); // Spawn point
+        const CAVE_ENTRANCE = new THREE.Vector3(0, 1.7, -15); // Cave entrance position
+        let camera, scene, renderer, clock;
+        let player = {
+            position: SPAWN_POSITION.clone(),
+            velocity: new THREE.Vector3(),
+            speed: {
+                walk: 3.5,
+                sprint: 7,
+                current: 3.5
+            },
+            stamina: 100,
+            headBob: {
+                value: 0,
+                intensity: 0.07,
+                speed: 8
+            },
+            inCave: false
+        };
+        let controls = {
+            forward: false,
+            backward: false,
+            left: false,
+            right: false,
+            sprint: false
+        };
+        let flashlight;
+        let isFlashlightOn = false;
+        // Initialize game
+        init();
+        animate();
+        async function init() {
+            // Setup basic scene
+            scene = new THREE.Scene();
+            camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
+            clock = new THREE.Clock();
+            // Setup renderer
+            renderer = new THREE.WebGLRenderer({antialias: true});
+            renderer.setSize(window.innerWidth, window.innerHeight);
+            renderer.shadowMap.enabled = true;
+            renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+            document.body.appendChild(renderer.domElement);
+            // Setup scene elements
+            createForest();
+            createCave();
+            setupLighting();
+            setupParticles();
+            setupAudio();
+            // Initialize player
+            camera.position.copy(player.position);
+            document.addEventListener('keydown', onKeyDown);
+            document.addEventListener('keyup', onKeyUp);
+            document.addEventListener('mousemove', onMouseMove);
+            document.addEventListener('click', () => document.body.requestPointerLock());
+        }
+        function createForest() {
+            // Ground
+            const ground = new THREE.Mesh(
+                new THREE.PlaneGeometry(200, 200),
+                new THREE.MeshStandardMaterial({
+                    color: 0x33aa33,
+                    roughness: 0.8
+                })
+            );
+            ground.rotation.x = -Math.PI/2;
+            ground.receiveShadow = true;
+            scene.add(ground);
+            // Trees
+            for(let i = 0; i < 500; i++) {
+                const distance = Math.random() * 80 + 20;
+                const angle = Math.random() * Math.PI * 2;
+                const x = Math.cos(angle) * distance;
+                const z = Math.sin(angle) * distance;
+                if(Math.abs(x) > 10 || z > 0) { // Keep path to cave clear
+                    createTree(x, z);
+                }
+            }
+            // Flowers and grass
+            for(let i = 0; i < 1000; i++) {
+                const x = Math.random() * 180 - 90;
+                const z = Math.random() * 180 - 90;
+                if(Math.abs(x) > 5 || z > 0) {
+                    createVegetation(x, z);
+                }
+            }
         }
+        function createTree(x, z) {
+            const trunk = new THREE.Mesh(
+                new THREE.CylinderGeometry(0.5, 0.7, 5),
+                new THREE.MeshStandardMaterial({color: 0x885533})
+            );
+            const leaves = new THREE.Mesh(
+                new THREE.SphereGeometry(2),
+                new THREE.MeshStandardMaterial({color: 0x227722})
+            );
+            trunk.position.set(x, 2.5, z);
+            leaves.position.set(x, 6, z);
+            trunk.castShadow = true;
+            leaves.castShadow = true;
+            scene.add(trunk);
+            scene.add(leaves);
+        }
+        function createVegetation(x, z) {
+            const color = Math.random() > 0.5 ? 0xff99cc : 0xffff99;
+            const flower = new THREE.Mesh(
+                new THREE.SphereGeometry(0.2),
+                new THREE.MeshStandardMaterial({
+                    color: color,
+                    emissive: color,
+                    emissiveIntensity: 0.2
+                })
+            );
+            flower.position.set(x, 0.2, z);
+            scene.add(flower);
+        }
+        function createCave() {
+            // Main tunnel
+            const points = [];
+            for(let i = 0; i < 10; i++) {
+                points.push(
+                    new THREE.Vector3(
+                        Math.sin(i/2) * 2,
+                        Math.cos(i/3) * 1.5,
+                        -15 - i * 5
+                    )
+                );
+            }
+            const tunnelGeometry = new THREE.TubeGeometry(
+                new THREE.CatmullRomCurve3(points),
+                60,
+                3,
+                8,
+                false
+            );
+            const caveMaterial = new THREE.MeshStandardMaterial({
+                color: 0x333333,
+                roughness: 1,
+                side: THREE.BackSide
+            });
+            const tunnel = new THREE.Mesh(tunnelGeometry, caveMaterial);
+            scene.add(tunnel);
+            // Cave markings
+            const markingGeometry = new THREE.CircleGeometry(0.3, 16);
+            const markingMaterial = new THREE.MeshStandardMaterial({
+                color: 0xff0000,
+                emissive: 0xff0000,
+                emissiveIntensity: 0.5
+            });
+            for(let i = 0; i < 15; i++) {
+                const marking = new THREE.Mesh(markingGeometry, markingMaterial);
+                marking.position.set(
+                    Math.random() * 4 - 2,
+                    Math.random() * 2 + 1,
+                    -20 - Math.random() * 30
+                );
+                marking.rotation.y = Math.random() * Math.PI;
+                scene.add(marking);
+            }
         }
+        function setupLighting() {
+            // Forest lighting
+            const ambientLight = new THREE.AmbientLight(0x666666);
+            scene.add(ambientLight);
+            const sunLight = new THREE.DirectionalLight(0xffffbb, 1);
+            sunLight.position.set(50, 100, 50);
+            sunLight.castShadow = true;
+            scene.add(sunLight);
+            // Flashlight
+            flashlight = new THREE.SpotLight(0xffffff, 1);
+            flashlight.angle = Math.PI/6;
+            flashlight.penumbra = 0.1;
+            flashlight.decay = 2;
+            flashlight.distance = 30;
+            flashlight.visible = false;
+            camera.add(flashlight);
+            scene.add(camera);
+        }
+        function setupParticles() {
+            // Pollen/leaves particle system
+            const particleCount = 1000;
+            const positions = new Float32Array(particleCount * 3);
+            const colors = new Float32Array(particleCount * 3);
+            for(let i = 0; i < particleCount * 3; i += 3) {
+                positions[i] = Math.random() * 200 - 100;
+                positions[i+1] = Math.random() * 20;
+                positions[i+2] = Math.random() * 200 - 100;
+                colors[i] = 1;
+                colors[i+1] = 1;
+                colors[i+2] = 0.8;
+            }
+            const geometry = new THREE.BufferGeometry();
+            geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+            geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
+            const material = new THREE.PointsMaterial({
+                size: 0.1,
+                vertexColors: true,
+                transparent: true,
+                opacity: 0.6
+            });
+            const particles = new THREE.Points(geometry, material);
+            scene.add(particles);
         }
+        function setupAudio() {
+            // Implement audio setup
         }
+        function update(delta) {
+            updatePlayer(delta);
+            updateEnvironment();
         }
+        function updatePlayer(delta) {
+            if(!document.pointerLockElement) return;
+            // Movement direction
+            const direction = new THREE.Vector3();
+            if(controls.forward) direction.z -= 1;
+            if(controls.backward) direction.z += 1;
+            if(controls.left) direction.x -= 1;
+            if(controls.right) direction.x += 1;
+            direction.normalize();
+            // Speed and stamina
+            if(controls.sprint && player.stamina > 0 && direction.length() > 0) {
+                player.speed.current = player.speed.sprint;
+                player.stamina = Math.max(0, player.stamina - delta * 30);
+            } else {
+                player.speed.current = player.speed.walk;
+                player.stamina = Math.min(100, player.stamina + delta * 10);
             }
+            document.getElementById('stamina-bar').style.width =
+                player.stamina + '%';
+            // Move player
+            if(direction.length() > 0) {
+                const moveX = direction.x * player.speed.current * delta;
+                const moveZ = direction.z * player.speed.current * delta;
+                camera.position.x += moveX * Math.cos(camera.rotation.y) +
+                                   moveZ * Math.sin(camera.rotation.y);
+                camera.position.z += moveZ * Math.cos(camera.rotation.y) -
+                                   moveX * Math.sin(camera.rotation.y);
+                // Head bob
+                player.headBob.value += delta * player.headBob.speed;
+                camera.position.y = player.position.y +
+                    Math.sin(player.headBob.value) * player.headBob.intensity;
             }
+            // Update flashlight
+            if(isFlashlightOn) {
+                flashlight.position.copy(camera.position);
+                flashlight.rotation.copy(camera.rotation);
             }
         }
+        function updateEnvironment() {
+            // Check if entering/leaving cave
+            const inCaveNow = camera.position.z < -15;
+            if(inCaveNow !== player.inCave) {
+                player.inCave = inCaveNow;
+                transitionEnvironment();
             }
         }
+        function transitionEnvironment() {
+            if(player.inCave) {
+                scene.fog = new THREE.FogExp2(0x000000, 0.15);
+                scene.background = new THREE.Color(0x000000);
+            } else {
+                scene.fog = null;
+                scene.background = new THREE.Color(0x88ccff);
+            }
+        }
+        function animate() {
+            requestAnimationFrame(animate);
+            const delta = clock.getDelta();
+            update(delta);
+            renderer.render(scene, camera);
         }
+        // Event handlers
+        function onKeyDown(event) {
+            switch(event.code) {
+                case 'KeyW': controls.forward = true; break;
+                case 'KeyS': controls.backward = true; break;
+                case 'KeyA': controls.left = true; break;
+                case 'KeyD': controls.right = true; break;
+                case 'ShiftLeft': controls.sprint = true; break;
+                case 'KeyF': toggleFlashlight(); break;
             }
         }
+        function onKeyUp(event) {
+            switch(event.code) {
+                case 'KeyW': controls.forward = false; break;
+                case 'KeyS': controls.backward = false; break;
+                case 'KeyA': controls.left = false; break;
+                case 'KeyD': controls.right = false; break;
+                case 'ShiftLeft': controls.sprint = false; break;
             }
+        }
+        function onMouseMove(event) {
+            if(document.pointerLockElement) {
+                camera.rotation.y -= event.movementX * 0.002;
+                camera.rotation.x = Math.max(
+                    -Math.PI/2,
+                    Math.min(Math.PI/2,
+                    camera.rotation.x - event.movementY * 0.002)
+                );
+            }
         }
+        function toggleFlashlight() {
+            isFlashlightOn = !isFlashlightOn;
+            flashlight.visible = isFlashlightOn;
+            document.getElementById('flashlight-status').textContent =
+                `Flashlight [F] ${isFlashlightOn ? 'ON' : 'OFF'}`;
+        }
     </script>
 </body>
 </html>