Update index.html

index.html

@@ -5,32 +5,16 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>3D City Scene</title>
     <style>
-        body {
-            margin: 0;
-            overflow: hidden;
-            font-family: Arial, sans-serif;
-        }
-        canvas {
-            display: block;
-        }
+        body { margin: 0; overflow: hidden; font-family: Arial, sans-serif; }
+        canvas { display: block; }
         .ui-container {
-            position: absolute;
-            top: 10px;
-            left: 10px;
-            color: white;
-            background-color: rgba(0, 0, 0, 0.5);
-            padding: 10px;
-            border-radius: 5px;
+            position: absolute; top: 10px; left: 10px; color: white;
+            background-color: rgba(0, 0, 0, 0.5); padding: 10px; border-radius: 5px;
             user-select: none;
         }
         .controls {
-            position: absolute;
-            bottom: 10px;
-            left: 10px;
-            color: white;
-            background-color: rgba(0, 0, 0, 0.5);
-            padding: 10px;
-            border-radius: 5px;
+            position: absolute; bottom: 10px; left: 10px; color: white;
+            background-color: rgba(0, 0, 0, 0.5); padding: 10px; border-radius: 5px;
         }
     </style>
 </head>
@@ -41,375 +25,175 @@
         <div id="time">Time: 60</div>
     </div>
     <div class="controls">
-        <p>Controls: W to move backward, S to move forward, A/D to move left/right, Mouse to look, Space to jump</p>
+        <p>Controls: W/A/S/D to move, Mouse to look, Space to jump, Shift for speed boost</p>
         <p>Collect the floating cubes to score points!</p>
     </div>
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
-    <script>
-        // Polyfill for tqdm since it's not defined
-        const tqdm = {
-            tqdm: function(desc, total) {
-                return {
-                    update: function() {},
-                    // Other methods as needed
-                };
-            }
-        };
-    </script>
     <script>
         // Game variables
-        let score = 0;
-        let timeRemaining = 60;
-        let gameActive = true;
+        let score = 0, timeRemaining = 60, gameActive = true;
 
-        // Set up scene
+        // Scene setup
         const scene = new THREE.Scene();
-        scene.background = new THREE.Color(0x87CEEB); // Sky blue background
-
-        // Set up camera
         const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
         camera.position.set(0, 5, 15);
-
-        // Set up renderer
         const renderer = new THREE.WebGLRenderer({ antialias: true });
         renderer.setSize(window.innerWidth, window.innerHeight);
         renderer.shadowMap.enabled = true;
         document.body.appendChild(renderer.domElement);
 
-        // Add lights
-        const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
+        // Lighting
+        const ambientLight = new THREE.AmbientLight(0xffffff, 0.2);
         scene.add(ambientLight);
 
-        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
-        directionalLight.position.set(50, 50, 50);
-        directionalLight.castShadow = true;
-        directionalLight.shadow.mapSize.width = 2048;
-        directionalLight.shadow.mapSize.height = 2048;
-        directionalLight.shadow.camera.near = 1;
-        directionalLight.shadow.camera.far = 500;
-        directionalLight.shadow.camera.left = -100;
-        directionalLight.shadow.camera.right = 100;
-        directionalLight.shadow.camera.top = 100;
-        directionalLight.shadow.camera.bottom = -100;
-        scene.add(directionalLight);
+        // Sun and Moon
+        const sunLight = new THREE.DirectionalLight(0xffddaa, 0.8);
+        sunLight.castShadow = true;
+        sunLight.shadow.mapSize.width = 2048;
+        sunLight.shadow.mapSize.height = 2048;
+        sunLight.shadow.camera.near = 1;
+        sunLight.shadow.camera.far = 500;
+        sunLight.shadow.camera.left = -100;
+        sunLight.shadow.camera.right = 100;
+        sunLight.shadow.camera.top = 100;
+        sunLight.shadow.camera.bottom = -100;
+        scene.add(sunLight);
 
-        // Create ground
+        const moonLight = new THREE.DirectionalLight(0xaabbff, 0.4);
+        moonLight.castShadow = true;
+        moonLight.shadow.mapSize.width = 2048;
+        moonLight.shadow.mapSize.height = 2048;
+        scene.add(moonLight);
+
+        // Ground with bump mapping
+        const textureLoader = new THREE.TextureLoader();
         const groundGeometry = new THREE.PlaneGeometry(200, 200);
         const groundMaterial = new THREE.MeshStandardMaterial({ 
-            color: 0x1a5e1a, // Green
+            color: 0x1a5e1a,
             roughness: 0.8,
-            metalness: 0.2
+            metalness: 0.2,
+            bumpMap: textureLoader.load('https://threejs.org/examples/textures/terrain/grasslight-big-nm.jpg'),
+            bumpScale: 0.1
         });
         const ground = new THREE.Mesh(groundGeometry, groundMaterial);
         ground.rotation.x = -Math.PI / 2;
         ground.receiveShadow = true;
         scene.add(ground);
 
-        // Buildings array
-        const buildings = [];
-        const collectibles = [];
-
-        // Building color palette
-        const buildingColors = [
-            0x888888, 0x666666, 0x999999, 0xaaaaaa, 0x555555,
-            0x334455, 0x445566, 0x223344, 0x556677, 0x667788,
-            0x993333, 0x884422, 0x553333, 0x772222, 0x664433
-        ];
+        // Buildings and collectibles arrays
+        const buildings = [], collectibles = [];
+        const buildingColors = [0x888888, 0x666666, 0x999999, 0xaaaaaa, 0x555555, 0x334455, 0x445566, 0x223344, 0x556677, 0x667788, 0x993333, 0x884422, 0x553333, 0x772222, 0x664433];
         
