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/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> | |
| // Game variables | |
| let score = 0, timeRemaining = 60, gameActive = true; | |
| // Scene setup | |
| const scene = new THREE.Scene(); | |
| const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); | |
| camera.position.set(0, 5, 15); | |
| const renderer = new THREE.WebGLRenderer({ antialias: true }); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| renderer.shadowMap.enabled = true; | |
| document.body.appendChild(renderer.domElement); | |
| // Lighting | |
| const ambientLight = new THREE.AmbientLight(0xffffff, 0.2); | |
| scene.add(ambientLight); | |
| // 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); | |
| 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, | |
| roughness: 0.8, | |
| 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 and collectibles arrays | |
| const buildings = [], collectibles = []; | |
| const buildingColors = [0x888888, 0x666666, 0x999999, 0xaaaaaa, 0x555555, 0x334455, 0x445566, 0x223344, 0x556677, 0x667788, 0x993333, 0x884422, 0x553333, 0x772222, 0x664433]; | |
| // Building rules (unchanged) | |
| const buildingRules = [ | |
| {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 (modified for better window positioning) | |
| function interpretLSystem(rule, position, rotation) { | |
| let currentString = rule.axiom; | |
| for (let i = 0; i < rule.iterations; i++) { | |
| let newString = ""; | |
| for (let j = 0; j < currentString.length; j++) { | |
| newString += rule.rules[currentString[j]] || currentString[j]; | |
| } | |
| currentString = newString; | |
| } | |
| let buildingGroup = new THREE.Group(); | |
| buildingGroup.position.copy(position); | |
| const stack = []; | |
| let currentPosition = new THREE.Vector3(0, 0, 0); | |
| let currentRotation = rotation || new THREE.Euler(); | |
| let scale = new THREE.Vector3(1, 1, 1); | |
| const color = buildingColors[Math.floor(Math.random() * buildingColors.length)]; | |
| const material = new THREE.MeshStandardMaterial({color: color, roughness: 0.7, metalness: 0.2}); | |
| for (let i = 0; i < currentString.length; i++) { | |
| const char = currentString[i]; | |
| switch (char) { | |
| 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; | |
| const geometry = new THREE.BoxGeometry(width, height, depth); | |
| const buildingPart = new THREE.Mesh(geometry, material); | |
| buildingPart.position.copy(currentPosition); | |
| buildingPart.position.y += height / 2; // Center properly | |
| buildingPart.rotation.copy(currentRotation); | |
| buildingPart.castShadow = true; | |
| buildingPart.receiveShadow = true; | |
| if (height > 5 && width > 2 && depth > 2) { | |
| addWindowsToBuilding(buildingPart, width, height, depth); | |
| } | |
| buildingGroup.add(buildingPart); | |
| const direction = new THREE.Vector3(0, height, 0); | |
| direction.applyEuler(currentRotation); | |
| currentPosition.add(direction); | |
| 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 city (unchanged) | |
| function createCity() { | |
| const citySize = 5, spacing = 15; | |
| for (let x = -citySize; x <= citySize; x++) { | |
| for (let z = -citySize; z <= citySize; z++) { | |
| if (Math.random() < 0.2) continue; | |
| 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]; | |
| const building = interpretLSystem(selectedRule, position, new THREE.Euler()); | |
| scene.add(building); | |
| buildings.push(building); | |
| } | |
| } | |
| // 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 road = new THREE.Mesh(roadGeometry, roadMaterial); | |
| road.rotation.x = -Math.PI / 2; | |
| road.position.set(x * spacing, 0.01, 0); | |
| scene.add(road); | |
| 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); | |
| } | |
| 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); | |
| 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 building (fixed positioning) | |
| function addWindowsToBuilding(building, width, height, depth) { | |
| 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 numLevels = Math.floor((height - 2) / windowSpacing); | |
| // Front and back | |
| for (let level = 0; level < numLevels; level++) { | |
| 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; | |
| const frontWindow = new THREE.Mesh(windowGeometry, windowMaterial); | |
| frontWindow.position.set(x, y, depth/2 + 0.01); | |
| building.add(frontWindow); | |
| const backWindow = new THREE.Mesh(windowGeometry, windowMaterial); | |
| backWindow.position.set(x, y, -depth/2 - 0.01); | |
| backWindow.rotation.y = Math.PI; | |
| building.add(backWindow); | |
| } | |
| } | |
| // Sides | |
| for (let level = 0; level < numLevels; level++) { | |
| 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; | |
| const rightWindow = new THREE.Mesh(windowGeometry, windowMaterial); | |
| rightWindow.position.set(width/2 + 0.01, y, z); | |
| rightWindow.rotation.y = -Math.PI/2; | |
| building.add(rightWindow); | |
| const leftWindow = new THREE.Mesh(windowGeometry, windowMaterial); | |
| leftWindow.position.set(-width/2 - 0.01, y, z); | |
| leftWindow.rotation.y = Math.PI/2; | |
| building.add(leftWindow); | |
| } | |
| } | |
| } | |
| // Collectibles, skybox, player setup (unchanged) | |
| function createCollectibles() { | |
| 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; | |
| collectible.position.set(x, y, z); | |
| 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); | |
| } | |
| } | |
| function createSkybox() { | |
| const sky = new THREE.Mesh( | |
| new THREE.SphereGeometry(400, 32, 32), | |
| new THREE.MeshBasicMaterial({color: 0x87CEEB, side: THREE.BackSide}) | |
| ); | |
| scene.add(sky); | |
| for (let i = 0; i < 50; i++) { | |
| 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); | |
| } | |
| } | |
| 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 and controls | |
| const playerVelocity = new THREE.Vector3(); | |
| const playerDirection = new THREE.Vector3(); | |
| let isJumping = 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; | |
| 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()) { | |
| 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; | |
| case 'shift': keys.shift = 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; | |
| case 'shift': keys.shift = false; break; | |
| } | |
| }); | |
| document.addEventListener('mousemove', (event) => { | |
| if (document.pointerLockElement === renderer.domElement) { | |
| cameraRotation -= event.movementX * 0.002; | |
| cameraPitch -= event.movementY * 0.002; | |
| cameraPitch = Math.max(-Math.PI / 2 + 0.1, Math.min(Math.PI / 2 - 0.1, cameraPitch)); | |
| } | |
| }); | |
| renderer.domElement.addEventListener('click', () => { | |
| if (!document.pointerLockElement) renderer.domElement.requestPointerLock(); | |
| }); | |
| 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; | |
| if (keys.space && !isJumping) { | |
| playerVelocity.y = JUMP_FORCE; | |
| isJumping = true; | |
| } | |
| playerDirection.z = Number(keys.s) - Number(keys.w); | |
| playerDirection.x = Number(keys.d) - Number(keys.a); | |
| playerDirection.normalize(); | |
| playerDirection.applyAxisAngle(new THREE.Vector3(0, 1, 0), cameraRotation); | |
| player.position.x += playerDirection.x * moveSpeed; | |
| player.position.z += playerDirection.z * moveSpeed; | |
| player.position.y += playerVelocity.y; | |
| 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; | |
| checkPlayerCollisions(); | |
| } | |
| 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(); | |
| } | |
| } | |
| } | |
| function endGame() { | |
| const endScreen = document.createElement('div'); | |
| 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> | |
| `; | |
| 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}`; | |
| player.position.set(0, 1, 0); | |
| playerVelocity.set(0, 0, 0); | |
| cameraRotation = 0; cameraPitch = 0; | |
| for (const collectible of collectibles) scene.remove(collectible); | |
| collectibles.length = 0; | |
| createCollectibles(); | |
| }); | |
| } | |
| window.addEventListener('resize', () => { | |
| camera.aspect = window.innerWidth / window.innerHeight; | |
| camera.updateProjectionMatrix(); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| }); | |
| // Initialize | |
| createCity(); | |
| createCollectibles(); | |
| createSkybox(); | |
| setInterval(updateTimer, 1000); | |
| animate(); | |
| </script> | |
| </body> | |
| </html> |