// ThreeJS revision: 152 // IMPORTS: import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'; import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'; import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js'; import { SMAAPass } from 'three/addons/postprocessing/SMAAPass.js'; import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; /* This is where external user components are loaded into scope. This seems like the simfplest solution to this problem as it does not require modifications to the Script loader. This requires an export statement at the end of the user script with the desires export components added. Components can be removed from this import statement to completely remove them without having to modify the external script contents - meaning it can hold objects that aren't even used in this script for later use. */ import { BasicSkyShader, MaterialManager, LightingManager, MeshManager } from 'https://play.rosebud.ai/assets/ThreeJSScripts.js?hZgy'; const APP_SETTINGS = { renderer: { shadowMap: { enabled: true, type: THREE.PCFSoftShadowMap }, sunMovement: false, // New control variable for sun movement colorSpace: { output: THREE.SRGBColorSpace, toneMapping: THREE.ACESFilmicToneMapping, toneMappingExposure: 1.2 }, antialias: true, pixelRatio: window.devicePixelRatio }, controls: { startEnemyWavesOnBoot: true, createSingleEnemyOnBoot: false, enableEnemyAttackingState: true, generateTileMap: true, enableEnemyPathfinding: true, editMap: true, autoTestMapRegeneration: false, showMapEditorUI: false, visualizeNavMesh: false, visualizeEnemyPaths: false, // New control variable debugEnemy: false, }, enemySpawner: { waves: [{ enemyCount: 5, spawnInterval: 1 }, { enemyCount: 8, spawnInterval: 0.8 }, { enemyCount: 12, spawnInterval: 0.6 }], tileFlashInterval: 1.2, // New setting for tile flash interval (in seconds timeBetweenWaves: 3, // 3 seconds between waves spawnSettings: { minDistanceFromPlayer: 10, maxSpawnAttempts: 10 } }, TILEMAP_CONFIG: { width: 12, height: 10, tileSize: 2, baseHeight: -21.5, gridLineHeight: -21.4, // slightly above base height gridLineColor: 0x000000, obstacleCount: 16, // New configuration for number of obstacles obstacleForegroundColor: 0xB637C8, // RGB(182, 55, 200) for the foreground obstacleBackgroundColor: 0x4A4A4A, // RGB(74, 74, 74) for the background groundColor: 0xF0F0F0, // Bright off-white color obstacleMinHeight: 3, // Minimum height for obstacles obstacleMaxHeight: 7, // Maximum height for obstacles }, world: { defaults: { skyColor: 0x4A6D8C // Darker blue color }, }, physics: { gravity: { x: 0, y: -9.81, z: 0 }, defaultContactMaterial: { friction: 0.01, restitution: 0.6 }, solver: { iterations: 10, tolerance: 0.001 }, collisionGroups: { default: 1, player: 2, obstacle: 4, enemy: 8, bullet: 16 } }, camera: { fov: 60, near: 0.1, far: 1000, initialPosition: { x: 0, y: 10, z: 5 } }, gameplay: {}, lights: { sunlight: { color: 0xffffff, intensity: 2, position: { x: 20, y: 100, z: 20 }, castShadow: true, shadow: { mapSize: { width: 2048, height: 2048 }, camera: { near: 10, far: 1000, left: -100, right: 100, top: 100, bottom: -100 }, bias: -0.0001 } } } }; const TEXTURE_ASSETS = { normal: { 'terrain_nrm': 'https://develop.play.rosebud.ai/assets/Grass_04_Nrm.png?BQVT', // Add more normal maps as needed }, texture: { 'terrain': 'https://develop.play.rosebud.ai/assets/Grass_04.png?MBRT', // Add more textures as needed }, sprites: { 'TomeSprites': 'https://play.rosebud.ai/assets/Tomes32x32.png?meX8', // Add more sprite sheets as needed } }; const SOUND_ASSETS = { sfx: { 'bullet_hit': { url: 'https://play.rosebud.ai/assets/snd_bullet_hit.wav?5GSg', volume: 1 }, 'shoot_gun': { url: 'https://play.rosebud.ai/assets/snd_gun_shoot.ogg?LwYY', volume: 0.5 }, 'enemy_attack': { url: 'https://play.rosebud.ai/assets/snd_woosh.mp3?zsBI', volume: 0.25 } }, music: { // Add background music assets here when available } }; // Components: function TextureManager() { class TextureManager { constructor() { this.textures = new Map(); this.loader = new THREE.TextureLoader(LoadingManager); this.texturesLoaded = false; this.loadTextures(); } load(key, url, onLoad = () => {}, onProgress = () => {}, onError = () => {}) { if (this.textures.has(key)) { onLoad(this.textures.get(key)); return Promise.resolve(this.textures.get(key)); } return new Promise((resolve, reject) => { this.loader.load( url, (texture) => { this.textures.set(key, texture); onLoad(texture); resolve(texture); }, onProgress, (error) => { onError(error); reject(error); } ); }); } loadTextures() { return new Promise((resolve, reject) => { const texturePromises = []; // Iterate through each category in TEXTURE_ASSETS for (const category in TEXTURE_ASSETS) { for (const textureName in TEXTURE_ASSETS[category]) { const textureUrl = TEXTURE_ASSETS[category][textureName]; const key = textureName; texturePromises.push( this.load( key, textureUrl, (texture) => { if (category === 'sprites') { texture.minFilter = THREE.NearestFilter; texture.magFilter = THREE.NearestFilter; texture.generateMipmaps = false; } console.log(`Loaded ${category} texture: ${key}`); } ) ); } } Promise.all(texturePromises) .then((loadedTextures) => { this.texturesLoaded = true; console.log('All textures loaded successfully'); console.log('Loaded textures:'); this.textures.forEach((texture, key) => { console.log(`- ${key}: ${texture.image.src}`); }); resolve(); }) .catch((error) => { console.error('Error loading textures:', error); reject(error); }); }); } getTexture(key) { const texture = this.textures.get(key); if (!texture) { console.warn(`Texture with key "${key}" not found.`); } return texture; } dispose(key) { if (this.textures.has(key)) { this.textures.get(key).dispose(); this.textures.delete(key); } } disposeAll() { for (let texture of this.textures.values()) { texture.dispose(); } this.textures.clear(); } } return new TextureManager(); } class Renderer { constructor() { this.postProcessing = null; this.renderer = new THREE.WebGLRenderer({ antialias: APP_SETTINGS.renderer.antialias, canvas: canvas, powerPreference: "high-performance" }); this.init(); } init() { this.renderer.setPixelRatio(APP_SETTINGS.renderer.pixelRatio); this.renderer.setSize(canvas.offsetWidth, canvas.offsetHeight); this.renderer.shadowMap.enabled = APP_SETTINGS.renderer.shadowMap.enabled; this.renderer.shadowMap.type = APP_SETTINGS.renderer.shadowMap.type; this.renderer.outputColorSpace = APP_SETTINGS.renderer.colorSpace.output; this.renderer.toneMapping = APP_SETTINGS.renderer.colorSpace.toneMapping; this.renderer.toneMappingExposure = APP_SETTINGS.renderer.colorSpace.toneMappingExposure; console.log('Renderer initialized with APP_SETTINGS parameters'); } initPostProcessing() { this.postProcessing = new PostProcessing(this.renderer, WorldScene, MainCamera); window.PostProcessing = this.postProcessing; } render() { if (this.postProcessing) { this.postProcessing.render(); } else { this.renderer.render(WorldScene, MainCamera); } } setSize(width, height) { this.renderer.setSize(width, height); if (this.postProcessing) { this.postProcessing.setSize(width, height); } } } class PostProcessing { constructor() { this.composer = null; this.bloomPass = null; this.smaaPass = null; this.initComposer(); } initComposer() { this.composer = new EffectComposer(GameRenderer.renderer); const renderPass = new RenderPass(WorldScene, MainCamera); this.composer.addPass(renderPass); this.bloomPass = new UnrealBloomPass( new THREE.Vector2(innerWidth, innerHeight), 0.2, // bloom strength 0.4, // radius 0.9 // threshold ); this.composer.addPass(this.bloomPass); this.smaaPass = new SMAAPass( innerWidth * GameRenderer.renderer.getPixelRatio(), innerHeight * GameRenderer.renderer.getPixelRatio() ); this.composer.addPass(this.smaaPass); } setSize(width, height) { this.composer.setSize(width, height); this.bloomPass.resolution.set(width, height); this.smaaPass.setSize(width, height); } render() { this.composer.render(); } } class SkyBox { constructor() { this.skyMesh = null; this.shaderMaterial = null; this.loadSkyboxModel(); } loadSkyboxModel() { const loader = new GLTFLoader(LoadingManager); loader.load('https://play.rosebud.ai/assets/SkyboxSphere.glb?BkJ1', (gltf) => { this.skyMesh = gltf.scene.children[0]; this.skyMesh.scale.set(1500, 1200, 1500); // Create and apply the new shader material const skyColor = new THREE.Color(APP_SETTINGS.world.defaults.skyColor); const groundColor = new THREE.Color(APP_SETTINGS.world.defaults.skyColor).multiplyScalar(0.5); // Darker version of sky color for ground this.shaderMaterial = BasicSkyShader(skyColor, groundColor); this.skyMesh.material = this.shaderMaterial.material; WorldScene.add(this.skyMesh); console.log('Skybox created with default colors:', skyColor, groundColor); this.updateSunPosition(); }); } update(deltaTime) { this.updateSunPosition(); } updateSunPosition() { if (this.shaderMaterial && Lights.getLight('sunLight')) { const sunLight = Lights.getLight('sunLight'); const sunDirection = new THREE.Vector3(); sunLight.getWorldDirection(sunDirection); this.shaderMaterial.setSunPosition(sunDirection); } } getSkyColor() { return this.shaderMaterial ? this.shaderMaterial.skyColor : new THREE.Color(0x87CEEB); } getGroundColor() { return this.shaderMaterial ? this.shaderMaterial.groundColor : new THREE.Color(0xFFFFFF); } setSkyColor(color) { if (this.shaderMaterial) { this.shaderMaterial.setSkyColor(color); } } setGroundColor(color) { if (this.shaderMaterial) { this.shaderMaterial.setGroundColor(color); } } } class WorldTime { constructor() { this.currentTime = 0; // Time in seconds this.timeScale = 1; // 1 second real time = 1 second game time this.tweening = false; this.tweenStartTime = 0; this.tweenEndTime = 0; this.tweenDuration = 0; } update(deltaTime) { if (this.tweening) { this.updateTween(deltaTime); } else { this.currentTime += deltaTime * this.timeScale; } } setTimeScale(scale) { this.timeScale = scale; } getHours() { return Math.floor(this.currentTime / 3600) % 24; } getMinutes() { return Math.floor((this.currentTime % 3600) / 60); } getSeconds() { return Math.floor(this.currentTime % 60); } getTimeString() { const hours = this.getHours().toString().padStart(2, '0'); const minutes = this.getMinutes().toString().padStart(2, '0'); const seconds = this.getSeconds().toString().padStart(2, '0'); return `${hours}:${minutes}:${seconds}`; } setTime(hours) { const targetTime = hours * 3600; // Convert hours to seconds this.tweenStartTime = this.currentTime; this.tweenEndTime = targetTime; this.tweenDuration = 2; // Duration of the tween in seconds this.tweening = true; } updateTween(deltaTime) { const elapsedTime = Math.min(deltaTime, this.tweenDuration); const progress = elapsedTime / this.tweenDuration; this.currentTime = this.tweenStartTime + (this.tweenEndTime - this.tweenStartTime) * progress; this.tweenDuration -= elapsedTime; if (this.tweenDuration <= 0) { this.currentTime = this.tweenEndTime; this.tweening = false; } } } class World { constructor() { window.WorldScene = new THREE.Scene(); this.skybox = new SkyBox(WorldScene); this.lights = {}; this.physicsWorld = new CANNON.World(); this.setupPhysicsWorld(); this.initCamera(); this.initRenderer(); this.initLights(); this.Time = new WorldTime(); this.player = null; } createTileMap() { const { tileMap, gridLines } = window.TileMapManager.createTileMap(); this.tileMap = tileMap; this.gridLines = gridLines; } destroyMap() { window.TileMapManager.destroyMap(); this.tileMap = null; this.gridLines = null; } regenerateMap() { window.TileMapManager.regenerateMap(); const currentMap = window.TileMapManager.getCurrentMap(); this.tileMap = currentMap; this.gridLines = currentMap ? currentMap.gridLines : null; } setupPhysicsWorld() { this.physicsWorld.gravity.set( APP_SETTINGS.physics.gravity.x, APP_SETTINGS.physics.gravity.y, APP_SETTINGS.physics.gravity.z ); this.physicsWorld.defaultContactMaterial.friction = APP_SETTINGS.physics.defaultContactMaterial.friction; this.physicsWorld.defaultContactMaterial.restitution = APP_SETTINGS.physics.defaultContactMaterial.restitution; this.physicsWorld.solver.iterations = APP_SETTINGS.physics.solver.iterations; this.physicsWorld.solver.tolerance = APP_SETTINGS.physics.solver.tolerance; this.groundPhysMaterial = new CANNON.Material('ground'); } initLights() { const defaultSkyColor = new THREE.Color(APP_SETTINGS.world.defaults.skyColor); const defaultGroundColor = new THREE.Color(APP_SETTINGS.world.defaults.groundColor); const sunlightSettings = APP_SETTINGS.lights.sunlight; Lights.createLight('sunLight', 'directional', { color: sunlightSettings.color, intensity: sunlightSettings.intensity, position: sunlightSettings.position, castShadow: sunlightSettings.castShadow, shadow: sunlightSettings.shadow }); Lights.createLight('hemiLight', 'hemisphere', { skyColor: defaultSkyColor, groundColor: defaultGroundColor, intensity: 0.6 }); console.log('Lights initialized with default colors:', defaultSkyColor, defaultGroundColor); } getLight(name) { return Lights.getLight(name); } calculateSunRotation(time) { const rotationSpeed = 0.1; // Adjust this value to change the orbit speed const angle = time * rotationSpeed; const radius = 100; // Adjust this value to change the orbit radius const x = Math.cos(angle) * radius; const z = Math.sin(angle) * radius; const baseHeight = 80; // Increased from 50 to 80 const verticalAmplitude = 30; // Increased from 20 to 30 const y = baseHeight + Math.sin(angle * 0.5) * verticalAmplitude; return new THREE.Vector3(x, y, z); } updateSunlight(playerPosition) { if (APP_SETTINGS.renderer.sunMovement) { Lights.updateLight('sunLight', (sunLight) => { const offset = this.calculateSunRotation(this.Time.currentTime); sunLight.position.copy(playerPosition).add(offset); // Update the target if (!sunLight.target) { sunLight.target = new THREE.Object3D(); WorldScene.add(sunLight.target); } sunLight.target.position.copy(playerPosition); }); // Update the skybox sun position if (this.skybox) { this.skybox.updateSunPosition(); } } } initCamera() { window.MainCamera = new THREE.PerspectiveCamera( APP_SETTINGS.camera.fov, canvas.offsetWidth / canvas.offsetHeight, APP_SETTINGS.camera.near, APP_SETTINGS.camera.far ); // Set the new position based on APP_SETTINGS MainCamera.position.set( APP_SETTINGS.camera.initialPosition.x, APP_SETTINGS.camera.initialPosition.y, APP_SETTINGS.camera.initialPosition.z ); MainCamera.lookAt(0, -20, 0); // Look at the center of the tilemap console.log('Camera initialized with top-down view'); } initRenderer() { window.GameRenderer = new Renderer(MainCamera); GameRenderer.initPostProcessing(WorldScene); } update(deltaTime) { this.deltaTime = deltaTime; // Store deltaTime for use in other methods this.Time.update(deltaTime); this.physicsWorld.step(deltaTime); // Update sunlight position based on a fixed point (e.g., world origin) this.updateSunlight(new THREE.Vector3(0, 0, 0)); this.skybox.update(deltaTime); if (window.Player) { window.Player.update(deltaTime); } // Update enemies window.EnemyManager.updateEnemies(deltaTime); // Update bullets using global BulletManager window.BulletManager.update(deltaTime); if (window.Player && window.Player.gun) { window.Player.gun.update(deltaTime); } // Update tilemap if (this.tileMap) { this.tileMap.update(deltaTime); } // Process enemy removal queue at the end of the update loop window.EnemyManager.processRemovalQueue(); GameRenderer.render(); } } class NavMesh { constructor(tileMap) { this.tileMap = tileMap; this.grid = []; this.skippedPoints = []; this.visualizationGroup = new THREE.Group(); this.generateGrid(); if (APP_SETTINGS.controls.visualizeNavMesh) { this.createVisualization(); } } generateGrid() { const config = APP_SETTINGS.TILEMAP_CONFIG; const offsetX = (this.tileMap.width * config.tileSize) / 2; const offsetZ = (this.tileMap.height * config.tileSize) / 2; const quarterTileSize = config.tileSize / 4; for (let x = 0; x <= this.tileMap.width; x += 2) { for (let z = 0; z <= this.tileMap.height; z += 2) { const baseX = x * config.tileSize - offsetX; const baseZ = z * config.tileSize - offsetZ; // Add points for each tile (including quarter points) for (let dx = 0; dx <= 4; dx += 2) { for (let dz = 0; dz <= 4; dz += 2) { // Skip the points that are outside the map if (x === this.tileMap.width && dx > 0) continue; if (z === this.tileMap.height && dz > 0) continue; const pointX = baseX + dx * quarterTileSize; const pointZ = baseZ + dz * quarterTileSize; this.addPoint(pointX, pointZ, config.baseHeight); } } } } console.log(`Generated ${this.grid.length} NavMesh points`); } addPoint(x, z, y) { const point = new THREE.Vector3(x, y + 0.1, z); if (!this.isPointOverlappingObstacle(point)) { this.grid.push(point); } else { this.skippedPoints.push(point); } } isPointOverlappingObstacle(point) { const buffer = .5; return this.tileMap.obstacles.some(obstacle => { const obstaclePosition = obstacle.mesh.position; const obstacleSize = obstacle.mesh.geometry.parameters; return ( point.x >= obstaclePosition.x - obstacleSize.width / 2 - buffer && point.x <= obstaclePosition.x + obstacleSize.width / 2 + buffer && point.z >= obstaclePosition.z - obstacleSize.depth / 2 - buffer && point.z <= obstaclePosition.z + obstacleSize.depth / 2 + buffer ); }); } createVisualization() { const sphereGeometry = new THREE.SphereGeometry(0.05, 8, 8); // Smaller spheres const sphereMaterial = new THREE.MeshBasicMaterial({ color: 0x0000ff }); this.grid.forEach(point => { const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial); sphere.position.copy(point); this.visualizationGroup.add(sphere); }); WorldScene.add(this.visualizationGroup); } removeVisualization() { if (this.visualizationGroup) { WorldScene.remove(this.visualizationGroup); this.visualizationGroup.clear(); } } } class Bullet { constructor(position, direction, bulletManager) { this.bulletManager = bulletManager; this.mesh = this.createMesh(position); this.body = this.createBody(position); this.initialDirection = direction.clone().normalize(); this.speed = 20; // Units per second this.lifetime = 2; // Seconds this.id = Math.random().toString(36).substr(2, 9); // Generate a unique ID this.debugInterval = 1; // Log debug info every 1 second this.timeSinceLastDebug = 0; this.damage = 50; // Add damage property this.hasDamaged = false; // Add flag to track if bullet has dealt damage } createMesh(position) { const radius = 0.10; const height = 0.3; const geometry = new THREE.CylinderGeometry(radius, radius, height, 8); const material = new THREE.MeshBasicMaterial({ color: 0x000000 // Black color }); const mesh = new THREE.Mesh(geometry, material); mesh.rotation.x = Math.PI / 2; mesh.position.copy(position); WorldScene.add(mesh); return mesh; } createBody(position) { const shape = new CANNON.Cylinder(0.5, 0.5, 1.5, 8); const body = new CANNON.Body({ mass: 0, shape: shape, position: new CANNON.Vec3(position.x, position.y, position.z), collisionFilterGroup: APP_SETTINGS.physics.collisionGroups.bullet, collisionFilterMask: APP_SETTINGS.physics.collisionGroups.enemy | APP_SETTINGS.physics.collisionGroups.obstacle }); body.addEventListener("collide", this.onCollide.bind(this)); GameWorld.physicsWorld.addBody(body); return body; } onCollide(event) { const otherBody = event.body; if (otherBody.collisionFilterGroup === APP_SETTINGS.physics.collisionGroups.enemy && !this.hasDamaged) { // Play bullet hit sound if (window.AudioManager) { window.AudioManager.playSound('bullet_hit'); } // Apply damage to the enemy if (otherBody.enemy && typeof otherBody.enemy.takeDamage === 'function') { otherBody.enemy.takeDamage(this.damage); this.hasDamaged = true; } } else if (otherBody.collisionFilterGroup === APP_SETTINGS.physics.collisionGroups.obstacle) { // Play bullet hit sound for obstacle collision if (window.AudioManager) { window.AudioManager.playSound('bullet_hit'); } console.log("Bullet collided with an obstacle"); } // Queue the bullet for removal regardless of what it hit this.bulletManager.queueForRemoval(this); } update(deltaTime) { const movement = this.initialDirection.clone().multiplyScalar(this.speed * deltaTime); this.body.position.vadd(new CANNON.Vec3(movement.x, movement.y, movement.z), this.body.position); this.body.quaternion.setFromVectors(new CANNON.Vec3(0, 1, 0), new CANNON.Vec3(this.initialDirection.x, this.initialDirection.y, this.initialDirection.z)); this.mesh.position.copy(this.body.position); this.mesh.quaternion.copy(this.body.quaternion); this.lifetime -= deltaTime; } remove() { WorldScene.remove(this.mesh); GameWorld.physicsWorld.removeBody(this.body); } } class BulletManager { constructor() { this.bullets = []; this.removalQueue = []; } createBullet(position, direction) { const bullet = new Bullet(position, direction, this); this.bullets.push(bullet); return bullet; } update(deltaTime) { this.bullets.forEach(bullet => { bullet.update(deltaTime); if (bullet.lifetime <= 0) { this.queueForRemoval(bullet); } }); this.processRemovalQueue(); } queueForRemoval(bullet) { this.removalQueue.push(bullet); } processRemovalQueue() { while (this.removalQueue.length > 0) { const bullet = this.removalQueue.pop(); const index = this.bullets.indexOf(bullet); if (index !== -1) { this.bullets.splice(index, 1); bullet.remove(); } } } } class Gun { constructor() { this.mesh = new THREE.Group(); this.createGun(); this.bulletManager = new BulletManager(); this.lastFireTime = 0; this.fireRate = 0.25; // 4 bullets per second this.isFiring = false; } createGun() { // Create gun barrel const barrelGeometry = new THREE.BoxGeometry(0.1, 0.1, 0.5); const barrelMaterial = new THREE.MeshPhongMaterial({ color: 0x333333 }); const barrel = new THREE.Mesh(barrelGeometry, barrelMaterial); barrel.position.set(0, 0, 0.25); // Create gun body const bodyGeometry = new THREE.BoxGeometry(0.3, 0.3, 0.4); const bodyMaterial = new THREE.MeshPhongMaterial({ color: 0x666666 }); const body = new THREE.Mesh(bodyGeometry, bodyMaterial); body.position.set(0, -0.1, 0); // Create gun handle const handleGeometry = new THREE.BoxGeometry(0.15, 0.4, 0.1); const handleMaterial = new THREE.MeshPhongMaterial({ color: 0x8B4513 }); const handle = new THREE.Mesh(handleGeometry, handleMaterial); handle.position.set(0, -0.35, -0.15); // Add all parts to the gun mesh this.mesh.add(barrel); this.mesh.add(body); this.mesh.add(handle); // Rotate the gun to face forward this.mesh.rotation.y = Math.PI / 2; } setPosition(x, y, z) { this.mesh.position.set(x, y, z); } fire(playerPosition, playerDirection) { this.isFiring = true; } update(deltaTime) { const now = performance.now() / 1000; // Convert to seconds if (this.isFiring && now - this.lastFireTime >= this.fireRate) { const bulletPosition = new THREE.Vector3().copy(this.mesh.getWorldPosition(new THREE.Vector3())); bulletPosition.add(this.mesh.getWorldDirection(new THREE.Vector3()).multiplyScalar(1)); const bulletDirection = this.mesh.getWorldDirection(new THREE.Vector3()); this.bulletManager.createBullet(bulletPosition, bulletDirection); // Play gun shoot sound if (window.AudioManager) { window.AudioManager.playSound('shoot_gun'); } this.lastFireTime = now; } this.isFiring = false; // Reset firing state // Update bullets this.bulletManager.update(deltaTime); } } class Player { constructor(world) { this.world = world; this.mesh = null; this.body = null; this.moveSpeed = 8; this.moveDirection = new CANNON.Vec3(0, 0, 0); this.facingDirection = new THREE.Vector3(1, 0, 0); this.findSpawnPoint(); this.createMesh(); this.createBody(); this.createGun(); } findSpawnPoint() { const tileMap = this.world.tileMap; if (!tileMap) { console.warn("TileMap not found. Using default spawn point."); this.spawnPoint = new THREE.Vector3(0, APP_SETTINGS.TILEMAP_CONFIG.baseHeight + 2, 0); return; } const config = APP_SETTINGS.TILEMAP_CONFIG; const offsetX = (tileMap.width * config.tileSize) / 2; const offsetZ = (tileMap.height * config.tileSize) / 2; for (let x = 0; x < tileMap.width; x++) { for (let z = 0; z < tileMap.height; z++) { const worldX = x * config.tileSize - offsetX + config.tileSize / 2; const worldZ = z * config.tileSize - offsetZ + config.tileSize / 2; const position = new THREE.Vector3(worldX, config.baseHeight + 2, worldZ); // Check if the position is not occupied by an obstacle if (!tileMap.obstacles.some(obstacle => obstacle.mesh.position.x === position.x && obstacle.mesh.position.z === position.z)) { this.spawnPoint = position; console.log(`Player spawn point set to: (${position.x.toFixed(2)}, ${position.y.toFixed(2)}, ${position.z.toFixed(2)})`); return; } } } console.warn("No suitable spawn point found. Using default spawn point."); this.spawnPoint = new THREE.Vector3(0, APP_SETTINGS.TILEMAP_CONFIG.baseHeight + 2, 0); } createGun() { this.gun = new Gun(); this.mesh.add(this.gun.mesh); // Attach the gun to the player's mesh // Initial position and rotation will be set in updateGunPosition this.updateGunPosition(); } getPosition() { return this.body.position.clone(); } updateGunPosition() { const gunDistance = 1; // Distance from player center const gunHeight = 0.5; // Height above player center // Set gun position this.gun.mesh.position.set( this.facingDirection.x * gunDistance, gunHeight, this.facingDirection.z * gunDistance ); // Set gun rotation this.gun.mesh.rotation.y = Math.atan2(this.facingDirection.x, this.facingDirection.z); } createMesh() { const geometry = new THREE.CapsuleGeometry(0.5, 1, 4, 8); const material = Materials.create('playerMaterial', 'standard', { color: 0xDB6FC9, // Lighter pink color roughness: 0.7, metalness: 0.3 }); this.mesh = new THREE.Mesh(geometry, material); this.mesh.castShadow = true; this.mesh.position.copy(this.spawnPoint); WorldScene.add(this.mesh); console.log('Player mesh created. Position:', this.mesh.position.toArray()); } createBody() { const shape = new CANNON.Cylinder(0.5, 0.5, 2, 8); const playerMaterial = new CANNON.Material('player'); this.body = new CANNON.Body({ mass: 80, shape: shape, material: playerMaterial, linearDamping: 0.95, // Increase linear damping for smoother movement angularDamping: 0.99, // Increase angular damping to reduce rotation collisionFilterGroup: APP_SETTINGS.physics.collisionGroups.player, collisionFilterMask: APP_SETTINGS.physics.collisionGroups.default | APP_SETTINGS.physics.collisionGroups.obstacle | APP_SETTINGS.physics.collisionGroups.enemy }); this.body.position.copy(this.spawnPoint); this.body.fixedRotation = true; // Lock rotation to keep the player upright this.body.updateMassProperties(); // Update mass properties after changing rotation constraints this.world.physicsWorld.addBody(this.body); // Create contact material between player and ground const playerGroundContact = new CANNON.ContactMaterial( playerMaterial, this.world.groundPhysMaterial, { friction: 0.5, restitution: 0 // Zero restitution to remove bounciness } ); this.world.physicsWorld.addContactMaterial(playerGroundContact); console.log('Player body created. Position:', this.body.position.toArray()); } update(deltaTime) { // Ensure deltaTime is a valid number deltaTime = isNaN(deltaTime) ? 0 : Math.max(0, Math.min(deltaTime, 0.1)); // Calculate movement direction based on key states this.moveDirection.set( (Input.keys.d ? 1 : 0) - (Input.keys.a ? 1 : 0), 0, (Input.keys.s ? 1 : 0) - (Input.keys.w ? 1 : 0) ); // Normalize the movement direction if it's not zero if (this.moveDirection.lengthSquared() > 0) { this.moveDirection.normalize(); } // Calculate movement const movement = this.moveDirection.scale(this.moveSpeed * deltaTime); // Use default values if movement becomes NaN if (isNaN(movement.x) || isNaN(movement.y) || isNaN(movement.z)) { movement.set(0, 0, 0); } // Apply movement to the physics body const newPosition = this.body.position.vadd(movement); this.body.position.copy(newPosition); // Update mesh position to match physics body, with an offset this.mesh.position.copy(this.body.position).sub(new THREE.Vector3(0, -.5, 0)); this.mesh.quaternion.copy(this.body.quaternion); // Update the gun position and rotation this.updateGunPosition(); // Fire only when mouse is down if (Input.mouseDown) { this.gun.fire(this.mesh.position, this.facingDirection); } this.gun.update(deltaTime); } createDebugLine() { const geometry = new THREE.BufferGeometry().setFromPoints([ new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 0, 5) ]); const material = new THREE.LineBasicMaterial({ color: 0xff0000 }); this.debugLine = new THREE.Line(geometry, material); this.debugLine.position.copy(this.mesh.position); WorldScene.add(this.debugLine); } updateFacingDirection(cursorPosition) { this.facingDirection.copy(cursorPosition).sub(this.mesh.position).normalize(); this.facingDirection.y = 0; // Keep the facing direction in the XZ plane const angle = Math.atan2(this.facingDirection.x, this.facingDirection.z); this.mesh.rotation.y = angle; // Update the gun position and rotation this.updateGunPosition(); } updateDebugLine() { // Update the start point of the line to match the player's position this.debugLine.position.copy(this.mesh.position); // Calculate the end point of the line using the facing direction const endPoint = new THREE.Vector3() .copy(this.facingDirection) .multiplyScalar(5) // Length of the debug line .add(this.mesh.position); // Update the geometry of the debug line this.debugLine.geometry.setFromPoints([ new THREE.Vector3(0, 0, 0), // Start point (relative to the line's position) endPoint.sub(this.mesh.position) // End point (relative to the line's position) ]); // Update the line's geometry this.debugLine.geometry.verticesNeedUpdate = true; } } class Enemy { constructor(world, position, enemyManager, id) { this.world = world; this.mesh = null; this.body = null; this.id = id; this.createMesh(position); this.createBody(position); this.pathUpdateInterval = .25; // Update path every 0.5 seconds this.lastPathUpdateTime = 0; this.currentPath = null; this.moveSpeed = 5; // Units per second this.currentPathIndex = 0; this.maxHealth = 100; this.health = this.maxHealth; this.isDead = false; // State management this.states = { CHASING: 'CHASING', ATTACKING: 'ATTACKING' }; this.currentState = this.states.CHASING; this.attackRange = 2; // Distance at which enemy starts attacking this.attackDuration = 0.5; // Duration of attack in seconds (reduced by 50%) this.attackCooldown = 2; // Cooldown between attacks in seconds this.lastAttackTime = 0; this.attackTimer = 0; this.lungeSpeed = 10; // Speed of the lunge attack this.isLunging = false; this.lungeDuration = 0.25; // Half of the attack duration for moving towards the player this.lungeDirection = new CANNON.Vec3(); // Debug properties this.debugLogInterval = 1; // Log debug info every 1 second this.lastDebugLogTime = 0; // Create a new AStar instance for this enemy this.astar = new AStar(this.world.tileMap); this.lerpFactor = 0.33; // Add this line } setPosition(position) { if (this.body) { this.body.position.copy(position); } if (this.mesh) { this.mesh.position.copy(position).add(new THREE.Vector3(0, 1, 0)); } } visualizePath() { if (this.pathVisualization) { WorldScene.remove(this.pathVisualization); this.pathVisualization = null; } if (APP_SETTINGS.controls.visualizeEnemyPaths && this.currentPath && this.currentPath.length > 1) { const material = new THREE.LineBasicMaterial({ color: 0xff0000 }); const geometry = new THREE.BufferGeometry().setFromPoints(this.currentPath); this.pathVisualization = new THREE.Line(geometry, material); WorldScene.add(this.pathVisualization); } } createMesh(position) { const geometry = new THREE.CapsuleGeometry(0.5, 1, 4, 8); const material = Materials.create('enemyMaterial', 'standard', { color: 0x00FF00, // Green color roughness: 0.7, metalness: 0.3 }); this.mesh = new THREE.Mesh(geometry, material); this.mesh.castShadow = true; this.setPosition(position); WorldScene.add(this.mesh); } setColor(color) { if (this.mesh && this.mesh.material) { this.mesh.material.color.setHex(color); } } createBody(position) { const shape = new CANNON.Cylinder(0.5, 0.5, 2, 8); const enemyMaterial = new CANNON.Material('enemy'); this.body = new CANNON.Body({ mass: 80, shape: shape, material: enemyMaterial, fixedRotation: true, collisionFilterGroup: APP_SETTINGS.physics.collisionGroups.enemy, collisionFilterMask: APP_SETTINGS.physics.collisionGroups.default | APP_SETTINGS.physics.collisionGroups.obstacle | APP_SETTINGS.physics.collisionGroups.bullet, linearDamping: 0.1, angularDamping: 0.1 }); this.body.enemy = this; // Add a reference to the Enemy instance this.setPosition(position); // Create contact material between enemy and ground const enemyGroundContact = new CANNON.ContactMaterial( enemyMaterial, this.world.groundPhysMaterial, { friction: 0.001, restitution: 0, contactEquationStiffness: 1e8, contactEquationRelaxation: 3 } ); this.world.physicsWorld.addContactMaterial(enemyGroundContact); // Set the collision response to the body this.body.collisionResponse = 1; // Ensure collision response is enabled this.world.physicsWorld.addBody(this.body); } update(deltaTime) { if (this.isDead) return; // Only update mesh position if not lunging if (!this.isLunging) { this.setPosition(this.body.position); this.mesh.quaternion.copy(this.body.quaternion); } // State transition logic if (APP_SETTINGS.controls.enableEnemyAttackingState) { const distanceToPlayer = this.distanceToPlayer(); switch (this.currentState) { case this.states.CHASING: if (distanceToPlayer <= this.attackRange && !this.isLunging) { this.transitionToState(this.states.ATTACKING); } break; case this.states.ATTACKING: // The transition back to CHASING is now handled in the attackPlayer method break; } } // Execute current state action this.executeStateAction(deltaTime); // Debug logging (only if debugEnemy is enabled) if (APP_SETTINGS.controls.debugEnemy) { this.lastDebugLogTime += deltaTime; if (this.lastDebugLogTime >= this.debugLogInterval) { this.logDebugInfo(); this.lastDebugLogTime = 0; } } } executeStateAction(deltaTime) { switch (this.currentState) { case this.states.CHASING: this.chasePlayer(deltaTime); break; case this.states.ATTACKING: this.attackPlayer(deltaTime); break; } } chasePlayer(deltaTime) { if (APP_SETTINGS.controls.enableEnemyPathfinding) { this.lastPathUpdateTime += deltaTime; if (this.lastPathUpdateTime >= this.pathUpdateInterval) { this.calculatePathToPlayer(); this.lastPathUpdateTime = 0; this.currentPathIndex = 0; } this.moveAlongPath(deltaTime); } else { // Simple direct movement towards the player if (window.Player) { const direction = new CANNON.Vec3() .copy(window.Player.getPosition()) .vsub(this.body.position) .unit(); const desiredVelocity = direction.scale(this.moveSpeed); this.body.velocity.set(desiredVelocity.x, this.body.velocity.y, desiredVelocity.z); } } } distanceToPlayer() { if (window.Player) { return this.mesh.position.distanceTo(window.Player.mesh.position); } return Infinity; } transitionToState(newState) { this.onExitState(this.currentState); this.currentState = newState; this.onEnterState(newState); } attackPlayer(deltaTime) { if (!this.isLunging) { // Start the lunge this.isLunging = true; this.attackTimer = 0; this.originalPosition = this.body.position.clone(); this.targetPosition = window.Player ? window.Player.getPosition() : this.originalPosition.clone(); this.targetPosition.y = this.originalPosition.y; // Keep the same height this.body.velocity.setZero(); // Stop ongoing movement // Play enemy attack sound if (window.AudioManager) { window.AudioManager.playSound('enemy_attack'); } } this.attackTimer += deltaTime; const attackProgress = this.attackTimer / this.attackDuration; let newPosition; if (attackProgress <= 0.5) { // First half: move towards the player newPosition = this.lerpPosition(this.originalPosition, this.targetPosition, attackProgress * 2); } else { // Second half: move back to the original position newPosition = this.lerpPosition(this.targetPosition, this.originalPosition, (attackProgress - 0.5) * 2); } // Use setPosition to update the enemy's position this.setPosition(newPosition); if (this.attackTimer >= this.attackDuration) { // Attack finished this.setPosition(this.originalPosition); this.body.velocity.setZero(); this.isLunging = false; this.transitionToState(this.states.CHASING); } } lerpPosition(start, end, t) { return new CANNON.Vec3( start.x + (end.x - start.x) * t, start.y + (end.y - start.y) * t, start.z + (end.z - start.z) * t ); } onEnterState(newState) { switch (newState) { case this.states.ATTACKING: this.attackTimer = 0; this.setColor(0xFF6666); // Lighter red color for attacking state this.body.velocity.setZero(); // Stop ongoing movement break; case this.states.CHASING: // Reset any chasing-specific variables if needed break; } } onExitState(oldState) { switch (oldState) { case this.states.ATTACKING: // Reset attack-related variables if needed this.setColor(0x00FF00); // Green color when exiting attacking state this.isLunging = false; break; case this.states.CHASING: // Clean up any chasing-specific variables if needed break; } } takeDamage(amount) { this.health -= amount; if (this.health <= 0) { this.die(); } } die() { if (!this.isDead) { this.isDead = true; console.log("Enemy has died!"); // Queue the enemy for removal instead of immediate removal window.EnemyManager.queueEnemyForRemoval(this); // You might want to add more cleanup or death effects here } } calculatePathToPlayer() { if (!window.Player || !this.world.tileMap) { return; } const startNode = this.astar.findNearestNode(this.mesh.position); const goalNode = this.astar.findNearestNode(window.Player.mesh.position); if (!startNode || !goalNode) { return; } this.currentPath = this.astar.findPath(startNode, goalNode); if (APP_SETTINGS.controls.visualizeEnemyPaths) { this.visualizePath(); } } logDebugInfo() {} moveAlongPath(deltaTime) { if (!this.currentPath || this.currentPathIndex >= this.currentPath.length) { return; } const targetPosition = this.currentPath[this.currentPathIndex]; const currentPos = this.body.position; // Lerp the position const lerpedPosition = new CANNON.Vec3( currentPos.x + (targetPosition.x - currentPos.x) * this.lerpFactor, currentPos.y, currentPos.z + (targetPosition.z - currentPos.z) * this.lerpFactor ); // Calculate direction and velocity based on lerped position const direction = lerpedPosition.vsub(currentPos).unit(); const desiredVelocity = direction.scale(this.moveSpeed); this.body.velocity.set(desiredVelocity.x, this.body.velocity.y, desiredVelocity.z); // Check if we've reached the target const distanceToTarget = currentPos.distanceTo(new CANNON.Vec3(targetPosition.x, currentPos.y, targetPosition.z)); if (distanceToTarget < 1) { // Smaller threshold for more precise movement this.currentPathIndex++; if (this.currentPathIndex >= this.currentPath.length) { this.body.velocity.setZero(); this.calculatePathToPlayer(); } } } } class EnemyManager { constructor(world) { this.world = world; this.enemies = []; this.removalQueue = []; this.totalEnemiesSpawned = 0; } createEnemy(position) { this.totalEnemiesSpawned++; const enemy = new Enemy(this.world, position, this, this.totalEnemiesSpawned); this.enemies.push(enemy); return enemy; } updateEnemies(deltaTime) { this.enemies.forEach(enemy => enemy.update(deltaTime)); } queueEnemyForRemoval(enemy) { this.removalQueue.push(enemy); } processRemovalQueue() { this.removalQueue.forEach(enemy => { const index = this.enemies.indexOf(enemy); if (index !== -1) { this.enemies.splice(index, 1); WorldScene.remove(enemy.mesh); this.world.physicsWorld.remove(enemy.body); window.EnemySpawner.notifyEnemyDeath(); } }); this.removalQueue = []; } } class AStar { constructor(tileMap) { this.tileMap = tileMap; } findNearestNode(position) { let nearestNode = null; let minDistance = Infinity; for (const node of this.tileMap.navMesh.grid) { const distance = position.distanceTo(node); if (distance < minDistance) { minDistance = distance; nearestNode = node; } } return nearestNode; } heuristic(a, b) { return a.distanceTo(b); } getNeighbors(node) { const gridSize = APP_SETTINGS.TILEMAP_CONFIG.tileSize; return this.tileMap.navMesh.grid.filter(neighbor => Math.abs(neighbor.x - node.x) <= gridSize && Math.abs(neighbor.z - node.z) <= gridSize && neighbor !== node ); } findPath(start, goal) { const openSet = [start]; const cameFrom = new Map(); const gScore = new Map(); const fScore = new Map(); gScore.set(start, 0); fScore.set(start, this.heuristic(start, goal)); while (openSet.length > 0) { const current = openSet.reduce((a, b) => fScore.get(a) < fScore.get(b) ? a : b); if (current.equals(goal)) { return this.reconstructPath(cameFrom, current); } openSet.splice(openSet.indexOf(current), 1); for (const neighbor of this.getNeighbors(current)) { const tentativeGScore = gScore.get(current) + current.distanceTo(neighbor); if (!gScore.has(neighbor) || tentativeGScore < gScore.get(neighbor)) { cameFrom.set(neighbor, current); gScore.set(neighbor, tentativeGScore); fScore.set(neighbor, gScore.get(neighbor) + this.heuristic(neighbor, goal)); if (!openSet.includes(neighbor)) { openSet.push(neighbor); } } } } return null; } reconstructPath(cameFrom, current) { const path = [current]; while (cameFrom.has(current)) { current = cameFrom.get(current); path.unshift(current); } return path; } visualizePath(path) { // Create a tube geometry for a consistently thick line const tubeGeometry = new THREE.TubeGeometry( new THREE.CatmullRomCurve3(path), path.length * 10, // number of tube segments 0.1, // tube radius 8, // number of radial segments false // closed curve ); const tubeMaterial = new THREE.MeshBasicMaterial({ color: 0x0000ff // Blue color }); const tubeMesh = new THREE.Mesh(tubeGeometry, tubeMaterial); tubeMesh.position.y = 0.2; // Slightly above the ground WorldScene.add(tubeMesh); return tubeMesh; } } class InputHandler { constructor() { this.keys = { w: false, a: false, s: false, d: false }; this.mouseDown = false; this.initKeyboardListeners(); this.raycaster = new THREE.Raycaster(); this.mouse = new THREE.Vector2(); this.initMouseListeners(); } // initControls method removed initKeyboardListeners() { document.addEventListener('keydown', (event) => this.onKeyDown(event)); document.addEventListener('keyup', (event) => this.onKeyUp(event)); } onKeyDown(event) { if (event.key in this.keys) { this.keys[event.key] = true; } } onKeyUp(event) { if (event.key in this.keys) { this.keys[event.key] = false; } } update() { this.updateRaycaster(); } initMouseListeners() { GameRenderer.renderer.domElement.addEventListener('mousemove', (event) => this.onMouseMove(event)); GameRenderer.renderer.domElement.addEventListener('mousedown', (event) => { if (!this.isOverMapEditorUI(event)) { this.mouseDown = true; } }); GameRenderer.renderer.domElement.addEventListener('mouseup', () => this.mouseDown = false); GameRenderer.renderer.domElement.addEventListener('mouseleave', () => this.mouseDown = false); } isOverMapEditorUI(event) { const mapEditorUI = document.getElementById('mapEditorUI'); if (mapEditorUI) { const rect = mapEditorUI.getBoundingClientRect(); return ( event.clientX >= rect.left && event.clientX <= rect.right && event.clientY >= rect.top && event.clientY <= rect.bottom ); } return false; } onMouseMove(event) { const rect = GameRenderer.renderer.domElement.getBoundingClientRect(); this.mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1; this.mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1; } updateRaycaster() { this.raycaster.setFromCamera(this.mouse, MainCamera); if (GameWorld && GameWorld.tileMap) { const tileMapMesh = GameWorld.tileMap.render(); const intersects = this.raycaster.intersectObjects(tileMapMesh.children, true); if (intersects.length > 0) { const intersectionPoint = intersects[0].point; // Update player facing direction if (window.Player) { window.Player.updateFacingDirection(intersectionPoint); } // You can add additional logic here for cursor indication if needed } } } } class GameUIManager { constructor() { this.hud = null; this.infoElement = null; } init() { this.createHUD(); } createHUD() { this.hud = document.createElement('div'); this.hud.id = 'gameHUD'; this.hud.style.cssText = ` position: absolute; top: 0; left: 0; width: 100%; padding: 10px; background-color: rgba(0, 0, 0, 0.5); color: white; font-size: 24px; font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; z-index: 1000; `; this.infoElement = document.createElement('div'); this.infoElement.id = 'gameInfo'; this.infoElement.style.cssText = ` text-align: center; `; this.hud.appendChild(this.infoElement); document.body.appendChild(this.hud); } update(deltaTime) { if (window.EnemySpawner) { let infoText; switch (window.EnemySpawner.isWaitingBetweenWaves) { case true: const remainingTime = Math.ceil(APP_SETTINGS.enemySpawner.timeBetweenWaves - window.EnemySpawner.waveTimer); infoText = `Next wave in: ${remainingTime}s`; break; case false: const currentWave = window.EnemySpawner.currentWave + 1; const totalWaves = APP_SETTINGS.enemySpawner.waves.length; infoText = `Wave: ${currentWave}/${totalWaves}`; break; } this.infoElement.textContent = infoText; } } } class App { constructor() { this.createRenderDivs(); this.clock = new THREE.Clock(); this.initialLoadingComplete = false; this.spriteSheet = null; this.deltaTime = 0; this.init(); } init() { window.LoadingManager = new THREE.LoadingManager(); this.setupLoadingManager(); window.Textures = TextureManager(); window.Materials = MaterialManager(); window.Meshes = MeshManager(); window.Lights = LightingManager(); window.GameWorld = new World(); window.Input = new InputHandler(); window.AudioManager = new AudioManager(); window.BulletManager = new BulletManager(); window.EnemySpawner = new EnemySpawner(); window.EnemyManager = new EnemyManager(GameWorld); // Initialize TileMapManager window.TileMapManager = new TileMapManager(); // Create initial tilemap if the control variable is true if (APP_SETTINGS.controls.generateTileMap) { GameWorld.createTileMap(); } window.Player = new Player(GameWorld); // Set up GameWorld reference for other components if (window.Player) window.Player.world = GameWorld; if (window.Enemy) window.Enemy.prototype.world = GameWorld; if (window.Bullet) window.Bullet.prototype.world = GameWorld; if (window.Gun) window.Gun.prototype.world = GameWorld; if (window.AudioManager) { GameWorld.audioManager = window.AudioManager; console.log('AudioManager reference set up for GameWorld'); } console.log('GameWorld reference set up for components'); // Create a single enemy only if the control variable is true if (APP_SETTINGS.controls.createSingleEnemyOnBoot) { window.EnemyManager.createEnemy(new THREE.Vector3(6, -19.5, 6)); console.log("Single enemy created on boot."); } else { console.log("Single enemy creation on boot is disabled."); } // Start the first wave only if the control variable is true if (APP_SETTINGS.controls.startEnemyWavesOnBoot) { window.EnemySpawner.startWave(); } else { console.log("Enemy wave start is disabled. Set APP_SETTINGS.controls.startEnemyWavesOnBoot to true to enable."); } // Wait for textures to load before creating UI elements this.waitForTexturesAndInitUI(); this.addEventListeners(); window.GameUIManager = new GameUIManager(); window.GameUIManager.init(); // Create map editor UI this.createMapEditorUI(); this.setupUIEventListeners(); } waitForTexturesAndInitUI() { Textures.loadTextures().then(() => { console.log('All textures loaded successfully'); // Initialize other UI elements here if needed }).catch(error => { console.error('Error loading textures:', error); }); } setupLoadingManager() { LoadingManager.onProgress = (url, itemsLoaded, itemsTotal) => { const progress = (itemsLoaded / itemsTotal * 100).toFixed(0); loadingScreen.innerHTML = `Loading... ${progress}%`; }; LoadingManager.onLoad = () => { this.initialLoadingComplete = true; loadingScreen.style.display = 'none'; if (GameWorld) { // Check if the skybox has been loaded if (GameWorld.skybox.skyMesh) { console.log("Skybox loaded successfully"); } else { console.warn("Skybox not loaded yet"); } } }; LoadingManager.onError = (url) => { console.error('Error loading:', url); }; } addEventListeners() { addEventListener('resize', this.onWindowResize.bind(this)); const resizeObserver = new ResizeObserver(this.onWindowResize.bind(this)); resizeObserver.observe(parentDiv); } onWindowResize() { const width = parentDiv.clientWidth; const height = parentDiv.clientHeight; if (GameWorld) { MainCamera.aspect = width / height; MainCamera.updateProjectionMatrix(); GameRenderer.setSize(width, height); } } animate() { requestAnimationFrame(this.animate.bind(this)); this.deltaTime = Math.min(this.clock.getDelta(), 0.1); if (this.initialLoadingComplete) { GameWorld.update(this.deltaTime); Input.update(); if (window.Player) { window.Player.update(); } if (this.worldClock) { this.worldClock.update(GameWorld.Time); } else { //console.warn('WorldClock not initialized'); } Input.updateRaycaster(); // Update the raycaster in each frame window.EnemySpawner.update(this.deltaTime); // Update the EnemySpawner window.GameUIManager.update(this.deltaTime); // Update the GameUIManager } } start() { this.animate(); } createRenderDivs() { // Can create global variables by assigning them to window.variableName. window.parentDiv = document.getElementById('renderDiv'); window.canvas = document.getElementById('threeRenderCanvas'); window.loadingScreen = document.createElement('div'); if (!canvas) { canvas = document.createElement('canvas'); canvas.id = 'threeRenderCanvas'; parentDiv.appendChild(canvas); } // Create loading screen loadingScreen.style.position = 'absolute'; loadingScreen.style.top = '0'; loadingScreen.style.left = '0'; loadingScreen.style.width = '100%'; loadingScreen.style.height = '100%'; loadingScreen.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; loadingScreen.style.color = 'white'; loadingScreen.style.display = 'flex'; loadingScreen.style.justifyContent = 'center'; loadingScreen.style.alignItems = 'center'; loadingScreen.style.fontSize = '24px'; loadingScreen.innerHTML = 'Loading... 0%'; parentDiv.appendChild(loadingScreen); window.uiDiv = document.createElement('div'); uiDiv.id = 'uiDiv'; uiDiv.style.position = 'absolute'; uiDiv.style.top = '0'; uiDiv.style.left = '0'; uiDiv.style.width = '100%'; uiDiv.style.height = '100%'; uiDiv.style.userSelect = 'none'; // Disable text selection uiDiv.style.webkitUserSelect = 'none'; // For Safari uiDiv.style.msUserSelect = 'none'; // For IE/Edge uiDiv.style.pointerEvents = 'none'; // Initially set to none // Apply the same styles to parentDiv parentDiv.style.userSelect = 'none'; parentDiv.style.webkitUserSelect = 'none'; parentDiv.style.msUserSelect = 'none'; parentDiv.appendChild(uiDiv); this.setupUIEventListeners(); } setupUIEventListeners() { const mapEditorUI = document.getElementById('mapEditorUI'); if (mapEditorUI) { mapEditorUI.addEventListener('mouseenter', () => this.toggleCanvasPointerEvents(false)); mapEditorUI.addEventListener('mouseleave', () => this.toggleCanvasPointerEvents(true)); } } toggleCanvasPointerEvents(enable) { if (canvas) { canvas.style.pointerEvents = enable ? 'auto' : 'none'; } } testMapRegeneration() { if (APP_SETTINGS.controls.autoTestMapRegeneration) { setTimeout(() => { console.log("Starting map regeneration test..."); // Increase map size by 5 in both dimensions APP_SETTINGS.mapEditor.newWidth = APP_SETTINGS.TILEMAP_CONFIG.width + 5; APP_SETTINGS.mapEditor.newHeight = APP_SETTINGS.TILEMAP_CONFIG.height + 5; // Enable map editing mode APP_SETTINGS.controls.editMap = true; // Regenerate the map GameWorld.regenerateMap(); console.log("Map regenerated with new dimensions:", APP_SETTINGS.mapEditor.newWidth, APP_SETTINGS.mapEditor.newHeight); // Disable map editing mode after regeneration APP_SETTINGS.controls.editMap = false; }, 1000); // 1 second delay } else { console.log("Automated map regeneration test is disabled."); } } createMapEditorUI() { if (!APP_SETTINGS.controls.showMapEditorUI) return; const uiContainer = document.createElement('div'); uiContainer.id = 'mapEditorUI'; uiContainer.style.cssText = ` position: absolute; top: 5px; left: 5px; background-color: rgba(0, 0, 0, 0.7); color: white; padding: 10px; border-radius: 3px; font-family: Arial, sans-serif; pointer-events: auto; width: 180px; height: auto; min-height: 100px; font-size: 7px; `; uiContainer.innerHTML = `