-        // L-system grammar rules for buildings
+        // Building rules (unchanged)
         const buildingRules = [
-            // Colonial style - symmetrical with central features
-            {
-                name: "Colonial",
-                axiom: "A",
-                rules: {
-                    "A": "B[+F][-F]",
-                    "B": "F[-C][+C]F",
-                    "C": "D[-E][+E]",
-                    "D": "F[+F][-F]F",
-                    "E": "F[-F][+F]"
-                },
-                iterations: 2,
-                baseHeight: 10,
-                baseWidth: 6,
-                baseDepth: 6,
-                angle: Math.PI/6,
-                probability: 0.2
-            },
-            // Victorian style - complex with many decorative elements
-            {
-                name: "Victorian",
-                axiom: "A",
-                rules: {
-                    "A": "B[+C][-C][/D][\\D]",
-                    "B": "F[+F][-F][/F][\\F]",
-                    "C": "F[++F][--F]",
-                    "D": "F[+\F][-/F]"
-                },
-                iterations: 3,
-                baseHeight: 15,
-                baseWidth: 5,
-                baseDepth: 5,
-                angle: Math.PI/5,
-                probability: 0.15
-            },
-            // Modern style - clean lines, boxy but with variations
-            {
-                name: "Modern",
-                axiom: "A",
-                rules: {
-                    "A": "B[+B][-B]",
-                    "B": "F[/C][\\C]",
-                    "C": "F"
-                },
-                iterations: 2,
-                baseHeight: 20,
-                baseWidth: 8,
-                baseDepth: 8,
-                angle: Math.PI/2,
-                probability: 0.25
-            },
-            // Skyscraper - tall vertical structures
-            {
-                name: "Skyscraper",
-                axiom: "A",
-                rules: {
-                    "A": "FB[+C][-C]",
-                    "B": "FB",
-                    "C": "F[+F][-F]"
-                },
-                iterations: 4,
-                baseHeight: 30,
-                baseWidth: 10,
-                baseDepth: 10,
-                angle: Math.PI/8,
-                probability: 0.15
-            },
-            // Simple box building - for variety and filling space
-            {
-                name: "Simple",
-                axiom: "F",
-                rules: {
-                    "F": "F[+F][-F]"
-                },
-                iterations: 1,
-                baseHeight: 8,
-                baseWidth: 6,
-                baseDepth: 6,
-                angle: Math.PI/4,
-                probability: 0.25
-            }
+            {name: "Colonial", axiom: "A", rules: {"A": "B[+F][-F]", "B": "F[-C][+C]F", "C": "D[-E][+E]", "D": "F[+F][-F]F", "E": "F[-F][+F]"}, iterations: 2, baseHeight: 10, baseWidth: 6, baseDepth: 6, angle: Math.PI/6, probability: 0.2},
+            {name: "Victorian", axiom: "A", rules: {"A": "B[+C][-C][/D][\\D]", "B": "F[+F][-F][/F][\\F]", "C": "F[++F][--F]", "D": "F[+\F][-/F]"}, iterations: 3, baseHeight: 15, baseWidth: 5, baseDepth: 5, angle: Math.PI/5, probability: 0.15},
+            {name: "Modern", axiom: "A", rules: {"A": "B[+B][-B]", "B": "F[/C][\\C]", "C": "F"}, iterations: 2, baseHeight: 20, baseWidth: 8, baseDepth: 8, angle: Math.PI/2, probability: 0.25},
+            {name: "Skyscraper", axiom: "A", rules: {"A": "FB[+C][-C]", "B": "FB", "C": "F[+F][-F]"}, iterations: 4, baseHeight: 30, baseWidth: 10, baseDepth: 10, angle: Math.PI/8, probability: 0.15},
+            {name: "Simple", axiom: "F", rules: {"F": "F[+F][-F]"}, iterations: 1, baseHeight: 8, baseWidth: 6, baseDepth: 6, angle: Math.PI/4, probability: 0.25}
         ];
