// 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 simplest 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 }, 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: true, }, TILEMAP_CONFIG: { width: 12, height: 10, tileSize: 2, baseHeight: -21.5, gridLineHeight: -21.4, // slightly above base height gridLineColor: 0x000000, obstacleCount: 24, // New configuration for number of obstacles }, world: { defaults: { skyColor: 0x4A6D8C, // Darker blue color groundColor: 0xE6F3FF // Very light blue, almost white }, }, 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: 1.5, position: { x: -50, y: 100, z: -50 }, 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.groundColor); 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; this.tileMap = null; this.gridLines = null; } createTileMap() { const mapGenerator = new TileMapGenerator(); this.tileMap = mapGenerator.generateMap(); WorldScene.add(this.tileMap.render()); this.gridLines = mapGenerator.createGridLines(this.tileMap); WorldScene.add(this.gridLines); console.log('TileMap created and added to the scene'); } destroyMap() { if (this.tileMap) { WorldScene.remove(this.tileMap.render()); this.tileMap.tiles.forEach(tile => { this.physicsWorld.removeBody(tile.body); }); // Remove obstacles this.tileMap.obstacles.forEach(obstacle => { this.physicsWorld.removeBody(obstacle.body); }); // Clear the obstacles array this.tileMap.obstacles = []; // Remove NavMesh visualization if it exists if (this.tileMap.navMesh) { this.tileMap.navMesh.removeVisualization(); } this.tileMap = null; } console.log('TileMap, obstacles, and NavMesh visualization destroyed and removed from the scene'); } regenerateMap() { this.destroyMap(); this.createTileMap(); console.log('TileMap regenerated'); } 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) { 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 obstacles if (this.tileMap) { this.tileMap.updateObstacles(); } // 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 halfTileSize = config.tileSize / 2; for (let x = 0; x <= this.tileMap.width; x++) { for (let z = 0; z <= this.tileMap.height; z++) { // Grid intersection points const intersectionX = x * config.tileSize - offsetX; const intersectionZ = z * config.tileSize - offsetZ; this.addPoint(intersectionX, intersectionZ, config.baseHeight); // Tile center points (except for the last row and column) if (x < this.tileMap.width && z < this.tileMap.height) { const centerX = intersectionX + halfTileSize; const centerZ = intersectionZ + halfTileSize; this.addPoint(centerX, centerZ, 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 = 1; // Small buffer to prevent points too close to obstacles 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.1, 8, 8); 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: 0xFF6B8A, // Pinkish red 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) { this.world = world; this.mesh = null; this.body = null; this.createMesh(position); this.createBody(position); this.pathUpdateInterval = 0.5; // 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); } 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); console.log("Enemy body created with collision group:", this.body.collisionFilterGroup); console.log("Enemy collision mask:", this.body.collisionFilterMask); // 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(0xFF69B4); // Pink 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); console.log(`Calculated path with ${this.currentPath ? this.currentPath.length : 0} points`); 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 direction = new CANNON.Vec3() .copy(targetPosition) .vsub(this.body.position) .unit(); const desiredVelocity = direction.scale(this.moveSpeed); this.body.velocity.set(desiredVelocity.x, this.body.velocity.y, desiredVelocity.z); const distanceToTarget = this.body.position.distanceTo(new CANNON.Vec3(targetPosition.x, this.body.position.y, targetPosition.z)); const reachThreshold = 1; // Increased from 0.5 to 0.2 if (distanceToTarget < reachThreshold) { this.currentPathIndex++; console.log(`Enemy reached point ${this.currentPathIndex - 1}. Distance: ${distanceToTarget.toFixed(2)}`); if (this.currentPathIndex >= this.currentPath.length) { this.body.velocity.setZero(); this.calculatePathToPlayer(); // Recalculate path when reaching the end console.log("Recalculating path to player"); } } else if (this.body.velocity.length() < 0.1) { console.log(`Enemy stuck. Distance to target: ${distanceToTarget.toFixed(2)}`); this.currentPathIndex++; if (this.currentPathIndex >= this.currentPath.length) { this.calculatePathToPlayer(); } } } } class EnemyManager { constructor(world) { this.world = world; this.enemies = []; this.removalQueue = []; } createEnemy(position) { const enemy = new Enemy(this.world, position, this); 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; // No path found } 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 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(); // Initialize AudioManager window.AudioManager = new AudioManager(); // Initialize BulletManager globally window.BulletManager = new BulletManager(); // Initialize EnemySpawner window.EnemySpawner = new EnemySpawner(); // Initialize EnemyManager globally window.EnemyManager = new EnemyManager(GameWorld); // Create tilemap if the control variable is true if (APP_SETTINGS.controls.generateTileMap) { GameWorld.createTileMap(); } // Create the player as a global reference 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(); // 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 } } 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: 150px; 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}