Map Editor

Map Width: ${APP_SETTINGS.TILEMAP_CONFIG.width}

Map Height: ${APP_SETTINGS.TILEMAP_CONFIG.height}

Obstacle Count: ${APP_SETTINGS.TILEMAP_CONFIG.obstacleCount}

Tile Size: ${APP_SETTINGS.TILEMAP_CONFIG.tileSize}

Min Obstacle Height: ${APP_SETTINGS.TILEMAP_CONFIG.obstacleMinHeight}

Max Obstacle Height: ${APP_SETTINGS.TILEMAP_CONFIG.obstacleMaxHeight}

Ground Color:

Obstacle Foreground Color:

Obstacle Background Color:

`; uiDiv.appendChild(uiContainer); // Add event listeners const mapWidthSlider = document.getElementById('mapWidth'); const mapHeightSlider = document.getElementById('mapHeight'); const obstacleCountSlider = document.getElementById('obstacleCount'); const tileSizeSlider = document.getElementById('tileSize'); const obstacleMinHeightSlider = document.getElementById('obstacleMinHeight'); const obstacleMaxHeightSlider = document.getElementById('obstacleMaxHeight'); const groundColorInput = document.getElementById('groundColor'); const obstacleForegroundColorInput = document.getElementById('obstacleForegroundColor'); const obstacleBackgroundColorInput = document.getElementById('obstacleBackgroundColor'); const regenerateButton = document.getElementById('regenerateMap'); mapWidthSlider.addEventListener('input', (e) => { document.getElementById('mapWidthValue').textContent = e.target.value; APP_SETTINGS.TILEMAP_CONFIG.width = parseInt(e.target.value); }); mapHeightSlider.addEventListener('input', (e) => { document.getElementById('mapHeightValue').textContent = e.target.value; APP_SETTINGS.TILEMAP_CONFIG.height = parseInt(e.target.value); }); obstacleCountSlider.addEventListener('input', (e) => { document.getElementById('obstacleCountValue').textContent = e.target.value; APP_SETTINGS.TILEMAP_CONFIG.obstacleCount = parseInt(e.target.value); }); tileSizeSlider.addEventListener('input', (e) => { document.getElementById('tileSizeValue').textContent = parseFloat(e.target.value).toFixed(1); APP_SETTINGS.TILEMAP_CONFIG.tileSize = parseFloat(e.target.value); }); groundColorInput.addEventListener('input', (e) => { APP_SETTINGS.TILEMAP_CONFIG.groundColor = parseInt(e.target.value.slice(1), 16); this.updateGroundColor(); }); obstacleForegroundColorInput.addEventListener('input', (e) => { APP_SETTINGS.TILEMAP_CONFIG.obstacleForegroundColor = parseInt(e.target.value.slice(1), 16); this.updateObstacleColors(); }); obstacleBackgroundColorInput.addEventListener('input', (e) => { APP_SETTINGS.TILEMAP_CONFIG.obstacleBackgroundColor = parseInt(e.target.value.slice(1), 16); this.updateObstacleColors(); }); obstacleMinHeightSlider.addEventListener('input', (e) => { document.getElementById('obstacleMinHeightValue').textContent = parseFloat(e.target.value).toFixed(1); APP_SETTINGS.TILEMAP_CONFIG.obstacleMinHeight = parseFloat(e.target.value); }); obstacleMaxHeightSlider.addEventListener('input', (e) => { document.getElementById('obstacleMaxHeightValue').textContent = parseFloat(e.target.value).toFixed(1); APP_SETTINGS.TILEMAP_CONFIG.obstacleMaxHeight = parseFloat(e.target.value); }); regenerateButton.addEventListener('click', () => { APP_SETTINGS.controls.editMap = true; GameWorld.regenerateMap(); APP_SETTINGS.controls.editMap = false; }); } updateGroundColor() { const groundColor = new THREE.Color(APP_SETTINGS.TILEMAP_CONFIG.groundColor); Materials.getMaterial('tileMaterial').color.copy(groundColor); } updateObstacleColors() { if (GameWorld && GameWorld.tileMap) { GameWorld.tileMap.obstacles.forEach(obstacle => obstacle.updateColor()); } } } class AudioManager { constructor() { this.audioContext = new(window.AudioContext || window.webkitAudioContext)(); this.sounds = new Map(); this.music = null; this.musicGainNode = this.audioContext.createGain(); this.sfxGainNode = this.audioContext.createGain(); this.musicGainNode.connect(this.audioContext.destination); this.sfxGainNode.connect(this.audioContext.destination); this.loadSounds(); } loadSounds() { const loadPromises = []; for (const category in SOUND_ASSETS) { for (const soundName in SOUND_ASSETS[category]) { const soundData = SOUND_ASSETS[category][soundName]; loadPromises.push(this.loadSound(soundName, soundData.url, soundData.volume)); } } return Promise.all(loadPromises) .then(() => console.log('All sounds loaded successfully')) .catch(error => console.error('Error loading sounds:', error)); } loadSound(key, url, volume) { return fetch(url) .then(response => response.arrayBuffer()) .then(arrayBuffer => this.audioContext.decodeAudioData(arrayBuffer)) .then(audioBuffer => { this.sounds.set(key, { buffer: audioBuffer, volume: volume }); console.log(`Sound loaded: ${key}`); }) .catch(error => console.error('Error loading sound:', error)); } playSound(key, loop = false) { const soundData = this.sounds.get(key); if (soundData) { const source = this.audioContext.createBufferSource(); source.buffer = soundData.buffer; source.loop = loop; const gainNode = this.audioContext.createGain(); gainNode.gain.setValueAtTime(soundData.volume, this.audioContext.currentTime); source.connect(gainNode); gainNode.connect(this.sfxGainNode); source.start(); return source; } else { console.warn(`Sound not found: ${key}`); return null; } } playMusic(key) { const music = this.sounds.get(key); if (music) { if (this.music) { this.music.stop(); } this.music = this.audioContext.createBufferSource(); this.music.buffer = music; this.music.loop = true; this.music.connect(this.musicGainNode); this.music.start(); } else { console.warn(`Music not found: ${key}`); } } stopMusic() { if (this.music) { this.music.stop(); this.music = null; } } setMusicVolume(volume) { this.musicGainNode.gain.setValueAtTime(volume, this.audioContext.currentTime); } setSFXVolume(volume) { this.sfxGainNode.gain.setValueAtTime(volume, this.audioContext.currentTime); } } class EnemySpawner { constructor() { this.currentWave = 0; this.enemiesSpawned = 0; this.enemiesRemaining = 0; this.timeSinceLastSpawn = 0; this.isSpawning = false; this.availableSpawnPositions = []; this.timeBetweenWaves = APP_SETTINGS.enemySpawner.timeBetweenWaves; this.waveTimer = 0; this.isWaitingBetweenWaves = false; this.allWavesCompleted = false; this.selectedSpawnPosition = null; } updateAvailableSpawnPositions() { this.availableSpawnPositions = []; const tileMap = GameWorld.tileMap; if (!tileMap) return; const config = APP_SETTINGS.TILEMAP_CONFIG; const offsetX = (tileMap.width * config.tileSize) / 2; const offsetZ = (tileMap.height * config.tileSize) / 2; const playerPosition = window.Player ? window.Player.getPosition() : new THREE.Vector3(); const minDistanceFromPlayer = APP_SETTINGS.enemySpawner.spawnSettings.minDistanceFromPlayer; for (let x = 0; x < tileMap.width; x++) { for (let z = 0; z < tileMap.height; z++) { const worldX = x * config.tileSize - offsetX + config.tileSize / 2; const worldZ = z * config.tileSize - offsetZ + config.tileSize / 2; const position = new THREE.Vector3(worldX, config.baseHeight + 2, worldZ); // Check if the position is not occupied by an obstacle and is far enough from the player if (!tileMap.obstacles.some(obstacle => obstacle.mesh.position.x === position.x && obstacle.mesh.position.z === position.z) && position.distanceTo(playerPosition) >= minDistanceFromPlayer) { this.availableSpawnPositions.push(position); } } } } startWave() { if (this.allWavesCompleted) { console.log("All waves have already been completed!"); return; } if (this.currentWave < APP_SETTINGS.enemySpawner.waves.length) { this.isSpawning = true; this.enemiesSpawned = 0; this.enemiesRemaining = APP_SETTINGS.enemySpawner.waves[this.currentWave].enemyCount; this.updateAvailableSpawnPositions(); console.log(`Starting wave ${this.currentWave + 1}`); console.log(`Available spawn positions: ${this.availableSpawnPositions.length}`); } else { this.allWavesCompleted = true; console.log("All waves completed!"); } } update(deltaTime) { if (this.allWavesCompleted) { // All waves are completed, no need to update return; } if (this.isWaitingBetweenWaves) { this.waveTimer += deltaTime; if (this.waveTimer >= this.timeBetweenWaves) { this.isWaitingBetweenWaves = false; this.startWave(); } return; } if (!this.isSpawning) return; this.timeSinceLastSpawn += deltaTime; const currentWaveConfig = APP_SETTINGS.enemySpawner.waves[this.currentWave]; const allEnemiesSpawned = this.enemiesSpawned >= currentWaveConfig.enemyCount; if (this.timeSinceLastSpawn >= currentWaveConfig.spawnInterval && !allEnemiesSpawned) { if (!this.selectedSpawnPosition) { this.selectSpawnPosition(); } this.spawnEnemy(); this.timeSinceLastSpawn = 0; this.selectedSpawnPosition = null; } else if (!this.selectedSpawnPosition && !allEnemiesSpawned) { this.selectSpawnPosition(); } this.checkWaveCompletion(); // Update flashing tiles if (this.selectedSpawnPosition) { const tileX = Math.floor((this.selectedSpawnPosition.x + (GameWorld.tileMap.width * APP_SETTINGS.TILEMAP_CONFIG.tileSize) / 2) / APP_SETTINGS.TILEMAP_CONFIG.tileSize); const tileZ = Math.floor((this.selectedSpawnPosition.z + (GameWorld.tileMap.height * APP_SETTINGS.TILEMAP_CONFIG.tileSize) / 2) / APP_SETTINGS.TILEMAP_CONFIG.tileSize); const selectedTile = GameWorld.tileMap.getTileAt(tileX, tileZ); if (selectedTile) { selectedTile.flash(deltaTime); } } } spawnEnemy() { if (this.selectedSpawnPosition) { const spawnPosition = this.selectedSpawnPosition.clone(); spawnPosition.y = APP_SETTINGS.TILEMAP_CONFIG.baseHeight + 2; window.EnemyManager.createEnemy(spawnPosition); this.enemiesSpawned++; console.log(`Enemy spawned at position: (${spawnPosition.x.toFixed(2)}, ${spawnPosition.y.toFixed(2)}, ${spawnPosition.z.toFixed(2)})`); // Stop flashing and reset the tile state to normal after spawning const tileX = Math.floor((spawnPosition.x + (GameWorld.tileMap.width * APP_SETTINGS.TILEMAP_CONFIG.tileSize) / 2) / APP_SETTINGS.TILEMAP_CONFIG.tileSize); const tileZ = Math.floor((spawnPosition.z + (GameWorld.tileMap.height * APP_SETTINGS.TILEMAP_CONFIG.tileSize) / 2) / APP_SETTINGS.TILEMAP_CONFIG.tileSize); const selectedTile = GameWorld.tileMap.getTileAt(tileX, tileZ); if (selectedTile) { selectedTile.stopFlashing(); } this.selectedSpawnPosition = null; } else { console.log("Failed to spawn enemy: No valid spawn position selected"); } } selectSpawnPosition() { let spawnAttempts = 0; const maxSpawnAttempts = APP_SETTINGS.enemySpawner.spawnSettings.maxSpawnAttempts; while (spawnAttempts < maxSpawnAttempts) { if (this.availableSpawnPositions.length === 0) { this.updateAvailableSpawnPositions(); if (this.availableSpawnPositions.length === 0) { console.log("Failed to select spawn position: No available spawn positions"); return; } } const randomIndex = Math.floor(Math.random() * this.availableSpawnPositions.length); const spawnPosition = this.availableSpawnPositions[randomIndex].clone(); if (this.isValidSpawnPosition(spawnPosition)) { this.selectedSpawnPosition = spawnPosition; this.availableSpawnPositions.splice(randomIndex, 1); console.log(`Spawn position selected: (${spawnPosition.x.toFixed(2)}, ${spawnPosition.y.toFixed(2)}, ${spawnPosition.z.toFixed(2)})`); // Start flashing the selected tile const tileX = Math.floor((spawnPosition.x + (GameWorld.tileMap.width * APP_SETTINGS.TILEMAP_CONFIG.tileSize) / 2) / APP_SETTINGS.TILEMAP_CONFIG.tileSize); const tileZ = Math.floor((spawnPosition.z + (GameWorld.tileMap.height * APP_SETTINGS.TILEMAP_CONFIG.tileSize) / 2) / APP_SETTINGS.TILEMAP_CONFIG.tileSize); const selectedTile = GameWorld.tileMap.getTileAt(tileX, tileZ); if (selectedTile) { selectedTile.startFlashing(); } return; } spawnAttempts++; } console.log("Failed to select spawn position: Maximum attempts reached"); } isValidSpawnPosition(position) { if (!window.Player) return true; const playerPosition = window.Player.getPosition(); const minDistance = APP_SETTINGS.enemySpawner.spawnSettings.minDistanceFromPlayer; return position.distanceTo(playerPosition) >= minDistance; } notifyEnemyDeath() { this.enemiesRemaining--; this.checkWaveCompletion(); } checkWaveCompletion() { const currentWaveConfig = APP_SETTINGS.enemySpawner.waves[this.currentWave]; if (this.enemiesSpawned >= currentWaveConfig.enemyCount && this.enemiesRemaining === 0) { this.completeWave(); } } completeWave() { console.log(`Wave ${this.currentWave + 1} completed!`); this.isSpawning = false; if (this.currentWave + 1 < APP_SETTINGS.enemySpawner.waves.length) { this.currentWave++; this.isWaitingBetweenWaves = true; this.waveTimer = 0; console.log(`Waiting ${this.timeBetweenWaves} seconds before starting next wave...`); } else { this.allWavesCompleted = true; console.log("All waves completed!"); // Here you can add any additional logic for when all waves are completed } } } class Tile { constructor(x, z, mapWidth, mapHeight) { this.x = x; this.z = z; this.mapWidth = mapWidth; this.mapHeight = mapHeight; this.state = 'normal'; this.material = this.createMaterial(); this.mesh = this.createMesh(); this.body = this.createPhysicsBody(); } createMaterial() { const config = APP_SETTINGS.TILEMAP_CONFIG; return new THREE.MeshStandardMaterial({ color: new THREE.Color(config.groundColor), roughness: 0.8, metalness: 0.2 }); } createMesh() { const config = APP_SETTINGS.TILEMAP_CONFIG; const geometry = new THREE.PlaneGeometry(config.tileSize, config.tileSize); const mesh = new THREE.Mesh(geometry, this.material); const offsetX = (this.mapWidth * config.tileSize) / 2; const offsetZ = (this.mapHeight * config.tileSize) / 2; mesh.position.set( this.x * config.tileSize - offsetX + config.tileSize / 2, config.baseHeight, this.z * config.tileSize - offsetZ + config.tileSize / 2 ); mesh.rotation.x = -Math.PI / 2; // Rotate to lay flat mesh.receiveShadow = true; mesh.userData.isRaycastable = true; // Mark the tile as raycastable return mesh; } createPhysicsBody() { const config = APP_SETTINGS.TILEMAP_CONFIG; const shape = new CANNON.Box(new CANNON.Vec3(config.tileSize / 2, 0.1, config.tileSize / 2)); const tileMaterial = new CANNON.Material('tileMaterial'); const offsetX = (config.width * config.tileSize) / 2; const offsetZ = (config.height * config.tileSize) / 2; const body = new CANNON.Body({ mass: 0, // Static body shape: shape, position: new CANNON.Vec3( this.x * config.tileSize - offsetX + config.tileSize / 2, config.baseHeight, this.z * config.tileSize - offsetZ + config.tileSize / 2 ), material: tileMaterial, collisionFilterGroup: APP_SETTINGS.physics.collisionGroups.default, collisionFilterMask: -1 // Collide with everything }); body.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), -Math.PI / 2); // Create contact material between tile and player const playerMaterial = new CANNON.Material('playerMaterial'); const tilePlayerContact = new CANNON.ContactMaterial(tileMaterial, playerMaterial, { friction: APP_SETTINGS.physics.defaultContactMaterial.friction, restitution: APP_SETTINGS.physics.defaultContactMaterial.restitution }); GameWorld.physicsWorld.addContactMaterial(tilePlayerContact); if (APP_SETTINGS.controls.debugMapGenerator) { console.log(`Created physics body for tile at (${this.x * config.tileSize}, ${config.baseHeight}, ${this.z * config.tileSize})`); } return body; } setState(state) { this.state = state; this.updateColor(); } updateColor() { const config = APP_SETTINGS.TILEMAP_CONFIG; switch (this.state) { case 'spawning': this.material.color.setHex(0xff0000); // Red color break; case 'normal': default: this.material.color.setHex(config.groundColor); break; } } startFlashing() { this.isFlashing = true; this.flashTimer = 0; this.flashState = true; } stopFlashing() { this.isFlashing = false; this.setState('normal'); } easeInOutSine(t) { return -(Math.cos(Math.PI * t) - 1) / 2; } flash(deltaTime) { if (!this.isFlashing) return; this.flashTimer += deltaTime; const cycleProgress = (this.flashTimer % APP_SETTINGS.enemySpawner.tileFlashInterval) / APP_SETTINGS.enemySpawner.tileFlashInterval; const easedProgress = this.easeInOutSine(cycleProgress); const groundColor = new THREE.Color(APP_SETTINGS.TILEMAP_CONFIG.groundColor); const flashColor = new THREE.Color(0xff0000); this.material.color.lerpColors(groundColor, flashColor, easedProgress); if (this.flashTimer >= APP_SETTINGS.enemySpawner.tileFlashInterval) { this.flashTimer %= APP_SETTINGS.enemySpawner.tileFlashInterval; } } } class TileMap { constructor(width, height) { this.width = width; this.height = height; this.tiles = []; this.mapMesh = new THREE.Group(); this.obstacles = []; this.createTiles(); this.navMesh = new NavMesh(this); } update(deltaTime) { // Update tiles this.tiles.forEach(tile => { if (tile.isFlashing) { tile.flash(deltaTime); } }); // Update obstacles this.obstacles.forEach(obstacle => obstacle.update()); } createTiles() { for (let x = 0; x < this.width; x++) { for (let z = 0; z < this.height; z++) { const tile = new Tile(x, z, this.width, this.height); this.tiles.push(tile); this.mapMesh.add(tile.mesh); // Add the tile's physics body to the physics world GameWorld.physicsWorld.addBody(tile.body); } } } getTileAt(x, z) { return this.tiles.find(tile => tile.x === x && tile.z === z); } render() { return this.mapMesh; } spawnObstacle(x, z) { const obstacle = new Obstacle(this, x, z); this.obstacles.push(obstacle); this.mapMesh.add(obstacle.mesh); return obstacle; } removeObstacle(obstacle) { const index = this.obstacles.indexOf(obstacle); if (index !== -1) { obstacle.remove(); this.obstacles.splice(index, 1); } } updateObstacles() { this.obstacles.forEach(obstacle => obstacle.update()); } } class TileMapGenerator { constructor() { this.updateDimensions(); } updateDimensions() { const config = APP_SETTINGS.TILEMAP_CONFIG; this.width = config.width; this.height = config.height; } generateMap() { let tilemap; let isAccessible = false; let attempts = 0; const maxAttempts = 20; // Limit the number of regeneration attempts while (!isAccessible && attempts < maxAttempts) { this.updateDimensions(); this.createTileMaterial(); tilemap = new TileMap(this.width, this.height); // Generate random obstacles using Fisher-Yates shuffle const obstacleCount = APP_SETTINGS.TILEMAP_CONFIG.obstacleCount; const availableTiles = this.getAvailableTiles(tilemap); const shuffledTiles = this.fisherYatesShuffle(availableTiles); for (let i = 0; i < obstacleCount && i < shuffledTiles.length; i++) { const [x, z] = shuffledTiles[i]; tilemap.spawnObstacle(x, z); } // Check map accessibility isAccessible = this.checkMapAccessibility(tilemap); attempts++; if (!isAccessible) { console.log(`Map not fully accessible. Regenerating... (Attempt ${attempts})`); // Clean up the current tilemap before regenerating tilemap.obstacles.forEach(obstacle => obstacle.remove()); tilemap.tiles.forEach(tile => GameWorld.physicsWorld.removeBody(tile.body)); } } if (isAccessible) { // Create NavMesh after generating the tilemap tilemap.navMesh = new NavMesh(tilemap); } else { console.warn(`Failed to generate a fully accessible map after ${maxAttempts} attempts.`); } return tilemap; } checkMapAccessibility(tilemap) { const grid = this.createGrid(tilemap); const startPosition = this.findStartPosition(grid); const visitedPositions = this.floodFill(grid, startPosition); const totalFreeSpaces = this.countFreeSpaces(grid); const isAccessible = visitedPositions === totalFreeSpaces; if (isAccessible) { console.log("Map is fully accessible."); } else { console.log(`Map is not fully accessible. Accessible tiles: ${visitedPositions}/${totalFreeSpaces}`); } return isAccessible; } createGrid(tilemap) { const grid = Array(this.height).fill().map(() => Array(this.width).fill(0)); tilemap.obstacles.forEach(obstacle => { const x = Math.floor((obstacle.mesh.position.x + (this.width * APP_SETTINGS.TILEMAP_CONFIG.tileSize) / 2) / APP_SETTINGS.TILEMAP_CONFIG.tileSize); const z = Math.floor((obstacle.mesh.position.z + (this.height * APP_SETTINGS.TILEMAP_CONFIG.tileSize) / 2) / APP_SETTINGS.TILEMAP_CONFIG.tileSize); grid[z][x] = 1; // Mark obstacle }); return grid; } findStartPosition(grid) { for (let z = 0; z < this.height; z++) { for (let x = 0; x < this.width; x++) { if (grid[z][x] === 0) return { x, z }; } } return null; // Should never happen if the map has at least one free space } floodFill(grid, start) { const stack = [start]; let visitedCount = 0; const visited = Array(this.height).fill().map(() => Array(this.width).fill(false)); while (stack.length > 0) { const { x, z } = stack.pop(); if (x < 0 || x >= this.width || z < 0 || z >= this.height || grid[z][x] === 1 || visited[z][x]) continue; visited[z][x] = true; visitedCount++; stack.push({ x: x + 1, z }, { x: x - 1, z }, { x, z: z + 1 }, { x, z: z - 1 }); } return visitedCount; } countFreeSpaces(grid) { return grid.flat().filter(cell => cell === 0).length; } fisherYatesShuffle(array) { const shuffled = array.slice(); for (let i = shuffled.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]]; } return shuffled; } getAvailableTiles(tilemap) { const availableTiles = []; for (let x = 0; x < this.width; x++) { for (let z = 0; z < this.height; z++) { // Check if the tile is not occupied by an obstacle if (!tilemap.obstacles.some(obstacle => obstacle.mesh.position.x === x && obstacle.mesh.position.z === z)) { availableTiles.push([x, z]); } } } return availableTiles; } // Remove createGridLines method as it's now part of the TileMap class createTileMaterial() { const materialParams = { color: new THREE.Color(APP_SETTINGS.TILEMAP_CONFIG.groundColor), roughness: .1, metalness: .3, // emissive: new THREE.Color(0x222222), // emissiveIntensity: 0.2 }; Materials.create('tileMaterial', 'standard', materialParams); } createGridLines() { const config = APP_SETTINGS.TILEMAP_CONFIG; const material = new THREE.LineBasicMaterial({ color: config.gridLineColor, linewidth: 2 // Set line width to 2 (2x the default) }); const points = []; const offsetX = (this.width * config.tileSize) / 2; const offsetZ = (this.height * config.tileSize) / 2; for (let x = 0; x <= this.width; x++) { const xPos = x * config.tileSize - offsetX; points.push(new THREE.Vector3(xPos, config.gridLineHeight, -offsetZ)); points.push(new THREE.Vector3(xPos, config.gridLineHeight, offsetZ)); } for (let z = 0; z <= this.height; z++) { const zPos = z * config.tileSize - offsetZ; points.push(new THREE.Vector3(-offsetX, config.gridLineHeight, zPos)); points.push(new THREE.Vector3(offsetX, config.gridLineHeight, zPos)); } const geometry = new THREE.BufferGeometry().setFromPoints(points); const gridLines = new THREE.LineSegments(geometry, material); return gridLines; } } class Obstacle { constructor(tileMap, x, z) { this.tileMap = tileMap; this.x = x; this.z = z; this.height = this.generateRandomHeight(); this.mesh = this.createMesh(); this.body = this.createBody(); this.setPosition(x, z); this.updateColor(); } generateRandomHeight() { const config = APP_SETTINGS.TILEMAP_CONFIG; return Math.random() * (config.obstacleMaxHeight - config.obstacleMinHeight) + config.obstacleMinHeight; } createMesh() { const config = APP_SETTINGS.TILEMAP_CONFIG; const geometry = new THREE.BoxGeometry(config.tileSize, this.height, config.tileSize); const material = new THREE.MeshPhongMaterial(); const mesh = new THREE.Mesh(geometry, material); mesh.castShadow = true; mesh.receiveShadow = true; return mesh; } update() { // Sync mesh with physics body if needed this.mesh.position.copy(this.body.position); this.mesh.quaternion.copy(this.body.quaternion); this.updateColor(); } updateColor() { const config = APP_SETTINGS.TILEMAP_CONFIG; const gradientFactor = this.z / (this.tileMap.height - 1); const foregroundColor = new THREE.Color(config.obstacleForegroundColor); const backgroundColor = new THREE.Color(config.obstacleBackgroundColor); const blendedColor = foregroundColor.lerp(backgroundColor, gradientFactor); this.mesh.material.color.set(blendedColor); } createBody() { const config = APP_SETTINGS.TILEMAP_CONFIG; const shape = new CANNON.Box(new CANNON.Vec3(config.tileSize / 2, this.height / 2, config.tileSize / 2)); const body = new CANNON.Body({ mass: 0, // Static body shape: shape, material: new CANNON.Material('obstacle'), collisionFilterGroup: APP_SETTINGS.physics.collisionGroups.obstacle, collisionFilterMask: APP_SETTINGS.physics.collisionGroups.default | APP_SETTINGS.physics.collisionGroups.player | APP_SETTINGS.physics.collisionGroups.enemy | APP_SETTINGS.physics.collisionGroups.bullet }); GameWorld.physicsWorld.addBody(body); return body; } setPosition(x, z) { const config = APP_SETTINGS.TILEMAP_CONFIG; const offsetX = (this.tileMap.width * config.tileSize) / 2; const offsetZ = (this.tileMap.height * config.tileSize) / 2; const posX = x * config.tileSize - offsetX + config.tileSize / 2; const posZ = z * config.tileSize - offsetZ + config.tileSize / 2; const posY = config.baseHeight + this.height / 2; this.mesh.position.set(posX, posY, posZ); this.body.position.set(posX, posY, posZ); this.x = x; this.z = z; this.updateColor(); GameWorld.physicsWorld.dirty = true; } update() { // Sync mesh with physics body if needed this.mesh.position.copy(this.body.position); this.mesh.quaternion.copy(this.body.quaternion); } remove() { // Remove from scene and physics world this.tileMap.mapMesh.remove(this.mesh); GameWorld.physicsWorld.removeBody(this.body); } } class TileMapManager { constructor() { this.maps = []; this.currentMapIndex = -1; } addMap(tileMap) { this.maps.push(tileMap); if (this.currentMapIndex === -1) { this.currentMapIndex = 0; } } getCurrentMap() { return this.maps[this.currentMapIndex]; } switchToMap(index) { if (index >= 0 && index < this.maps.length) { this.currentMapIndex = index; return this.getCurrentMap(); } return null; } removeMap(index) { if (index >= 0 && index < this.maps.length) { this.maps.splice(index, 1); if (this.currentMapIndex >= this.maps.length) { this.currentMapIndex = this.maps.length - 1; } } } getMapCount() { return this.maps.length; } createTileMap() { const mapGenerator = new TileMapGenerator(); const tileMap = mapGenerator.generateMap(); this.addMap(tileMap); WorldScene.add(tileMap.render()); const gridLines = mapGenerator.createGridLines(tileMap); WorldScene.add(gridLines); console.log('TileMap created and added to the scene'); return { tileMap, gridLines }; } destroyMap() { const currentMap = this.getCurrentMap(); if (currentMap) { WorldScene.remove(currentMap.render()); currentMap.tiles.forEach(tile => { GameWorld.physicsWorld.removeBody(tile.body); }); currentMap.obstacles.forEach(obstacle => { GameWorld.physicsWorld.removeBody(obstacle.body); }); currentMap.obstacles = []; if (currentMap.navMesh) { currentMap.navMesh.removeVisualization(); } this.removeMap(this.currentMapIndex); } console.log('TileMap, obstacles, and NavMesh visualization destroyed and removed from the scene'); } regenerateMap() { this.destroyMap(); this.createTileMap(); console.log('TileMap regenerated'); } } window.Game = new App(); Game.start();