-        
-        // L-system interpreter
+
+        // L-system interpreter (modified for better window positioning)
         function interpretLSystem(rule, position, rotation) {
-            // Start with the axiom
             let currentString = rule.axiom;
-            
-            // Apply rules for the specified number of iterations
             for (let i = 0; i < rule.iterations; i++) {
                 let newString = "";
-                
-                // Apply rules to each character
                 for (let j = 0; j < currentString.length; j++) {
-                    const char = currentString[j];
-                    newString += rule.rules[char] || char;
+                    newString += rule.rules[currentString[j]] || currentString[j];
                 }
-                
                 currentString = newString;
             }
             
-            // Now interpret the L-system string to create building parts
             let buildingGroup = new THREE.Group();
             buildingGroup.position.copy(position);
-            
-            // Stack to keep track of transformations
             const stack = [];
             let currentPosition = new THREE.Vector3(0, 0, 0);
             let currentRotation = rotation || new THREE.Euler();
             let scale = new THREE.Vector3(1, 1, 1);
-            
-            // Select a material for this building
             const color = buildingColors[Math.floor(Math.random() * buildingColors.length)];
-            const material = new THREE.MeshStandardMaterial({
-                color: color,
-                roughness: 0.7,
-                metalness: 0.2
-            });
+            const material = new THREE.MeshStandardMaterial({color: color, roughness: 0.7, metalness: 0.2});
             
-            // Interpret each character in the final string
             for (let i = 0; i < currentString.length; i++) {
                 const char = currentString[i];
-                
                 switch (char) {
-                    case 'F': // Forward and create a building part
-                        // Randomize dimensions with constraints based on rule
+                    case 'F':
                         const width = rule.baseWidth * (0.5 + Math.random() * 0.5) * scale.x;
                         const height = rule.baseHeight * (0.5 + Math.random() * 0.5) * scale.y;
                         const depth = rule.baseDepth * (0.5 + Math.random() * 0.5) * scale.z;
-                        
-                        // Create geometry
                         const geometry = new THREE.BoxGeometry(width, height, depth);
                         const buildingPart = new THREE.Mesh(geometry, material);
-                        
-                        // Position and add to group
                         buildingPart.position.copy(currentPosition);
+                        buildingPart.position.y += height / 2; // Center properly
                         buildingPart.rotation.copy(currentRotation);
                         buildingPart.castShadow = true;
                         buildingPart.receiveShadow = true;
-                        
-                        // Add windows if part is large enough
                         if (height > 5 && width > 2 && depth > 2) {
                             addWindowsToBuilding(buildingPart, width, height, depth);
                         }
-                        
                         buildingGroup.add(buildingPart);
-                        
-                        // Move forward in the direction of current rotation
-                        const direction = new THREE.Vector3(0, height/2, 0);
+                        const direction = new THREE.Vector3(0, height, 0);
                         direction.applyEuler(currentRotation);
                         currentPosition.add(direction);
                         break;
-                        
-                    case '+': // Rotate right around Y axis
-                        currentRotation.y += rule.angle;
-                        break;
-                        
-                    case '-': // Rotate left around Y axis
-                        currentRotation.y -= rule.angle;
-                        break;
-                        
-                    case '/': // Rotate around X axis
-                        currentRotation.x += rule.angle;
-                        break;
-                        
-                    case '\\': // Rotate around X axis (opposite)
-                        currentRotation.x -= rule.angle;
-                        break;
-                        
-                    case '^': // Rotate around Z axis
-                        currentRotation.z += rule.angle;
-                        break;
-                        
-                    case '&': // Rotate around Z axis (opposite)
-                        currentRotation.z -= rule.angle;
-                        break;
-                        
-                    case '[': // Push state
-                        stack.push({
-                            position: currentPosition.clone(),
-                            rotation: currentRotation.clone(),
-                            scale: scale.clone()
-                        });
-                        break;
-                        
-                    case ']': // Pop state
-                        if (stack.length > 0) {
-                            const state = stack.pop();
-                            currentPosition = state.position;
-                            currentRotation = state.rotation;
-                            scale = state.scale;
-                        }
-                        break;
-                        
-                    case '>': // Scale up
-                        scale.multiplyScalar(1.2);
-                        break;
-                        
-                    case '<': // Scale down
-                        scale.multiplyScalar(0.8);
-                        break;
+                    case '+': currentRotation.y += rule.angle; break;
+                    case '-': currentRotation.y -= rule.angle; break;
+                    case '/': currentRotation.x += rule.angle; break;
+                    case '\\': currentRotation.x -= rule.angle; break;
+                    case '^': currentRotation.z += rule.angle; break;
+                    case '&': currentRotation.z -= rule.angle; break;
+                    case '[': stack.push({position: currentPosition.clone(), rotation: currentRotation.clone(), scale: scale.clone()}); break;
+                    case ']': if (stack.length > 0) { const state = stack.pop(); currentPosition = state.position; currentRotation = state.rotation; scale = state.scale; } break;
+                    case '>': scale.multiplyScalar(1.2); break;
+                    case '<': scale.multiplyScalar(0.8); break;
                 }
             }
-            
             return buildingGroup;
         }
 
