Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <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; | |
| } | |
| .ui-container { | |
| 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; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="ui-container"> | |
| <h2>3D City Explorer</h2> | |
| <div id="score">Score: 0</div> | |
| <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>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; | |
| // Set up scene | |
| 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); | |
| 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); | |
| // Create ground | |
| const groundGeometry = new THREE.PlaneGeometry(200, 200); | |
| const groundMaterial = new THREE.MeshStandardMaterial({ | |
| color: 0x1a5e1a, // Green | |
| roughness: 0.8, | |
| metalness: 0.2 | |
| }); | |
| 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 | |
| ]; | |
| // L-system grammar rules for buildings | |
| 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 | |
| } | |
| ]; | |
| // L-system interpreter | |
| 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; | |
| } | |
| 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 | |
| }); | |
| // 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 | |
| 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.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); | |
| 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; | |
| } | |
| } | |
| return buildingGroup; | |
| } | |
| // Create a city | |
| function createCity() { | |
| // Create grid of buildings | |
| const citySize = 5; // Size of the city grid | |
| const spacing = 15; // Spacing between building centers | |
| 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; | |
| 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 | |
| } | |
| // Create building using L-system | |
| 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 | |
| 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 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 | |
| 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 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 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 marking = new THREE.Mesh(markingGeometry, markingMaterial); | |
| marking.rotation.x = -Math.PI / 2; | |
| marking.position.set(0, 0.02, z * spacing); | |
| scene.add(marking); | |
| } | |
| } | |
| // Add windows to a building | |
| function addWindowsToBuilding(building, width, height, depth) { | |
| const windowSize = 0.5; | |
| const 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 | |
| }); | |
| // 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; | |
| 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 | |
| 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; | |
| building.add(frontWindow); | |
| // Back window | |
| const backWindow = new THREE.Mesh(windowGeometry, windowMaterial); | |
| backWindow.position.set(x, y, backZ); | |
| building.add(backWindow); | |
| } | |
| } | |
| // Side windows | |
| const rightX = width / 2 + 0.01; | |
| const leftX = -width / 2 - 0.01; | |
| 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 | |
| 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; | |
| building.add(rightWindow); | |
| // Left window | |
| const leftWindow = new THREE.Mesh(windowGeometry, windowMaterial); | |
| leftWindow.position.set(leftX, y, z); | |
| leftWindow.rotation.y = -Math.PI / 2; | |
| building.add(leftWindow); | |
| } | |
| } | |
| } | |
| // Create collectible items | |
| function createCollectibles() { | |
| const citySize = 5; | |
| const spacing = 15; | |
| for (let i = 0; i < 20; i++) { | |
| 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; | |
| 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); | |
| 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); | |
| 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); | |
| player.castShadow = true; | |
| scene.add(player); | |
| // Player physics | |
| 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 | |
| }; | |
| // Mouse controls for looking around | |
| const mousePosition = { | |
| x: 0, | |
| y: 0 | |
| }; | |
| let cameraRotation = 0; | |
| let cameraPitch = 0; | |
| document.addEventListener('keydown', (event) => { | |
| switch (event.key.toLowerCase()) { | |
| case 'w': keys.w = true; break; | |
| case 'a': keys.a = true; break; | |
| case 's': keys.s = true; break; | |
| case 'd': keys.d = true; break; | |
| case ' ': keys.space = true; break; | |
| } | |
| }); | |
| document.addEventListener('keyup', (event) => { | |
| switch (event.key.toLowerCase()) { | |
| case 'w': keys.w = false; break; | |
| case 'a': keys.a = false; break; | |
| case 's': keys.s = false; break; | |
| case 'd': keys.d = false; break; | |
| case ' ': keys.space = 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(); | |
| } | |
| }); | |
| // Update player position based on input | |
| function updatePlayer() { | |
| // Apply gravity | |
| 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.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.rotation.y = cameraRotation; | |
| camera.rotation.x = cameraPitch; | |
| // Collision detection | |
| checkPlayerCollisions(); | |
| } | |
| // Timer function | |
| function updateTimer() { | |
| if (gameActive && timeRemaining > 0) { | |
| timeRemaining--; | |
| document.getElementById('time').textContent = `Time: ${timeRemaining}`; | |
| if (timeRemaining === 0) { | |
| gameActive = false; | |
| endGame(); | |
| } | |
| } | |
| } | |
| // 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.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> | |
| `; | |
| document.body.appendChild(endScreen); | |
| document.getElementById('restart-btn').addEventListener('click', () => { | |
| document.body.removeChild(endScreen); | |
| 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); | |
| playerVelocity.set(0, 0, 0); | |
| // Reset camera | |
| cameraRotation = 0; | |
| cameraPitch = 0; | |
| // Reset collectibles | |
| 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(); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| }); | |
| // Initialize | |
| createCity(); | |
| createCollectibles(); | |
| createSkybox(); | |
| // Start game timer | |
| setInterval(updateTimer, 1000); | |
| // Start animation loop | |
| animate(); | |
| </script> | |
| </body> | |
| </html> |