`; 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 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); }); regenerateButton.addEventListener('click', () => { APP_SETTINGS.controls.editMap = true; GameWorld.regenerateMap(); APP_SETTINGS.controls.editMap = false; }); } } 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 { static SPAWN_CONFIG = { waves: [{ enemyCount: 5, spawnInterval: 1 }, { enemyCount: 7, spawnInterval: 0.5 }] }; constructor() { this.currentWave = 0; this.enemiesSpawned = 0; this.enemiesRemaining = 0; this.timeSinceLastSpawn = 0; this.isSpawning = false; this.availableSpawnPositions = []; } 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; 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.availableSpawnPositions.push(position); } } } } startWave() { if (this.currentWave < EnemySpawner.SPAWN_CONFIG.waves.length) { this.isSpawning = true; this.enemiesSpawned = 0; this.enemiesRemaining = EnemySpawner.SPAWN_CONFIG.waves[this.currentWave].enemyCount; this.updateAvailableSpawnPositions(); console.log(`Starting wave ${this.currentWave + 1}`); console.log(`Available spawn positions: ${this.availableSpawnPositions.length}`); } else { console.log("All waves completed!"); } } update(deltaTime) { if (!this.isSpawning) return; this.timeSinceLastSpawn += deltaTime; const currentWaveConfig = EnemySpawner.SPAWN_CONFIG.waves[this.currentWave]; if (this.timeSinceLastSpawn >= currentWaveConfig.spawnInterval && this.enemiesSpawned < currentWaveConfig.enemyCount) { this.spawnEnemy(); this.timeSinceLastSpawn = 0; } this.checkWaveCompletion(); } spawnEnemy() { if (this.availableSpawnPositions.length === 0) { this.updateAvailableSpawnPositions(); } if (this.availableSpawnPositions.length > 0) { const randomIndex = Math.floor(Math.random() * this.availableSpawnPositions.length); const spawnPosition = this.availableSpawnPositions[randomIndex].clone(); // Adjust the Y position to be tileMapBaseHeight + 2 spawnPosition.y = APP_SETTINGS.TILEMAP_CONFIG.baseHeight + 2; // Remove the used position from the available positions this.availableSpawnPositions.splice(randomIndex, 1); window.EnemyManager.createEnemy(spawnPosition); this.enemiesSpawned++; console.log(`Enemy spawned at position: (${spawnPosition.x.toFixed(2)}, ${spawnPosition.y.toFixed(2)}, ${spawnPosition.z.toFixed(2)})`); } else { console.log("Failed to spawn enemy: No available spawn positions"); } } notifyEnemyDeath() { this.enemiesRemaining--; this.checkWaveCompletion(); } checkWaveCompletion() { const currentWaveConfig = EnemySpawner.SPAWN_CONFIG.waves[this.currentWave]; if (this.enemiesSpawned >= currentWaveConfig.enemyCount && this.enemiesRemaining === 0) { this.completeWave(); } } completeWave() { console.log(`Wave ${this.currentWave + 1} completed!`); this.currentWave++; this.isSpawning = false; if (this.currentWave < EnemySpawner.SPAWN_CONFIG.waves.length) { this.startWave(); } else { console.log("All waves completed!"); } } } class Tile { constructor(x, z, mapWidth, mapHeight) { this.x = x; this.z = z; this.mapWidth = mapWidth; this.mapHeight = mapHeight; this.mesh = this.createMesh(); this.body = this.createPhysicsBody(); } createMesh() { const config = APP_SETTINGS.TILEMAP_CONFIG; const geometry = new THREE.PlaneGeometry(config.tileSize, config.tileSize); const material = Materials.getMaterial('tileMaterial'); const mesh = new THREE.Mesh(geometry, 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; } } class TileMap { constructor(width, height) { this.width = width; this.height = height; this.tiles = []; this.mapMesh = new THREE.Group(); this.obstacles = []; this.createTiles(); this.createGridLines(); this.navMesh = new NavMesh(this); } createGridLines() { const config = APP_SETTINGS.TILEMAP_CONFIG; const material = new THREE.LineBasicMaterial({ color: config.gridLineColor }); 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); this.gridLines = new THREE.LineSegments(geometry, material); this.mapMesh.add(this.gridLines); } 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: APP_SETTINGS.world.defaults.groundColor, }; Materials.create('tileMaterial', 'basic', materialParams); } createGridLines(tilemap) { const config = APP_SETTINGS.TILEMAP_CONFIG; const material = new THREE.LineBasicMaterial({ color: config.gridLineColor }); 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.mesh = this.createMesh(); this.body = this.createBody(); this.setPosition(x, z); } createMesh() { const config = APP_SETTINGS.TILEMAP_CONFIG; const geometry = new THREE.BoxGeometry(config.tileSize, config.tileSize * 2, config.tileSize); const material = new THREE.MeshPhongMaterial({ color: 0x808080 }); // Gray color const mesh = new THREE.Mesh(geometry, material); mesh.castShadow = true; mesh.receiveShadow = true; return mesh; } createBody() { const config = APP_SETTINGS.TILEMAP_CONFIG; const shape = new CANNON.Box(new CANNON.Vec3(config.tileSize / 2, config.tileSize, 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 + config.tileSize; this.mesh.position.set(posX, posY, posZ); this.body.position.set(posX, posY, posZ); // No need to remove and re-add the body, just update its position 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); } } window.Game = new App(); Game.start();