-        // Create a city
+        // Create city (unchanged)
         function createCity() {
-            // Create grid of buildings
-            const citySize = 5; // Size of the city grid
-            const spacing = 15; // Spacing between building centers
-            
+            const citySize = 5, spacing = 15;
             for (let x = -citySize; x <= citySize; x++) {
                 for (let z = -citySize; z <= citySize; z++) {
-                    // Skip sometimes to create spaces
                     if (Math.random() < 0.2) continue;
-                    
-                    // Position with slight randomization
-                    const position = new THREE.Vector3(
-                        x * spacing + (Math.random() * 2 - 1), // Add slight randomness
-                        0, // Will be adjusted by the L-system
-                        z * spacing + (Math.random() * 2 - 1)
-                    );
-                    
-                    // Select a building style based on probability
-                    let selectedRule = null;
-                    let random = Math.random();
-                    let cumulativeProbability = 0;
-                    
+                    const position = new THREE.Vector3(x * spacing + (Math.random() * 2 - 1), 0, z * spacing + (Math.random() * 2 - 1));
+                    let selectedRule, random = Math.random(), cumulativeProbability = 0;
                     for (const rule of buildingRules) {
                         cumulativeProbability += rule.probability;
-                        if (random <= cumulativeProbability) {
-                            selectedRule = rule;
-                            break;
-                        }
-                    }
-                    
-                    if (!selectedRule) {
-                        selectedRule = buildingRules[0]; // Default to first rule if somehow none selected
+                        if (random <= cumulativeProbability) { selectedRule = rule; break; }
                     }
-                    
-                    // Create building using L-system
+                    if (!selectedRule) selectedRule = buildingRules[0];
                     const building = interpretLSystem(selectedRule, position, new THREE.Euler());
                     scene.add(building);
                     buildings.push(building);
                 }
             }
-
-            // Create streets
-            const roadWidth = 8;
-            const roadColor = 0x333333;
-            
-            // X-axis roads
+            // Roads (unchanged)
+            const roadWidth = 8, roadColor = 0x333333;
             for (let x = -citySize; x <= citySize; x++) {
                 const roadGeometry = new THREE.PlaneGeometry(roadWidth, citySize * 2 * spacing + roadWidth);
-                const roadMaterial = new THREE.MeshStandardMaterial({ 
-                    color: roadColor,
-                    roughness: 0.9,
-                    metalness: 0.1
-                });
+                const roadMaterial = new THREE.MeshStandardMaterial({color: roadColor, roughness: 0.9, metalness: 0.1});
                 const road = new THREE.Mesh(roadGeometry, roadMaterial);
                 road.rotation.x = -Math.PI / 2;
-                road.position.set(x * spacing, 0.01, 0); // Slightly above ground to prevent z-fighting
+                road.position.set(x * spacing, 0.01, 0);
                 scene.add(road);
-                
-                // Add road markings
                 const markingGeometry = new THREE.PlaneGeometry(0.5, citySize * 2 * spacing + roadWidth);
-                const markingMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff });
+                const markingMaterial = new THREE.MeshStandardMaterial({color: 0xffffff});
                 const marking = new THREE.Mesh(markingGeometry, markingMaterial);
                 marking.rotation.x = -Math.PI / 2;
                 marking.position.set(x * spacing, 0.02, 0);
                 scene.add(marking);
             }
-            
-            // Z-axis roads
             for (let z = -citySize; z <= citySize; z++) {
                 const roadGeometry = new THREE.PlaneGeometry(citySize * 2 * spacing + roadWidth, roadWidth);
-                const roadMaterial = new THREE.MeshStandardMaterial({ 
-                    color: roadColor,
-                    roughness: 0.9,
-                    metalness: 0.1
-                });
+                const roadMaterial = new THREE.MeshStandardMaterial({color: roadColor, roughness: 0.9, metalness: 0.1});
                 const road = new THREE.Mesh(roadGeometry, roadMaterial);
                 road.rotation.x = -Math.PI / 2;
                 road.position.set(0, 0.01, z * spacing);
                 scene.add(road);
-                
-                // Add road markings
                 const markingGeometry = new THREE.PlaneGeometry(citySize * 2 * spacing + roadWidth, 0.5);
-                const markingMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff });
+                const markingMaterial = new THREE.MeshStandardMaterial({color: 0xffffff});
                 const marking = new THREE.Mesh(markingGeometry, markingMaterial);
                 marking.rotation.x = -Math.PI / 2;
                 marking.position.set(0, 0.02, z * spacing);
@@ -417,248 +201,110 @@
             }
         }
 
