import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'; import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'; import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js'; import { SMAAPass } from 'three/addons/postprocessing/SMAAPass.js'; // Initialize loading manager const loadingManager = new THREE.LoadingManager(); const textureLoader = new THREE.TextureLoader(loadingManager); let assetsLoaded = false; // Monster textures const monsterStandingTexture = textureLoader.load('https://play.rosebud.ai/assets/Greg.png?mbpT'); const monsterWalkTextures = [ textureLoader.load('https://play.rosebud.ai/assets/Walk 1.png?Zuax'), textureLoader.load('https://play.rosebud.ai/assets/walk 2.png?QQNs'), textureLoader.load('https://play.rosebud.ai/assets/Walk 3.png?guOw') ]; const parentDiv = document.getElementById('renderDiv'); let canvas = document.getElementById('threeRenderCanvas'); let damageOverlay; let lastStompTime = 0; let gameStartTime = Date.now(); let stickCounter; let timerDisplay; let fireBase; let fireSprite; let fireIntensity = 1.0; // Fire scale (1.0 to 3.0) let carriedSticks = []; // Array to hold multiple sticks const MAX_STICKS = 5; // Maximum sticks player can carry let lastFireDecreaseTime = Date.now(); let carriedStick = null; let sticks = []; const FIRE_DECREASE_RATE = 0.1; // How much the fire decreases every interval const FIRE_DECREASE_INTERVAL = 5000; // How often the fire decreases (ms) const STICK_SPAWN_INTERVAL = 10000; // How often new sticks spawn (ms) const MAX_FIRE_INTENSITY = 3.0; const MIN_FIRE_INTENSITY = 0.5; const STICK_COLLECT_RANGE = 3; const FIRE_RANGE = 5; let lastStickSpawnTime = Date.now(); if (!canvas) { canvas = document.createElement('canvas'); canvas.id = 'threeRenderCanvas'; parentDiv.appendChild(canvas); } // Create loading screen const loadingScreen = document.createElement('div'); loadingScreen.style.position = 'absolute'; loadingScreen.style.top = '0'; loadingScreen.style.left = '0'; loadingScreen.style.width = '100%'; loadingScreen.style.height = '100%'; loadingScreen.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; loadingScreen.style.color = 'white'; loadingScreen.style.display = 'flex'; loadingScreen.style.justifyContent = 'center'; loadingScreen.style.alignItems = 'center'; loadingScreen.style.fontSize = '24px'; loadingScreen.innerHTML = 'Loading... 0%'; parentDiv.appendChild(loadingScreen); // Create damage overlay damageOverlay = document.createElement('div'); damageOverlay.style.position = 'absolute'; damageOverlay.style.top = '0'; damageOverlay.style.left = '0'; damageOverlay.style.width = '100%'; damageOverlay.style.height = '100%'; damageOverlay.style.backgroundColor = 'rgba(255, 0, 0, 0.3)'; damageOverlay.style.display = 'none'; damageOverlay.style.pointerEvents = 'none'; parentDiv.appendChild(damageOverlay); // Create stick counter stickCounter = document.createElement('div'); stickCounter.style.position = 'absolute'; stickCounter.style.top = '20px'; stickCounter.style.left = '20px'; stickCounter.style.color = 'white'; stickCounter.style.fontSize = '24px'; stickCounter.style.fontWeight = 'bold'; stickCounter.style.textShadow = '2px 2px 2px black'; stickCounter.innerHTML = 'Sticks: 0'; parentDiv.appendChild(stickCounter); // Create timer display timerDisplay = document.createElement('div'); timerDisplay.style.position = 'absolute'; timerDisplay.style.top = '20px'; timerDisplay.style.right = '20px'; timerDisplay.style.color = 'white'; timerDisplay.style.fontSize = '24px'; timerDisplay.style.fontWeight = 'bold'; timerDisplay.style.textShadow = '2px 2px 2px black'; timerDisplay.innerHTML = 'Time: 0:00'; parentDiv.appendChild(timerDisplay); // Loading manager events loadingManager.onProgress = function(url, itemsLoaded, itemsTotal) { const progress = (itemsLoaded / itemsTotal * 100).toFixed(0); loadingScreen.innerHTML = `Loading... ${progress}%`; }; loadingManager.onLoad = function() { assetsLoaded = true; loadingScreen.style.display = 'none'; }; loadingManager.onError = function(url) { console.error('Error loading:', url); }; // Initialize the scene const scene = new THREE.Scene(); scene.fog = new THREE.FogExp2(0x000000, 0.015); // Add exponential fog // Create flashlight (spotlight) const flashlight = new THREE.SpotLight(0xffffff, 2.5); flashlight.position.set(0, 2, 0); flashlight.angle = Math.PI / 6; // 30-degree cone flashlight.penumbra = 0.3; flashlight.decay = 1.5; flashlight.distance = 40; flashlight.castShadow = true; scene.add(flashlight); // Flashlight target const flashlightTarget = new THREE.Object3D(); scene.add(flashlightTarget); flashlight.target = flashlightTarget; const world = new CANNON.World(); world.gravity.set(0, -9.81, 0); // Standard gravity const treeHitboxes = []; // Array to store tree hitboxes world.defaultContactMaterial.friction = 0.01; world.defaultContactMaterial.restitution = 0; world.solver.iterations = 10; world.solver.tolerance = 0.001; // Define physics materials const groundPhysMaterial = new CANNON.Material('ground'); const clock = new THREE.Clock(); // Initialize the camera const camera = new THREE.PerspectiveCamera( 75, canvas.offsetWidth / canvas.offsetHeight, 0.1, 1000 ); // Initial camera position (will be updated by player) camera.position.set(0, 2, 0); // Initialize the renderer with HDR const renderer = new THREE.WebGLRenderer({ antialias: true, canvas: canvas, powerPreference: "high-performance" }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(canvas.offsetWidth, canvas.offsetHeight); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; renderer.outputEncoding = THREE.sRGBEncoding; renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.2; // Initialize post-processing const composer = new EffectComposer(renderer); // Regular scene render pass const renderPass = new RenderPass(scene, camera); composer.addPass(renderPass); // Add subtle bloom effect const bloomPass = new UnrealBloomPass( new THREE.Vector2(window.innerWidth, window.innerHeight), 0.2, // bloom strength 0.4, // radius 0.9 // threshold ); composer.addPass(bloomPass); // Add anti-aliasing const smaaPass = new SMAAPass( window.innerWidth * renderer.getPixelRatio(), window.innerHeight * renderer.getPixelRatio() ); composer.addPass(smaaPass); // Initialize composer size composer.setSize(parentDiv.clientWidth, parentDiv.clientHeight); // Create skybox const skyboxGeometry = new THREE.BoxGeometry(1000, 1000, 1000); const skyboxMaterial = new THREE.MeshBasicMaterial({ color: 0x000000, side: THREE.BackSide }); const skybox = new THREE.Mesh(skyboxGeometry, skyboxMaterial); scene.add(skybox); // Create huge border walls function createBorderWalls() { const borderTexture = textureLoader.load('https://play.rosebud.ai/assets/output.png?lcOE'); borderTexture.encoding = THREE.sRGBEncoding; const wallHeight = 400; const wallDistance = 400; const wallGeometry = new THREE.PlaneGeometry(800, wallHeight); const wallMaterial = new THREE.MeshStandardMaterial({ map: borderTexture, side: THREE.DoubleSide }); // Create four walls const walls = []; for (let i = 0; i < 4; i++) { const wall = new THREE.Mesh(wallGeometry, wallMaterial); wall.position.y = wallHeight / 2; switch (i) { case 0: // North wall wall.position.z = -wallDistance; break; case 1: // East wall wall.position.x = wallDistance; wall.rotation.y = Math.PI / 2; break; case 2: // South wall wall.position.z = wallDistance; wall.rotation.y = Math.PI; break; case 3: // West wall wall.position.x = -wallDistance; wall.rotation.y = -Math.PI / 2; break; } walls.push(wall); scene.add(wall); } } // Call the function to create border walls createBorderWalls(); // Player character setup const playerHeight = 2; const playerRadius = 0.5; const normalSpeed = 5; const sprintSpeed = 12; // Increased sprint speed const maxStamina = 10; // Maximum stamina in seconds let hasSpottedPlayerOnce = false; let isInRageState = false; let playerHealth = 3; let lastHitTime = 0; const HIT_COOLDOWN = 1000; // 1 second cooldown between hits let isGameOver = false; const staminaRecoveryTime = 3; // Time to recover stamina in seconds let currentStamina = maxStamina; let isSprinting = false; let canSprint = true; let isCrouching = false; const crouchHeight = 1; // Height when crouching const normalCameraHeight = playerHeight - 0.3; const crouchCameraHeight = crouchHeight - 0.3; // Create player physics body const playerShape = new CANNON.Sphere(playerRadius); const playerBody = new CANNON.Body({ mass: 5, material: new CANNON.Material(), fixedRotation: true, // Prevent player from rotating linearDamping: 0.9, // Add some resistance to movement position: new CANNON.Vec3(0, playerHeight + playerRadius, 0) // Position adjusted to account for radius }); playerBody.addShape(playerShape); world.addBody(playerBody); // Create player visual mesh (not visible in first person) const playerGeometry = new THREE.SphereGeometry(playerRadius, 16, 16); const playerMaterial = new THREE.MeshStandardMaterial({ color: 0x00ff00 }); const playerMesh = new THREE.Mesh(playerGeometry, playerMaterial); playerMesh.castShadow = true; scene.add(playerMesh); // Player movement variables const moveSpeed = 5; const jumpForce = 7; let canJump = false; const moveDirection = new THREE.Vector3(); // Mouse look variables const mouseSensitivity = 0.002; let isPointerLocked = false; let pitch = 0; let yaw = 0; // Input state const keys = { w: false, a: false, s: false, d: false, space: false, '0': false, m: false, ',': false, 'p': false, 'shift': false, 'c': false }; // Add key listeners window.addEventListener('keydown', (e) => { // Handle game restart if (e.key.toLowerCase() === 'r' && isGameOver) { location.reload(); return; } switch (e.key.toLowerCase()) { case 'w': keys.w = true; break; case 'a': keys.a = true; break; case 's': keys.s = true; break; case 'd': keys.d = true; break; case ' ': keys.space = true; break; case '0': keys['0'] = true; break; case 'm': keys.m = true; // Set marker at player's current position monsterTargetPosition = new THREE.Vector3( playerBody.position.x, monsterBody.position.y, playerBody.position.z ); break; case ',': keys[','] = true; // Toggle player visibility playerMesh.visible = !playerMesh.visible; break; case 'p': keys.p = true; isPaused = !isPaused; break; case 'shift': keys.shift = true; if (canSprint && currentStamina > 0) { isSprinting = true; } break; case 'c': keys.c = true; isCrouching = !isCrouching; break; } }); window.addEventListener('keyup', (e) => { switch (e.key.toLowerCase()) { case 'w': keys.w = false; break; case 'a': keys.a = false; break; case 's': keys.s = false; break; case 'd': keys.d = false; break; case ' ': keys.space = false; break; case '0': keys['0'] = false; break; case 'm': keys.m = false; break; case ',': keys[','] = false; break; case 'shift': keys.shift = false; isSprinting = false; break; case 'c': keys.c = false; break; } }); // Add pointer lock functionality document.addEventListener('click', () => { if (!isPointerLocked) { canvas.requestPointerLock(); } }); document.addEventListener('pointerlockchange', () => { isPointerLocked = document.pointerLockElement === canvas; }); // Mouse movement handler document.addEventListener('mousemove', (event) => { if (isPointerLocked) { // Update yaw (left/right rotation) yaw -= event.movementX * mouseSensitivity; // Update pitch (up/down rotation) with limits pitch -= event.movementY * mouseSensitivity; pitch = Math.max(-Math.PI / 2 + 0.1, Math.min(Math.PI / 2 - 0.1, pitch)); // Apply rotation to camera camera.quaternion.setFromEuler(new THREE.Euler(pitch, yaw, 0, 'YXZ')); } }); // Create flat terrain function createTerrain() { const size = 800; // Increased size for better visibility // Create simple flat plane for visuals const geometry = new THREE.PlaneGeometry(size, size); const texture = textureLoader.load('https://play.rosebud.ai/assets/output.jpg?p6Tf'); texture.wrapS = texture.wrapT = THREE.RepeatWrapping; texture.repeat.set(8, 8); // Increased repeat for better visibility texture.encoding = THREE.sRGBEncoding; const material = new THREE.MeshStandardMaterial({ map: texture, roughness: 0.5, metalness: 0.2, side: THREE.DoubleSide, color: 0xffffff }); const terrain = new THREE.Mesh(geometry, material); terrain.rotation.x = -Math.PI / 2; terrain.position.y = 0; // Place exactly at ground level terrain.receiveShadow = true; terrain.scale.set(1.1, 1.1, 1.1); // Slightly larger to prevent edge gaps scene.add(terrain); const groundShape = new CANNON.Box(new CANNON.Vec3(size / 2, 0.1, size / 2)); const groundBody = new CANNON.Body({ mass: 0, material: groundPhysMaterial, position: new CANNON.Vec3(0, 0, 0) // Set ground at y=0 }); groundBody.addShape(groundShape); world.addBody(groundBody); return terrain; } // Setup improved lighting system // Main moonlight from above (soft white-blue) const moonLight = new THREE.DirectionalLight(0xC9E2FF, 0.2); // Reduced intensity for darker environment moonLight.position.set(50, 100, 50); // Angled lighting for better visibility moonLight.castShadow = true; moonLight.shadow.mapSize.width = 2048; moonLight.shadow.mapSize.height = 2048; moonLight.shadow.camera.near = 10; moonLight.shadow.camera.far = 400; moonLight.shadow.camera.left = -100; moonLight.shadow.camera.right = 100; moonLight.shadow.camera.top = 100; moonLight.shadow.camera.bottom = -100; moonLight.shadow.bias = -0.001; moonLight.shadow.radius = 4; // Soft shadows scene.add(moonLight); // Secondary soft blue light for atmosphere const secondaryMoonLight = new THREE.DirectionalLight(0x4444ff, 0.15); secondaryMoonLight.position.set(-50, 80, -50); scene.add(secondaryMoonLight); // Add ambient light for general illumination const ambientLight = new THREE.AmbientLight(0x404040, 0.15); // Reduced ambient light scene.add(ambientLight); // Add hemisphere light to simulate night sky and ground bounce light const hemiLight = new THREE.HemisphereLight(0x000033, 0x000000, 0.15); scene.add(hemiLight); // Function to create a tree billboard function createTree(position) { // Visual tree (billboard) const treeTexture = textureLoader.load('https://play.rosebud.ai/assets/output-removebg-preview (10).png?VOJc'); const treeMaterial = new THREE.MeshBasicMaterial({ map: treeTexture, transparent: true, side: THREE.DoubleSide }); const treeGeometry = new THREE.PlaneGeometry(15, 15); const tree = new THREE.Mesh(treeGeometry, treeMaterial); tree.scale.set(1.5, 1.5, 1.5); tree.position.copy(position); tree.rotation.y = Math.random() * Math.PI * 2; tree.position.y = 7.5; // Collision cylinder (invisible) const hitboxGeometry = new THREE.CylinderGeometry(2, 2, 20, 8); const hitboxMaterial = new THREE.MeshBasicMaterial({ visible: false }); const hitbox = new THREE.Mesh(hitboxGeometry, hitboxMaterial); hitbox.position.copy(position); hitbox.position.y = 10; // Center of cylinder treeHitboxes.push(hitbox); scene.add(hitbox); return tree; } // Function to place trees randomly function placeTrees() { const numberOfTrees = 100; // Increased from 30 to 100 trees const mapSize = 300; // Increased map size for tree placement for (let i = 0; i < numberOfTrees; i++) { const x = (Math.random() - 0.5) * mapSize; const z = (Math.random() - 0.5) * mapSize; // Ensure trees are not too close to each other (minimum distance of 20 units) let tooClose = false; const position = new THREE.Vector3(x, 0, z); const minDistance = 20; // Increased minimum distance between trees scene.children.forEach(child => { if (child.isTree && child.position.distanceTo(position) < minDistance) { tooClose = true; } }); if (!tooClose) { const tree = createTree(position); tree.isTree = true; // Add a flag to identify trees scene.add(tree); } } } // Create initial scene const terrain = createTerrain(); placeTrees(); // Place trees after creating terrain // Create fire base and fire function createFireBase() { // Create fire base const baseTexture = textureLoader.load('https://play.rosebud.ai/assets/Base.png?S9mP'); const baseMaterial = new THREE.MeshBasicMaterial({ map: baseTexture, transparent: true, side: THREE.DoubleSide }); const baseGeometry = new THREE.PlaneGeometry(4, 2.4); fireBase = new THREE.Mesh(baseGeometry, baseMaterial); fireBase.position.set(0, 0.1, 0); fireBase.rotation.x = -Math.PI / 2; scene.add(fireBase); // Create fire sprite const fireTexture = textureLoader.load('https://play.rosebud.ai/assets/FIIIIIRE.png?sdGj'); const fireMaterial = new THREE.MeshBasicMaterial({ map: fireTexture, transparent: true, side: THREE.DoubleSide }); const fireGeometry = new THREE.PlaneGeometry(3, 3); fireSprite = new THREE.Mesh(fireGeometry, fireMaterial); fireSprite.position.set(0, 2, 0); // Initial scale based on fire intensity const scale = fireIntensity * 0.5; // Scale factor of 0.5 to make it smaller fireSprite.scale.set(scale, scale, scale); scene.add(fireSprite); } // Function to create and spawn a stick function spawnStick() { const stickTexture = textureLoader.load('https://play.rosebud.ai/assets/Stick.png?o4vy'); const stickMaterial = new THREE.MeshBasicMaterial({ map: stickTexture, transparent: true, side: THREE.DoubleSide }); const stickGeometry = new THREE.PlaneGeometry(2, 2); const stick = new THREE.Mesh(stickGeometry, stickMaterial); // Find a random tree to spawn near const trees = scene.children.filter(child => child.isTree); if (trees.length > 0) { const randomTree = trees[Math.floor(Math.random() * trees.length)]; const angle = Math.random() * Math.PI * 2; const distance = 5 + Math.random() * 5; // 5-10 units from tree stick.position.x = randomTree.position.x + Math.cos(angle) * distance; stick.position.z = randomTree.position.z + Math.sin(angle) * distance; stick.position.y = 1; stick.rotation.x = -Math.PI / 4; stick.isStick = true; scene.add(stick); sticks.push(stick); } } // Initialize fire base and first sticks createFireBase(); for (let i = 0; i < 15; i++) { // Spawn initial sticks spawnStick(); } // Function to create a bush billboard function createBush(position) { const bushTexture = textureLoader.load('https://play.rosebud.ai/assets/output-removebg-preview (11).png?mJiE'); const bushMaterial = new THREE.MeshBasicMaterial({ map: bushTexture, transparent: true, side: THREE.DoubleSide, alphaTest: 0.5 }); const bushGeometry = new THREE.PlaneGeometry(3, 3); // Even smaller geometry const bush = new THREE.Mesh(bushGeometry, bushMaterial); bush.scale.set(0.5, 0.5, 0.5); // Smaller scale bush.position.copy(position); bush.rotation.y = Math.random() * Math.PI * 2; bush.position.y = 1.5; // Lower to the ground return bush; } // Function to place bushes function placeBushes() { const numberOfBushes = 150; // More bushes than trees for denser vegetation const mapSize = 300; for (let i = 0; i < numberOfBushes; i++) { const x = (Math.random() - 0.5) * mapSize; const z = (Math.random() - 0.5) * mapSize; // Ensure bushes are not too close to each other or trees let tooClose = false; const position = new THREE.Vector3(x, 0, z); const minDistanceToBush = 10; const minDistanceToTree = 15; // Check distance to existing objects scene.children.forEach(child => { if (child.isTree && child.position.distanceTo(position) < minDistanceToTree) { tooClose = true; } if (child.isBush && child.position.distanceTo(position) < minDistanceToBush) { tooClose = true; } }); if (!tooClose) { const bush = createBush(position); bush.isBush = true; // Add flag to identify bushes scene.add(bush); } } } placeBushes(); // Place bushes after trees // Create monster let monster; let monsterBody; let currentMonsterTextureIndex = 0; let lastTextureUpdateTime = 0; const TEXTURE_UPDATE_INTERVAL = 150; // Update texture every 150ms when moving let monsterTargetPosition = null; const MONSTER_VISION_RANGE = 50; // How far the monster can "see" the player const BASE_MONSTER_SPEED = 3; const MONSTER_TARGET_THRESHOLD = 5; // How close the monster needs to get to its target before picking a new one const RAGE_SPEED_MULTIPLIER = 2.0; // Monster moves 2x faster in rage mode let monsterMoveInterval; let isPaused = false; const raycaster = new THREE.Raycaster(); let monsterPauseTimeout = null; let monsterIsWaiting = false; const PLATFORM_SIZE = 400; // Size of the walkable area (half of the terrain size) // Function to check if player is hidden behind bush function isPlayerHiddenBehindBush() { // Check if any bush is between monster and player const bushes = scene.children.filter(child => child.isBush); for (const bush of bushes) { const bushPos = new THREE.Vector3(bush.position.x, 0, bush.position.z); const playerPos = new THREE.Vector3(playerBody.position.x, 0, playerBody.position.z); const monsterPos = new THREE.Vector3(monsterBody.position.x, 0, monsterBody.position.z); // Check if bush is between monster and player const distanceToMonster = bushPos.distanceTo(monsterPos); const distanceToPlayer = bushPos.distanceTo(playerPos); if (distanceToPlayer < 2 && distanceToMonster < distanceToPlayer) { return true; } } return false; } function createMonster() { // Create monster mesh const monsterGeometry = new THREE.PlaneGeometry(5, 5); const monsterMaterial = new THREE.MeshBasicMaterial({ map: monsterStandingTexture, transparent: true, side: THREE.DoubleSide, alphaTest: 0.5, depthWrite: true, depthTest: true }); monster = new THREE.Mesh(monsterGeometry, monsterMaterial); monster.position.set(150, 2.5, 150); // Starting position far away from player monster.scale.set(0.75, 0.75, 0.75); scene.add(monster); // Create monster physics body const monsterShape = new CANNON.Box(new CANNON.Vec3(1, 2.5, 1)); monsterBody = new CANNON.Body({ mass: 5, material: new CANNON.Material(), fixedRotation: true, position: new CANNON.Vec3(150, 5, 150) }); monsterBody.addShape(monsterShape); world.addBody(monsterBody); } // Screen shake function function shakeScreen(intensity = 0.2, duration = 100) { const originalPosition = camera.position.clone(); const startTime = Date.now(); function updateShake() { const elapsed = Date.now() - startTime; if (elapsed < duration) { camera.position.x = originalPosition.x + (Math.random() - 0.5) * intensity; camera.position.y = originalPosition.y + (Math.random() - 0.5) * intensity; camera.position.z = originalPosition.z + (Math.random() - 0.5) * intensity; requestAnimationFrame(updateShake); } else { camera.position.copy(originalPosition); } } updateShake(); } function updateMonsterTexture() { const currentTime = Date.now(); const isMoving = Math.abs(monsterBody.velocity.x) > 0.1 || Math.abs(monsterBody.velocity.z) > 0.1; // Only show standing texture during explicit waiting state if (monsterIsWaiting) { monster.material = new THREE.MeshBasicMaterial({ map: monsterStandingTexture, transparent: true, side: THREE.DoubleSide, alphaTest: 0.5, depthWrite: true, depthTest: true }); monster.position.y = monsterBody.position.y; } else if (isMoving && currentTime - lastTextureUpdateTime > TEXTURE_UPDATE_INTERVAL) { // Update walking animation when moving currentMonsterTextureIndex = (currentMonsterTextureIndex + 1) % monsterWalkTextures.length; monster.material = new THREE.MeshBasicMaterial({ map: monsterWalkTextures[currentMonsterTextureIndex], transparent: true, side: THREE.DoubleSide, alphaTest: 0.5, depthWrite: true, depthTest: true }); lastTextureUpdateTime = currentTime; monster.position.y = monsterBody.position.y - 2.5; // Lower position during walk } } createMonster(); // Function to make monster move to a random position function setRandomMonsterTarget() { // Only set new target if not waiting if (!monsterIsWaiting) { // Set monster to waiting state monsterIsWaiting = true; // Random pause duration between 1-5 seconds const pauseDuration = Math.random() * 4000 + 1000; // Clear any existing timeout if (monsterPauseTimeout) clearTimeout(monsterPauseTimeout); monsterPauseTimeout = setTimeout(() => { // Set new target position within platform bounds monsterTargetPosition = new THREE.Vector3( (Math.random() - 0.5) * PLATFORM_SIZE, monsterBody.position.y, (Math.random() - 0.5) * PLATFORM_SIZE ); monsterIsWaiting = false; }, pauseDuration); } } // Start the monster's random movement interval monsterMoveInterval = setInterval(setRandomMonsterTarget, 30000); // 30 seconds let animationFrameId; function animate() { animationFrameId = requestAnimationFrame(animate); if (isGameOver) { // Handle game over state cancelAnimationFrame(animationFrameId); const gameOverScreen = document.createElement('div'); gameOverScreen.style.position = 'absolute'; gameOverScreen.style.top = '50%'; gameOverScreen.style.left = '50%'; gameOverScreen.style.transform = 'translate(-50%, -50%)'; gameOverScreen.style.color = 'red'; gameOverScreen.style.fontSize = '48px'; gameOverScreen.style.fontWeight = 'bold'; gameOverScreen.style.textAlign = 'center'; gameOverScreen.innerHTML = 'GAME OVER
Press R to Restart'; parentDiv.appendChild(gameOverScreen); return; } if (!isPaused && assetsLoaded) { const deltaTime = Math.min(clock.getDelta(), 0.1); // Update timer const currentTime = Date.now(); const elapsedSeconds = Math.floor((currentTime - gameStartTime) / 1000); const minutes = Math.floor(elapsedSeconds / 60); const seconds = elapsedSeconds % 60; timerDisplay.innerHTML = `Time: ${minutes}:${seconds.toString().padStart(2, '0')}`; // Update fire intensity if (Date.now() - lastFireDecreaseTime > FIRE_DECREASE_INTERVAL) { fireIntensity = Math.max(MIN_FIRE_INTENSITY, fireIntensity - FIRE_DECREASE_RATE); lastFireDecreaseTime = Date.now(); // Update fire sprite scale if (fireSprite) { const scale = fireIntensity * 0.5; // Scale factor of 0.5 to make it smaller fireSprite.scale.set(scale, scale, scale); } } // Spawn new sticks if (Date.now() - lastStickSpawnTime > STICK_SPAWN_INTERVAL) { spawnStick(); lastStickSpawnTime = Date.now(); } // Check for stick collection // Check for stick collection when not at max capacity if (carriedSticks.length < MAX_STICKS) { for (let i = sticks.length - 1; i >= 0; i--) { const stick = sticks[i]; const distance = new THREE.Vector3( playerBody.position.x, playerBody.position.y, playerBody.position.z ).distanceTo(stick.position); if (distance < STICK_COLLECT_RANGE) { carriedSticks.push(stick); stick.visible = false; sticks.splice(i, 1); stickCounter.innerHTML = `Sticks: ${carriedSticks.length}`; break; } } } // Check for stick deposit at fire if (carriedSticks.length > 0) { const distanceToFire = new THREE.Vector3( playerBody.position.x, playerBody.position.y, playerBody.position.z ).distanceTo(fireBase.position); if (distanceToFire < FIRE_RANGE) { // Add all carried sticks to fire const sticksToAdd = carriedSticks.length; fireIntensity = Math.min(MAX_FIRE_INTENSITY, fireIntensity + (0.5 * sticksToAdd)); // Remove all carried sticks carriedSticks.forEach(stick => scene.remove(stick)); carriedSticks = []; stickCounter.innerHTML = 'Sticks: 0'; // Update fire sprite scale if (fireSprite) { const scale = fireIntensity * 0.5; // Scale factor of 0.5 to make it smaller fireSprite.scale.set(scale, scale, scale); } } } // Update player movement moveDirection.set(0, 0, 0); // Get camera's forward direction (excluding y component) const forward = new THREE.Vector3(0, 0, -1); forward.applyQuaternion(camera.quaternion); forward.y = 0; forward.normalize(); // Get camera's right direction const right = new THREE.Vector3(1, 0, 0); right.applyQuaternion(camera.quaternion); right.y = 0; right.normalize(); // Calculate movement based on input if (keys.w) moveDirection.add(forward); if (keys.s) moveDirection.sub(forward); if (keys.d) moveDirection.add(right); if (keys.a) moveDirection.sub(right); moveDirection.normalize(); // Apply movement to player body if (moveDirection.lengthSq() > 0) { // Handle sprinting and stamina let currentMoveSpeed = normalSpeed; if (isSprinting && currentStamina > 0 && canSprint) { currentMoveSpeed = sprintSpeed; currentStamina -= deltaTime; if (currentStamina <= 0) { currentStamina = 0; isSprinting = false; canSprint = false; // Start stamina recovery after delay setTimeout(() => { canSprint = true; }, staminaRecoveryTime * 1000); } } else if (!isSprinting && currentStamina < maxStamina) { // Recover stamina when not sprinting currentStamina = Math.min(maxStamina, currentStamina + deltaTime); } // Apply movement with current speed playerBody.velocity.x = moveDirection.x * currentMoveSpeed; playerBody.velocity.z = moveDirection.z * currentMoveSpeed; } else { playerBody.velocity.x *= 0.9; playerBody.velocity.z *= 0.9; } // Handle jumping if (keys.space && canJump) { playerBody.velocity.y = jumpForce; canJump = false; } // Check for infinite jump ("0" key) if (keys['0']) { canJump = true; } else { // Normal ground check const playerCurrentHeight = playerBody.position.y; const minJumpHeight = playerRadius + 0.1; canJump = Math.abs(playerBody.velocity.y) < 0.1 && playerCurrentHeight <= minJumpHeight; } // Update physics world.step(deltaTime); // Update monster and rage effects monster.position.copy(monsterBody.position); monster.rotation.y = Math.atan2( (playerBody.position.x - monsterBody.position.x), (playerBody.position.z - monsterBody.position.z) ); // Add stomp effect while in rage mode and moving if (isInRageState && Date.now() - lastStompTime > 1000 && (Math.abs(monsterBody.velocity.x) > 0.1 || Math.abs(monsterBody.velocity.z) > 0.1)) { shakeScreen(0.2, 100); lastStompTime = Date.now(); } monster.rotation.y = Math.atan2( (playerBody.position.x - monsterBody.position.x), (playerBody.position.z - monsterBody.position.z) ); updateMonsterTexture(); // Monster AI behavior const distanceToPlayer = new THREE.Vector3( playerBody.position.x, 0, playerBody.position.z ).distanceTo(new THREE.Vector3( monsterBody.position.x, 0, monsterBody.position.z )); // Check for collision between monster and player const monsterPlayerDistance = new THREE.Vector3( monsterBody.position.x, monsterBody.position.y, monsterBody.position.z ).distanceTo(new THREE.Vector3( playerBody.position.x, playerBody.position.y, playerBody.position.z )); // If monster touches player if (monsterPlayerDistance < 3 && Date.now() - lastHitTime > HIT_COOLDOWN) { playerHealth--; lastHitTime = Date.now(); // Apply knockback force const knockbackDirection = new THREE.Vector3() .subVectors(playerBody.position, monsterBody.position) .normalize(); playerBody.velocity.x += knockbackDirection.x * 15; playerBody.velocity.z += knockbackDirection.z * 15; playerBody.velocity.y = 5; // Upward force // Show damage overlay damageOverlay.style.display = 'block'; setTimeout(() => { damageOverlay.style.display = 'none'; }, 500); // Check for game over if (playerHealth <= 0) { isGameOver = true; } } // Only detect player if they're visible // Check if monster can see player (not behind trees) let canSeePlayer = false; if (playerMesh.visible && distanceToPlayer <= MONSTER_VISION_RANGE && !(isCrouching && isPlayerHiddenBehindBush())) { // Direction from monster to player const directionToPlayer = new THREE.Vector3() .subVectors(playerBody.position, monsterBody.position) .normalize(); raycaster.set( new THREE.Vector3(monsterBody.position.x, monsterBody.position.y + 2, monsterBody.position.z), directionToPlayer ); const intersects = raycaster.intersectObjects(treeHitboxes); // Can see player if no tree intersections or if tree is farther than player canSeePlayer = intersects.length === 0 || intersects[0].distance > distanceToPlayer; } // Check if there's a marker or if monster can "see" player if (monsterTargetPosition || canSeePlayer) { let targetX, targetZ; if (canSeePlayer) { // If player is in range, move towards player targetX = playerBody.position.x; targetZ = playerBody.position.z; // Toggle rage state when player is visible isInRageState = true; // Screen shake effect if (Date.now() - lastStompTime > 1000) { shakeScreen(0.4, 300); lastStompTime = Date.now(); } } else { // Move towards marker position targetX = monsterTargetPosition.x; targetZ = monsterTargetPosition.z; } // Calculate direction to target const direction = new THREE.Vector3( targetX - monsterBody.position.x, 0, targetZ - monsterBody.position.z ).normalize(); // Calculate current monster speed based on rage state // Calculate speed multiplier based on fire state and rage state let speedMultiplier = 1; if (fireIntensity <= MIN_FIRE_INTENSITY) speedMultiplier = 5; if (isInRageState) speedMultiplier *= RAGE_SPEED_MULTIPLIER; const currentMonsterSpeed = BASE_MONSTER_SPEED * speedMultiplier; // Apply direct velocity for more responsive movement monsterBody.velocity.x = direction.x * currentMonsterSpeed; monsterBody.velocity.z = direction.z * currentMonsterSpeed; // Clear marker target if reached if (monsterTargetPosition && new THREE.Vector3(monsterBody.position.x, 0, monsterBody.position.z) .distanceTo(new THREE.Vector3(targetX, 0, targetZ)) < MONSTER_TARGET_THRESHOLD) { monsterTargetPosition = null; } } else { // Disable rage state when player is not visible isInRageState = false; // Random wandering behavior if (!monsterTargetPosition && !monsterIsWaiting) { setRandomMonsterTarget(); } // Only move if not in waiting state and has a target if (!monsterIsWaiting && monsterTargetPosition) { // Move towards random target const direction = new THREE.Vector3( monsterTargetPosition.x - monsterBody.position.x, 0, monsterTargetPosition.z - monsterBody.position.z ).normalize(); // Calculate current monster speed based on rage state const currentMonsterSpeed = isInRageState ? BASE_MONSTER_SPEED * RAGE_SPEED_MULTIPLIER : BASE_MONSTER_SPEED; // Apply direct velocity for more responsive movement monsterBody.velocity.x = direction.x * currentMonsterSpeed; monsterBody.velocity.z = direction.z * currentMonsterSpeed; } else { // Stop movement while waiting monsterBody.velocity.x = 0; monsterBody.velocity.z = 0; } // Check if reached random target // Only check distance if there is a target position if (monsterTargetPosition && new THREE.Vector3(monsterBody.position.x, 0, monsterBody.position.z) .distanceTo(new THREE.Vector3(monsterTargetPosition.x, 0, monsterTargetPosition.z)) < MONSTER_TARGET_THRESHOLD) { monsterTargetPosition = null; // Set waiting state when reaching target if (!monsterIsWaiting) { setRandomMonsterTarget(); } } } // Update player mesh position playerMesh.position.copy(playerBody.position); // Update camera position to follow player (now without rotation) camera.position.copy(playerBody.position); // Adjust camera height based on crouch state camera.position.y += isCrouching ? crouchCameraHeight : normalCameraHeight; // Update flashlight position and direction flashlight.position.copy(camera.position); const flashlightDirection = new THREE.Vector3(0, 0, -1); flashlightDirection.applyQuaternion(camera.quaternion); flashlightTarget.position.copy(camera.position).add(flashlightDirection.multiplyScalar(10)); // Camera rotation is now handled by mouse movement } composer.render(); } // Handle window resize function onWindowResize() { const width = parentDiv.clientWidth; const height = parentDiv.clientHeight; // Update camera camera.aspect = width / height; camera.updateProjectionMatrix(); // Update renderer and composer renderer.setSize(width, height); composer.setSize(width, height); // Update post-processing passes bloomPass.resolution.set(width, height); smaaPass.setSize(width, height); } // Add event listeners window.addEventListener('resize', onWindowResize); const resizeObserver = new ResizeObserver(onWindowResize); resizeObserver.observe(parentDiv); // Start animation and cleanup function animate(); // Cleanup function for React window.cleanup = () => { if (animationFrameId) { cancelAnimationFrame(animationFrameId); } // Clear monster movement interval if (monsterMoveInterval) { clearInterval(monsterMoveInterval); } if (monsterPauseTimeout) { clearTimeout(monsterPauseTimeout); } // Remove event listeners window.removeEventListener('resize', onWindowResize); resizeObserver.disconnect(); // Remove UI elements if (stickCounter) stickCounter.remove(); if (timerDisplay) timerDisplay.remove(); // Remove all event listeners window.removeEventListener('keydown', keydownHandler); window.removeEventListener('keyup', keyupHandler); document.removeEventListener('pointerlockchange', pointerLockChangeHandler); document.removeEventListener('mousemove', mouseMoveHandler); };