Spaces:
Running
Running
| import * as THREE from 'three'; | |
| import * as CANNON from 'cannon-es'; | |
| // import CannonDebugger from 'cannon-es-debugger'; // Keep commented unless debugging physics visually | |
| // --- DOM Elements --- | |
| const sceneContainer = document.getElementById('scene-container'); | |
| const statsElement = document.getElementById('stats-display'); | |
| const inventoryElement = document.getElementById('inventory-display'); | |
| const logElement = document.getElementById('log-display'); | |
| // --- Config --- | |
| const ROOM_SIZE = 10; | |
| const WALL_HEIGHT = 4; | |
| const WALL_THICKNESS = 0.5; | |
| const CAMERA_Y_OFFSET = 20; | |
| const PLAYER_SPEED = 6; // Slightly faster | |
| const PLAYER_RADIUS = 0.5; | |
| const PLAYER_HEIGHT = 1.8; // Visual height | |
| const PLAYER_PHYSICS_HEIGHT = PLAYER_HEIGHT; // Height of physics body (using sphere, so this isn't directly used like capsule) | |
| const PLAYER_JUMP_FORCE = 8; // Adjust jump strength | |
| const PROJECTILE_SPEED = 15; | |
| const PROJECTILE_RADIUS = 0.2; | |
| const PICKUP_RADIUS = 1.5; // How close player needs to be to pickup items | |
| // --- Three.js Setup --- | |
| let scene, camera, renderer; | |
| let playerMesh; | |
| const meshesToSync = []; | |
| const projectiles = []; | |
| let axesHelper; | |
| // --- Physics Setup --- | |
| let world; | |
| let playerBody; | |
| const physicsBodies = []; // Keep track of ALL bodies we add | |
| let cannonDebugger = null; | |
| // --- Game State --- | |
| let gameState = {}; | |
| const keysPressed = {}; | |
| let gameLoopActive = false; | |
| let animationFrameId = null; // To potentially cancel the loop | |
| // --- Game Data (Simplified for Debugging, ensure 0,0 exists!) --- | |
| const gameData = { | |
| "0,0": { type: 'city', features: ['door_north', 'item_Key'], name: "City Square"}, | |
| "0,1": { type: 'forest', features: ['path_north', 'door_south', 'item_Healing_Potion'], name: "Forest Entrance" }, // Note item name change | |
| "0,2": { type: 'forest', features: ['path_south', 'monster_goblin'], name: "Deep Forest"}, | |
| "1,1": { type: 'forest', features: ['river', 'path_west'], name: "River Bend" }, | |
| "-1,1": { type: 'ruins', features: ['path_east'], name: "Old Ruins"}, | |
| // Add more simple locations for testing movement | |
| "1,0": { type: 'plains', features: ['door_west'], name: "East Plains"}, | |
| "-1,0": { type: 'plains', features: ['door_east'], name: "West Plains"}, | |
| }; | |
| const itemsData = { | |
| "Healing Potion": { type: "consumable", description: "Restores 10 HP.", hpRestore: 10, model: 'sphere_red' }, | |
| "Key": { type: "quest", description: "A rusty key.", model: 'box_gold'}, | |
| // ... | |
| }; | |
| const monstersData = { | |
| "goblin": { hp: 15, attack: 4, defense: 1, speed: 2, model: 'capsule_green', xp: 5 }, | |
| // ... | |
| }; | |
| // --- Materials and Geometries (Defined once) --- | |
| const materials = { | |
| floor_city: new THREE.MeshLambertMaterial({ color: 0xdeb887 }), | |
| forest: new THREE.MeshLambertMaterial({ color: 0x228B22 }), | |
| cave: new THREE.MeshLambertMaterial({ color: 0x696969 }), | |
| ruins: new THREE.MeshLambertMaterial({ color: 0x778899 }), | |
| plains: new THREE.MeshLambertMaterial({ color: 0x90EE90 }), | |
| default_floor: new THREE.MeshLambertMaterial({ color: 0xaaaaaa }), | |
| wall: new THREE.MeshLambertMaterial({ color: 0x888888 }), // Use Lambert for walls too (needs light) | |
| // Basic materials for debug: | |
| debug_player: new THREE.MeshBasicMaterial({ color: 0x0077ff, wireframe: true }), | |
| debug_wall: new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true }), | |
| debug_item: new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true }), | |
| debug_monster: new THREE.MeshBasicMaterial({ color: 0xff00ff, wireframe: true }), | |
| }; | |
| const geometries = { | |
| floor: new THREE.PlaneGeometry(ROOM_SIZE, ROOM_SIZE), | |
| wallNS: new THREE.BoxGeometry(ROOM_SIZE, WALL_HEIGHT, WALL_THICKNESS), | |
| wallEW: new THREE.BoxGeometry(WALL_THICKNESS, WALL_HEIGHT, ROOM_SIZE), | |
| // Primitives for assembly | |
| box: new THREE.BoxGeometry(1, 1, 1), | |
| sphere: new THREE.SphereGeometry(0.5, 16, 16), | |
| cylinder: new THREE.CylinderGeometry(0.5, 0.5, 1, 16), | |
| cone: new THREE.ConeGeometry(0.5, 1, 16), | |
| plane: new THREE.PlaneGeometry(1, 1), | |
| }; | |
| // --- Initialization --- | |
| function init() { | |
| console.log("--- Initializing Game ---"); | |
| // Reset state cleanly | |
| gameState = { | |
| inventory: [], | |
| stats: { hp: 30, maxHp: 30, strength: 7, wisdom: 5, courage: 6 }, | |
| position: { x: 0, z: 0 }, // Logical position, might not be needed now | |
| monsters: [], // { id, type, hp, body, mesh } | |
| items: [], // { id, name, body, mesh } - body might be null if not physics based | |
| }; | |
| keysPressed = {}; | |
| meshesToSync.length = 0; | |
| projectiles.length = 0; | |
| physicsBodies.length = 0; | |
| // Clear previous scene children if restarting | |
| if (scene) { | |
| while (scene.children.length > 0) { | |
| scene.remove(scene.children[0]); | |
| } | |
| } | |
| // Clear physics world bodies if restarting | |
| if (world) { | |
| while (world.bodies.length > 0) { | |
| world.removeBody(world.bodies[0]); | |
| } | |
| } | |
| initThreeJS(); | |
| initPhysics(); | |
| initPlayer(); // Player depends on physics world existing | |
| generateMap(); // Map depends on physics world existing | |
| setupInputListeners(); | |
| updateUI(); | |
| addLog("Welcome! Move: QWEASDZXC, Jump: Shift/X, Attack: Space, Pickup: F", "info"); | |
| console.log("--- Initialization Complete ---"); | |
| if (animationFrameId) cancelAnimationFrame(animationFrameId); // Stop previous loop if restarting | |
| gameLoopActive = true; | |
| animate(); | |
| } | |
| function initThreeJS() { | |
| console.log("Initializing Three.js..."); | |
| scene = new THREE.Scene(); | |
| scene.background = new THREE.Color(0x1a1a1a); // Match body background slightly better | |
| const aspect = sceneContainer.clientWidth / sceneContainer.clientHeight; | |
| camera = new THREE.PerspectiveCamera(60, aspect, 0.1, 1000); | |
| camera.position.set(0, CAMERA_Y_OFFSET, 5); // Start overhead, slightly back | |
| camera.lookAt(0, 0, 0); // Look at origin initially | |
| renderer = new THREE.WebGLRenderer({ antialias: true }); | |
| renderer.setSize(sceneContainer.clientWidth, sceneContainer.clientHeight); | |
| renderer.shadowMap.enabled = true; | |
| renderer.shadowMap.type = THREE.PCFSoftShadowMap; // Softer shadows | |
| sceneContainer.appendChild(renderer.domElement); | |
| // Lighting | |
| scene.add(new THREE.AmbientLight(0xffffff, 0.6)); // More ambient light | |
| const dirLight = new THREE.DirectionalLight(0xffffff, 1.0); | |
| dirLight.position.set(20, 30, 15); // Adjust light direction | |
| dirLight.castShadow = true; | |
| dirLight.shadow.mapSize.width = 2048; // Increase shadow map resolution | |
| dirLight.shadow.mapSize.height = 2048; | |
| dirLight.shadow.camera.near = 1; | |
| dirLight.shadow.camera.far = 60; // Adjust shadow camera range | |
| const shadowCamSize = 25; | |
| dirLight.shadow.camera.left = -shadowCamSize; | |
| dirLight.shadow.camera.right = shadowCamSize; | |
| dirLight.shadow.camera.top = shadowCamSize; | |
| dirLight.shadow.camera.bottom = -shadowCamSize; | |
| scene.add(dirLight); | |
| // scene.add(new THREE.CameraHelper(dirLight.shadow.camera)); // Shadow debug | |
| // Axes Helper | |
| axesHelper = new THREE.AxesHelper(ROOM_SIZE * 0.5); | |
| axesHelper.position.set(0, 0.01, 0); // Place it clearly | |
| scene.add(axesHelper); | |
| console.log("Three.js Initialized."); | |
| window.addEventListener('resize', onWindowResize, false); | |
| } | |
| function initPhysics() { | |
| console.log("Initializing Cannon-es..."); | |
| world = new CANNON.World({ gravity: new CANNON.Vec3(0, -15, 0) }); // Slightly stronger gravity | |
| world.broadphase = new CANNON.SAPBroadphase(world); | |
| world.allowSleep = true; | |
| // Define materials | |
| const groundMaterial = new CANNON.Material("ground"); | |
| const playerMaterial = new CANNON.Material("player"); | |
| const wallMaterial = new CANNON.Material("wall"); | |
| const monsterMaterial = new CANNON.Material("monster"); | |
| const itemMaterial = new CANNON.Material("item"); // For trigger bodies if used | |
| // Ground plane | |
| const groundShape = new CANNON.Plane(); | |
| const groundBody = new CANNON.Body({ mass: 0, material: groundMaterial }); | |
| groundBody.addShape(groundShape); | |
| groundBody.quaternion.setFromEuler(-Math.PI / 2, 0, 0); | |
| world.addBody(groundBody); | |
| physicsBodies.push(groundBody); | |
| // Contact Materials (basic examples) | |
| const playerGround = new CANNON.ContactMaterial(playerMaterial, groundMaterial, { friction: 0.3, restitution: 0.1 }); | |
| const playerWall = new CANNON.ContactMaterial(playerMaterial, wallMaterial, { friction: 0.0, restitution: 0.1 }); // Low friction vs walls | |
| const monsterGround = new CANNON.ContactMaterial(monsterMaterial, groundMaterial, { friction: 0.4, restitution: 0.1 }); | |
| const monsterWall = new CANNON.ContactMaterial(monsterMaterial, wallMaterial, { friction: 0.1, restitution: 0.2 }); | |
| world.addContactMaterial(playerGround); | |
| world.addContactMaterial(playerWall); | |
| world.addContactMaterial(monsterGround); | |
| world.addContactMaterial(monsterWall); | |
| console.log("Physics World Initialized."); | |
| // Optional: Physics Debugger Init | |
| // try { | |
| // cannonDebugger = new CannonDebugger(scene, world, { color: 0x00ff00, scale: 1.0 }); | |
| // console.log("Cannon-es Debugger Initialized."); | |
| // } catch (e) { console.error("Failed to initialize CannonDebugger.", e); } | |
| } | |
| // --- Primitive Assembly Functions (Keep as before) --- | |
| function createPlayerMesh() { /* ... same ... */ | |
| const group = new THREE.Group(); | |
| // Use DEBUG material temporarily | |
| const bodyMat = materials.debug_player; //new THREE.MeshLambertMaterial({ color: 0x0077ff }); | |
| const bodyGeom = new THREE.CylinderGeometry(PLAYER_RADIUS, PLAYER_RADIUS, PLAYER_HEIGHT - (PLAYER_RADIUS * 2), 8); // Lower poly | |
| const body = new THREE.Mesh(bodyGeom, bodyMat); | |
| body.position.y = PLAYER_RADIUS; body.castShadow = true; | |
| const headGeom = new THREE.SphereGeometry(PLAYER_RADIUS, 8, 8); // Lower poly | |
| const head = new THREE.Mesh(headGeom, bodyMat); | |
| head.position.y = PLAYER_HEIGHT - PLAYER_RADIUS; head.castShadow = true; | |
| group.add(body); group.add(head); | |
| const noseGeom = new THREE.ConeGeometry(PLAYER_RADIUS * 0.3, PLAYER_RADIUS * 0.5, 4); // Lower poly | |
| const noseMat = new THREE.MeshBasicMaterial({ color: 0xffff00 }); | |
| const nose = new THREE.Mesh(noseGeom, noseMat); | |
| // Position nose correctly relative to player center (Y=PLAYER_HEIGHT/2) | |
| nose.position.set(0, (PLAYER_HEIGHT / 2) * 0.9, -PLAYER_RADIUS); // Position Z forward, adjust Y | |
| nose.rotation.x = Math.PI / 2 + Math.PI; // Point along -Z | |
| group.add(nose); | |
| group.position.y = PLAYER_HEIGHT / 2; // Set pivot to bottom center | |
| return group; | |
| } | |
| function createSimpleMonsterMesh(modelType = 'capsule_green') { /* ... Mostly same, maybe use debug material ... */ | |
| const group = new THREE.Group(); | |
| let color = 0xff00ff; // Magenta debug default | |
| let mat = materials.debug_monster; // Use debug material | |
| if (modelType === 'capsule_green') { | |
| color = 0x00ff00; | |
| // mat = new THREE.MeshLambertMaterial({ color: color }); // Keep debug for now | |
| const bodyGeom = new THREE.CylinderGeometry(0.4, 0.4, 1.0, 8); // Lower poly | |
| const headGeom = new THREE.SphereGeometry(0.4, 8, 8); | |
| const body = new THREE.Mesh(bodyGeom, mat); | |
| const head = new THREE.Mesh(headGeom, mat); | |
| body.position.y = 0.5; head.position.y = 1.0 + 0.4; | |
| group.add(body); group.add(head); | |
| } else { let geom = new THREE.BoxGeometry(0.8, 1.2, 0.8); const mesh = new THREE.Mesh(geom, mat); mesh.position.y = 0.6; group.add(mesh); } | |
| group.traverse(child => { if (child.isMesh) child.castShadow = true; }); | |
| group.position.y = 1.2 / 2; // Center pivot | |
| return group; | |
| } | |
| function createSimpleItemMesh(modelType = 'sphere_red') { /* ... Mostly same, maybe use debug material ... */ | |
| let geom, mat; let color = 0x00ff00; // Green debug default | |
| mat = materials.debug_item; // Use debug material | |
| if(modelType === 'sphere_red') { color = 0xff0000; geom = new THREE.SphereGeometry(0.3, 8, 8); } | |
| else if (modelType === 'box_gold') { color = 0xffd700; geom = new THREE.BoxGeometry(0.4, 0.4, 0.4); } | |
| else { geom = new THREE.SphereGeometry(0.3, 8, 8); } | |
| // mat = new THREE.MeshStandardMaterial({ color: color, metalness: 0.3, roughness: 0.6 }); // Keep debug | |
| const mesh = new THREE.Mesh(geom, mat); | |
| mesh.position.y = PLAYER_RADIUS; // Place roughly at pickup height | |
| mesh.castShadow = true; | |
| return mesh; | |
| } | |
| function createProjectileMesh() { /* ... same ... */ | |
| const geom = new THREE.SphereGeometry(PROJECTILE_RADIUS, 6, 6); // Lower poly | |
| const mat = new THREE.MeshBasicMaterial({ color: 0xffff00 }); | |
| const mesh = new THREE.Mesh(geom, mat); | |
| return mesh; | |
| } | |
| // --- Player Setup --- | |
| function initPlayer() { | |
| console.log("Initializing Player..."); | |
| // Visual Mesh | |
| playerMesh = createPlayerMesh(); | |
| // Start position will be set by physics body sync | |
| scene.add(playerMesh); | |
| console.log("Player mesh added to scene."); | |
| // Physics Body - Start at center of 0,0 cell, slightly above ground | |
| const startX = 0 * ROOM_SIZE; | |
| const startZ = 0 * ROOM_SIZE; | |
| const startY = PLAYER_HEIGHT; // Start higher to ensure it settles onto ground | |
| const playerShape = new CANNON.Sphere(PLAYER_RADIUS); | |
| playerBody = new CANNON.Body({ | |
| mass: 70, | |
| shape: playerShape, | |
| position: new CANNON.Vec3(startX, startY, startZ), | |
| linearDamping: 0.95, | |
| angularDamping: 1.0, | |
| material: world.materials.find(m => m.name === "player") || new CANNON.Material("player") // Get or create material | |
| }); | |
| playerBody.allowSleep = false; | |
| playerBody.addEventListener("collide", handlePlayerCollision); | |
| world.addBody(playerBody); | |
| physicsBodies.push(playerBody); // Track body | |
| console.log(`Player physics body added at ${startX}, ${startY}, ${startZ}`); | |
| // Add to sync list | |
| meshesToSync.push({ mesh: playerMesh, body: playerBody }); | |
| console.log("Player added to sync list."); | |
| } | |
| // --- Map Generation --- | |
| function generateMap() { | |
| console.log("Generating Map..."); | |
| const wallPhysicsMaterial = world.materials.find(m => m.name === "wall") || new CANNON.Material("wall"); // Get or create material | |
| const groundPhysicsMaterial = world.materials.find(m => m.name === "ground"); // Should exist from initPhysics | |
| // Simplified: Only render a few cells around 0,0 for testing | |
| const renderRadius = 1; // Render 0,0 and its immediate neighbours | |
| for (let x = -renderRadius; x <= renderRadius; x++) { | |
| for (let z = -renderRadius; z <= renderRadius; z++) { | |
| const coordString = `${x},${z}`; | |
| const data = gameData[coordString]; | |
| if (data) { // Only generate if data exists for this coord | |
| console.log(`Generating cell: ${coordString}`); | |
| const type = data.type || 'default'; | |
| // Create Floor Mesh | |
| const floorMat = floorMaterials[type] || floorMaterials.default_floor; | |
| const floorMesh = new THREE.Mesh(geometries.floor, floorMat); | |
| floorMesh.rotation.x = -Math.PI / 2; | |
| floorMesh.position.set(x * ROOM_SIZE, 0, z * ROOM_SIZE); | |
| floorMesh.receiveShadow = true; | |
| scene.add(floorMesh); | |
| // Create Walls (Visual + Physics) | |
| const features = data.features || []; | |
| const wallDefs = [ | |
| ['north', geometries.wallNS, 0, -0.5], | |
| ['south', geometries.wallNS, 0, 0.5], | |
| ['east', geometries.wallEW, 0.5, 0], | |
| ['west', geometries.wallEW, -0.5, 0], | |
| ]; | |
| wallDefs.forEach(([dir, geom, xOff, zOff]) => { | |
| const doorFeature = `door_${dir}`; | |
| const pathFeature = `path_${dir}`; | |
| if (!features.includes(doorFeature) && !features.includes(pathFeature)) { | |
| const wallX = x * ROOM_SIZE + xOff * ROOM_SIZE; | |
| const wallZ = z * ROOM_SIZE + zOff * ROOM_SIZE; | |
| const wallY = WALL_HEIGHT / 2; | |
| // DEBUG Visual Wall | |
| const wallMesh = new THREE.Mesh(geom, materials.debug_wall); // Use debug material | |
| wallMesh.position.set(wallX, wallY, wallZ); | |
| wallMesh.castShadow = true; | |
| wallMesh.receiveShadow = true; | |
| scene.add(wallMesh); | |
| // Physics Wall | |
| const wallShape = new CANNON.Box(new CANNON.Vec3(geom.parameters.width / 2, geom.parameters.height / 2, geom.parameters.depth / 2)); | |
| const wallBody = new CANNON.Body({ mass: 0, shape: wallShape, position: new CANNON.Vec3(wallX, wallY, wallZ), material: wallPhysicsMaterial }); | |
| world.addBody(wallBody); | |
| physicsBodies.push(wallBody); | |
| } | |
| }); | |
| // Spawn Items & Monsters based on features | |
| features.forEach(feature => { | |
| if (feature.startsWith('item_')) { | |
| const itemName = feature.substring(5).replace(/_/g, ' '); // Handle underscores | |
| if (itemsData[itemName]) { | |
| spawnItem(itemName, x, z); | |
| } else { console.warn(`Item feature found but no data for: ${itemName}`); } | |
| } else if (feature.startsWith('monster_')) { | |
| const monsterType = feature.substring(8); | |
| if (monstersData[monsterType]) { | |
| spawnMonster(monsterType, x, z); | |
| } else { console.warn(`Monster feature found but no data for: ${monsterType}`); } | |
| } | |
| // Handle other visual features if needed | |
| }); | |
| } else { | |
| console.log(`No data for cell: ${coordString}, skipping.`); | |
| } | |
| } | |
| } | |
| console.log("Map Generation Complete."); | |
| } | |
| function spawnItem(itemName, gridX, gridZ) { | |
| const itemData = itemsData[itemName]; | |
| if (!itemData) return; | |
| const x = gridX * ROOM_SIZE + (Math.random() - 0.5) * (ROOM_SIZE * 0.4); | |
| const z = gridZ * ROOM_SIZE + (Math.random() - 0.5) * (ROOM_SIZE * 0.4); | |
| const y = PLAYER_RADIUS; // Item height | |
| // Use DEBUG material | |
| const mesh = new THREE.Mesh(geometries.sphere, materials.debug_item); // Simplified mesh | |
| mesh.scale.set(0.6, 0.6, 0.6); // Make items smaller | |
| mesh.position.set(x, y, z); | |
| mesh.userData = { type: 'item', name: itemName }; | |
| mesh.castShadow = true; | |
| scene.add(mesh); | |
| // Store item in game state WITHOUT physics body initially for F pickup | |
| gameState.items.push({ | |
| id: THREE.MathUtils.generateUUID(), // Simple unique ID | |
| name: itemName, | |
| mesh: mesh, | |
| position: mesh.position // Store position for proximity check | |
| }); | |
| console.log(`Spawned item ${itemName} at ${gridX},${gridZ} (visual only)`); | |
| } | |
| function spawnMonster(monsterType, gridX, gridZ) { | |
| const monsterData = monstersData[monsterType]; | |
| if (!monsterData) return; | |
| const x = gridX * ROOM_SIZE + (Math.random() - 0.5) * (ROOM_SIZE * 0.4); | |
| const z = gridZ * ROOM_SIZE + (Math.random() - 0.5) * (ROOM_SIZE * 0.4); | |
| const y = PLAYER_HEIGHT; // Start higher | |
| // Use DEBUG material | |
| const mesh = createSimpleMonsterMesh(monsterData.model); // Assuming this uses debug mat now | |
| mesh.position.set(x, y, z); // Set initial mesh pos | |
| mesh.userData = { type: 'monster', monsterType: monsterType }; | |
| scene.add(mesh); | |
| // Physics Body | |
| const shape = new CANNON.Sphere(PLAYER_RADIUS * 0.8); // Simple sphere collider | |
| const body = new CANNON.Body({ | |
| mass: 10, | |
| shape: shape, | |
| position: new CANNON.Vec3(x, y, z), | |
| linearDamping: 0.8, | |
| angularDamping: 0.9, | |
| material: world.materials.find(m => m.name === "monster") || new CANNON.Material("monster") | |
| }); | |
| body.allowSleep = true; | |
| body.userData = { type: 'monster', monsterType: monsterType, mesh: mesh, hp: monsterData.hp }; | |
| world.addBody(body); | |
| gameState.monsters.push({ id: body.id, type: monsterType, hp: monsterData.hp, body: body, mesh: mesh }); | |
| meshesToSync.push({ mesh: mesh, body: body }); | |
| physicsBodies.push(body); | |
| console.log(`Spawned monster ${monsterType} at ${gridX},${gridZ}`); | |
| } | |
| // --- Input Handling (QWEASDZXC + Jump + F + Space) --- | |
| function setupInputListeners() { | |
| console.log("Setting up input listeners."); | |
| window.addEventListener('keydown', (event) => { | |
| keysPressed[event.key.toLowerCase()] = true; | |
| keysPressed[event.code] = true; // Keep Space, Shift etc. | |
| // Prevent default browser scroll on space/arrows | |
| if (['space', 'arrowup', 'arrowdown', 'arrowleft', 'arrowright'].includes(event.code.toLowerCase())) { | |
| event.preventDefault(); | |
| } | |
| }); | |
| window.addEventListener('keyup', (event) => { | |
| keysPressed[event.key.toLowerCase()] = false; | |
| keysPressed[event.code] = false; | |
| }); | |
| } | |
| function handleInput(deltaTime) { | |
| if (!playerBody) return; | |
| const moveSpeed = PLAYER_SPEED; | |
| const diagonalSpeed = moveSpeed / Math.sqrt(2); // Adjust speed for diagonal | |
| let moveX = 0; | |
| let moveZ = 0; | |
| // Forward/Backward (W/S) | |
| if (keysPressed['w']) moveZ -= 1; | |
| if (keysPressed['s']) moveZ += 1; | |
| // Strafe (A/D) | |
| if (keysPressed['a']) moveX -= 1; | |
| if (keysPressed['d']) moveX += 1; | |
| // Diagonal Forward (Q/E) | |
| if (keysPressed['q']) { moveZ -= 1; moveX -= 1; } | |
| if (keysPressed['e']) { moveZ -= 1; moveX += 1; } | |
| // Diagonal Backward (Z/C) | |
| if (keysPressed['z']) { moveZ += 1; moveX -= 1; } | |
| if (keysPressed['c']) { moveZ += 1; moveX += 1; } | |
| // --- Calculate final velocity vector --- | |
| const velocity = new CANNON.Vec3(0, playerBody.velocity.y, 0); // Preserve Y velocity for jump/gravity | |
| // Normalize if moving | |
| if (moveX !== 0 || moveZ !== 0) { | |
| const moveVec = new THREE.Vector2(moveX, moveZ); | |
| moveVec.normalize(); // Ensure consistent speed regardless of direction count | |
| velocity.x = moveVec.x * moveSpeed; | |
| velocity.z = moveVec.y * moveSpeed; | |
| // Make player mesh face movement direction | |
| // NOTE: This rotation assumes +Z is backward, -Z is forward | |
| const angle = Math.atan2(velocity.x, velocity.z); // atan2(x, z) gives angle from positive Z axis | |
| const targetQuaternion = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 1, 0), angle); | |
| // Smooth rotation (Slerp) | |
| playerMesh.quaternion.slerp(targetQuaternion, 0.15); // Adjust 0.15 for faster/slower turning | |
| } else { | |
| // Apply damping implicitly via Cannon setting, or force stop: | |
| velocity.x = 0; | |
| velocity.z = 0; | |
| } | |
| playerBody.velocity.x = velocity.x; | |
| playerBody.velocity.z = velocity.z; | |
| // Y velocity is handled by gravity and jump impulse | |
| // --- Jump (Shift or X) --- | |
| // !! Basic jump - no ground check yet !! | |
| if (keysPressed['shift'] || keysPressed['x']) { | |
| // Simple check: only jump if Y velocity is near zero (crude ground check) | |
| if (Math.abs(playerBody.velocity.y) < 0.1) { | |
| console.log("Attempting Jump!"); | |
| playerBody.applyImpulse(new CANNON.Vec3(0, PLAYER_JUMP_FORCE, 0), playerBody.position); | |
| } | |
| keysPressed['shift'] = false; // Consume jump input | |
| keysPressed['x'] = false; | |
| } | |
| // --- Pickup (F) --- | |
| if (keysPressed['f']) { | |
| pickupNearbyItem(); | |
| keysPressed['f'] = false; // Consume pickup input | |
| } | |
| // --- Fire (Space) --- | |
| if (keysPressed['space']) { | |
| fireProjectile(); | |
| keysPressed['space'] = false; // Consume fire input | |
| } | |
| } | |
| // --- Interaction Logic --- | |
| function pickupNearbyItem() { | |
| if (!playerBody) return; | |
| const playerPos = playerBody.position; | |
| let pickedUp = false; | |
| for (let i = gameState.items.length - 1; i >= 0; i--) { | |
| const item = gameState.items[i]; | |
| const itemPos = item.position; // Using mesh position as items have no physics body now | |
| const distance = playerPos.distanceTo(itemPos); | |
| if (distance < PICKUP_RADIUS) { | |
| if (!gameState.inventory.includes(item.name)) { | |
| gameState.inventory.push(item.name); | |
| addLog(`Picked up ${item.name}!`, "pickup"); | |
| updateInventoryDisplay(); | |
| // Remove item visually | |
| scene.remove(item.mesh); | |
| // Remove from game state list | |
| gameState.items.splice(i, 1); | |
| pickedUp = true; | |
| break; // Pick up only one item per key press | |
| } | |
| } | |
| } | |
| if (!pickedUp) { | |
| addLog("Nothing nearby to pick up.", "info"); | |
| } | |
| } | |
| // --- Combat (Keep Projectile Logic) --- | |
| function fireProjectile() { /* ... same as before ... */ | |
| if (!playerBody || !playerMesh) return; | |
| addLog("Pew!", "combat"); | |
| const projectileMesh = createProjectileMesh(); | |
| const projectileShape = new CANNON.Sphere(PROJECTILE_RADIUS); | |
| const projectileBody = new CANNON.Body({ mass: 0.1, shape: projectileShape, linearDamping: 0.01, angularDamping: 0.01 }); | |
| projectileBody.addEventListener("collide", handleProjectileCollision); | |
| const offsetDistance = PLAYER_RADIUS + PROJECTILE_RADIUS + 0.1; | |
| const direction = new THREE.Vector3(0, 0, -1); // Base direction -Z is forward | |
| direction.applyQuaternion(playerMesh.quaternion); | |
| const startPos = new CANNON.Vec3().copy(playerBody.position).vadd( | |
| new CANNON.Vec3(direction.x, 0, direction.z).scale(offsetDistance) | |
| ); | |
| startPos.y = playerBody.position.y + PLAYER_HEIGHT * 0.3; // Fire from mid-height approx | |
| projectileBody.position.copy(startPos); | |
| projectileMesh.position.copy(startPos); | |
| projectileBody.velocity = new CANNON.Vec3(direction.x, 0, direction.z).scale(PROJECTILE_SPEED); | |
| scene.add(projectileMesh); | |
| world.addBody(projectileBody); | |
| const projectileData = { mesh: projectileMesh, body: projectileBody, lifetime: 3.0 }; | |
| meshesToSync.push(projectileData); | |
| projectiles.push(projectileData); | |
| physicsBodies.push(projectileBody); | |
| projectileBody.userData = { type: 'projectile', mesh: projectileMesh, data: projectileData }; | |
| projectileMesh.userData = { type: 'projectile', body: projectileBody, data: projectileData }; | |
| } | |
| // --- Collision Handling --- | |
| function handlePlayerCollision(event) { /* ... same as before (but item part is unused now) ... */ | |
| const otherBody = event.body; | |
| if (!otherBody || !otherBody.userData) return; // Body might be removed already | |
| // Item pickup handled by 'F' key now. | |
| // Player <-> Monster Collision | |
| if (otherBody.userData.type === 'monster') { | |
| // Cooldown for taking damage? Needs state tracking. | |
| // Simple damage for now: | |
| gameState.stats.hp -= 1; | |
| addLog(`Hit by ${otherBody.userData.monsterType || 'monster'}! HP: ${gameState.stats.hp}`, "combat"); | |
| updateStatsDisplay(); | |
| if (gameState.stats.hp <= 0) { gameOver("Defeated by a monster!"); } | |
| } | |
| // Could add other collision handlers (player hitting wall hard, etc.) | |
| } | |
| function handleProjectileCollision(event) { /* ... same as before ... */ | |
| const projectileBody = event.target; | |
| const otherBody = event.body; | |
| if (!projectileBody || !projectileBody.userData || !otherBody || !otherBody.userData) return; | |
| const projectileData = projectileBody.userData.data; | |
| if (otherBody.userData.type === 'monster') { | |
| const monsterId = otherBody.id; | |
| const monsterIndex = gameState.monsters.findIndex(m => m.id === monsterId); | |
| if (monsterIndex > -1) { | |
| const monster = gameState.monsters[monsterIndex]; | |
| const damage = gameState.stats.strength; | |
| monster.hp -= damage; | |
| otherBody.userData.hp = monster.hp; // Update hp in body too | |
| addLog(`Hit ${otherBody.userData.monsterType} for ${damage} damage! (HP: ${monster.hp})`, "combat"); | |
| if (monster.hp <= 0) { | |
| addLog(`Defeated ${otherBody.userData.monsterType}!`, "info"); | |
| // Schedule removal after physics step if needed, direct removal can be tricky | |
| scene.remove(monster.mesh); | |
| world.removeBody(monster.body); | |
| meshesToSync = meshesToSync.filter(sync => sync.body.id !== monster.body.id); | |
| physicsBodies = physicsBodies.filter(body => body.id !== monster.body.id); | |
| gameState.monsters.splice(monsterIndex, 1); | |
| } | |
| } | |
| } | |
| // Remove projectile immediately after any valid collision (except maybe player?) | |
| if (otherBody !== playerBody) { | |
| // Schedule removal might be safer if errors occur here | |
| removeProjectile(projectileData); | |
| } | |
| } | |
| function removeProjectile(projectileData) { /* ... same as before ... */ | |
| if (!projectileData) return; | |
| const index = projectiles.indexOf(projectileData); | |
| if (index === -1) return; // Already removed | |
| // Check if objects still exist before removing | |
| if(projectileData.mesh.parent) scene.remove(projectileData.mesh); | |
| // Check if body is still in world before removing | |
| if (world.bodies.includes(projectileData.body)) world.removeBody(projectileData.body); | |
| meshesToSync = meshesToSync.filter(sync => sync.body && sync.body.id !== projectileData.body.id); | |
| physicsBodies = physicsBodies.filter(body => body && body.id !== projectileData.body.id); | |
| projectiles.splice(index, 1); | |
| } | |
| // --- Monster AI --- | |
| function updateMonsters(deltaTime) { /* ... Mostly same as before ... */ | |
| const agroRangeSq = (ROOM_SIZE * 1.5) ** 2; | |
| if(!playerBody) return; // Need player position | |
| gameState.monsters.forEach(monster => { | |
| if (!monster || !monster.body) return; // Skip if monster removed | |
| const monsterPos = monster.body.position; | |
| const playerPos = playerBody.position; | |
| const distanceSq = playerPos.distanceSquared(monsterPos); | |
| if (distanceSq < agroRangeSq) { | |
| const direction = playerPos.vsub(monsterPos); | |
| direction.y = 0; | |
| if (direction.lengthSquared() > 0.1) { | |
| direction.normalize(); | |
| const monsterData = monstersData[monster.type]; | |
| const speed = monsterData ? monsterData.speed : 1; | |
| // Apply force instead of setting velocity for more 'physical' movement | |
| // monster.body.applyForce(direction.scale(speed * monster.body.mass * 0.5), monsterPos); // Adjust force multiplier | |
| // OR setting velocity is simpler for basic chase: | |
| monster.body.velocity.x = direction.x * speed; | |
| monster.body.velocity.z = direction.z * speed; | |
| // Rotation | |
| const angle = Math.atan2(direction.x, direction.z); | |
| const targetQuaternion = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 1, 0), angle); | |
| monster.mesh.quaternion.slerp(targetQuaternion, 0.1); // Smooth turn | |
| } else { monster.body.velocity.x = 0; monster.body.velocity.z = 0;} // Stop if close | |
| } else { // Stop if far | |
| monster.body.velocity.x = 0; | |
| monster.body.velocity.z = 0; | |
| } | |
| }); | |
| } | |
| // --- UI Update --- | |
| function updateUI() { /* ... same as before ... */ | |
| updateStatsDisplay(); | |
| updateInventoryDisplay(); | |
| } | |
| function updateStatsDisplay() { /* ... same as before ... */ | |
| let statsHTML = ''; | |
| statsHTML += `<span>HP: ${gameState.stats.hp}/${gameState.stats.maxHp}</span>`; | |
| statsHTML += `<span>Str: ${gameState.stats.strength}</span>`; | |
| statsHTML += `<span>Wis: ${gameState.stats.wisdom}</span>`; | |
| statsHTML += `<span>Cor: ${gameState.stats.courage}</span>`; | |
| statsElement.innerHTML = statsHTML; | |
| } | |
| function updateInventoryDisplay() { /* ... same as before ... */ | |
| let inventoryHTML = ''; | |
| if (gameState.inventory.length === 0) { inventoryHTML += '<em>Empty</em>'; } | |
| else { gameState.inventory.forEach(item => { const itemInfo = itemsData[item] || { type: 'unknown', description: '???' }; const itemClass = `item-${itemInfo.type || 'unknown'}`; inventoryHTML += `<span class="${itemClass}" title="${itemInfo.description}">${item}</span>`; }); } | |
| inventoryElement.innerHTML = inventoryHTML; | |
| } | |
| function addLog(message, type = "info") { /* ... same as before ... */ | |
| const p = document.createElement('p'); | |
| p.classList.add(type); | |
| p.textContent = `[${new Date().toLocaleTimeString([], { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' })}] ${message}`; // Add timestamp | |
| logElement.appendChild(p); | |
| logElement.scrollTop = logElement.scrollHeight; | |
| } | |
| // --- Game Over --- | |
| function gameOver(reason) { | |
| addLog(`GAME OVER: ${reason}`, "error"); | |
| console.log("Game Over:", reason); | |
| gameLoopActive = false; // Stop the game loop | |
| // Optional: Show a restart button or overlay | |
| const restartButton = document.createElement('button'); | |
| restartButton.textContent = "RESTART GAME"; | |
| restartButton.style.position = 'absolute'; | |
| restartButton.style.top = '50%'; | |
| restartButton.style.left = '50%'; | |
| restartButton.style.transform = 'translate(-50%, -50%)'; | |
| restartButton.style.padding = '20px 40px'; | |
| restartButton.style.fontSize = '2em'; | |
| restartButton.style.cursor = 'pointer'; | |
| restartButton.style.zIndex = '1000'; | |
| restartButton.onclick = () => { | |
| // Clean up restart button if exists | |
| const oldButton = document.getElementById('restart-button'); | |
| if (oldButton) oldButton.remove(); | |
| init(); // Re-initialize the game | |
| }; | |
| restartButton.id = 'restart-button'; // Assign ID for potential removal | |
| sceneContainer.appendChild(restartButton); // Add button over the scene | |
| } | |
| // --- Main Game Loop --- | |
| let lastTime = 0; | |
| function animate(time) { | |
| if (!gameLoopActive) return; // Stop loop if game over or paused | |
| animationFrameId = requestAnimationFrame(animate); // Store ID to potentially cancel | |
| const currentTime = performance.now(); // Use performance.now for higher precision | |
| const deltaTime = (currentTime - lastTime) * 0.001; // Seconds | |
| lastTime = currentTime; | |
| // Avoid spiral of death on tab-out or large lag spikes | |
| const dtClamped = Math.min(deltaTime, 1 / 30); // Clamp to max 30 FPS step | |
| if (!world || !playerBody) return; // Exit if physics/player not ready | |
| // 1. Handle Input | |
| handleInput(dtClamped); | |
| // 2. Update AI | |
| updateMonsters(dtClamped); | |
| // 3. Step Physics World | |
| try { | |
| world.step(dtClamped); // Use clamped delta time | |
| } catch (e) { | |
| console.error("Physics step error:", e); | |
| // Potentially pause or handle error state | |
| } | |
| // 4. Update Projectiles | |
| for (let i = projectiles.length - 1; i >= 0; i--) { | |
| const p = projectiles[i]; | |
| if (p) { // Check if projectile still exists | |
| p.lifetime -= dtClamped; | |
| if (p.lifetime <= 0) { | |
| removeProjectile(p); | |
| } | |
| } | |
| } | |
| // 5. Sync Visuals with Physics | |
| meshesToSync.forEach(item => { | |
| // Ensure body and mesh still exist before syncing | |
| if (item && item.body && item.mesh && item.mesh.parent) { | |
| item.mesh.position.copy(item.body.position); | |
| item.mesh.quaternion.copy(item.body.quaternion); | |
| } else { | |
| // Clean up entries for objects that might have been removed improperly | |
| console.warn("Attempted to sync missing body/mesh pair."); | |
| // Maybe remove this entry from meshesToSync here? Needs careful handling. | |
| } | |
| }); | |
| // 6. Update Camera | |
| if (playerBody) { | |
| const targetCameraPos = new THREE.Vector3( | |
| playerBody.position.x, | |
| CAMERA_Y_OFFSET, | |
| playerBody.position.z + CAMERA_Y_OFFSET * 0.5 // Adjust Z offset based on height for better angle | |
| ); | |
| camera.position.lerp(targetCameraPos, 0.08); // Smoother follow | |
| const lookAtPos = new THREE.Vector3(playerBody.position.x, 0, playerBody.position.z); | |
| camera.lookAt(lookAtPos); | |
| } | |
| // 7. Physics Debugger Update (Optional) | |
| // if (cannonDebugger) { | |
| // cannonDebugger.update(); | |
| // } | |
| // 8. Render Scene | |
| renderer.render(scene, camera); | |
| } | |
| // --- Start Game --- | |
| init(); |