import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { FBXLoader } from 'three/addons/loaders/FBXLoader.js'; import { OBJLoader } from 'three/addons/loaders/OBJLoader.js'; import { FontLoader } from 'three/addons/loaders/FontLoader.js'; import { TextGeometry } from 'three/addons/geometries/TextGeometry.js'; // Collision group constants const COLLISION_GROUPS = { PLAYER: 1, WALL: 2, FLOOR: 4, ZOMBIE: 8 }; // FireRay class for managing the visual effect of firing class FireRay { constructor(scene, camera) { this.scene = scene; this.camera = camera; this.ray = null; this.lifespan = 100; // milliseconds this.createRay(); } createRay() { const geometry = new THREE.BufferGeometry().setFromPoints([ new THREE.Vector3(0, 0, -1), // Start point (near the camera) new THREE.Vector3(0, 0, -1000) // End point (far in front of the camera) ]); const material = new THREE.LineBasicMaterial({ color: 0xffff00 }); // Yellow color this.ray = new THREE.Line(geometry, material); this.ray.visible = false; this.scene.add(this.ray); } fire() { if (this.ray) { this.ray.visible = true; this.updatePosition(); setTimeout(() => this.hide(), this.lifespan); } } updatePosition() { if (this.ray) { this.ray.position.copy(this.camera.position); this.ray.rotation.copy(this.camera.rotation); this.ray.updateMatrix(); } } hide() { if (this.ray) { this.ray.visible = false; } } remove() { if (this.ray) { this.scene.remove(this.ray); this.ray.geometry.dispose(); this.ray.material.dispose(); this.ray = null; } } } // Function for delayed logging let logBuffer = []; let lastLogTime = 0; function delayedLog(message) { logBuffer.push(message); const currentTime = Date.now(); if (currentTime - lastLogTime >= 5000) { flushLogs(); lastLogTime = currentTime; } } function flushLogs() { if (logBuffer.length > 0) { console.group(`Logs at ${new Date().toLocaleTimeString()}`); logBuffer.forEach(message => console.log(message)); console.groupEnd(); logBuffer = []; } } // Set up an interval to flush logs every 5 seconds setInterval(flushLogs, 5000); const parentDiv = document.getElementById('renderDiv'); // Room class class Room { constructor(scene, size, wallHeight, world) { this.scene = scene; this.size = size; this.wallHeight = wallHeight; this.world = world; this.createRoom(); } createRoom() { const floorMaterial = new THREE.MeshPhongMaterial({ color: 0x404040 }); const wallMaterial = new THREE.MeshPhongMaterial({ color: 0xa0a0a0, bumpMap: new THREE.TextureLoader().load('@texture/brickBump.jpg'), bumpScale: 0.02 }); // Floor const floorGeometry = new THREE.PlaneGeometry(this.size, this.size); const floor = new THREE.Mesh(floorGeometry, floorMaterial); floor.rotation.x = -Math.PI / 2; this.scene.add(floor); // Create grid this.createGrid(); // Create Cannon.js body for floor const floorShape = new CANNON.Plane(); const floorBody = new CANNON.Body({ mass: 0 }); // mass: 0 makes it static floorBody.addShape(floorShape); floorBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), -Math.PI / 2); this.world.addBody(floorBody); // Walls const wallGeometry = new THREE.PlaneGeometry(this.size, this.wallHeight); const wallShape = new CANNON.Box(new CANNON.Vec3(this.size / 2, this.wallHeight / 2, 0.1)); // Back wall const backWall = new THREE.Mesh(wallGeometry, wallMaterial); backWall.position.z = -this.size / 2; backWall.position.y = this.wallHeight / 2; this.scene.add(backWall); const backWallBody = new CANNON.Body({ mass: 0 }); backWallBody.addShape(wallShape); backWallBody.position.set(0, this.wallHeight / 2, -this.size / 2); this.world.addBody(backWallBody); // Front wall const frontWall = new THREE.Mesh(wallGeometry, wallMaterial); frontWall.position.z = this.size / 2; frontWall.position.y = this.wallHeight / 2; frontWall.rotation.y = Math.PI; this.scene.add(frontWall); const frontWallBody = new CANNON.Body({ mass: 0 }); frontWallBody.addShape(wallShape); frontWallBody.position.set(0, this.wallHeight / 2, this.size / 2); this.world.addBody(frontWallBody); // Left wall const leftWall = new THREE.Mesh(wallGeometry, wallMaterial); leftWall.position.x = -this.size / 2; leftWall.position.y = this.wallHeight / 2; leftWall.rotation.y = Math.PI / 2; this.scene.add(leftWall); const leftWallBody = new CANNON.Body({ mass: 0 }); leftWallBody.addShape(wallShape); leftWallBody.position.set(-this.size / 2, this.wallHeight / 2, 0); leftWallBody.quaternion.setFromAxisAngle(new CANNON.Vec3(0, 1, 0), Math.PI / 2); this.world.addBody(leftWallBody); // Right wall const rightWall = new THREE.Mesh(wallGeometry, wallMaterial); rightWall.position.x = this.size / 2; rightWall.position.y = this.wallHeight / 2; rightWall.rotation.y = -Math.PI / 2; this.scene.add(rightWall); const rightWallBody = new CANNON.Body({ mass: 0 }); rightWallBody.addShape(wallShape); rightWallBody.position.set(this.size / 2, this.wallHeight / 2, 0); rightWallBody.quaternion.setFromAxisAngle(new CANNON.Vec3(0, 1, 0), -Math.PI / 2); this.world.addBody(rightWallBody); } createGrid() { const gridSize = this.size; const divisions = 10; const gridHelper = new THREE.GridHelper(gridSize, divisions); gridHelper.position.y = 0.01; // Slightly above the floor this.scene.add(gridHelper); // Add coordinate labels const fontLoader = new FontLoader(); fontLoader.load('https://threejs.org/examples/fonts/helvetiker_regular.typeface.json', (font) => { const cellSize = gridSize / divisions; for (let i = 0; i <= divisions; i++) { for (let j = 0; j <= divisions; j++) { const x = (i - divisions / 2) * cellSize; const z = (j - divisions / 2) * cellSize; const text = `${x.toFixed(0)},${z.toFixed(0)}`; const textGeometry = new TextGeometry(text, { font: font, size: 0.5, height: 0.1, }); const textMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff }); const textMesh = new THREE.Mesh(textGeometry, textMaterial); textMesh.position.set(x, 0.1, z); textMesh.rotation.x = -Math.PI / 2; textMesh.rotation.z = -Math.PI / 2; this.scene.add(textMesh); } } }); } } // AssetLoader class class AssetLoader { constructor() { this.assets = new Map(); this.textureLoader = new THREE.TextureLoader(); this.fbxLoader = new FBXLoader(); this.objLoader = new OBJLoader(); } loadTexture(url, key) { return new Promise((resolve, reject) => { this.textureLoader.load( url, (texture) => { this.assets.set(key, texture); resolve(texture); }, (progress) => console.log(`Loading texture ${key}: ${(progress.loaded / progress.total * 100).toFixed(2)}%`), (error) => reject(`Error loading texture ${key}: ${error}`) ); }); } loadFBX(url, key) { return new Promise((resolve, reject) => { this.fbxLoader.load( url, (model) => { this.assets.set(key, model); resolve(model); }, (progress) => console.log(`Loading FBX ${key}: ${(progress.loaded / progress.total * 100).toFixed(2)}%`), (error) => reject(`Error loading FBX ${key}: ${error}`) ); }); } loadOBJ(url, key) { return new Promise((resolve, reject) => { this.objLoader.load( url, (model) => { this.assets.set(key, model); resolve(model); }, (progress) => console.log(`Loading OBJ ${key}: ${(progress.loaded / progress.total * 100).toFixed(2)}%`), (error) => reject(`Error loading OBJ ${key}: ${error}`) ); }); } loadAudio(url, key) { return new Promise((resolve, reject) => { const audio = new Audio(url); audio.addEventListener('canplaythrough', () => { this.assets.set(key, audio); resolve(audio); }, { once: true }); audio.addEventListener('error', () => reject(`Error loading audio ${key}`), { once: true }); audio.load(); }); } getAsset(key) { return this.assets.get(key); } } // Wall class class Wall { constructor(scene, world, startX, startZ, direction) { this.scene = scene; this.world = world; this.width = 0.5; // Wall thickness this.height = 5; // Wall height this.length = 4; // Fixed wall length this.startPosition = new THREE.Vector3(startX, this.height / 2, startZ); this.direction = direction; this.mesh = null; this.body = null; this.createWall(); } createWall() { // Calculate end position const endPosition = this.startPosition.clone().add( new THREE.Vector3( this.direction === 'x' ? this.length : 0, 0, this.direction === 'z' ? this.length : 0 ) ); // Calculate center position const centerPosition = new THREE.Vector3().addVectors(this.startPosition, endPosition).multiplyScalar(0.5); // Create Three.js mesh const geometry = new THREE.BoxGeometry( this.direction === 'x' ? this.length : this.width, this.height, this.direction === 'z' ? this.length : this.width ); const material = new THREE.MeshPhongMaterial({ color: 0xa0a0a0 }); this.mesh = new THREE.Mesh(geometry, material); this.mesh.position.copy(centerPosition); this.scene.add(this.mesh); // Create Cannon.js body const shape = new CANNON.Box(new CANNON.Vec3( this.direction === 'x' ? this.length / 2 : this.width / 2, this.height / 2, this.direction === 'z' ? this.length / 2 : this.width / 2 )); this.body = new CANNON.Body({ mass: 0, // Static body shape: shape, position: new CANNON.Vec3(centerPosition.x, centerPosition.y, centerPosition.z), collisionFilterGroup: COLLISION_GROUPS.WALL, collisionFilterMask: COLLISION_GROUPS.PLAYER | COLLISION_GROUPS.ZOMBIE }); this.world.addBody(this.body); } update() { // Update mesh position and rotation to match physics body this.mesh.position.copy(this.body.position); this.mesh.quaternion.copy(this.body.quaternion); } } const GRID_CELL_SIZE = 4; // Define grid cell size class Corridor { constructor(scene, world, width, height, startX, startZ, endX, endZ, axis = 'x') { this.scene = scene; this.world = world; this.width = Math.round(width / GRID_CELL_SIZE) * GRID_CELL_SIZE; // Snap width to grid this.height = height; this.startPosition = new THREE.Vector3( startX, 0, startZ ); this.endPosition = new THREE.Vector3( endX, 0, endZ ); this.axis = axis; this.walls = []; this.length = Math.abs(this.axis === 'x' ? this.endPosition.x - this.startPosition.x : this.endPosition.z - this.startPosition.z); this.numSections = Math.max(1, Math.round(this.length / GRID_CELL_SIZE)); this.direction = new THREE.Vector3().subVectors(this.endPosition, this.startPosition).normalize(); this.rotation = new THREE.Euler().setFromVector3(this.direction); this.position = new THREE.Vector3().addVectors(this.startPosition, this.endPosition).multiplyScalar(0.5); this.anchors = { start: { top: new THREE.Vector3(), bottom: new THREE.Vector3() }, end: { top: new THREE.Vector3(), bottom: new THREE.Vector3() } }; this.createCorridor(); this.updateAnchors(); } createCorridor() { const wallThickness = 0.2; // Thickness of the walls const halfWidth = this.width / 2; for (let i = 0; i < this.numSections; i++) { const sectionStart = new THREE.Vector3().lerpVectors(this.startPosition, this.endPosition, i / this.numSections); const sectionEnd = new THREE.Vector3().lerpVectors(this.startPosition, this.endPosition, (i + 1) / this.numSections); const sectionCenter = new THREE.Vector3().lerpVectors(sectionStart, sectionEnd, 0.5); // Calculate perpendicular vector for wall positioning const perpendicular = this.axis === 'x' ? new THREE.Vector3(0, 0, 1) : new THREE.Vector3(1, 0, 0); // Left wall const leftWallPos = sectionCenter.clone().add(perpendicular.clone().multiplyScalar(halfWidth)); const leftWallRotation = new THREE.Euler(0, this.axis === 'x' ? 0 : Math.PI / 2, 0); const leftWall = new Wall( this.scene, this.world, GRID_CELL_SIZE, this.height, wallThickness, leftWallPos, leftWallRotation ); // Right wall const rightWallPos = sectionCenter.clone().sub(perpendicular.clone().multiplyScalar(halfWidth)); const rightWallRotation = new THREE.Euler(0, this.axis === 'x' ? 0 : Math.PI / 2, 0); const rightWall = new Wall( this.scene, this.world, GRID_CELL_SIZE, this.height, wallThickness, rightWallPos, rightWallRotation ); this.walls.push(leftWall, rightWall); } } updateAnchors() { const halfWidth = this.width / 2; const halfLength = this.length / 2; this.anchors.start.top.set(-halfWidth, this.height, -halfLength); this.anchors.start.bottom.set(-halfWidth, 0, -halfLength); this.anchors.end.top.set(-halfWidth, this.height, halfLength); this.anchors.end.bottom.set(-halfWidth, 0, halfLength); // Apply corridor's position and rotation to anchors Object.values(this.anchors).forEach(anchorPair => { Object.values(anchorPair).forEach(anchor => { anchor.applyEuler(this.rotation).add(this.position); }); }); } setPosition(position) { this.position.copy(position); this.walls.forEach(wall => { wall.setPosition(wall.position.add(position)); }); this.updateAnchors(); } setRotation(rotation) { this.rotation.copy(rotation); this.walls.forEach(wall => { let newPosition = wall.position.applyEuler(rotation); wall.setPosition(newPosition); wall.setRotation(new THREE.Euler().setFromQuaternion( new THREE.Quaternion().setFromEuler(wall.rotation).multiply( new THREE.Quaternion().setFromEuler(rotation) ) )); }); this.updateAnchors(); } connectTo(otherCorridor, thisAnchor, otherAnchor) { const thisAnchorPos = this.anchors[thisAnchor.split('.')[0]][thisAnchor.split('.')[1]]; const otherAnchorPos = otherCorridor.anchors[otherAnchor.split('.')[0]][otherAnchor.split('.')[1]]; const translation = new THREE.Vector3().subVectors(thisAnchorPos, otherAnchorPos); otherCorridor.setPosition(translation); // Calculate and apply rotation if needed (e.g., for end-to-start connections) if ((thisAnchor.includes('end') && otherAnchor.includes('start')) || (thisAnchor.includes('start') && otherAnchor.includes('end'))) { const rotationY = new THREE.Euler(0, Math.PI, 0); otherCorridor.setRotation(rotationY); } } update() { this.walls.forEach(wall => wall.update()); } } class WallManager { constructor(scene, world) { this.scene = scene; this.world = world; this.walls = []; } addWall(startX, startZ, direction) { const wall = new Wall(this.scene, this.world, startX, startZ, direction); this.walls.push(wall); return wall; } removeWall(startX, startZ) { const index = this.walls.findIndex(wall => wall.startPosition.x === startX && wall.startPosition.z === startZ ); if (index !== -1) { const wall = this.walls[index]; this.scene.remove(wall.mesh); this.world.removeBody(wall.body); this.walls.splice(index, 1); } } clearAllWalls() { this.walls.forEach(wall => { this.scene.remove(wall.mesh); this.world.removeBody(wall.body); }); this.walls = []; } update() { this.walls.forEach(wall => wall.update()); } } // Game class class Game { static ROOM_SIZE = 40; static WALL_HEIGHT = 20; constructor(parentDiv) { this.parentDiv = parentDiv; this.scene = new THREE.Scene(); this.camera = null; this.player = null; this.room = null; this.renderer = null; this.canvas = null; this.gameState = 'PRE_GAME'; this.gameTimer = 30; this.score = 0; this.zombies = []; this.zombieSpawnManager = new ZombieSpawnManager(this); this.timerInterval = null; this.startButtonMesh = null; this.raycaster = new THREE.Raycaster(); this.fireRay = null; this.gunModel = null; this.gunTexture = null; this.world = null; this.characterModel = null; this.logger = new Logger(); this.assetLoader = new AssetLoader(); this.wallManager = null; this.healthBar = null; this.damageOverlay = null; // Mouse control variables this.mouseX = 0; this.mouseY = 0; this.targetRotationX = 0; this.currentRotationX = 0; this.targetRotationY = 0; this.currentRotationY = 0; // UI elements this.timerDisplay = null; this.scoreDisplay = null; this.uiBackground = null; this.crosshair = null; // Walls and Corridors this.walls = []; this.corridor = null; this.corridors = []; } createCorridor() { // Create a corridor from z = 0 to z = -12, centered along x = 0, with width of 8 (2 grid cells) and height of 5 const centerX = 0; const startZ = 0; const endZ = -12; const width = GRID_CELL_SIZE * 2; // 8 units wide (2 grid cells) const height = 5; this.corridor = new Corridor(this.scene, this.world, width, height, centerX, startZ, centerX, endZ, 'z'); this.corridors.push(this.corridor); console.log(`Corridor created from z=${startZ} to z=${endZ}, centered at x=${centerX}, with width=${width} and height=${height}`); // Log the actual start and end positions of the corridor for debugging console.log(`Actual corridor start: ${this.corridor.startPosition.toArray()}`); console.log(`Actual corridor end: ${this.corridor.endPosition.toArray()}`); } setState(newState) { if (this.gameState !== newState) { this.logger.log('GameLoop', `Changing game state from ${this.gameState} to ${newState}`, 'GameState'); this.gameState = newState; switch (newState) { case 'PRE_GAME': this.handlePreGameState(); break; case 'IN_GAME': this.handleInGameState(); break; case 'POST_GAME': this.handlePostGameState(); break; default: this.logger.log('GameLoop', `Invalid game state: ${newState}`, 'Error'); } this.logger.log('GameLoop', `Game state changed to ${newState}`, 'GameState'); } else { this.logger.log('GameLoop', `State is already ${newState}`, 'GameState'); } } handlePostGameState() { this.clearZombies(); if (this.timerDisplay) this.timerDisplay.style.display = 'none'; this.updateFinalScore(); this.startButtonMesh.visible = true; this.startButtonMesh.position.set(0, 0.5, -3); this.startButtonMesh.rotation.x = -Math.PI / 4; this.logger.log('GameLoop', 'Game ended, post-game state initialized', 'GameState'); // Display game over message this.displayGameOverMessage(); } displayGameOverMessage() { const gameOverDiv = document.createElement('div'); gameOverDiv.style.position = 'absolute'; gameOverDiv.style.top = '50%'; gameOverDiv.style.left = '50%'; gameOverDiv.style.transform = 'translate(-50%, -50%)'; gameOverDiv.style.fontSize = '48px'; gameOverDiv.style.color = 'red'; gameOverDiv.style.textAlign = 'center'; gameOverDiv.innerHTML = 'Game Over
Click to Restart'; this.parentDiv.appendChild(gameOverDiv); // Add click event listener to restart the game this.parentDiv.addEventListener('click', () => { this.parentDiv.removeChild(gameOverDiv); this.restartGame(); }, { once: true }); } restartGame() { this.player.reset(); this.setState('PRE_GAME'); } handlePreGameState() { this.startButtonMesh.visible = true; this.startButtonMesh.position.set(0, 0.5, -3); if (this.timerDisplay) this.timerDisplay.style.display = 'none'; if (this.scoreDisplay) this.scoreDisplay.style.display = 'none'; this.clearZombies(); if (this.healthBar) { this.healthBar.reset(); } this.logger.log('UI', 'Health bar reset', 'Initialization'); } handleInGameState() { this.startButtonMesh.visible = false; if (this.timerDisplay) this.timerDisplay.style.display = 'block'; if (this.scoreDisplay) this.scoreDisplay.style.display = 'block'; this.score = 0; this.gameTimer = 30; this.updateTimerDisplay(); this.updateScoreDisplay(); this.spawnInitialZombies(); this.startTimer(); this.logger.log('GameLoop', 'Game started', 'GameState'); } handlePostGameState() { this.clearZombies(); if (this.timerDisplay) this.timerDisplay.style.display = 'none'; this.updateFinalScore(); this.startButtonMesh.visible = true; this.startButtonMesh.position.set(0, 0.5, -3); this.startButtonMesh.rotation.x = -Math.PI / 4; this.logger.log('GameLoop', 'Game ended, post-game state initialized', 'GameState'); } clearZombies() { this.zombies.forEach(zombie => { if (zombie.model) { this.scene.remove(zombie.model); } }); this.zombies = []; } updateFinalScore() { const currentHighScore = localStorage.getItem('3D_FPS_highscore') || 0; if (this.score > currentHighScore) { localStorage.setItem('3D_FPS_highscore', this.score); } this.scoreDisplay.textContent = `Final Score: ${this.score}\nHigh Score: ${Math.max(this.score, currentHighScore)}`; this.scoreDisplay.style.display = 'block'; } async init() { try { this.canvas = this.createCanvas(); if (!this.canvas) throw new Error('Failed to create canvas'); this.camera = this.createCamera(); if (!this.camera) throw new Error('Failed to create camera'); this.scene = new THREE.Scene(); if (!this.scene) throw new Error('Failed to create scene'); this.initWorld(); if (!this.world) throw new Error('Failed to initialize physics world'); this.wallManager = new WallManager(this.scene, this.world); this.player = new Player(this.camera, this); if (!this.player) throw new Error('Failed to create player'); this.room = new Room(this.scene, Game.ROOM_SIZE, Game.WALL_HEIGHT, this.world); if (!this.room) throw new Error('Failed to create room'); this.renderer = this.createRenderer(); if (!this.renderer) throw new Error('Failed to create renderer'); this.initLights(); this.createUI(); this.createCrosshair(); this.createStartButton(); this.fireRay = new FireRay(this.scene, this.camera); this.setupEventListeners(); await this.loadAssets(); this.createInitialWalls(); this.setupZombieSpawnPoints(); this.healthBar = new HealthBar(this); this.damageOverlay = new DamageOverlay(this.parentDiv); this.animate(); console.log('Game initialized successfully'); } catch (error) { console.error('Error initializing game:', error); } } createInitialWalls() { // Create the main corridor walls this.createMainCorridorWalls(); // Create the back wall of the main area this.createMainAreaBackWall(); // Create the far back wall this.createFarBackWall(); // Create the side room this.createSideRoom(); } createMainCorridorWalls() { // Left wall of the main corridor this.wallManager.addWall(-4, 8, 'z'); // Start of left wall this.wallManager.addWall(-4, 4, 'z'); // Middle section of left wall this.wallManager.addWall(-4, 0, 'z'); // Middle section of left wall this.wallManager.addWall(-4, -4, 'z'); // Middle section of left wall this.wallManager.addWall(-4, -8, 'z'); // End of left wall, connecting to back wall // Right wall of the main corridor this.wallManager.addWall(4, 8, 'z'); // Start of right wall this.wallManager.addWall(4, 4, 'z'); // Middle section of right wall this.wallManager.addWall(4, 0, 'z'); // Middle section of right wall // Removed: this.wallManager.addWall(4, -4, 'z'); // Middle section of right wall this.wallManager.addWall(4, -8, 'z'); // End of right wall, connecting to back wall } createSideRoom() { // Add the first side wall of the new room (along z = -4) this.wallManager.addWall(4, -4, 'x'); // Side wall at z = -4, starting from x = 4 this.wallManager.addWall(8, -4, 'x'); // Continues the side wall this.wallManager.addWall(12, -4, 'x'); // Completes the 12-unit side wall // Add the second side wall of the new room (along z = 8) this.wallManager.addWall(4, 8, 'x'); // Side wall at z = 8, starting from x = 4 this.wallManager.addWall(8, 8, 'x'); // Continues the side wall this.wallManager.addWall(12, 8, 'x'); // Completes the 12-unit side wall // Add the back wall of the side room (along x = 16) this.wallManager.addWall(16, -4, 'z'); // Back wall segment 1 this.wallManager.addWall(16, 0, 'z'); // Back wall segment 2 this.wallManager.addWall(16, 4, 'z'); // Back wall segment 3 } createMainAreaBackWall() { // Left section of the back wall for the main area this.wallManager.addWall(-8, -8, 'x'); // Left part of back wall this.wallManager.addWall(-12, -8, 'x'); // Leftmost part of back wall // Right section of the back wall for the main area this.wallManager.addWall(4, -8, 'x'); // Right part of back wall this.wallManager.addWall(8, -8, 'x'); // Rightmost part of back wall } createFarBackWall() { // Far back wall creating a larger enclosed area this.wallManager.addWall(-12, -16, 'x'); // Left part of far back wall this.wallManager.addWall(-8, -16, 'x'); // Left-middle part of far back wall this.wallManager.addWall(-4, -16, 'x'); // Middle-left part of far back wall this.wallManager.addWall(0, -16, 'x'); // Middle part of far back wall this.wallManager.addWall(4, -16, 'x'); // Middle-right part of far back wall this.wallManager.addWall(8, -16, 'x'); // Right-middle part of far back wall } createUI() { this.createStartButton(); this.createTimerDisplay(); this.createScoreDisplay(); this.createUIBackground(); } createTimerDisplay() { this.timerDisplay = document.createElement('div'); this.timerDisplay.style.position = 'absolute'; this.timerDisplay.style.top = '10px'; this.timerDisplay.style.left = '50%'; this.timerDisplay.style.transform = 'translateX(-50%)'; this.timerDisplay.style.fontSize = '24px'; this.timerDisplay.style.color = 'white'; this.timerDisplay.style.zIndex = '2'; this.parentDiv.appendChild(this.timerDisplay); this.updateTimerDisplay(); // Initialize the display } createScoreDisplay() { this.scoreDisplay = document.createElement('div'); this.scoreDisplay.style.position = 'absolute'; this.scoreDisplay.style.top = '40px'; this.scoreDisplay.style.left = '50%'; this.scoreDisplay.style.transform = 'translateX(-50%)'; this.scoreDisplay.style.fontSize = '20px'; this.scoreDisplay.style.color = 'white'; this.scoreDisplay.style.zIndex = '2'; this.parentDiv.appendChild(this.scoreDisplay); } createUIBackground() { this.uiBackground = document.createElement('div'); this.uiBackground.style.position = 'absolute'; this.uiBackground.style.top = '0'; this.uiBackground.style.left = '0'; this.uiBackground.style.right = '0'; this.uiBackground.style.height = '80px'; this.uiBackground.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; this.uiBackground.style.zIndex = '1'; this.parentDiv.appendChild(this.uiBackground); } createCrosshair() { this.crosshair = document.createElement('div'); this.crosshair.id = 'crosshair'; this.parentDiv.appendChild(this.crosshair); const style = document.createElement('style'); style.textContent = ` #crosshair { position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; pointer-events: none; transform: translate(-50%, -50%); } #crosshair::before, #crosshair::after { content: ""; position: absolute; background-color: red; } #crosshair::before { left: 50%; width: 2px; height: 100%; transform: translateX(-50%); } #crosshair::after { top: 50%; height: 2px; width: 100%; transform: translateY(-50%); } `; document.head.appendChild(style); } // Asset configuration object assetConfig = { gunTexture: { url: 'https://play.rosebud.ai/assets/BLK64.png?B9l1' }, gunModel: { url: 'https://play.rosebud.ai/assets/01_gun_fbx.fbx?3ijb' }, characterModel: { url: 'https://play.rosebud.ai/assets/mc_character_model.obj?1v5W' }, shootSound: { url: 'https://play.rosebud.ai/assets/snd_pistol_shot.wav?V6gU', volume: 0.1 }, zombieDeathSound1: { url: 'https://play.rosebud.ai/assets/snd_groan_01.wav?kZv4', volume: 1.0 }, zombieDeathSound2: { url: 'https://play.rosebud.ai/assets/snd_groan_03.wav?SQdQ', volume: 0.7 } }; async loadAssets() { try { await Promise.all([ this.assetLoader.loadTexture(this.assetConfig.gunTexture.url, 'gunTexture'), this.assetLoader.loadFBX(this.assetConfig.gunModel.url, 'gunModel'), this.assetLoader.loadOBJ(this.assetConfig.characterModel.url, 'characterModel'), this.assetLoader.loadAudio(this.assetConfig.shootSound.url, 'shootSound'), this.assetLoader.loadAudio(this.assetConfig.zombieDeathSound1.url, 'zombieDeathSound1'), this.assetLoader.loadAudio(this.assetConfig.zombieDeathSound2.url, 'zombieDeathSound2') ]); this.gunTexture = this.assetLoader.getAsset('gunTexture'); this.gunModel = this.assetLoader.getAsset('gunModel'); this.characterModel = this.assetLoader.getAsset('characterModel'); this.shootSound = this.assetLoader.getAsset('shootSound'); this.zombieDeathSounds = [ this.assetLoader.getAsset('zombieDeathSound1'), this.assetLoader.getAsset('zombieDeathSound2') ]; // Set volume for audio assets if (this.shootSound) this.shootSound.volume = this.assetConfig.shootSound.volume; this.zombieDeathSounds.forEach((sound, index) => { if (sound) sound.volume = this.assetConfig[`zombieDeathSound${index + 1}`].volume; }); this.setupGunModel(); console.log('All assets loaded successfully'); } catch (error) { console.error('Error loading assets:', error); throw error; } } setupGunModel() { if (this.gunModel && this.gunTexture) { this.gunModel.scale.setScalar(0.06); this.gunModel.traverse((child) => { if (child.isMesh) { child.material.map = this.gunTexture; child.material.needsUpdate = true; } }); this.scene.add(this.gunModel); this.updateGunPosition(); } } initWorld() { try { if (typeof CANNON === 'undefined') { throw new Error('CANNON physics engine is not loaded'); } this.world = new CANNON.World(); this.world.gravity.set(0, -9.82, 0); // Create a plane for the floor const planeShape = new CANNON.Plane(); const planeBody = new CANNON.Body({ mass: 0, // Static body shape: planeShape, material: new CANNON.Material('groundMaterial') }); planeBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), -Math.PI / 2); this.world.addBody(planeBody); // Increased player start height this.playerStartHeight = 1.6; console.log('Physics world initialized successfully'); } catch (error) { console.error('Error initializing physics world:', error); throw error; // Re-throw the error to be caught in the init method } } loadCharacterModel() { const objLoader = new OBJLoader(); objLoader.load( 'https://play.rosebud.ai/assets/mc_character_model.obj?1v5W', (obj) => { this.characterModel = obj; console.log('Character model loaded successfully'); }, (progress) => { console.log('Character model loading progress: ' + (progress.loaded / progress.total * 100) + '%'); }, (error) => { console.error('An error occurred while loading the character model:', error); } ); } loadGunModel() { // Load the texture const textureLoader = new THREE.TextureLoader(); textureLoader.load('https://play.rosebud.ai/assets/BLK64.png?B9l1', (texture) => { this.gunTexture = texture; console.log('Gun texture loaded successfully'); }, undefined, (error) => { console.error('An error occurred while loading the gun texture:', error); } ); // Load the gun model const fbxLoader = new FBXLoader(); fbxLoader.load( 'https://play.rosebud.ai/assets/01_gun_fbx.fbx?3ijb', (fbx) => { console.log('Gun model loaded successfully'); this.gunModel = fbx; // Adjust the model's scale this.gunModel.scale.setScalar(0.06); // Apply texture to the gun model this.gunModel.traverse((child) => { if (child.isMesh) { if (this.gunTexture) { child.material.map = this.gunTexture; child.material.needsUpdate = true; } } }); // Add the gun model to the scene this.scene.add(this.gunModel); // Initial position update this.updateGunPosition(); }, (progress) => { console.log('Loading progress: ' + (progress.loaded / progress.total * 100) + '%'); }, (error) => { console.error('An error occurred while loading the gun model:', error); } ); } updateGunPosition() { if (this.gunModel) { // Set the gun's position relative to the camera this.gunModel.position.set(0.4, -0.35, -0.8); this.gunModel.position.applyQuaternion(this.camera.quaternion); this.gunModel.position.add(this.camera.position); // Set the gun's rotation to match the camera's orientation this.gunModel.quaternion.copy(this.camera.quaternion); // Additional rotation to align the gun model correctly this.gunModel.rotateY(Math.PI); // Rotate 180 degrees around Y-axis } } createCanvas() { let canvas = document.getElementById('threeRenderCanvas'); if (!canvas) { canvas = document.createElement('canvas'); canvas.id = 'threeRenderCanvas'; this.parentDiv.appendChild(canvas); } return canvas; } createStartButton() { const startButtonGeometry = new THREE.BoxGeometry(2, 1, 0.1); const startButtonMaterial = new THREE.MeshPhongMaterial({ color: 0x4CAF50 }); this.startButtonMesh = new THREE.Mesh(startButtonGeometry, startButtonMaterial); this.startButtonMesh.position.set(0, 0.5, -3); this.startButtonMesh.rotation.x = -Math.PI / 4; this.scene.add(this.startButtonMesh); // Create text for the start button const fontLoader = new FontLoader(); fontLoader.load('https://threejs.org/examples/fonts/helvetiker_regular.typeface.json', (font) => { const textGeometry = new TextGeometry('Start Game', { font: font, size: 0.15, height: 0.02, }); const textMaterial = new THREE.MeshPhongMaterial({ color: 0xFFFFFF, side: THREE.DoubleSide }); const textMesh = new THREE.Mesh(textGeometry, textMaterial); textGeometry.computeBoundingBox(); textMesh.position.set( -textGeometry.boundingBox.max.x / 2, -textGeometry.boundingBox.max.y / 2, 0.11 ); this.startButtonMesh.add(textMesh); }); } updateTimerDisplay() { if (this.timerDisplay) { this.timerDisplay.textContent = `Time: ${this.gameTimer}s`; } } updateScoreDisplay() { this.scoreDisplay.textContent = `Score: ${this.score}`; } startTimer() { this.timerInterval = setInterval(() => { this.gameTimer--; this.updateTimerDisplay(); if (this.gameTimer <= 0) { clearInterval(this.timerInterval); this.setState('POST_GAME'); } }, 1000); } spawnInitialZombies() { for (let i = 0; i < 1; i++) { this.zombieSpawnManager.spawnZombie(); } } createNewZombie() { this.zombieSpawnManager.spawnZombie(); } setupZombieSpawnPoints() { // Spawn points are now defined in the ZombieSpawnManager constructor this.logger.log('GameLoop', 'Zombie spawn points set up', 'Initialization'); } shoot() { const shootSound = this.assetLoader.getAsset('shootSound'); if (shootSound) { shootSound.currentTime = 0; shootSound.play(); } const rayDirection = new THREE.Vector3(0, 0, -1).applyQuaternion(this.camera.quaternion); const rayOrigin = this.camera.position.clone(); this.raycaster.set(rayOrigin, rayDirection); // Check for start button hit in all states const startButtonIntersects = this.raycaster.intersectObject(this.startButtonMesh); if (startButtonIntersects.length > 0 && this.startButtonMesh.visible) { this.handleStartButtonHit(); return; } // Check for zombie hits only in IN_GAME state if (this.gameState === 'IN_GAME') { const zombieIntersects = this.raycaster.intersectObjects(this.zombies.map(zombie => zombie.model), true); if (zombieIntersects.length > 0) { this.handleZombieHit(zombieIntersects[0]); } else { this.logger.log('Combat', 'No zombie hit', 'HitDetection'); } } // Create muzzle flash effect this.createMuzzleFlash(); } createMuzzleFlash() { const flashGeometry = new THREE.SphereGeometry(0.05, 16, 16); const flashMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 }); const flash = new THREE.Mesh(flashGeometry, flashMaterial); // Position the flash at the end of the gun flash.position.set(0.4, -0.2, -1.2); flash.position.applyQuaternion(this.camera.quaternion); flash.position.add(this.camera.position); this.scene.add(flash); // Remove the flash after a short duration setTimeout(() => { this.scene.remove(flash); flashGeometry.dispose(); flashMaterial.dispose(); }, 20); } handleStartButtonHit() { this.logger.log('UI', 'Start button hit', 'HitDetection'); if (this.gameState === 'PRE_GAME' || this.gameState === 'POST_GAME') { this.setState('IN_GAME'); } } handleZombieHit(intersection) { const hitZombie = this.zombies.find(zombie => zombie.model === intersection.object.parent); if (hitZombie) { this.logger.log('Combat', `Zombie hit at: ${intersection.point.toArray().join(', ')}`, 'HitDetection'); hitZombie.takeDamage(1); this.visualizeImpact(intersection.point); } } visualizeImpact(intersectionPoint) { if (intersectionPoint) { const sphereGeometry = new THREE.SphereGeometry(0.1); const sphereMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 }); const intersectionSphere = new THREE.Mesh(sphereGeometry, sphereMaterial); intersectionSphere.position.copy(intersectionPoint); intersectionSphere.name = 'intersectionPoint'; this.scene.add(intersectionSphere); setTimeout(() => { const intersectionSphere = this.scene.getObjectByName('intersectionPoint'); if (intersectionSphere) this.scene.remove(intersectionSphere); }, 100); } } createCamera() { const camera = new THREE.PerspectiveCamera( 75, this.parentDiv.clientWidth / this.parentDiv.clientHeight, 0.1, 1000 ); camera.position.set(0, 1.6, Game.ROOM_SIZE / 4); camera.lookAt(0, 1.6, -1); return camera; } createRenderer() { if (!this.canvas) { console.error('Canvas is not initialized'); return null; } const renderer = new THREE.WebGLRenderer({ antialias: true, canvas: this.canvas }); renderer.setClearColor(0x87CEEB); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(this.parentDiv.clientWidth, this.parentDiv.clientHeight); return renderer; } initLights() { if (!this.scene) { console.error('Scene is not initialized'); return; } const ambientLight = new THREE.AmbientLight(0xffffff, 0.3); this.scene.add(ambientLight); const pointLight = new THREE.PointLight(0xffffff, 0.7, 100); pointLight.position.set(0, Game.WALL_HEIGHT - 1, 0); this.scene.add(pointLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5); directionalLight.position.set(1, 1, 1); this.scene.add(directionalLight); } animate() { requestAnimationFrame(() => this.animate()); const deltaTime = 1 / 60; // Assuming 60 FPS // Update camera rotation this.currentRotationX += (this.targetRotationX - this.currentRotationX) * 0.1; this.currentRotationY += (this.targetRotationY - this.currentRotationY) * 0.1; // Apply rotations to the camera this.camera.rotation.order = 'YXZ'; this.camera.rotation.x = this.currentRotationY; this.camera.rotation.y = this.currentRotationX; // Step the physics world if (this.world) { this.world.step(deltaTime); } else { console.error('Physics world is not initialized'); } // Update player (allowed in all states) this.player.update(); // Update gun position (allowed in all states) this.updateGunPosition(); // Update all zombies this.zombies.forEach(zombie => zombie.update(this.camera, this.gameState)); // Update all walls this.walls.forEach(wall => wall.update()); // Update health bar if (this.healthBar) { this.healthBar.update(this.player.health, this.player.maxHealth); } // Always render the scene this.renderer.render(this.scene, this.camera); } updateGunPosition() { if (this.gunModel) { // Set the gun's position relative to the camera this.gunModel.position.set(0.4, -0.35, -0.8); this.gunModel.position.applyQuaternion(this.camera.quaternion); this.gunModel.position.add(this.camera.position); // Set the gun's rotation to match the camera's orientation this.gunModel.quaternion.copy(this.camera.quaternion); // Additional rotation to align the gun model correctly this.gunModel.rotateY(Math.PI); // Rotate 180 degrees around Y-axis } } setupEventListeners() { document.addEventListener('keydown', (event) => this.player.onKeyDown(event)); document.addEventListener('keyup', (event) => this.player.onKeyUp(event)); document.addEventListener('mousemove', (event) => this.onMouseMove(event)); document.addEventListener('pointerlockchange', () => this.onPointerLockChange()); document.addEventListener('pointerlockerror', () => this.onPointerLockError()); this.canvas.addEventListener('mousedown', (event) => this.onMouseDown(event)); window.addEventListener('resize', () => this.onWindowResize()); } onMouseDown(event) { if (document.pointerLockElement === this.canvas) { this.shoot(); } else { this.requestPointerLock(); } } requestPointerLock() { this.canvas.requestPointerLock = this.canvas.requestPointerLock || this.canvas.mozRequestPointerLock || this.canvas.webkitRequestPointerLock; this.canvas.requestPointerLock(); } // This entire method should be removed onMouseMove(event) { if (document.pointerLockElement === this.canvas) { const movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0; const movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0; this.targetRotationX -= movementX * 0.002; this.targetRotationY -= movementY * 0.002; this.targetRotationY = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, this.targetRotationY)); } } onPointerLockChange() { if (document.pointerLockElement === this.canvas) { console.log('Pointer lock active'); document.addEventListener('mousemove', (event) => this.onMouseMove(event), false); } else { console.log('Pointer lock inactive'); document.removeEventListener('mousemove', (event) => this.onMouseMove(event), false); } } onPointerLockError() { console.error('Error locking pointer'); } onWindowResize() { const width = this.parentDiv.clientWidth; const height = this.parentDiv.clientHeight; this.camera.aspect = width / height; this.camera.updateProjectionMatrix(); this.renderer.setSize(width, height); } } // Player class class Player { constructor(camera, game) { this.camera = camera; this.game = game; this.moveSpeed = 5; // Speed in units per second this.keys = { w: false, a: false, s: false, d: false }; this.maxHealth = 100; this.health = this.maxHealth; this.isDead = false; this.invulnerabilityTime = 500; // Invulnerability time in milliseconds after taking damage this.lastDamageTime = 0; if (this.game.world) { // Create a larger capsule shape for the player const radius = 0.5; // Increased radius of the capsule const height = 2.0; // Increased height of the capsule body const shape = new CANNON.Cylinder(radius, radius, height, 8); this.body = new CANNON.Body({ mass: 120, // Increased mass in kg shape: shape, position: new CANNON.Vec3(camera.position.x, 2.0, camera.position.z), // Adjusted starting height linearDamping: 0.9, fixedRotation: true, collisionFilterGroup: COLLISION_GROUPS.PLAYER, collisionFilterMask: COLLISION_GROUPS.PLAYER | COLLISION_GROUPS.WALL | COLLISION_GROUPS.FLOOR | COLLISION_GROUPS.ZOMBIE }); // Add debug visualization for player's collision shape this.debugMesh = new THREE.Mesh( new THREE.CylinderGeometry(radius, radius, height, 8), new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true }) ); this.game.scene.add(this.debugMesh); this.createDebugMesh(); // Add this line to create the debug mesh this.game.world.addBody(this.body); // Create player physics material and contact materials const playerPhysicsMaterial = new CANNON.Material('playerMaterial'); const groundPhysicsMaterial = new CANNON.Material('groundMaterial'); const zombiePhysicsMaterial = new CANNON.Material('zombieMaterial'); const playerGroundContact = new CANNON.ContactMaterial(playerPhysicsMaterial, groundPhysicsMaterial, { friction: 0.7, restitution: 0.1, contactEquationStiffness: 1e8, contactEquationRelaxation: 3 }); const playerZombieContact = new CANNON.ContactMaterial(playerPhysicsMaterial, zombiePhysicsMaterial, { friction: 0.5, restitution: 0.3, contactEquationStiffness: 1e8, contactEquationRelaxation: 3 }); this.game.world.addContactMaterial(playerGroundContact); this.game.world.addContactMaterial(playerZombieContact); this.body.material = playerPhysicsMaterial; // Enable continuous collision detection this.body.ccdSpeedThreshold = 1; this.body.ccdIterations = 5; // Add collision event listener this.body.addEventListener("collide", this.onCollide.bind(this)); } else { console.error('Physics world not initialized when creating player'); } } takeDamage(amount) { const currentTime = Date.now(); if (!this.isDead && currentTime - this.lastDamageTime >= this.invulnerabilityTime) { this.health -= amount; this.lastDamageTime = currentTime; this.game.logger.log('Player', `Player took ${amount} damage. Current health: ${this.health}`, 'Health'); if (this.health <= 0) { this.health = 0; this.game.logger.log('Player', 'Player health reached 0', 'Health'); this.die(); } // Update the health bar if (this.game.healthBar) { this.game.healthBar.update(this.health, this.maxHealth); } // Trigger damage overlay effect if (this.game.damageOverlay) { this.game.damageOverlay.show(); } } } die() { if (!this.isDead) { this.isDead = true; this.game.logger.log('Player', 'Player died', 'Health'); this.game.setState('POST_GAME'); } } reset() { this.health = this.maxHealth; this.isDead = false; this.lastDamageTime = 0; this.body.position.set(0, this.game.playerStartHeight, 0); this.body.velocity.set(0, 0, 0); if (this.game.healthBar) { this.game.healthBar.update(this.health, this.maxHealth); } this.game.logger.log('Player', 'Player reset', 'Initialization'); } update() { if (this.body) { const moveDirection = new CANNON.Vec3(); // Calculate forward and right vectors based on camera rotation const forward = new CANNON.Vec3( -Math.sin(this.camera.rotation.y), 0, -Math.cos(this.camera.rotation.y) ); const right = new CANNON.Vec3( Math.cos(this.camera.rotation.y), 0, -Math.sin(this.camera.rotation.y) ); if (this.keys.w) moveDirection.vadd(forward, moveDirection); if (this.keys.s) moveDirection.vsub(forward, moveDirection); if (this.keys.a) moveDirection.vsub(right, moveDirection); if (this.keys.d) moveDirection.vadd(right, moveDirection); if (moveDirection.lengthSquared() > 0) { moveDirection.normalize(); moveDirection.scale(this.moveSpeed, moveDirection); } // Set velocity directly this.body.velocity.x = moveDirection.x; this.body.velocity.z = moveDirection.z; // Keep vertical velocity (for gravity) this.body.velocity.y = this.body.velocity.y; // Update camera position based on physics body this.camera.position.copy(this.body.position); this.camera.position.y += 0.8; // Offset camera position to be at the "head" of the player // Ensure the player doesn't fall below the floor if (this.body.position.y < this.game.playerStartHeight) { this.body.position.y = this.game.playerStartHeight; this.body.velocity.y = 0; } // Check if player has fallen through the floor if (this.body.position.y < -10) { this.game.logger.log('Player', 'Player has fallen through the floor!', 'Error'); // You might want to reset the player's position here // this.body.position.set(0, 5, 0); // Reset to a safe position // this.body.velocity.set(0, 0, 0); // Reset velocity } // Update debug visualization if (this.debugMesh) { this.debugMesh.position.copy(this.body.position); this.debugMesh.quaternion.copy(this.body.quaternion); } // Update the new debug mesh if (this.debugMesh) { this.debugMesh.position.copy(this.body.position); this.debugMesh.quaternion.copy(this.body.quaternion); } } } onKeyDown(event) { if (event.key.toLowerCase() in this.keys) { this.keys[event.key.toLowerCase()] = true; } } onKeyUp(event) { if (event.key.toLowerCase() in this.keys) { this.keys[event.key.toLowerCase()] = false; } } onCollide(event) { if (event.body.collisionFilterGroup === COLLISION_GROUPS.ZOMBIE) { const zombiePosition = event.body.position; this.game.logger.log('Combat', `Player collided with zombie at position (${zombiePosition.x.toFixed(2)}, ${zombiePosition.y.toFixed(2)}, ${zombiePosition.z.toFixed(2)})`, 'ZombieCollision'); // TODO: Implement player damage logic here in the future } } createDebugMesh() { const geometry = new THREE.CylinderGeometry(0.5, 0.5, 2.0, 8); const material = new THREE.MeshBasicMaterial({ color: 0x0000ff, wireframe: true }); this.debugMesh = new THREE.Mesh(geometry, material); this.game.scene.add(this.debugMesh); } } // Logger class class Logger { constructor(logInterval = 5000, logLimit = 6000) { this.logs = {}; this.logInterval = logInterval; this.lastLogTime = Date.now(); this.colors = { 'Player': '#FF6B6B', 'CurrentScene': '#4ECDC4', 'Enemies': '#45B7D1', 'GameLoop': '#FFA07A', 'UI': '#98D8C8', 'Combat': '#32CD32', }; this.defaultColor = '#808080'; this.logLimit = logLimit; this.logCount = 0; } log(type, message, subcategory = 'General') { if (!this.logs[type]) { this.logs[type] = {}; } if (!this.logs[type][subcategory]) { this.logs[type][subcategory] = []; } this.logs[type][subcategory].push({ timestamp: Date.now(), message: message }); if (Date.now() - this.lastLogTime >= this.logInterval) { this.printLogs(); } } printLogs() { const currentTime = Date.now(); const formatTime = (timestamp) => { const date = new Date(timestamp); return date.toLocaleTimeString('en-US', { hour12: true }); }; if (this.logCount >= this.logLimit) { console.clear(); this.logCount = 0; console.log('%cConsole cleared due to log limit reached', 'color: #FF0000; font-weight: bold;'); } console.group(`%cLogs (${formatTime(this.lastLogTime)} - ${formatTime(currentTime)})`, 'color: #00008B; font-weight: bold;'); for (const [type, subcategories] of Object.entries(this.logs)) { const color = this.colors[type] || this.defaultColor; const totalLogs = Object.values(subcategories).reduce((sum, logs) => sum + logs.length, 0); console.groupCollapsed(`%c${type} (${totalLogs})`, `color: ${color}; font-weight: bold;`); for (const [subcategory, logs] of Object.entries(subcategories)) { if (logs.length > 0) { console.groupCollapsed(`%c${subcategory} (${logs.length})`, `color: ${color}; font-weight: normal;`); logs.forEach(log => { console.log(`%c[${formatTime(log.timestamp)}] ${log.message}`, `color: ${color};`); this.logCount++; }); console.groupEnd(); } } console.groupEnd(); } console.groupEnd(); this.logs = {}; this.lastLogTime = currentTime; } } class ZombieSpawnManager { constructor(game) { this.game = game; this.isTestMode = true; // Add this line to enable test mode this.spawnPoints = [{ x: -16, z: -12 }, { x: 16, z: -12 }, { x: 0, z: 12 }, { x: 0, z: 8 }]; // Add the new spawn point (0, 8) } getRandomSpawnPoint() { if (this.isTestMode) { return this.spawnPoints[this.spawnPoints.length - 1]; // Return the last spawn point (0, 8) in test mode } if (this.spawnPoints.length === 0) { this.game.logger.log('Enemies', 'No spawn points defined', 'Error'); return null; } const randomIndex = Math.floor(Math.random() * this.spawnPoints.length); return this.spawnPoints[randomIndex]; } spawnZombie() { const spawnPoint = this.getRandomSpawnPoint(); if (spawnPoint) { const zombiePosition = new THREE.Vector3(spawnPoint.x, 0, spawnPoint.z); const zombie = new Zombie(this.game, this.game.scene, zombiePosition); zombie.loadModel().then(() => { this.game.logger.log('Enemies', `New zombie spawned at (${spawnPoint.x}, ${spawnPoint.z})`, 'Spawn'); this.game.zombies.push(zombie); }).catch(error => { this.game.logger.log('Enemies', `Error creating new zombie: ${error}`, 'Error'); }); } } } // Zombie class class Zombie { static nextId = 0; // Static property to keep track of zombie IDs constructor(game, scene, position) { this.game = game; this.scene = scene; this.position = position; this.model = null; this.speed = 2; // Speed of zombie movement (units per second) this.health = 3; // 3 hits to kill this.flashDuration = 200; // Duration of red flash in milliseconds this.lastHitTime = 0; this.greenMaterial = new THREE.MeshPhongMaterial({ color: 0x00ff00, // Green color specular: 0x111111, shininess: 30 }); this.direction = new CANNON.Vec3(1, 0, 0); // Initial movement direction (along positive x-axis) this.id = Zombie.nextId++; // Assign a unique ID to each zombie this.debugLine = null; // Add this line to store the debug line object this.hitMaterial = new THREE.MeshPhongMaterial({ color: 0xff0000 // Red material for hit effect }); this.attackRange = 2.5; // Increased attack range from 2 to 3 units this.attackInterval = 1000; // Attack interval in milliseconds this.lastAttackTime = 0; this.isAttacking = false; this.damage = 10; // Damage per attack // Create Cannon.js body for the zombie const radius = 0.5; // Increased from 0.3 const height = 2.0; // Increased from 1.4 const shape = new CANNON.Cylinder(radius, radius, height, 16); // Increased segment count this.body = new CANNON.Body({ mass: 80, // Mass in kg shape: shape, position: new CANNON.Vec3(position.x, position.y + height / 2, position.z), material: new CANNON.Material('zombieMaterial'), linearDamping: 0.9, angularDamping: 0.9, fixedRotation: true // Add this line to prevent rotation }); // Enable continuous collision detection this.body.ccdSpeedThreshold = 1; this.body.ccdIterations = 5; // Set up collision groups and masks this.body.collisionFilterGroup = COLLISION_GROUPS.ZOMBIE; this.body.collisionFilterMask = COLLISION_GROUPS.PLAYER | COLLISION_GROUPS.WALL | COLLISION_GROUPS.FLOOR | COLLISION_GROUPS.ZOMBIE; // Create zombie-ground contact material const zombieGroundContact = new CANNON.ContactMaterial( this.body.material, this.game.world.defaultMaterial, { friction: 0.5, restitution: 0.3, contactEquationStiffness: 1e8, contactEquationRelaxation: 3 } ); this.game.world.addContactMaterial(zombieGroundContact); // Add collision event listener this.body.addEventListener("collide", this.onCollide.bind(this)); // Add the body to the physics world this.game.world.addBody(this.body); // Set initial velocity this.body.velocity.set(this.direction.x * this.speed, 0, this.direction.z * this.speed); } createDebugMesh() { const geometry = new THREE.CylinderGeometry(0.5, 0.5, 2.0, 16); const material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true }); this.debugMesh = new THREE.Mesh(geometry, material); this.scene.add(this.debugMesh); } onCollide(event) { const otherBody = event.body; const zombiePos = this.body.position; const otherPos = otherBody.position; const distance = zombiePos.distanceTo(otherPos); const relativeVelocity = event.contact.getImpactVelocityAlongNormal(); let collisionType = 'Unknown'; if (otherBody.collisionFilterGroup === COLLISION_GROUPS.WALL) { collisionType = 'Wall'; } else if (otherBody.collisionFilterGroup === COLLISION_GROUPS.PLAYER) { collisionType = 'Player'; } else if (otherBody.collisionFilterGroup === COLLISION_GROUPS.FLOOR) { collisionType = 'Floor'; } else if (otherBody.collisionFilterGroup === COLLISION_GROUPS.ZOMBIE) { collisionType = 'Other Zombie'; } this.game.logger.log('Collision', `Zombie collision detected: Type: ${collisionType} Zombie position: (${zombiePos.x.toFixed(2)}, ${zombiePos.y.toFixed(2)}, ${zombiePos.z.toFixed(2)}) Other body position: (${otherPos.x.toFixed(2)}, ${otherPos.y.toFixed(2)}, ${otherPos.z.toFixed(2)}) Distance: ${distance.toFixed(2)} Relative velocity: ${relativeVelocity.toFixed(2)} Other body group: ${otherBody.collisionFilterGroup}`, 'Debug'); if (collisionType === 'Wall') { this.game.logger.log('Enemies', `Zombie collided with wall`, 'Collision'); } else if (collisionType === 'Player') { this.game.logger.log('Combat', `Zombie collided with player`, 'PlayerCollision'); } } async loadModel() { const characterModel = this.game.assetLoader.getAsset('characterModel'); if (!characterModel) { this.game.logger.log('Enemies', 'Character model not loaded yet', 'Error'); return; } this.model = characterModel.clone(); this.model.position.copy(this.body.position); this.model.position.y -= 0.5; // Adjust model position to align with physics body this.model.scale.set(0.2, 0.2, 0.2); this.model.rotation.y = Math.PI; // Rotate the model to face the correct direction // Apply green material to all meshes in the model this.model.traverse((child) => { if (child.isMesh) { child.material = this.greenMaterial; } }); this.scene.add(this.model); this.createDebugMesh(); // Add this line to create the debug mesh this.createDebugLine(); // Add this line to create the debug direction line this.game.logger.log('Enemies', `Zombie model added at position (${this.body.position.x.toFixed(2)}, ${this.body.position.y.toFixed(2)}, ${this.body.position.z.toFixed(2)})`, 'Spawn'); } createDebugLine() { const geometry = new THREE.BufferGeometry(); const material = new THREE.LineBasicMaterial({ color: 0xff0000 }); // Red color for the line geometry.setAttribute('position', new THREE.Float32BufferAttribute(new Array(6).fill(0), 3)); this.debugLine = new THREE.Line(geometry, material); this.scene.add(this.debugLine); } update(camera, gameState) { if (this.model && this.body && gameState === 'IN_GAME') { const playerPosition = this.game.player.body.position; const zombiePosition = this.body.position; const distance = zombiePosition.distanceTo(playerPosition); // Calculate direction to player (2D movement in X-Z plane) const direction = new CANNON.Vec3( playerPosition.x - zombiePosition.x, 0, // Set Y component to 0 for 2D movement playerPosition.z - zombiePosition.z ); direction.normalize(); // Log direction and distance every 60 frames if (this.game.renderer.info.render.frame % 60 === 0) { console.log(`Zombie ${this.id}: Direction to player: (${direction.x.toFixed(2)}, ${direction.z.toFixed(2)}), Distance: ${distance.toFixed(2)}`); } // Always move towards the player, but attack if within range const newVelocity = new CANNON.Vec3( direction.x * this.speed, this.body.velocity.y, // Maintain current vertical velocity direction.z * this.speed ); this.body.velocity.copy(newVelocity); if (distance <= this.attackRange) { this.isAttacking = true; this.attackPlayer(); if (this.game.renderer.info.render.frame % 60 === 0) { console.log(`Zombie ${this.id}: Attacking player while moving.`); } } else { this.isAttacking = false; } // Log new velocity and position every 60 frames if (this.game.renderer.info.render.frame % 60 === 0) { console.log(`Zombie ${this.id}: New velocity: (${newVelocity.x.toFixed(2)}, ${newVelocity.z.toFixed(2)})`); console.log(`Zombie ${this.id}: Current position: (${this.body.position.x.toFixed(2)}, ${this.body.position.z.toFixed(2)})`); } // Ensure the zombie stays above the ground if (this.body.position.y < 1.0) { this.body.position.y = 1.0; } // Sync Three.js model with Cannon.js body this.model.position.copy(this.body.position); this.model.position.y -= 1.0; // Update model rotation to face movement direction if (this.body.velocity.lengthSquared() > 0.1) { this.model.rotation.y = Math.atan2(-this.body.velocity.x, -this.body.velocity.z); } // Update debug mesh position and rotation if (this.debugMesh) { this.debugMesh.position.copy(this.body.position); this.debugMesh.quaternion.copy(this.body.quaternion); } } // Handle hit flash effect if (Date.now() - this.lastHitTime < this.flashDuration) { this.model.traverse((child) => { if (child.isMesh) { child.material = this.hitMaterial; } }); } else { this.model.traverse((child) => { if (child.isMesh) { child.material = this.greenMaterial; } }); } // Update debug line if (this.debugLine) { const positions = this.debugLine.geometry.attributes.position.array; const zombiePos = this.body.position; const playerPos = this.game.player.body.position; // Set start point of the line (zombie position) positions[0] = zombiePos.x; positions[1] = zombiePos.y; positions[2] = zombiePos.z; // Set end point of the line (player position) positions[3] = playerPos.x; positions[4] = playerPos.y; positions[5] = playerPos.z; this.debugLine.geometry.attributes.position.needsUpdate = true; } } attackPlayer() { const currentTime = Date.now(); if (currentTime - this.lastAttackTime >= this.attackInterval) { this.game.player.takeDamage(this.damage); this.lastAttackTime = currentTime; this.game.logger.log('Combat', `Zombie attacked player for ${this.damage} damage`, 'ZombieAttack'); } } takeDamage(amount) { this.health -= amount; this.lastHitTime = Date.now(); this.game.logger.log('Enemies', `Zombie took ${amount} damage. Health: ${this.health}`, 'Health'); if (this.health <= 0) { this.die(); } } playDeathSound() { if (this.game.zombieDeathSounds && this.game.zombieDeathSounds.length > 0) { const randomIndex = Math.floor(Math.random() * this.game.zombieDeathSounds.length); const sound = this.game.zombieDeathSounds[randomIndex]; if (sound) { sound.currentTime = 0; // Set the volume according to the asset configuration sound.volume = this.game.assetConfig[`zombieDeathSound${randomIndex + 1}`].volume; sound.play(); } } } die() { this.playDeathSound(); if (this.model) { this.scene.remove(this.model); } if (this.body) { this.game.world.removeBody(this.body); } // Remove this zombie from the zombies array const index = this.game.zombies.indexOf(this); if (index !== -1) { this.game.zombies.splice(index, 1); } // Spawn a new zombie this.game.createNewZombie(); // Increase score this.game.score++; this.game.updateScoreDisplay(); this.game.logger.log('Enemies', 'Zombie died. New zombie spawned.', 'Lifecycle'); this.game.logger.log('GameLoop', `Score increased. New score: ${this.game.score}`, 'Score'); } } class HealthBar { constructor(game) { this.game = game; this.container = document.createElement('div'); this.container.style.position = 'absolute'; this.container.style.bottom = '20px'; this.container.style.left = '20px'; this.container.style.width = '200px'; this.container.style.height = '20px'; this.container.style.backgroundColor = 'white'; this.container.style.border = '2px solid black'; this.healthBar = document.createElement('div'); this.healthBar.style.width = '100%'; this.healthBar.style.height = '100%'; this.healthBar.style.backgroundColor = 'red'; this.container.appendChild(this.healthBar); this.game.parentDiv.appendChild(this.container); } update(health, maxHealth) { const healthPercentage = (health / maxHealth) * 100; this.healthBar.style.width = `${healthPercentage}%`; } reset() { this.update(this.game.player.maxHealth, this.game.player.maxHealth); } } class DamageOverlay { constructor(parentElement) { this.overlay = document.createElement('div'); this.overlay.style.position = 'absolute'; this.overlay.style.top = '0'; this.overlay.style.left = '0'; this.overlay.style.width = '100%'; this.overlay.style.height = '100%'; this.overlay.style.background = 'radial-gradient(circle, transparent 20%, rgba(255,0,0,0.8) 100%)'; this.overlay.style.opacity = '0'; this.overlay.style.pointerEvents = 'none'; this.overlay.style.transition = 'opacity 0.5s ease-out'; this.overlay.style.mixBlendMode = 'multiply'; parentElement.appendChild(this.overlay); } show() { this.overlay.style.opacity = '1'; setTimeout(() => this.hide(), 500); } hide() { this.overlay.style.opacity = '0'; } } // Initialize the game const game = new Game(parentDiv); game.init();