-        // Add windows to a building
+        // Add windows to building (fixed positioning)
         function addWindowsToBuilding(building, width, height, depth) {
-            const windowSize = 0.5;
-            const windowSpacing = 1.5;
+            const windowSize = 0.5, windowSpacing = 1.5;
             const windowGeometry = new THREE.PlaneGeometry(windowSize, windowSize);
-            const windowMaterial = new THREE.MeshStandardMaterial({ 
-                color: 0xffffcc,
-                emissive: 0xffffcc,
-                emissiveIntensity: 0.5,
-                transparent: true,
-                opacity: 0.8
+            const windowMaterial = new THREE.MeshStandardMaterial({
+                color: 0xffffcc, emissive: 0xffffcc, emissiveIntensity: 0.5, transparent: true, opacity: 0.8
             });
-            
-            // Calculate how many levels of windows to add based on building height
             const numLevels = Math.floor((height - 2) / windowSpacing);
             
-            // Front and back windows
-            const frontZ = depth / 2 + 0.01;
-            const backZ = -depth / 2 - 0.01;
-            
+            // Front and back
             for (let level = 0; level < numLevels; level++) {
-                // Calculate y position for this level, starting from near the bottom
-                const y = 1 + level * windowSpacing;
-                
-                for (let x = -width / 2 + windowSpacing; x < width / 2 - windowSpacing / 2; x += windowSpacing) {
-                    // Only add some windows randomly
+                const y = -height/2 + 1 + level * windowSpacing;
+                for (let x = -width/2 + windowSpacing; x < width/2 - windowSpacing/2; x += windowSpacing) {
                     if (Math.random() < 0.3) continue;
-                    
-                    // Front window
                     const frontWindow = new THREE.Mesh(windowGeometry, windowMaterial);
-                    frontWindow.position.set(x, y, frontZ);
-                    frontWindow.rotation.y = Math.PI;
+                    frontWindow.position.set(x, y, depth/2 + 0.01);
                     building.add(frontWindow);
-                    
-                    // Back window
                     const backWindow = new THREE.Mesh(windowGeometry, windowMaterial);
-                    backWindow.position.set(x, y, backZ);
+                    backWindow.position.set(x, y, -depth/2 - 0.01);
+                    backWindow.rotation.y = Math.PI;
                     building.add(backWindow);
                 }
             }
             
-            // Side windows
-            const rightX = width / 2 + 0.01;
-            const leftX = -width / 2 - 0.01;
-            
+            // Sides
             for (let level = 0; level < numLevels; level++) {
-                // Calculate y position for this level, starting from near the bottom
-                const y = 1 + level * windowSpacing;
-                
-                for (let z = -depth / 2 + windowSpacing; z < depth / 2 - windowSpacing / 2; z += windowSpacing) {
-                    // Only add some windows randomly
+                const y = -height/2 + 1 + level * windowSpacing;
+                for (let z = -depth/2 + windowSpacing; z < depth/2 - windowSpacing/2; z += windowSpacing) {
                     if (Math.random() < 0.3) continue;
-                    
-                    // Right window
                     const rightWindow = new THREE.Mesh(windowGeometry, windowMaterial);
-                    rightWindow.position.set(rightX, y, z);
-                    rightWindow.rotation.y = Math.PI / 2;
+                    rightWindow.position.set(width/2 + 0.01, y, z);
+                    rightWindow.rotation.y = -Math.PI/2;
                     building.add(rightWindow);
-                    
-                    // Left window
                     const leftWindow = new THREE.Mesh(windowGeometry, windowMaterial);
-                    leftWindow.position.set(leftX, y, z);
-                    leftWindow.rotation.y = -Math.PI / 2;
+                    leftWindow.position.set(-width/2 - 0.01, y, z);
+                    leftWindow.rotation.y = Math.PI/2;
                     building.add(leftWindow);
                 }
             }
         }
 
-        // Create collectible items
+        // Collectibles, skybox, player setup (unchanged)
         function createCollectibles() {
-            const citySize = 5;
-            const spacing = 15;
-            
+            const citySize = 5, spacing = 15;
             for (let i = 0; i < 20; i++) {
+                const collectible = new THREE.Mesh(
+                    new THREE.BoxGeometry(1, 1, 1),
+                    new THREE.MeshStandardMaterial({color: 0xffff00, emissive: 0xffff00, emissiveIntensity: 0.5, transparent: true, opacity: 0.8})
+                );
                 const x = (Math.random() * 2 - 1) * citySize * spacing;
                 const z = (Math.random() * 2 - 1) * citySize * spacing;
                 const y = 1 + Math.random() * 20;
-                
-                const collectibleGeometry = new THREE.BoxGeometry(1, 1, 1);
-                const collectibleMaterial = new THREE.MeshStandardMaterial({
-                    color: 0xffff00,
-                    emissive: 0xffff00,
-                    emissiveIntensity: 0.5,
-                    transparent: true,
-                    opacity: 0.8
-                });
-                
-                const collectible = new THREE.Mesh(collectibleGeometry, collectibleMaterial);
                 collectible.position.set(x, y, z);
-                collectible.userData.id = i;
-                collectible.userData.rotationSpeed = 0.01 + Math.random() * 0.02;
-                collectible.userData.floatSpeed = 0.5 + Math.random() * 0.5;
-                collectible.userData.floatRange = 0.5 + Math.random() * 0.5;
-                collectible.userData.initialY = y;
-                
+                collectible.userData = {
+                    id: i, rotationSpeed: 0.01 + Math.random() * 0.02,
+                    floatSpeed: 0.5 + Math.random() * 0.5, floatRange: 0.5 + Math.random() * 0.5,
+                    initialY: y
+                };
                 scene.add(collectible);
                 collectibles.push(collectible);
             }
         }
 
-        // Create skybox with clouds
         function createSkybox() {
-            const skyGeometry = new THREE.SphereGeometry(400, 32, 32);
-            const skyMaterial = new THREE.MeshBasicMaterial({
-                color: 0x87CEEB,
-                side: THREE.BackSide
-            });
-            const sky = new THREE.Mesh(skyGeometry, skyMaterial);
+            const sky = new THREE.Mesh(
+                new THREE.SphereGeometry(400, 32, 32),
+                new THREE.MeshBasicMaterial({color: 0x87CEEB, side: THREE.BackSide})
+            );
             scene.add(sky);
-            
-            // Add clouds
             for (let i = 0; i < 50; i++) {
-                const radius = 350;
-                const phi = Math.random() * Math.PI;
-                const theta = Math.random() * Math.PI * 2;
-                
-                const x = radius * Math.sin(phi) * Math.cos(theta);
-                const y = radius * Math.cos(phi) + 50; // Keep clouds higher in the sky
-                const z = radius * Math.sin(phi) * Math.sin(theta);
-                
-                const cloudSize = 10 + Math.random() * 20;
-                const cloudGeometry = new THREE.SphereGeometry(cloudSize, 8, 8);
-                const cloudMaterial = new THREE.MeshStandardMaterial({
-                    color: 0xffffff,
-                    roughness: 1,
-                    metalness: 0,
-                    transparent: true,
-                    opacity: 0.8
-                });
-                
-                const cloud = new THREE.Mesh(cloudGeometry, cloudMaterial);
-                cloud.position.set(x, y, z);
+                const radius = 350, phi = Math.random() * Math.PI, theta = Math.random() * Math.PI * 2;
+                const cloud = new THREE.Mesh(
+                    new THREE.SphereGeometry(10 + Math.random() * 20, 8, 8),
+                    new THREE.MeshStandardMaterial({color: 0xffffff, roughness: 1, metalness: 0, transparent: true, opacity: 0.8})
+                );
+                cloud.position.set(
+                    radius * Math.sin(phi) * Math.cos(theta),
+                    radius * Math.cos(phi) + 50,
+                    radius * Math.sin(phi) * Math.sin(theta)
+                );
                 cloud.userData.rotationSpeed = 0.0001 + Math.random() * 0.0002;
-                
                 scene.add(cloud);
             }
         }
 
-        // Player object
-        const playerHeight = 2;
-        const playerRadius = 0.5;
-        // Use cylinder instead of capsule for compatibility with r128
-        const playerGeometry = new THREE.CylinderGeometry(playerRadius, playerRadius, playerHeight, 8);
-        const playerMaterial = new THREE.MeshStandardMaterial({ color: 0x0000ff });
-        const player = new THREE.Mesh(playerGeometry, playerMaterial);
-        player.position.set(0, playerHeight / 2, 0);
+        const player = new THREE.Mesh(
+            new THREE.CylinderGeometry(0.5, 0.5, 2, 8),
+            new THREE.MeshStandardMaterial({color: 0x0000ff})
+        );
+        player.position.set(0, 1, 0);
         player.castShadow = true;
         scene.add(player);
 
-        // Player physics
+        // Player physics and controls
         const playerVelocity = new THREE.Vector3();
         const playerDirection = new THREE.Vector3();
         let isJumping = false;
-        const GRAVITY = 0.2;
-        const JUMP_FORCE = 0.7;
-        const MOVE_SPEED = 0.2;
-
-        // Player collision detection
-        function checkPlayerCollisions() {
-            // Collectible collisions
-            for (let i = collectibles.length - 1; i >= 0; i--) {
-                const collectible = collectibles[i];
-                const distance = player.position.distanceTo(collectible.position);
-                
-                if (distance < playerRadius + 1) {
-                    scene.remove(collectible);
-                    collectibles.splice(i, 1);
-                    score += 10;
-                    document.getElementById('score').textContent = `Score: ${score}`;
-                }
-            }
-            
-            // Building collisions - updated for composite buildings
-            for (const building of buildings) {
-                // For each building group, we need to check collision with each child
-                building.traverse((child) => {
-                    if (child.isMesh) {
-                        const buildingBox = new THREE.Box3().setFromObject(child);
-                        const playerPos = player.position.clone();
-                        
-                        // Check if player is inside building bounds but add some margin for the radius
-                        if (playerPos.x + playerRadius > buildingBox.min.x && 
-                            playerPos.x - playerRadius < buildingBox.max.x &&
-                            playerPos.z + playerRadius > buildingBox.min.z && 
-                            playerPos.z - playerRadius < buildingBox.max.z) {
-                            
-                            // Find the closest edge to push the player away from
-                            const edgeDistances = [
-                                {edge: 'left', dist: Math.abs(playerPos.x - buildingBox.min.x)},
-                                {edge: 'right', dist: Math.abs(playerPos.x - buildingBox.max.x)},
-                                {edge: 'front', dist: Math.abs(playerPos.z - buildingBox.min.z)},
-                                {edge: 'back', dist: Math.abs(playerPos.z - buildingBox.max.z)}
-                            ];
-                            
-                            edgeDistances.sort((a, b) => a.dist - b.dist);
-                            const closestEdge = edgeDistances[0].edge;
-                            
-                            // Push player away from the closest edge
-                            switch (closestEdge) {
-                                case 'left':
-                                    player.position.x = buildingBox.min.x - playerRadius;
-                                    break;
-                                case 'right':
-                                    player.position.x = buildingBox.max.x + playerRadius;
-                                    break;
-                                case 'front':
-                                    player.position.z = buildingBox.min.z - playerRadius;
-                                    break;
-                                case 'back':
-                                    player.position.z = buildingBox.max.z + playerRadius;
-                                    break;
-                            }
-                        }
-                    }
-                });
-            }
-            
-            // Floor collision and jumping physics
-            if (player.position.y <= playerHeight / 2) {
-                player.position.y = playerHeight / 2;
-                playerVelocity.y = 0;
-                isJumping = false;
-            }
-        }
-
-        // Controls
-        const keys = {
-            w: false,
-            a: false,
-            s: false,
-            d: false,
-            space: false
-        };
+        const GRAVITY = 0.2, JUMP_FORCE = 0.7, BASE_SPEED = 0.2;
+        let moveSpeed = BASE_SPEED;
+        let speedBoostActive = false, speedBoostCooldown = false;
+        let speedBoostTimer = 0, cooldownTimer = 0;
 
-        // Mouse controls for looking around
-        const mousePosition = {
-            x: 0,
-            y: 0
-        };
-
-        let cameraRotation = 0;
-        let cameraPitch = 0;
+        const keys = {w: false, a: false, s: false, d: false, space: false, shift: false};
+        let cameraRotation = 0, cameraPitch = 0;
 
         document.addEventListener('keydown', (event) => {
             switch (event.key.toLowerCase()) {
@@ -667,6 +313,7 @@
                 case 's': keys.s = true; break;
                 case 'd': keys.d = true; break;
                 case ' ': keys.space = true; break;
+                case 'shift': keys.shift = true; break;
             }
         });
 
@@ -677,72 +324,157 @@
                 case 's': keys.s = false; break;
                 case 'd': keys.d = false; break;
                 case ' ': keys.space = false; break;
+                case 'shift': keys.shift = false; break;
             }
         });
 
         document.addEventListener('mousemove', (event) => {
-            // Only capture mouse if pointer is locked
             if (document.pointerLockElement === renderer.domElement) {
                 cameraRotation -= event.movementX * 0.002;
                 cameraPitch -= event.movementY * 0.002;
-                
-                // Limit pitch to prevent camera flipping
                 cameraPitch = Math.max(-Math.PI / 2 + 0.1, Math.min(Math.PI / 2 - 0.1, cameraPitch));
             }
         });
 
-        // Lock pointer when clicking on the game
         renderer.domElement.addEventListener('click', () => {
-            if (!document.pointerLockElement) {
-                renderer.domElement.requestPointerLock();
-            }
+            if (!document.pointerLockElement) renderer.domElement.requestPointerLock();
         });
 
-        // Update player position based on input
-        function updatePlayer() {
-            // Apply gravity
+        function updatePlayer(delta) {
+            // Speed boost handling
+            if (keys.shift && !speedBoostActive && !speedBoostCooldown) {
+                speedBoostActive = true;
+                speedBoostTimer = 10;
+                moveSpeed = BASE_SPEED * 2;
+            }
+            if (speedBoostActive) {
+                speedBoostTimer -= delta;
+                if (speedBoostTimer <= 0) {
+                    speedBoostActive = false;
+                    speedBoostCooldown = true;
+                    cooldownTimer = 10;
+                    moveSpeed = BASE_SPEED;
+                }
+            }
+            if (speedBoostCooldown) {
+                cooldownTimer -= delta;
+                if (cooldownTimer <= 0) speedBoostCooldown = false;
+            }
+
             playerVelocity.y -= GRAVITY;
-            
-            // Handle jumping
             if (keys.space && !isJumping) {
                 playerVelocity.y = JUMP_FORCE;
                 isJumping = true;
             }
-            
-            // Get movement direction based on camera rotation
-            // Switching W and S keys (W now moves backward, S moves forward)
             playerDirection.z = Number(keys.s) - Number(keys.w);
             playerDirection.x = Number(keys.d) - Number(keys.a);
             playerDirection.normalize();
-            
-            // Rotate direction based on camera rotation
             playerDirection.applyAxisAngle(new THREE.Vector3(0, 1, 0), cameraRotation);
-            
-            // Apply movement
-            player.position.x += playerDirection.x * MOVE_SPEED;
-            player.position.z += playerDirection.z * MOVE_SPEED;
+            player.position.x += playerDirection.x * moveSpeed;
+            player.position.z += playerDirection.z * moveSpeed;
             player.position.y += playerVelocity.y;
-            
-            // Update camera position to follow player
-            camera.position.x = player.position.x;
-            camera.position.z = player.position.z;
-            camera.position.y = player.position.y + 1.5; // Eye level
-            
-            // Update camera rotation
-            camera.rotation.order = 'YXZ'; // Important for proper rotation
+            camera.position.set(player.position.x, player.position.y + 1.5, player.position.z);
+            camera.rotation.order = 'YXZ';
             camera.rotation.y = cameraRotation;
             camera.rotation.x = cameraPitch;
-            
-            // Collision detection
             checkPlayerCollisions();
         }
 
-        // Timer function
+        function checkPlayerCollisions() {
+            for (let i = collectibles.length - 1; i >= 0; i--) {
+                const collectible = collectibles[i];
+                if (player.position.distanceTo(collectible.position) < 1) {
+                    scene.remove(collectible);
+                    collectibles.splice(i, 1);
+                    score += 10;
+                    document.getElementById('score').textContent = `Score: ${score}`;
+                }
+            }
+            for (const building of buildings) {
+                building.traverse((child) => {
+                    if (child.isMesh) {
+                        const buildingBox = new THREE.Box3().setFromObject(child);
+                        const playerPos = player.position.clone();
+                        if (playerPos.x + 0.5 > buildingBox.min.x && playerPos.x - 0.5 < buildingBox.max.x &&
+                            playerPos.z + 0.5 > buildingBox.min.z && playerPos.z - 0.5 < buildingBox.max.z) {
+                            const edgeDistances = [
+                                {edge: 'left', dist: Math.abs(playerPos.x - buildingBox.min.x)},
+                                {edge: 'right', dist: Math.abs(playerPos.x - buildingBox.max.x)},
+                                {edge: 'front', dist: Math.abs(playerPos.z - buildingBox.min.z)},
+                                {edge: 'back', dist: Math.abs(playerPos.z - buildingBox.max.z)}
+                            ].sort((a, b) => a.dist - b.dist);
+                            switch (edgeDistances[0].edge) {
+                                case 'left': player.position.x = buildingBox.min.x - 0.5; break;
+                                case 'right': player.position.x = buildingBox.max.x + 0.5; break;
+                                case 'front': player.position.z = buildingBox.min.z - 0.5; break;
+                                case 'back': player.position.z = buildingBox.max.z + 0.5; break;
+                            }
+                        }
+                    }
+                });
+            }
+            if (player.position.y <= 1) {
+                player.position.y = 1;
+                playerVelocity.y = 0;
+                isJumping = false;
+            }
+        }
+
+        // Sun and Moon cycle
+        let cycleTime = 0;
+        function updateLighting(delta) {
+            cycleTime += delta;
+            const cycleDuration = 120; // 2 minutes in seconds
+            const angle = (cycleTime / cycleDuration) * Math.PI * 2;
+            
+            // Sun position and intensity
+            sunLight.position.set(
+                Math.cos(angle) * 100,
+                Math.sin(angle) * 100,
+                Math.sin(angle) * 50
+            );
+            sunLight.intensity = Math.max(0, Math.sin(angle)) * 0.8;
+            
+            // Moon position and intensity
+            moonLight.position.set(
+                Math.cos(angle + Math.PI) * 100,
+                Math.sin(angle + Math.PI) * 100,
+                Math.sin(angle + Math.PI) * 50
+            );
+            moonLight.intensity = Math.max(0, Math.sin(angle + Math.PI)) * 0.4;
+            
+            // Sky color transition
+            const dayColor = new THREE.Color(0x87CEEB);
+            const nightColor = new THREE.Color(0x001133);
+            scene.background = dayColor.clone().lerp(nightColor, Math.max(0, -Math.sin(angle)));
+        }
+
+        // Game loop
+        let lastTime = performance.now();
+        function animate() {
+            requestAnimationFrame(animate);
+            const currentTime = performance.now();
+            const delta = (currentTime - lastTime) / 1000;
+            lastTime = currentTime;
+
+            if (gameActive) {
+                updatePlayer(delta);
+                updateLighting(delta);
+                for (const collectible of collectibles) {
+                    collectible.rotation.x += collectible.userData.rotationSpeed;
+                    collectible.rotation.y += collectible.userData.rotationSpeed * 1.5;
+                    collectible.position.y = collectible.userData.initialY + 
+                        Math.sin(Date.now() * 0.001 * collectible.userData.floatSpeed) * collectible.userData.floatRange;
+                }
+            }
+            renderer.render(scene, camera);
+        }
+
+        // Timer and end game (unchanged)
         function updateTimer() {
             if (gameActive && timeRemaining > 0) {
                 timeRemaining--;
                 document.getElementById('time').textContent = `Time: ${timeRemaining}`;
-                
                 if (timeRemaining === 0) {
                     gameActive = false;
                     endGame();
@@ -750,72 +482,29 @@
             }
         }
 
-        // End game
         function endGame() {
             const endScreen = document.createElement('div');
-            endScreen.style.position = 'absolute';
-            endScreen.style.top = '50%';
-            endScreen.style.left = '50%';
-            endScreen.style.transform = 'translate(-50%, -50%)';
-            endScreen.style.background = 'rgba(0, 0, 0, 0.8)';
-            endScreen.style.color = 'white';
-            endScreen.style.padding = '20px';
-            endScreen.style.borderRadius = '10px';
-            endScreen.style.textAlign = 'center';
+            endScreen.style.cssText = 'position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,0.8);color:white;padding:20px;border-radius:10px;text-align:center;';
             endScreen.innerHTML = `
                 <h2>Game Over!</h2>
                 <p>Your final score: ${score}</p>
-                <button id="restart-btn" style="padding: 10px 20px; background: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer; margin-top: 10px;">Play Again</button>
+                <button id="restart-btn" style="padding:10px 20px;background:#4CAF50;color:white;border:none;border-radius:5px;cursor:pointer;margin-top:10px;">Play Again</button>
             `;
             document.body.appendChild(endScreen);
-            
             document.getElementById('restart-btn').addEventListener('click', () => {
                 document.body.removeChild(endScreen);
-                score = 0;
-                timeRemaining = 60;
-                gameActive = true;
+                score = 0; timeRemaining = 60; gameActive = true;
                 document.getElementById('score').textContent = `Score: ${score}`;
                 document.getElementById('time').textContent = `Time: ${timeRemaining}`;
-                
-                // Reset player position
-                player.position.set(0, playerHeight / 2, 0);
+                player.position.set(0, 1, 0);
                 playerVelocity.set(0, 0, 0);
-                
-                // Reset camera
-                cameraRotation = 0;
-                cameraPitch = 0;
-                
-                // Reset collectibles
-                for (const collectible of collectibles) {
-                    scene.remove(collectible);
-                }
+                cameraRotation = 0; cameraPitch = 0;
+                for (const collectible of collectibles) scene.remove(collectible);
                 collectibles.length = 0;
                 createCollectibles();
             });
         }
 
-        // Animation and game loop
-        function animate() {
-            requestAnimationFrame(animate);
-            
-            if (gameActive) {
-                updatePlayer();
-                
-                // Animate collectibles
-                for (const collectible of collectibles) {
-                    collectible.rotation.x += collectible.userData.rotationSpeed;
-                    collectible.rotation.y += collectible.userData.rotationSpeed * 1.5;
-                    
-                    // Float up and down
-                    const floatOffset = Math.sin(Date.now() * 0.001 * collectible.userData.floatSpeed) * collectible.userData.floatRange;
-                    collectible.position.y = collectible.userData.initialY + floatOffset;
-                }
-            }
-            
-            renderer.render(scene, camera);
-        }
-
-        // Handle window resize
         window.addEventListener('resize', () => {
             camera.aspect = window.innerWidth / window.innerHeight;
             camera.updateProjectionMatrix();
@@ -826,11 +515,7 @@
         createCity();
         createCollectibles();
         createSkybox();
-        
-        // Start game timer
         setInterval(updateTimer, 1000);
-        
-        // Start animation loop
         animate();
     </script>
 </body>