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 }; // 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; } } } 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); } } // 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); } } // mouse speed UI class class MouseSensitivityUI { constructor(parentDiv) { this.parentDiv = parentDiv; this.sensitivityDisplay = null; this.instructionText = null; this.createUI(); } createUI() { this.sensitivityDisplay = document.createElement('div'); this.sensitivityDisplay.style.position = 'absolute'; this.sensitivityDisplay.style.top = '10px'; this.sensitivityDisplay.style.left = '10px'; this.sensitivityDisplay.style.color = 'white'; this.sensitivityDisplay.style.fontSize = '16px'; this.sensitivityDisplay.style.fontFamily = 'Arial, sans-serif'; this.sensitivityDisplay.style.zIndex = '1000'; this.sensitivityDisplay.style.textShadow = '1px 1px 2px black'; this.parentDiv.appendChild(this.sensitivityDisplay); this.instructionText = document.createElement('div'); this.instructionText.textContent = "Press '1' to decrease or '2' to increase mouse speed"; this.instructionText.style.position = 'absolute'; this.instructionText.style.top = '30px'; this.instructionText.style.left = '10px'; this.instructionText.style.color = 'white'; this.instructionText.style.fontSize = '14px'; this.instructionText.style.fontFamily = 'Arial, sans-serif'; this.instructionText.style.zIndex = '1000'; this.instructionText.style.textShadow = '1px 1px 2px black'; this.parentDiv.appendChild(this.instructionText); } updateDisplay(sensitivity) { if (this.sensitivityDisplay) { this.sensitivityDisplay.textContent = `Mouse speed: ${sensitivity.toFixed(2)}`; } } } // Wall class class Wall { constructor(scene, world, startX, startZ, direction, height = 5) { this.scene = scene; this.world = world; this.width = 0.5; // Wall thickness this.height = height; // Use the provided height or default to 5 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 Grid { constructor(scene, size = 4, cellSize = 2, height = 5, offsetZ = -8, offsetY = 1.5) { this.scene = scene; this.size = size; this.cellSize = cellSize; this.height = height; this.offsetZ = offsetZ; this.offsetY = offsetY; this.maxVerticalPositions = this.size - 1; // Remove top 3 rows this.positions = this.generatePositions(); } generatePositions() { const positions = []; for (let x = 0; x < this.size; x++) { for (let y = 0; y < this.maxVerticalPositions; y++) { positions.push(new THREE.Vector3( (x - (this.size - 1) / 2) * this.cellSize, this.offsetY + y * this.cellSize, this.offsetZ )); } } return positions; } getRandomPosition() { return this.positions[Math.floor(Math.random() * this.positions.length)]; } } class TargetManager { constructor(scene, grid, game) { this.scene = scene; this.grid = grid; this.game = game; this.targets = []; this.usedPositions = new Set(); this.recentlyUsedPositions = []; this.cooldownTime = 5000; // 5 seconds cooldown } removeTarget(target) { const index = this.targets.indexOf(target); if (index !== -1) { this.targets.splice(index, 1); this.scene.remove(target); this.usedPositions.delete(target.position.toArray().toString()); this.game.logger.log('TargetManager', `Target removed at position (${target.position.x.toFixed(2)}, ${target.position.y.toFixed(2)}, ${target.position.z.toFixed(2)})`, 'TargetRemoval'); } } initializeTargets(count) { console.log(`TargetManager: Initializing ${count} targets`); this.clearAllTargets(); // Create new targets for (let i = 0; i < count; i++) { this.createTarget(); } console.log(`TargetManager: ${this.targets.length} targets initialized`); } createTarget() { console.log('TargetManager: Creating new target'); const targetGeometry = new THREE.SphereGeometry(0.5, 32, 32); const targetMaterial = new THREE.MeshStandardMaterial({ color: 0xFFA500, // Orange color emissive: 0xFFA500, // Same as color for full glow emissiveIntensity: 0.7, // Adjust this value to control glow intensity metalness: 0.3, roughness: 0.4 }); const target = new THREE.Mesh(targetGeometry, targetMaterial); const position = this.getAvailablePosition(); target.position.copy(position); this.scene.add(target); this.targets.push(target); console.log(`TargetManager: Target created at position: (${position.x.toFixed(2)}, ${position.y.toFixed(2)}, ${position.z.toFixed(2)})`); return target; } clearAllTargets() { this.targets.forEach(target => { this.scene.remove(target); console.log(`TargetManager: Removed existing target at (${target.position.x.toFixed(2)}, ${target.position.y.toFixed(2)}, ${target.position.z.toFixed(2)})`); }); this.targets = []; this.usedPositions.clear(); this.recentlyUsedPositions = []; } getAvailablePosition() { let position; do { position = this.grid.getRandomPosition(); } while (this.isPositionUsed(position) || this.isPositionRecentlyUsed(position)); this.usedPositions.add(position.toArray().toString()); this.addToRecentlyUsed(position); return position; } isPositionUsed(position) { return this.usedPositions.has(position.toArray().toString()); } isPositionRecentlyUsed(position) { return this.recentlyUsedPositions.some(p => p.position.equals(position)); } addToRecentlyUsed(position) { const now = Date.now(); this.recentlyUsedPositions.push({ position, time: now }); this.cleanupRecentlyUsed(now); } cleanupRecentlyUsed(now) { this.recentlyUsedPositions = this.recentlyUsedPositions.filter(p => now - p.time < this.cooldownTime); } respawnTarget(target) { this.scene.remove(target); this.usedPositions.delete(target.position.toArray().toString()); const index = this.targets.indexOf(target); if (index !== -1) { this.targets[index] = this.createTarget(); console.log(`Target respawned at: ${JSON.stringify(this.targets[index].position)}`); } } getTargets() { return this.targets; } } class WallManager { constructor(scene, world) { this.scene = scene; this.world = world; this.walls = []; } removeAllWalls() { this.walls.forEach(wall => { this.scene.remove(wall.mesh); this.world.removeBody(wall.body); }); this.walls = []; } addWall(startX, startZ, direction, height = 5) { const wall = new Wall(this.scene, this.world, startX, startZ, direction, height); 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 // 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.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.mouseSensitivity = this.loadSensitivityFromLocalStorage(); // Load sensitivity from local storage // UI elements this.timerDisplay = null; this.scoreDisplay = null; this.uiBackground = null; this.crosshair = null; this.mouseSensitivityUI = null; // New property for mouse speed UI // Walls and Corridors this.walls = []; this.corridor = null; this.corridors = []; // Target shooting this.grid = null; this.targetManager = null; } 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'); } } handleInGameState() { console.log("Entering handleInGameState"); this.startButtonMesh.visible = false; if (this.timerDisplay) { this.timerDisplay.style.display = 'block'; this.updateTimerDisplay(); } if (this.scoreDisplay) this.scoreDisplay.style.display = 'block'; if (this.highScoreDisplay) this.highScoreDisplay.style.display = 'none'; this.score = 0; this.gameTimer = 30; this.updateScoreDisplay(); this.startTimer(); console.log("About to initialize targets"); this.targetManager.initializeTargets(3); console.log("Targets initialized"); this.logger.log('GameLoop', 'Game started', 'GameState'); console.log("Exiting handleInGameState"); } handlePostGameState() { 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'); // Clear all targets this.targetManager.clearAllTargets(); if (this.highScoreDisplay) { const currentHighScore = localStorage.getItem('Reflex_FPS_highscore') || 0; this.highScoreDisplay.textContent = `High Score: ${Math.max(this.score, currentHighScore)}`; this.highScoreDisplay.style.display = 'block'; } // Ensure mouse sensitivity UI remains visible if (this.mouseSensitivityUI) { this.mouseSensitivityUI.updateDisplay(this.mouseSensitivity * 1000); } } 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'; if (this.highScoreDisplay) { const currentHighScore = localStorage.getItem('3D_FPS_highscore') || 0; this.highScoreDisplay.textContent = `High Score: ${currentHighScore}`; this.highScoreDisplay.style.display = 'block'; this.highScoreDisplay.style.top = '15px'; // Ensure it's at the top } if (this.healthBar) { this.healthBar.reset(); } this.logger.log('UI', 'Pre-game state UI updated', 'Initialization'); } 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}`; this.scoreDisplay.style.display = 'block'; this.scoreDisplay.style.top = '45px'; // Adjusted to be below the high score this.highScoreDisplay.textContent = `High Score: ${Math.max(this.score, currentHighScore)}`; this.highScoreDisplay.style.display = 'block'; this.highScoreDisplay.style.top = '15px'; } 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.wallManager.removeAllWalls(); // Remove any existing walls this.createInitialWalls(); this.damageOverlay = new DamageOverlay(this.parentDiv); this.grid = new Grid(this.scene); this.targetManager = new TargetManager(this.scene, this.grid, this); console.log("TargetManager initialized with logger:", this.logger); this.mouseSensitivityUI.updateDisplay(this.mouseSensitivity * 1000); this.animate(); console.log('Game initialized successfully'); } catch (error) { console.error('Error initializing game:', error); } } loadSensitivityFromLocalStorage() { const storedSensitivity = localStorage.getItem('mouseSensitivity'); return storedSensitivity ? parseFloat(storedSensitivity) : 0.002; // Default to 0.002 if not found } createInitialWalls() { // Create a wall along the z-axis at -4 this.createWallAtZMinus4(); } createWallAtZMinus4() { // Create a wall along the z-axis at -4, spanning the entire room const roomHalfSize = Game.ROOM_SIZE / 2; const wallHeight = 1; for (let x = -roomHalfSize; x < roomHalfSize; x += 4) { const wall = this.wallManager.addWall(x, -4, 'x', wallHeight); // Ensure the wall has the correct collision group and mask wall.body.collisionFilterGroup = COLLISION_GROUPS.WALL; wall.body.collisionFilterMask = COLLISION_GROUPS.PLAYER | COLLISION_GROUPS.WALL; } } createUI() { this.createStartButton(); this.createTimerDisplay(); this.createScoreDisplay(); this.createUIBackground(); this.mouseSensitivityUI = new MouseSensitivityUI(this.parentDiv); this.mouseSensitivityUI.updateDisplay(this.mouseSensitivity * 1000); } createTimerDisplay() { this.timerDisplay = document.createElement('div'); this.timerDisplay.style.position = 'absolute'; this.timerDisplay.style.top = '15px'; 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.timerDisplay.style.display = 'none'; // Initially hide the timer this.parentDiv.appendChild(this.timerDisplay); } createScoreDisplay() { this.scoreDisplay = document.createElement('div'); this.scoreDisplay.style.position = 'absolute'; this.scoreDisplay.style.top = '45px'; 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); this.highScoreDisplay = document.createElement('div'); this.highScoreDisplay.style.position = 'absolute'; this.highScoreDisplay.style.top = '15px'; this.highScoreDisplay.style.left = '50%'; this.highScoreDisplay.style.transform = 'translateX(-50%)'; this.highScoreDisplay.style.fontSize = '24px'; this.highScoreDisplay.style.color = 'gold'; this.highScoreDisplay.style.zIndex = '2'; this.parentDiv.appendChild(this.highScoreDisplay); } 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: #E0FFFF; // Light cyan (bluish white) } #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_base.obj?1v5W' }, shootSound: { url: 'https://play.rosebud.ai/assets/snd_pistol_shot.wav?V6gU', volume: 0.1 } }; 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.gunTexture = this.assetLoader.getAsset('gunTexture'); this.gunModel = this.assetLoader.getAsset('gunModel'); this.characterModel = this.assetLoader.getAsset('characterModel'); this.shootSound = this.assetLoader.getAsset('shootSound'); // Set volume for audio assets if (this.shootSound) this.shootSound.volume = this.assetConfig.shootSound.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_base.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.MeshStandardMaterial({ color: 0xFFD700, // Golden color emissive: 0xFFD700, // Same as color for subtle glow emissiveIntensity: 0.4, // Adjust this value to control glow intensity metalness: 0.5, roughness: 0.3 }); 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: 0x000000, // Black text for better contrast 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); // Add glow effect to the text const glowMaterial = new THREE.ShaderMaterial({ uniforms: { c: { type: "f", value: 0.1 }, p: { type: "f", value: 1.4 }, glowColor: { type: "c", value: new THREE.Color(0xFFFFFF) } }, vertexShader: ` uniform float c; uniform float p; varying float intensity; void main() { vec3 vNormal = normalize(normalMatrix * normal); vec3 vNormel = normalize(normalMatrix * viewVector); intensity = pow(c - dot(vNormal, vNormel), p); gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `, fragmentShader: ` uniform vec3 glowColor; varying float intensity; void main() { vec3 glow = glowColor * intensity; gl_FragColor = vec4(glow, 1.0); } `, side: THREE.FrontSide, blending: THREE.AdditiveBlending, transparent: true }); const glowMesh = new THREE.Mesh(textGeometry, glowMaterial); glowMesh.position.copy(textMesh.position); glowMesh.scale.multiplyScalar(1.05); this.startButtonMesh.add(glowMesh); }); } 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); } 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 target hits const targets = this.targetManager.getTargets(); const targetIntersects = this.raycaster.intersectObjects(targets); if (targetIntersects.length > 0) { this.handleTargetHit(targetIntersects[0].object); } // Create muzzle flash effect this.createMuzzleFlash(); // Log the shot for debugging purposes this.logger.log('Combat', 'Player fired a shot', 'PlayerAction'); } handleTargetHit(target) { this.score += 1; // Increase score this.updateScoreDisplay(); this.targetManager.removeTarget(target); const newTarget = this.targetManager.createTarget(); // Create a new target to replace the hit one this.logger.log('Combat', `Target hit! Score: ${this.score}. New target created at (${newTarget.position.x.toFixed(2)}, ${newTarget.position.y.toFixed(2)}, ${newTarget.position.z.toFixed(2)})`, 'PlayerAction'); } 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'); // back to target shooting } } // Removed handleZombieHit method 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(0x000000); // Set to black for night sky renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(this.parentDiv.clientWidth, this.parentDiv.clientHeight); // Add fog to the scene for a spooky atmosphere this.scene.fog = new THREE.FogExp2(0x000000, 0.01); return renderer; } initLights() { if (!this.scene) { console.error('Scene is not initialized'); return; } // Dim blue ambient light for moonlight effect const ambientLight = new THREE.AmbientLight(0x3366ff, 0.3); this.scene.add(ambientLight); // Dim orange point light for distant jack-o'-lantern effect const pointLight = new THREE.PointLight(0xff6600, 0.4, 75); pointLight.position.set(0, Game.WALL_HEIGHT - 1, 0); this.scene.add(pointLight); // Add a very subtle directional light to enhance depth const directionalLight = new THREE.DirectionalLight(0xffffff, 0.05); directionalLight.position.set(1, 1, 1); this.scene.add(directionalLight); } animate() { requestAnimationFrame(() => this.animate()); const deltaTime = 1 / 60; // Assuming 60 FPS // Apply rotations to the camera this.camera.rotation.order = 'YXZ'; // 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 walls this.walls.forEach(wall => wall.update()); // 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); this.handleSensitivityAdjustment(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()); } handleSensitivityAdjustment(event) { if (event.key === '1') { this.mouseSensitivity = Math.max(0.0001, this.mouseSensitivity - 0.0001); } else if (event.key === '2') { this.mouseSensitivity = Math.min(0.01, this.mouseSensitivity + 0.0001); } // Save the new sensitivity to local storage localStorage.setItem('mouseSensitivity', this.mouseSensitivity.toString()); // Update the UI display this.mouseSensitivityUI.updateDisplay(this.mouseSensitivity * 1000); } 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(); } 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; // Use the new handleMouseMovement method this.player.handleMouseMovement(movementX, movementY); // Log large movements for debugging const movementMagnitude = Math.sqrt(movementX * movementX + movementY * movementY); if (movementMagnitude > 100) { // Adjust this threshold as needed this.logger.log('Mouse', `Large mouse movement detected: X=${movementX}, Y=${movementY}`, 'Input'); } } } 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; this.rotationBuffer = { x: 0, y: 0 }; // Buffer for storing mouse movements this.rotationSmoothingFactor = 0.8; // Adjust this value to change smoothing intensity this.maxRotationAngle = Math.PI / 180 * 15; // Maximum rotation of 15 degrees per frame 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.WALL | COLLISION_GROUPS.FLOOR }); 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'); } } handleMouseMovement(movementX, movementY) { // Calculate rotation amounts let rotationY = -movementX * this.game.mouseSensitivity; let rotationX = -movementY * this.game.mouseSensitivity; // Cap rotation to maximum angle rotationY = Math.max(-this.maxRotationAngle, Math.min(this.maxRotationAngle, rotationY)); rotationX = Math.max(-this.maxRotationAngle, Math.min(this.maxRotationAngle, rotationX)); // Add capped rotation to the buffer this.rotationBuffer.y += rotationY; this.rotationBuffer.x += rotationX; // Clamp vertical rotation buffer to prevent over-rotation this.rotationBuffer.x = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, this.rotationBuffer.x)); } 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(); } // 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); 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; // Apply capped and smoothed rotation from the buffer const cappedRotationY = Math.max(-this.maxRotationAngle, Math.min(this.maxRotationAngle, this.rotationBuffer.y * this.rotationSmoothingFactor)); const cappedRotationX = Math.max(-this.maxRotationAngle, Math.min(this.maxRotationAngle, this.rotationBuffer.x * this.rotationSmoothingFactor)); this.camera.rotation.y += cappedRotationY; this.camera.rotation.x += cappedRotationX; // Reduce the rotation buffer this.rotationBuffer.y *= (1 - this.rotationSmoothingFactor); this.rotationBuffer.x *= (1 - this.rotationSmoothingFactor); // Clamp vertical rotation to prevent over-rotation this.camera.rotation.x = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, this.camera.rotation.x)); // 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 } } } 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) { // Log general collision events const collidingBody = event.body; const collisionPosition = collidingBody.position; this.game.logger.log('Physics', `Player collided with object at position (${collisionPosition.x.toFixed(2)}, ${collisionPosition.y.toFixed(2)}, ${collisionPosition.z.toFixed(2)})`, 'Collision'); } // Remove the entire createDebugMesh method } // Logger class class Logger { constructor() { this.logs = []; } log(type, message, subcategory = 'General') { const logEntry = `[${type}][${subcategory}] ${message}`; console.log(logEntry); this.logs.push(logEntry); } } // Removed Zombie class // Remove the entire HealthBar class 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();