import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; import { OBJLoader } from 'three/addons/loaders/OBJLoader.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'; // Game state management let gameEndTime = 0; // Store the exact time when game ends let isInMenu = true; let isInCutscene = false; let menuElements = null; let hasGameStarted = false; let startPrompt = null; // Preloaded elements for jumpscare and game over let preloadedGameOver = null; let sharkJumpImage = null; let preloadedSlides = new Map(); // Change to Map for better memory management let playerScore = 0; let highScore = localStorage.getItem('oceanNightmareHighScore') || 0; let survivalTimer = null; let preloadedSlideSounds = new Map(); // Cache for slide sounds // Initialize loading manager const loadingManager = new THREE.LoadingManager(); const textureLoader = new THREE.TextureLoader(loadingManager); const gltfLoader = new GLTFLoader(loadingManager); const objLoader = new OBJLoader(loadingManager); let assetsLoaded = false; // Initialize parent div and canvas const parentDiv = document.getElementById('renderDiv'); if (!parentDiv) { console.error('Parent div not found'); throw new Error('Parent div not found'); } // Initialize canvas const canvas = document.getElementById('threeRenderCanvas') || (() => { const newCanvas = document.createElement('canvas'); newCanvas.id = 'threeRenderCanvas'; parentDiv.appendChild(newCanvas); return newCanvas; })(); // 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 = '#001e3d'; loadingScreen.style.color = 'white'; loadingScreen.style.display = 'flex'; loadingScreen.style.flexDirection = 'column'; loadingScreen.style.justifyContent = 'center'; loadingScreen.style.alignItems = 'center'; loadingScreen.style.fontSize = '24px'; loadingScreen.style.zIndex = '1000'; // Create loading container const loadingContainer = document.createElement('div'); loadingContainer.style.textAlign = 'center'; // Create loading title const loadingTitle = document.createElement('h1'); loadingTitle.textContent = 'Ocean Nightmare'; loadingTitle.style.marginBottom = '20px'; loadingTitle.style.color = '#4fc3f7'; loadingTitle.style.textShadow = '0 0 10px rgba(79, 195, 247, 0.5)'; // Create loading progress container const progressContainer = document.createElement('div'); progressContainer.style.width = '300px'; progressContainer.style.height = '20px'; progressContainer.style.backgroundColor = 'rgba(255, 255, 255, 0.1)'; progressContainer.style.borderRadius = '10px'; progressContainer.style.overflow = 'hidden'; progressContainer.style.marginBottom = '20px'; // Create progress bar const progressBar = document.createElement('div'); progressBar.style.width = '0%'; progressBar.style.height = '100%'; progressBar.style.backgroundColor = '#4fc3f7'; progressBar.style.transition = 'width 0.3s ease-in-out'; // Create loading text const loadingText = document.createElement('div'); loadingText.textContent = 'Loading assets... 0%'; loadingText.style.marginTop = '10px'; loadingText.style.color = '#ffffff'; // Assemble loading screen progressContainer.appendChild(progressBar); loadingContainer.appendChild(loadingTitle); loadingContainer.appendChild(progressContainer); loadingContainer.appendChild(loadingText); loadingScreen.appendChild(loadingContainer); parentDiv.appendChild(loadingScreen); // Initialize music variables let backgroundMusic; let gameplayMusic; let creepySound; let proximitySound; let gameOverMusic; let lastCreepySoundTime = 0; let lastProximitySoundTime = 0; const CREEPY_SOUND_MIN_INTERVAL = 20000; // Minimum 20 seconds between sounds const CREEPY_SOUND_MAX_INTERVAL = 45000; // Maximum 45 seconds between sounds const PROXIMITY_THRESHOLD = 50; // Distance at which proximity sound triggers const PROXIMITY_SOUND_INTERVAL = 8000; // Minimum time between proximity sounds // Loading manager events loadingManager.onProgress = function(url, itemsLoaded, itemsTotal) { const progress = ((itemsLoaded / itemsTotal) * 100).toFixed(0); progressBar.style.width = `${progress}%`; loadingText.textContent = `Loading assets... ${progress}%`; // Show what's being loaded const assetName = url.split('/').pop().split('?')[0]; const loadingDetails = document.createElement('div'); loadingDetails.style.fontSize = '14px'; loadingDetails.style.color = '#4fc3f7'; loadingDetails.style.marginTop = '5px'; loadingDetails.textContent = `Loading: ${assetName}`; // Remove previous loading detail if it exists const previousDetail = loadingContainer.querySelector('.loading-detail'); if (previousDetail) { loadingContainer.removeChild(previousDetail); } loadingDetails.classList.add('loading-detail'); loadingContainer.appendChild(loadingDetails); // Add pulse animation effect when progress changes progressBar.style.boxShadow = '0 0 10px rgba(79, 195, 247, 0.8)'; setTimeout(() => { progressBar.style.boxShadow = 'none'; }, 200); }; // Menu specific values // Seaweed system const seaweedPool = []; const activeSeaweed = []; const SEAWEED_COUNT = 30; const SEAWEED_SPAWN_RADIUS = 50; const SEAWEED_DESPAWN_DISTANCE = 100; const SEAWEED_CULL_DISTANCE = 80; // Distance for culling seaweed const SEAWEED_LOD_DISTANCE = 40; // Distance for LOD transition // Create frustum for culling const frustum = new THREE.Frustum(); const projScreenMatrix = new THREE.Matrix4(); let seaweedModel = null; const SEAWEED_SCALE = 0.5; // Fish system with object pooling const fishPool = []; const activeFishes = []; const FISH_COUNT = 15; const FISH_SPAWN_DISTANCE = 10; const FISH_DESPAWN_DISTANCE = 15; let seaMonster = null; let isGameOver = false; const SEA_MONSTER_SCALE = 15; const MONSTER_START_DISTANCE = 200; let gameStartTime = Date.now(); let lastMonsterBehaviorTime = 0; let lastHintTime = 0; const MONSTER_BEHAVIOR_INTERVAL = 15000; const HINT_INTERVAL = 20000; // Show a hint every 20 seconds const HINT_DURATION = 3000; // Each hint lasts 3 seconds const HINT_DISTANCE = 80; // Distance for hint appearances const GAME_START_DELAY = 60000; // Monster AI States const MonsterState = { STALKING: 'stalking', AMBUSHING: 'ambushing', TERRITORIAL: 'territorial', ATTACKING: 'attacking' }; // Monster AI Configuration const monsterAI = { currentState: MonsterState.STALKING, stalkingDistance: 100, territoryRadius: 150, ambushPreparationTime: 5000, lastStateChange: 0, stateMinDuration: 10000, territoryCenter: new THREE.Vector3(), hidePosition: new THREE.Vector3(), isPreparingAmbush: false, ambushStartTime: 0 }; const FISH_SPAWN_INTERVAL = 2000; // Reduced spawn interval let lastFishSpawnTime = 0; let fishModels = []; // Load fish models and sea monster function loadFishModels() { const fishUrls = [ 'https://play.rosebud.ai/assets/goldfish1.glb?Dmse', 'https://play.rosebud.ai/assets/goldfish2.glb?ss9r' ]; // Load sea monster gltfLoader.load('https://play.rosebud.ai/assets/sea monster fish.glb?mXZ5', (gltf) => { seaMonster = gltf.scene; seaMonster.scale.set(SEA_MONSTER_SCALE, SEA_MONSTER_SCALE, SEA_MONSTER_SCALE); // Get player's forward direction const cameraForward = new THREE.Vector3(0, 0, -1); cameraForward.applyQuaternion(camera.quaternion); // Add some randomness to the spawn angle within a forward-facing cone const maxAngleDeviation = Math.PI / 4; // 45-degree cone const randomAngleOffset = (Math.random() * 2 - 1) * maxAngleDeviation; const forwardAngle = Math.atan2(cameraForward.z, cameraForward.x); const spawnAngle = forwardAngle + randomAngleOffset; // Calculate spawn position const spawnX = Math.cos(spawnAngle) * MONSTER_START_DISTANCE; const spawnZ = Math.sin(spawnAngle) * MONSTER_START_DISTANCE; seaMonster.position.set(spawnX, 20, spawnZ); scene.add(seaMonster); // Make monster face the player initially seaMonster.lookAt(camera.position); }); fishUrls.forEach(url => { gltfLoader.load(url, (gltf) => { const model = gltf.scene; model.scale.set(1, 1, 1); // Increased fish size fishModels.push(model); }); }); } // Initialize fish pool function initFishPool() { for (let i = 0; i < FISH_COUNT * 2; i++) { const fish = new THREE.Group(); fish.visible = false; scene.add(fish); fishPool.push(fish); } } // Get fish from pool function getFishFromPool() { return fishPool.length > 0 ? fishPool.pop() : null; } // Return fish to pool function returnFishToPool(fish) { fish.visible = false; fish.clear(); fishPool.push(fish); } function createFish() { if (fishModels.length === 0) return; const fish = getFishFromPool(); if (!fish) return; // Check terrain height at spawn position using raycaster raycaster.ray.origin.set(camera.position.x, 1000, camera.position.z); raycaster.ray.direction.set(0, -1, 0); const intersects = raycaster.intersectObject(terrain); const terrainHeight = intersects.length > 0 ? intersects[0].point.y : 0; const minSpawnHeight = terrainHeight + 3; // Minimum height above terrain // Get camera's forward direction const cameraForward = new THREE.Vector3(0, 0, -1); cameraForward.applyQuaternion(camera.quaternion); // Calculate spawn angle relative to camera view const viewAngle = Math.PI / 3; // 60-degree view cone const randomAngle = (Math.random() * viewAngle - viewAngle / 2) + camera.rotation.y; // Determine spawn side with higher probability for the visible side const spawnFromLeft = Math.cos(randomAngle - camera.rotation.y) > 0; // Calculate height with bias towards camera's vertical view const heightVariation = 8; const targetHeight = camera.position.y + Math.tan(camera.rotation.x) * FISH_SPAWN_DISTANCE; const height = targetHeight + (Math.random() - 0.5) * heightVariation; // Calculate spawn position within view cone const spawnPosition = new THREE.Vector3(); spawnPosition.copy(camera.position); spawnPosition.y = height; // Calculate spawn direction within view cone const spawnDir = new THREE.Vector3( Math.cos(randomAngle), 0, Math.sin(randomAngle) ); // Add slight forward/backward variation const forwardOffset = (Math.random() * 5) + FISH_SPAWN_DISTANCE; // More consistent forward distance spawnPosition.add(spawnDir.multiplyScalar(forwardOffset)); // Ensure fish faces the player const directionToPlayer = new THREE.Vector3().subVectors(camera.position, spawnPosition).normalize(); // Clone random fish model const modelIndex = Math.floor(Math.random() * fishModels.length); const fishModel = fishModels[modelIndex].clone(); fish.add(fishModel); fish.position.copy(spawnPosition); // Set fish rotation based on spawn side if (spawnFromLeft) { fish.rotation.y = camera.rotation.y - Math.PI / 2; // Face right } else { fish.rotation.y = camera.rotation.y + Math.PI / 2; // Face left } fish.userData = { speed: 0.05 + Math.random() * 0.1, // Reduced speed for better visibility spawnFromLeft: spawnFromLeft, originalY: fish.position.y, targetY: fish.position.y, initialAngleToPlayer: Math.atan2(directionToPlayer.z, directionToPlayer.x), swimPattern: Math.floor(Math.random() * 3), // 0: straight, 1: wavy, 2: zig-zag wobble: { speed: 1 + Math.random() * 2, amplitude: 0.05 + Math.random() * 0.1, offset: Math.random() * Math.PI * 2 }, rotationSpeed: 0.1, // Speed of rotation changes currentRotation: fish.rotation.y, targetRotation: fish.rotation.y, spawnTime: Date.now() }; fish.visible = true; activeFishes.push(fish); } // Function to update fish animations function updateFishAnimation(fish, deltaTime) { if (!fish.userData) return; // Update animation phase const time = Date.now() * 0.001; const swayAmount = 0.1; const pitchAmount = 0.05; // Apply swimming motion to each child mesh fish.children.forEach(child => { if (child.isMesh || child.isGroup) { // Side-to-side sway child.rotation.z = Math.sin(time * fish.userData.wobble.speed) * swayAmount; // Up-down pitch child.rotation.x = Math.sin(time * fish.userData.wobble.speed * 0.5) * pitchAmount; } }); } function updateFishes(deltaTime) { // Update frustum for culling checks projScreenMatrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse); frustum.setFromProjectionMatrix(projScreenMatrix); const currentTime = Date.now(); const tempRaycaster = new THREE.Raycaster(); // Temporary raycaster for fish // Spawn new fish at intervals if (currentTime - lastFishSpawnTime > FISH_SPAWN_INTERVAL && activeFishes.length < FISH_COUNT) { createFish(); lastFishSpawnTime = currentTime; } // Update active fish for (let i = activeFishes.length - 1; i >= 0; i--) { const fish = activeFishes[i]; const fishData = fish.userData; // Calculate distance to player const distanceToPlayer = fish.position.distanceTo(camera.position); const evasionDistance = 5; // Distance at which fish starts evading // Get base movement direction const moveDirection = new THREE.Vector3(1, 0, 0); moveDirection.applyQuaternion(camera.quaternion); if (!fishData.spawnFromLeft) { moveDirection.multiplyScalar(-1); } // Evasive behavior when near player if (distanceToPlayer < evasionDistance) { // Calculate evasion direction (away from player) const evasionDirection = fish.position.clone().sub(camera.position).normalize(); // Blend between regular movement and evasion const evasionStrength = 1 - (distanceToPlayer / evasionDistance); moveDirection.lerp(evasionDirection, evasionStrength * 0.5); // Increase speed temporarily when evading fishData.speed *= (1 + evasionStrength); // Update target rotation for evasion fishData.targetRotation = Math.atan2(moveDirection.z, moveDirection.x); } // Apply swimming patterns let patternOffset = 0; switch (fishData.swimPattern) { case 1: // Wavy pattern patternOffset = Math.sin(currentTime * 0.001 * fishData.wobble.speed) * 0.05; break; case 2: // Zig-zag pattern patternOffset = ((currentTime * 0.001) % 2 - 1) * 0.05; break; } moveDirection.y += patternOffset; // Check terrain height at fish position tempRaycaster.ray.origin.set(fish.position.x, 1000, fish.position.z); tempRaycaster.ray.direction.set(0, -1, 0); const terrainIntersects = tempRaycaster.intersectObject(terrain); if (terrainIntersects.length > 0) { const terrainHeight = terrainIntersects[0].point.y; const minFishHeight = terrainHeight + 3; // Minimum height above terrain // Predict next position const nextPosition = fish.position.clone().add(moveDirection.multiplyScalar(fishData.speed)); // If next position would be too close to terrain, adjust vertical movement if (nextPosition.y < minFishHeight) { moveDirection.y = Math.max(moveDirection.y, 0.05); // Force upward movement } // Apply movement with terrain avoidance fish.position.add(moveDirection); // Ensure minimum height is maintained fish.position.y = Math.max(fish.position.y, minFishHeight); } else { // If no terrain intersection found, move normally fish.position.add(moveDirection); } // Smooth rotation fishData.currentRotation = THREE.MathUtils.lerp( fishData.currentRotation, fishData.targetRotation, fishData.rotationSpeed * deltaTime ); fish.rotation.y = fishData.currentRotation; // Update vertical position with smooth transitions if (Math.random() < 0.01) { // Occasionally change target height fishData.targetY = fishData.originalY + (Math.random() - 0.5) * 4; } fish.position.y = THREE.MathUtils.lerp( fish.position.y, fishData.targetY + Math.sin(currentTime * 0.001 * fishData.wobble.speed) * fishData.wobble.amplitude, 0.02 ); // Check if fish should be removed const distanceToCamera = fish.position.distanceTo(camera.position); // More efficient frustum culling check const isInViewFrustum = frustum.containsPoint(fish.position); // Apply distance-based culling if (!isInViewFrustum || distanceToCamera > FISH_DESPAWN_DISTANCE * 0.8) { fish.visible = false; } else { fish.visible = true; // Apply LOD based on distance if (distanceToCamera > FISH_DESPAWN_DISTANCE * 0.5) { // Reduce animation updates for distant fish if (Math.random() < 0.5) { // Only update some frames updateFishAnimation(fish, deltaTime); } } else { // Full animation for close fish updateFishAnimation(fish, deltaTime); } } // Only remove if far away AND not visible to player if (distanceToCamera > FISH_DESPAWN_DISTANCE && !isInViewFrustum) { returnFishToPool(fish); activeFishes.splice(i, 1); } } } // Bubble system with object pooling const bubblePool = []; const activeBubbles = []; const BUBBLE_COUNT = 50; const BUBBLE_RADIUS = 0.05; const BUBBLE_SPAWN_RADIUS = 2; const BUBBLE_RISE_SPEED = 0.3; const BUBBLE_WOBBLE_SPEED = 2; const BUBBLE_LIFETIME = 4; // seconds // Create shared bubble material const bubbleMaterial = new THREE.MeshPhysicalMaterial({ color: 0xffffff, transparent: true, opacity: 0.2, metalness: 0.1, roughness: 0.2, transmission: 0.99, thickness: 0.5, }); // Create bubble geometry (reuse for all bubbles) const bubbleGeometry = new THREE.SphereGeometry(BUBBLE_RADIUS, 8, 8); // Initialize bubble pool function initBubblePool() { for (let i = 0; i < BUBBLE_COUNT * 1.5; i++) { const bubble = new THREE.Mesh(bubbleGeometry, bubbleMaterial); bubble.visible = false; scene.add(bubble); bubblePool.push(bubble); } } // Get bubble from pool function getBubbleFromPool() { return bubblePool.length > 0 ? bubblePool.pop() : null; } // Return bubble to pool function returnBubbleToPool(bubble) { bubble.visible = false; bubblePool.push(bubble); } function createBubble() { const bubble = getBubbleFromPool(); if (!bubble) return; // Random position around player within spawn radius const angle = Math.random() * Math.PI * 2; const radius = Math.random() * BUBBLE_SPAWN_RADIUS; bubble.position.set( camera.position.x + Math.cos(angle) * radius, camera.position.y - 1, // Start below player camera.position.z + Math.sin(angle) * radius ); bubble.userData = { lifetime: 0, wobbleOffset: Math.random() * Math.PI * 2, offsetX: Math.cos(angle) * radius, offsetZ: Math.sin(angle) * radius }; bubble.visible = true; activeBubbles.push(bubble); } function updateBubbles(deltaTime) { // Update frustum for culling checks projScreenMatrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse); frustum.setFromProjectionMatrix(projScreenMatrix); // Create new bubbles to maintain count while (activeBubbles.length < BUBBLE_COUNT) { createBubble(); } // Process bubbles in reverse order for safe removal for (let i = activeBubbles.length - 1; i >= 0; i--) { const bubble = activeBubbles[i]; bubble.userData.lifetime += deltaTime; // Rise effect bubble.position.y += BUBBLE_RISE_SPEED * deltaTime; // Update bubble position relative to player const wobble = Math.sin(bubble.userData.lifetime * BUBBLE_WOBBLE_SPEED + bubble.userData.wobbleOffset) * 0.1; bubble.position.x = camera.position.x + bubble.userData.offsetX + wobble; bubble.position.z = camera.position.z + bubble.userData.offsetZ + wobble; // Check if bubble should be recycled const distanceToPlayer = new THREE.Vector3() .subVectors(bubble.position, camera.position) .length(); // Apply frustum and distance culling const isInFrustum = frustum.containsPoint(bubble.position); if (bubble.userData.lifetime > BUBBLE_LIFETIME || distanceToPlayer > BUBBLE_SPAWN_RADIUS * 2 || !isInFrustum) { returnBubbleToPool(bubble); activeBubbles.splice(i, 1); } else { // Only make bubble visible if in frustum and within reasonable distance bubble.visible = isInFrustum && distanceToPlayer <= BUBBLE_SPAWN_RADIUS * 1.5; } } } // Initialize scenes // Define colors for underwater environment const waterColor = new THREE.Color(0x0066cc); // Brighter blue water const deepWaterColor = new THREE.Color(0x001e3d); // Darker deep water color const sandColor = new THREE.Color(0xd4ba8c); // Sandy color const scene = new THREE.Scene(); // Main scene setup // Create menu elements function createMenuElements() { // Create title text const titleDiv = document.createElement('div'); titleDiv.style.position = 'absolute'; titleDiv.style.width = '100%'; titleDiv.style.top = '20%'; titleDiv.style.textAlign = 'center'; titleDiv.style.color = '#ff0000'; titleDiv.style.fontSize = '64px'; titleDiv.style.fontWeight = 'bold'; titleDiv.style.textShadow = '0 0 10px rgba(255, 0, 0, 0.5)'; titleDiv.innerHTML = 'OCEAN NIGHTMARE'; titleDiv.style.animation = 'glow-red 2s infinite'; titleDiv.style.textTransform = 'uppercase'; titleDiv.style.textShadow = '0 0 20px rgba(255, 0, 0, 0.7), 0 0 30px rgba(255, 0, 0, 0.5), 0 0 40px rgba(255, 0, 0, 0.3)'; parentDiv.appendChild(titleDiv); // Create creator credit const creatorDiv = document.createElement('div'); creatorDiv.style.position = 'absolute'; creatorDiv.style.width = '100%'; creatorDiv.style.top = '32%'; creatorDiv.style.textAlign = 'center'; creatorDiv.style.color = '#4fc3f7'; creatorDiv.style.fontSize = '24px'; creatorDiv.style.fontWeight = 'normal'; creatorDiv.style.textShadow = '0 0 5px rgba(79, 195, 247, 0.3)'; creatorDiv.innerHTML = 'Created by Brain Joose, Inspired by his Ultimate Nightmare!'; parentDiv.appendChild(creatorDiv); // Create start button const startButton = document.createElement('div'); startButton.style.position = 'absolute'; startButton.style.left = '50%'; startButton.style.top = '50%'; startButton.style.transform = 'translate(-50%, -50%)'; startButton.style.padding = '20px 40px'; startButton.style.backgroundColor = 'rgba(79, 195, 247, 0.2)'; startButton.style.border = '2px solid #4fc3f7'; startButton.style.borderRadius = '10px'; startButton.style.color = '#4fc3f7'; startButton.style.fontSize = '32px'; startButton.style.cursor = 'pointer'; startButton.style.transition = 'all 0.3s ease'; startButton.innerHTML = 'DIVE IN'; // Animate button let glowIntensity = 0; const glowAnimation = () => { glowIntensity = (Math.sin(Date.now() * 0.002) + 1) / 2; startButton.style.boxShadow = `0 0 ${20 + glowIntensity * 10}px rgba(79, 195, 247, ${0.3 + glowIntensity * 0.2})`; startButton.style.textShadow = `0 0 ${5 + glowIntensity * 5}px rgba(79, 195, 247, ${0.5 + glowIntensity * 0.3})`; if (isInMenu) requestAnimationFrame(glowAnimation); }; glowAnimation(); startButton.addEventListener('mouseover', () => { startButton.style.backgroundColor = 'rgba(79, 195, 247, 0.4)'; startButton.style.transform = 'translate(-50%, -50%) scale(1.1)'; }); startButton.addEventListener('mouseout', () => { startButton.style.backgroundColor = 'rgba(79, 195, 247, 0.2)'; startButton.style.transform = 'translate(-50%, -50%) scale(1)'; }); startButton.addEventListener('click', startGame); parentDiv.appendChild(startButton); // Create jam text with color animation const jamText = document.createElement('div'); jamText.style.position = 'absolute'; jamText.style.width = '100%'; jamText.style.top = '60%'; jamText.style.textAlign = 'center'; jamText.style.fontSize = '24px'; jamText.style.fontWeight = 'bold'; jamText.innerHTML = 'BCART HORROR GAME JAM 2025'; // Add color animation let hue = 0; function animateColor() { hue = (hue + 1) % 360; jamText.style.color = `hsl(${hue}, 100%, 50%)`; jamText.style.textShadow = `0 0 10px hsl(${hue}, 100%, 50%)`; if (isInMenu) requestAnimationFrame(animateColor); } animateColor(); parentDiv.appendChild(jamText); const elements = { titleDiv, startButton, creatorDiv, jamText }; return elements; } // Function to start the game function startGame() { isInMenu = false; playCutscene(() => { startGameplay(); }); } function playCutscene(onComplete) { isInCutscene = true; let isTransitioning = false; let lastSkipTime = 0; const SKIP_COOLDOWN = 300; // Minimum time between skips in milliseconds // Create cutscene container const cutsceneContainer = document.createElement('div'); cutsceneContainer.style.position = 'absolute'; cutsceneContainer.style.top = '0'; cutsceneContainer.style.left = '0'; cutsceneContainer.style.width = '100%'; cutsceneContainer.style.height = '100%'; cutsceneContainer.style.backgroundColor = 'black'; cutsceneContainer.style.zIndex = '1000'; parentDiv.appendChild(cutsceneContainer); // Slide data with associated sounds const slides = Array.from({ length: 6 }, (_, i) => ({ image: preloadedSlides.get(i + 1), sound: preloadedSlideSounds.get(i + 1) })); let currentSlide = 0; let currentAudio = null; const FADE_DURATION = 1000; // 1 second fade transition // Create slide element const slideElement = document.createElement('div'); slideElement.style.position = 'absolute'; slideElement.style.top = '0'; slideElement.style.left = '0'; slideElement.style.width = '100%'; slideElement.style.height = '100%'; slideElement.style.backgroundSize = 'contain'; slideElement.style.backgroundPosition = 'center'; slideElement.style.backgroundRepeat = 'no-repeat'; slideElement.style.opacity = '0'; slideElement.style.transition = `opacity ${FADE_DURATION}ms ease-in-out`; slideElement.style.zIndex = '1000'; cutsceneContainer.appendChild(slideElement); // Create skip button const skipButton = document.createElement('button'); skipButton.style.position = 'absolute'; skipButton.style.bottom = '20px'; skipButton.style.right = '20px'; skipButton.style.padding = '10px 20px'; skipButton.style.opacity = '0'; skipButton.style.pointerEvents = 'none'; skipButton.style.transition = 'opacity 0.5s ease-in-out'; skipButton.style.backgroundColor = 'rgba(79, 195, 247, 0.2)'; skipButton.style.border = '2px solid #4fc3f7'; skipButton.style.borderRadius = '5px'; skipButton.style.color = '#4fc3f7'; skipButton.style.cursor = 'pointer'; skipButton.style.fontSize = '16px'; skipButton.style.zIndex = '1001'; skipButton.innerHTML = 'Next'; skipButton.addEventListener('mouseover', () => { skipButton.style.backgroundColor = 'rgba(79, 195, 247, 0.4)'; }); skipButton.addEventListener('mouseout', () => { skipButton.style.backgroundColor = 'rgba(79, 195, 247, 0.2)'; }); skipButton.addEventListener('click', () => { const currentTime = Date.now(); // Prevent skipping first slide and rapid skipping if (currentSlide === 0 || isTransitioning || currentTime - lastSkipTime < SKIP_COOLDOWN) { return; } isTransitioning = true; lastSkipTime = currentTime; // Clear all pending timeouts if (currentTimeout) { clearTimeout(currentTimeout); } // Properly cleanup current audio if (currentAudio) { currentAudio.removeEventListener('ended', currentAudio.onended); currentAudio.pause(); currentAudio.currentTime = 0; } // Show next slide with transition lock showSlide(() => { isTransitioning = false; }); }); cutsceneContainer.appendChild(skipButton); // Add background for smooth transition cutsceneContainer.style.transition = `opacity ${FADE_DURATION * 2}ms ease-in-out`; let currentTimeout = null; function showSlide(onTransitionComplete) { if (currentSlide >= slides.length) { // For the last slide, do a longer fade out slideElement.style.transition = `opacity ${FADE_DURATION * 2}ms ease-in-out`; slideElement.style.opacity = '0'; cutsceneContainer.style.opacity = '0'; // Wait for fade out to complete before removing currentTimeout = setTimeout(() => { if (currentAudio) { currentAudio.pause(); currentAudio = null; } // Create a promise to ensure complete removal const removePromise = new Promise((resolve) => { const checkOpacity = () => { const computedStyle = window.getComputedStyle(cutsceneContainer); if (computedStyle.opacity === '0') { cutsceneContainer.remove(); resolve(); } else { requestAnimationFrame(checkOpacity); } }; checkOpacity(); }); // Only proceed when everything is completely gone removePromise.then(() => { isInCutscene = false; // Cleanup cached resources preloadedSlides.forEach((img, key) => { img.src = ''; // Clear source preloadedSlides.delete(key); }); preloadedSlideSounds.forEach((audio, key) => { audio.src = ''; // Clear source preloadedSlideSounds.delete(key); }); onComplete(); }); }, FADE_DURATION * 2); if (onTransitionComplete) { onTransitionComplete(); } return; } // Fade out current slide slideElement.style.opacity = '0'; // Only fade out if not the first slide if (currentSlide > 0) { slideElement.style.opacity = '0'; } // For first slide, wait for audio to complete before showing skip button and advancing if (currentSlide === 0) { // Stop any currently playing slide audio if (currentAudio) { currentAudio.pause(); currentAudio.currentTime = 0; } // Play the first slide audio only once currentAudio = slides[0].sound.cloneNode(); currentAudio.volume = 0.5; currentAudio.play().catch(error => console.warn('Could not play slide sound:', error)); const startTime = Date.now(); // Define startTime when audio begins // Wait 8 seconds before showing skip button and enabling skipping setTimeout(() => { skipButton.style.opacity = '1'; skipButton.style.pointerEvents = 'auto'; }, 8000); // Only enable the skip button after 8 seconds, don't auto-advance currentAudio.addEventListener('ended', () => { currentAudio.removeAttribute('data-playing'); }, { once: true }); } currentTimeout = setTimeout(() => { // Change image and ensure it's loaded const currentSlideData = slides[currentSlide]; const tempImage = new Image(); tempImage.onload = () => { // Update background image once loaded slideElement.style.backgroundImage = `url('${currentSlideData.image.src}')`; // Play associated sound only after image is loaded if (currentAudio) { currentAudio.pause(); currentAudio.currentTime = 0; } currentAudio = currentSlideData.sound.cloneNode(); currentAudio.volume = 0.5; currentAudio.play().catch(error => console.warn('Could not play slide sound:', error)); // Fade in slideElement.style.opacity = '1'; currentSlide++; }; tempImage.onerror = () => { console.error('Failed to load slide image:', currentSlideData.image.src); // Move to next slide if image fails to load currentSlide++; showSlide(); }; // Start loading the image tempImage.src = currentSlideData.image.src; // Don't add auto-advance event listeners for audio completion if (currentAudio) { // Remove any existing event listeners first if (currentAudio.onended) { currentAudio.removeEventListener('ended', currentAudio.onended); } } }, currentSlide === 0 ? 0 : FADE_DURATION); // Ensure transition complete callback is called if (onTransitionComplete) { setTimeout(onTransitionComplete, FADE_DURATION * 2); } } // Start the slideshow showSlide(); } function startGameplay() { // Reset game start time when actual gameplay begins gameStartTime = Date.now(); // Show gameplay loading screen first const gameplayLoadingScreen = document.createElement('div'); gameplayLoadingScreen.style.position = 'absolute'; gameplayLoadingScreen.style.top = '0'; gameplayLoadingScreen.style.left = '0'; gameplayLoadingScreen.style.width = '100%'; gameplayLoadingScreen.style.height = '100%'; gameplayLoadingScreen.style.backgroundColor = 'rgba(0, 30, 61, 0.95)'; gameplayLoadingScreen.style.display = 'flex'; gameplayLoadingScreen.style.flexDirection = 'column'; gameplayLoadingScreen.style.justifyContent = 'center'; gameplayLoadingScreen.style.alignItems = 'center'; gameplayLoadingScreen.style.color = '#4fc3f7'; gameplayLoadingScreen.style.fontSize = '24px'; gameplayLoadingScreen.style.zIndex = '1000'; const loadingText = document.createElement('div'); loadingText.textContent = 'Preparing Underwater Environment'; loadingText.style.marginBottom = '20px'; const loadingDots = document.createElement('div'); loadingDots.style.fontSize = '36px'; loadingDots.style.letterSpacing = '8px'; let dots = 0; const updateDots = setInterval(() => { dots = (dots + 1) % 4; loadingDots.textContent = '.'.repeat(dots); }, 500); gameplayLoadingScreen.appendChild(loadingText); gameplayLoadingScreen.appendChild(loadingDots); parentDiv.appendChild(gameplayLoadingScreen); // Simulate loading time for environment preparation setTimeout(() => { clearInterval(updateDots); gameplayLoadingScreen.style.transition = 'opacity 1s ease-out'; gameplayLoadingScreen.style.opacity = '0'; setTimeout(() => { gameplayLoadingScreen.remove(); // Initialize game environment (removed gameStartTime set since it's now at function start) initializeGameEnvironment(); }, 1000); }, 3000); } function initializeGameEnvironment() { // Create survival timer survivalTimer = document.createElement('div'); survivalTimer.style.position = 'absolute'; survivalTimer.style.top = '20px'; survivalTimer.style.left = '50%'; survivalTimer.style.transform = 'translateX(-50%)'; survivalTimer.style.color = '#4fc3f7'; survivalTimer.style.fontSize = '24px'; survivalTimer.style.fontWeight = 'bold'; survivalTimer.style.textShadow = '0 0 10px rgba(79, 195, 247, 0.5)'; survivalTimer.style.padding = '10px 20px'; survivalTimer.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; survivalTimer.style.borderRadius = '10px'; survivalTimer.style.zIndex = '1000'; survivalTimer.style.display = 'block'; survivalTimer.style.opacity = '0'; survivalTimer.style.transition = 'opacity 0.5s ease-in-out'; survivalTimer.innerHTML = 'Survival Time: 00:00'; parentDiv.appendChild(survivalTimer); // Create start prompt startPrompt = document.createElement('div'); startPrompt.style.position = 'absolute'; startPrompt.style.top = '50%'; startPrompt.style.left = '50%'; startPrompt.style.transform = 'translate(-50%, -50%)'; startPrompt.style.color = '#4fc3f7'; startPrompt.style.fontSize = '24px'; startPrompt.style.textAlign = 'center'; startPrompt.style.textShadow = '0 0 10px rgba(79, 195, 247, 0.5)'; startPrompt.style.padding = '20px'; startPrompt.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; startPrompt.style.borderRadius = '10px'; startPrompt.style.zIndex = '1000'; startPrompt.innerHTML = 'Step forward to begin
(Press W or ↑)'; parentDiv.appendChild(startPrompt); // Ensure music is playing if (gameplayMusic.paused) { gameplayMusic.play().catch(error => { console.warn('Could not play audio:', error); }); } // Clean up menu elements if (menuElements) { menuElements.titleDiv.remove(); menuElements.startButton.remove(); menuElements.creatorDiv.remove(); menuElements.jamText.remove(); menuElements = null; } // Reset camera position for game start camera.position.set(0, 20, 0); camera.rotation.set(0, 0, 0); yaw = 0; pitch = 0; // Ensure initial monster appearance happens first const initialMonsterDelay = 5000; // 5 seconds delay setTimeout(() => { if (seaMonster) { // Force monster to a specific position for dramatic reveal const cameraForward = new THREE.Vector3(0, 0, -1); cameraForward.applyQuaternion(camera.quaternion); const appearanceDistance = 100; // Initial appearance distance // Position monster in front of player const initialPosition = camera.position.clone() .add(cameraForward.multiplyScalar(appearanceDistance)); initialPosition.y = 15; // Set specific height for dramatic effect // Store original position for after the hint const originalPosition = seaMonster.position.clone(); // Show initial appearance showMonsterHint(true); // Pass true for initial appearance // After initial appearance, enable regular hints setTimeout(() => { lastHintTime = Date.now(); // Reset hint timer after initial appearance }, HINT_DURATION + 1000); // Wait for initial hint to complete } }, initialMonsterDelay); // Start game time tracking gameStartTime = Date.now(); // Request pointer lock for game controls canvas.requestPointerLock(); } // Create raycaster for terrain height detection const raycaster = new THREE.Raycaster(); // Clock for animation const clock = new THREE.Clock(); // Add fog to hide map boundaries with adjusted density scene.fog = new THREE.FogExp2(0x001e3d, 0.06); // Increased fog density to hide terrain edges // Initialize the camera const camera = new THREE.PerspectiveCamera( 50, // Reduced FOV for more limited view window.innerWidth / window.innerHeight, // Use window dimensions initially 0.1, 100 // Increased far plane for better visibility ); camera.position.set(0, 20, 0); // Start at center of map camera.rotation.order = 'YXZ'; // Better for first-person controls // 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; // Post-processing state tracking const postProcessing = { isRotating: false, rotationTimeout: null, defaultBloomStrength: 0.2, defaultBloomRadius: 0.4, defaultResolutionScale: 1, currentResolutionScale: 1 }; // Initialize post-processing const composer = new EffectComposer(renderer); // Regular scene render pass const renderPass = new RenderPass(scene, camera); composer.addPass(renderPass); // Add optimized bloom effect const bloomPass = new UnrealBloomPass( new THREE.Vector2(window.innerWidth, window.innerHeight), postProcessing.defaultBloomStrength, postProcessing.defaultBloomRadius, 0.9 // threshold ); composer.addPass(bloomPass); // Add optimized anti-aliasing const smaaPass = new SMAAPass( window.innerWidth * renderer.getPixelRatio(), window.innerHeight * renderer.getPixelRatio() ); if (smaaPass && smaaPass.edgeDetectionMaterial) { smaaPass.edgeDetectionMaterial.setEdgeDetectionThreshold(0.05); } composer.addPass(smaaPass); // Initialize composer size composer.setSize(parentDiv.clientWidth, parentDiv.clientHeight); // Create underwater environment const vertexShader = ` varying vec3 vWorldPosition; void main() { vec4 worldPosition = modelMatrix * vec4( position, 1.0 ); vWorldPosition = worldPosition.xyz; gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); }`; const fragmentShader = ` uniform vec3 topColor; uniform vec3 bottomColor; uniform float offset; uniform float exponent; varying vec3 vWorldPosition; void main() { float h = normalize( vWorldPosition + offset ).y; gl_FragColor = vec4( mix( bottomColor, topColor, max( pow( max( h, 0.0 ), exponent ), 0.0 ) ), 1.0 ); }`; const uniforms = { topColor: { value: waterColor }, bottomColor: { value: deepWaterColor }, offset: { value: 45 }, exponent: { value: 0.8 }, }; const skyGeo = new THREE.SphereGeometry(1000, 8, 6); // Further reduced geometry complexity const skyMat = new THREE.ShaderMaterial({ uniforms: uniforms, vertexShader: vertexShader, fragmentShader: fragmentShader, side: THREE.BackSide, depthWrite: false, depthTest: false, // Disable depth testing for sky fog: false, transparent: false, blending: THREE.NoBlending // Disable blending for better performance }); const sky = new THREE.Mesh(skyGeo, skyMat); sky.renderOrder = -1; // Ensure sky is rendered first scene.add(sky); // First person control variables const moveVector = new THREE.Vector3(); const rotationVector = new THREE.Vector2(); const PI_2 = Math.PI / 2; let yaw = 0; let pitch = 0; // Add mouse move event listener for looking around function onMouseMove(event) { if (document.pointerLockElement === canvas && !isInMenu) { const movementX = event.movementX || 0; const movementY = event.movementY || 0; yaw -= movementX * 0.002; pitch -= movementY * 0.002; pitch = Math.max(-0.2, Math.min(0.2, pitch)); // Limit vertical look angle camera.rotation.y = yaw; camera.rotation.x = pitch; } } // Request pointer lock on canvas click canvas.addEventListener('click', () => { canvas.requestPointerLock(); }); // Add mouse move listener document.addEventListener('mousemove', onMouseMove); // Create flat terrain function createTerrain() { const size = 4000; const segments = 100; // Reduced segments for better performance // Create optimized plane geometry with compression const geometry = new THREE.PlaneGeometry(size, size, segments, segments); geometry.attributes.position.usage = THREE.StaticDrawUsage; geometry.attributes.normal.usage = THREE.StaticDrawUsage; geometry.attributes.uv.usage = THREE.StaticDrawUsage; const texture = textureLoader.load('https://play.rosebud.ai/assets/sandterrain.webp?edIF', undefined, undefined, (error) => { console.error('Error loading texture:', error); }); texture.wrapS = texture.wrapT = THREE.RepeatWrapping; texture.repeat.set(100, 100); texture.generateMipmaps = true; texture.minFilter = THREE.LinearMipMapNearestFilter; // Better performance filter texture.magFilter = THREE.NearestFilter; // Better performance filter texture.anisotropy = renderer.capabilities.getMaxAnisotropy(); // Improve texture quality at angles texture.encoding = THREE.sRGBEncoding; const material = new THREE.MeshStandardMaterial({ map: texture, roughness: 0.9, metalness: 0.0, envMapIntensity: 1.0, }); const terrain = new THREE.Mesh(geometry, material); terrain.rotation.x = -Math.PI / 2; terrain.receiveShadow = true; scene.add(terrain); return terrain; } // Create out-of-bounds water plane function createOutOfBoundsWater() { const size = 8000; // Adjusted to match new terrain size const geometry = new THREE.PlaneGeometry(size, size); const material = new THREE.MeshStandardMaterial({ color: waterColor, metalness: 0.9, roughness: 0.1, transparent: true, opacity: 0.8 }); const waterPlane = new THREE.Mesh(geometry, material); waterPlane.rotation.x = -Math.PI / 2; waterPlane.position.y = -5; // Position slightly below the terrain waterPlane.receiveShadow = true; scene.add(waterPlane); return waterPlane; } // Setup underwater lighting system const mainLight = new THREE.DirectionalLight(waterColor, 1.0); mainLight.position.set(-50, 100, -50); mainLight.castShadow = true; mainLight.shadow.mapSize.width = 2048; mainLight.shadow.mapSize.height = 2048; mainLight.shadow.camera.near = 10; mainLight.shadow.camera.far = 400; mainLight.shadow.camera.left = -100; mainLight.shadow.camera.right = 100; mainLight.shadow.camera.top = 100; mainLight.shadow.camera.bottom = -100; mainLight.shadow.bias = -0.001; scene.add(mainLight); // Add hemisphere light for underwater ambient lighting const hemiLight = new THREE.HemisphereLight(waterColor, deepWaterColor, 0.8); scene.add(hemiLight); // Add ambient light to brighten the overall scene const ambientLight = new THREE.AmbientLight(0x666666, 0.5); scene.add(ambientLight); // Create initial scene const terrain = createTerrain(); const outOfBoundsWater = createOutOfBoundsWater(); // Update sky position to follow camera function updateSky() { sky.position.copy(camera.position); } // Animation loop function animate() { requestAnimationFrame(animate); const deltaTime = clock.getDelta(); const currentTime = Date.now(); if (!assetsLoaded) return; // Update survival timer if game has started and not over if (hasGameStarted && !isGameOver) { const elapsedTime = Math.max(0, (currentTime - gameStartTime) / 1000); const minutes = Math.min(99, Math.floor(elapsedTime / 60)); const seconds = Math.floor(elapsedTime % 60); const timeString = `${Math.abs(minutes).toString().padStart(2, '0')}:${Math.abs(seconds).toString().padStart(2, '0')}`; if (survivalTimer) { survivalTimer.innerHTML = `Survival Time: ${timeString}`; survivalTimer.style.display = 'block'; survivalTimer.style.opacity = '1'; } } if (isInMenu || isInCutscene) { // Keep camera fixed during menu and cutscene camera.position.set(0, 20, 0); camera.rotation.set(0, 0, 0); // Update menu animations if elements exist if (menuElements) { const time = Date.now() * 0.001; // Animate title glow const glowIntensity = (Math.sin(time) + 1) / 2; menuElements.titleDiv.style.textShadow = `0 0 ${20 + glowIntensity * 10}px rgba(255, 0, 0, ${0.5 + glowIntensity * 0.2})`; // Animate creator text const creatorGlow = (Math.sin(time * 1.5) + 1) / 2; menuElements.creatorDiv.style.textShadow = `0 0 ${5 + creatorGlow * 5}px rgba(79, 195, 247, ${0.3 + creatorGlow * 0.2})`; } updateBubbles(deltaTime); composer.render(scene, camera); } else if (!isGameOver) { applyControls(); // Check if it's time to play creepy sound and game is not over if (hasGameStarted && !isGameOver && currentTime - lastCreepySoundTime > CREEPY_SOUND_MIN_INTERVAL) { // Random chance to play sound if minimum interval has passed if (!isGameOver && Math.random() < 0.1 && currentTime - lastCreepySoundTime > CREEPY_SOUND_MAX_INTERVAL) { creepySound.currentTime = 0; creepySound.volume = 0.4; creepySound.play().catch(error => console.warn('Could not play creepy sound:', error)); lastCreepySoundTime = currentTime; // Set up fade out near the end of the sound const fadeOutDuration = 2000; // 2 seconds fade out const fadeOutStart = (creepySound.duration * 1000) - fadeOutDuration; setTimeout(() => { const fadeOutInterval = setInterval(() => { if (creepySound.volume > 0.01) { creepySound.volume = Math.max(0, creepySound.volume - 0.02); } else { creepySound.volume = 0; clearInterval(fadeOutInterval); } }, 50); }, fadeOutStart); } } // Only update game elements if the game has started if (hasGameStarted) { updateSky(); updateBubbles(deltaTime); updateFishes(deltaTime); updateSeaweed(); if (seaMonster) updateSeaMonster(); } composer.render(); // Check if it's time to play creepy sound and game is not over if (!isGameOver && currentTime - lastCreepySoundTime > CREEPY_SOUND_MIN_INTERVAL) { // Random chance to play sound if minimum interval has passed if (!isGameOver && Math.random() < 0.1 && currentTime - lastCreepySoundTime > CREEPY_SOUND_MAX_INTERVAL) { creepySound.currentTime = 0; creepySound.volume = 0.4; creepySound.play().catch(error => console.warn('Could not play creepy sound:', error)); lastCreepySoundTime = currentTime; // Set up fade out near the end of the sound const fadeOutDuration = 2000; // 2 seconds fade out const fadeOutStart = (creepySound.duration * 1000) - fadeOutDuration; setTimeout(() => { const fadeOutInterval = setInterval(() => { if (creepySound.volume > 0.01) { creepySound.volume = Math.max(0, creepySound.volume - 0.02); } else { creepySound.volume = 0; clearInterval(fadeOutInterval); } }, 50); }, fadeOutStart); } } } composer.render(); } function updateSeaMonster() { if (!seaMonster) return; const currentTime = Date.now(); const gameElapsedTime = currentTime - gameStartTime; const distanceToPlayer = camera.position.distanceTo(seaMonster.position); // Handle periodic hints after initial delay and first appearance if (gameElapsedTime > GAME_START_DELAY && currentTime - lastHintTime > HINT_INTERVAL && distanceToPlayer > HINT_DISTANCE * 1.5 && lastHintTime > 0) { // Only show subsequent hints if we've had our first appearance showMonsterHint(false); lastHintTime = currentTime; } // Handle proximity sound if (distanceToPlayer < PROXIMITY_THRESHOLD && currentTime - lastProximitySoundTime > PROXIMITY_SOUND_INTERVAL) { // Calculate volume based on distance (closer = louder) const volume = Math.min(0.7, (PROXIMITY_THRESHOLD - distanceToPlayer) / PROXIMITY_THRESHOLD); // Only start new sound if not already playing or if previous sound is fading out if (!proximitySound.playing || proximitySound.volume < 0.1) { proximitySound.currentTime = 0; proximitySound.volume = 0; proximitySound.play().catch(error => console.warn('Could not play proximity sound:', error)); // Fade in const fadeIn = setInterval(() => { if (proximitySound.volume < volume) { proximitySound.volume = Math.min(volume, proximitySound.volume + 0.05); } else { clearInterval(fadeIn); // Set up fade out setTimeout(() => { const fadeOut = setInterval(() => { if (proximitySound.volume > 0.01) { proximitySound.volume = Math.max(0, proximitySound.volume - 0.05); } else { proximitySound.volume = 0; clearInterval(fadeOut); } }, 50); }, proximitySound.duration * 1000 - 2000); // Start fade out 2 seconds before end } }, 50); lastProximitySoundTime = currentTime; } } // Calculate direction to player and maintain proper swimming orientation const directionToPlayer = new THREE.Vector3() .subVectors(camera.position, seaMonster.position) .normalize(); // Calculate target rotation quaternion const targetQuaternion = new THREE.Quaternion(); const up = new THREE.Vector3(0, 1, 0); const matrix = new THREE.Matrix4(); // Create rotation matrix that points the monster's forward direction // Add 90-degree rotation plus 10 degrees by adjusting the target position const rotatedPosition = new THREE.Vector3(); rotatedPosition.copy(camera.position); // Rotate the target position 100 degrees (90 + 10) around the Y axis const angle = (Math.PI / 2) + (Math.PI / 18); // 90 + 10 degrees const cos = Math.cos(angle); const sin = Math.sin(angle); const rx = rotatedPosition.x - seaMonster.position.x; const rz = rotatedPosition.z - seaMonster.position.z; rotatedPosition.x = seaMonster.position.x + (rx * cos - rz * sin); rotatedPosition.z = seaMonster.position.z + (rx * sin + rz * cos); matrix.lookAt(seaMonster.position, rotatedPosition, up); targetQuaternion.setFromRotationMatrix(matrix); // Smoothly interpolate current rotation to target rotation seaMonster.quaternion.slerp(targetQuaternion, 0.02); // Add gentle swimming motion const time = Date.now() * 0.001; const swayAmount = 0.05; seaMonster.rotation.x += Math.sin(time) * swayAmount * 0.01; // Slight up/down motion seaMonster.rotation.z += Math.cos(time * 0.7) * swayAmount * 0.005; // Subtle roll // Only start AI behavior after the initial delay if (gameElapsedTime < GAME_START_DELAY) return; // Check for state transitions if (currentTime - monsterAI.lastStateChange > monsterAI.stateMinDuration) { updateMonsterState(distanceToPlayer); } // Execute current state behavior switch (monsterAI.currentState) { case MonsterState.STALKING: executeStalking(directionToPlayer, distanceToPlayer); break; case MonsterState.AMBUSHING: executeAmbushing(directionToPlayer, distanceToPlayer, currentTime); break; case MonsterState.TERRITORIAL: executeTerritorial(directionToPlayer, distanceToPlayer); break; case MonsterState.ATTACKING: executeAttacking(directionToPlayer, distanceToPlayer); break; } // Check for collision with player if (distanceToPlayer < 10) { triggerJumpscare(); } } function updateMonsterState(distanceToPlayer) { const currentTime = Date.now(); const previousState = monsterAI.currentState; // Calculate probability weights based on distance and current state const weights = { [MonsterState.STALKING]: distanceToPlayer < monsterAI.stalkingDistance ? 0.4 : 0.6, [MonsterState.AMBUSHING]: distanceToPlayer < monsterAI.stalkingDistance ? 0.3 : 0.2, [MonsterState.TERRITORIAL]: distanceToPlayer < monsterAI.territoryRadius ? 0.3 : 0.2 }; // Randomly select new state based on weights const random = Math.random(); let cumulativeWeight = 0; let newState = previousState; for (const [state, weight] of Object.entries(weights)) { cumulativeWeight += weight; if (random <= cumulativeWeight) { newState = state; break; } } // Only update if state changes if (newState !== previousState) { monsterAI.currentState = newState; monsterAI.lastStateChange = currentTime; // Initialize state-specific variables if (newState === MonsterState.TERRITORIAL) { monsterAI.territoryCenter.copy(seaMonster.position); } else if (newState === MonsterState.AMBUSHING) { // Find hiding position const hideAngle = Math.random() * Math.PI * 2; monsterAI.hidePosition.set( camera.position.x + Math.cos(hideAngle) * MONSTER_START_DISTANCE * 0.7, 20, camera.position.z + Math.sin(hideAngle) * MONSTER_START_DISTANCE * 0.7 ); monsterAI.isPreparingAmbush = true; monsterAI.ambushStartTime = currentTime; } } } function executeStalking(directionToPlayer, distanceToPlayer) { // Maintain optimal stalking distance const targetDistance = monsterAI.stalkingDistance * 0.8; const distanceDiff = distanceToPlayer - targetDistance; const speed = Math.abs(distanceDiff) > 10 ? 0.2 : 0.1; if (distanceDiff > 0) { // Move closer seaMonster.position.add(directionToPlayer.multiplyScalar(speed)); } else if (distanceDiff < 0) { // Move away seaMonster.position.sub(directionToPlayer.multiplyScalar(speed)); } } function executeAmbushing(directionToPlayer, distanceToPlayer, currentTime) { if (monsterAI.isPreparingAmbush) { // Move to hiding position const hideDirection = new THREE.Vector3().subVectors(monsterAI.hidePosition, seaMonster.position).normalize(); seaMonster.position.add(hideDirection.multiplyScalar(0.3)); // Check if in position and preparation time has passed if (seaMonster.position.distanceTo(monsterAI.hidePosition) < 5 && currentTime - monsterAI.ambushStartTime > monsterAI.ambushPreparationTime) { monsterAI.isPreparingAmbush = false; monsterAI.currentState = MonsterState.ATTACKING; } } } function executeTerritorial(directionToPlayer, distanceToPlayer) { // Calculate distance from territory center const distanceFromCenter = seaMonster.position.distanceTo(monsterAI.territoryCenter); if (distanceToPlayer < monsterAI.territoryRadius) { // Aggressive behavior when player is in territory seaMonster.position.add(directionToPlayer.multiplyScalar(0.25)); } else if (distanceFromCenter > monsterAI.territoryRadius * 0.5) { // Return to territory center const centerDirection = new THREE.Vector3() .subVectors(monsterAI.territoryCenter, seaMonster.position) .normalize(); seaMonster.position.add(centerDirection.multiplyScalar(0.2)); } } function executeAttacking(directionToPlayer, distanceToPlayer) { // Aggressive pursuit seaMonster.position.add(directionToPlayer.multiplyScalar(0.4)); // Reset to stalking if attack fails if (distanceToPlayer > 150) { monsterAI.currentState = MonsterState.STALKING; monsterAI.lastStateChange = Date.now(); // Reposition monster with proper orientation const randomAngle = Math.random() * Math.PI * 2; const spawnX = Math.cos(randomAngle) * MONSTER_START_DISTANCE; const spawnZ = Math.sin(randomAngle) * MONSTER_START_DISTANCE; seaMonster.position.set(spawnX, 20, spawnZ); // Calculate proper orientation based on spawn position const spawnDirection = new THREE.Vector3(-spawnX, 0, -spawnZ).normalize(); const spawnMatrix = new THREE.Matrix4(); spawnMatrix.lookAt( seaMonster.position, new THREE.Vector3(camera.position.x, seaMonster.position.y, camera.position.z), new THREE.Vector3(0, 1, 0) ); seaMonster.quaternion.setFromRotationMatrix(spawnMatrix); } } function showMonsterHint(isInitial = false) { if (!seaMonster) return; // Store original position and state const originalPosition = seaMonster.position.clone(); const originalScale = seaMonster.scale.clone(); const originalState = monsterAI.currentState; // Calculate position for appearance (in front of player but far away) const appearanceDistance = isInitial ? 100 : HINT_DISTANCE; // Closer for regular hints const cameraForward = new THREE.Vector3(0, 0, -1); cameraForward.applyQuaternion(camera.quaternion); const targetPosition = camera.position.clone() .add(cameraForward.multiplyScalar(appearanceDistance)); targetPosition.y = 15; // Slightly below surface level // Animate monster briefly surfacing const duration = isInitial ? 4000 : HINT_DURATION; // Shorter for regular hints const startTime = Date.now(); function animateInitialAppearance() { const elapsed = Date.now() - startTime; const progress = elapsed / duration; if (progress < 0.3) { // Rise up const riseProgress = progress / 0.3; seaMonster.position.lerpVectors(originalPosition, targetPosition, riseProgress); seaMonster.scale.setScalar(SEA_MONSTER_SCALE * 0.5); // Smaller scale for distant appearance } else if (progress < 0.7) { // Hold position seaMonster.lookAt(camera.position); } else if (progress < 1) { // Sink back const sinkProgress = (progress - 0.7) / 0.3; seaMonster.position.lerpVectors(targetPosition, originalPosition, sinkProgress); } else { // Reset to original position seaMonster.position.copy(originalPosition); seaMonster.scale.copy(originalScale); return; } requestAnimationFrame(animateInitialAppearance); } animateInitialAppearance(); } function triggerJumpscare() { if (isGameOver) return; isGameOver = true; // Hide survival timer if (survivalTimer) { survivalTimer.style.opacity = '0'; setTimeout(() => { survivalTimer.remove(); survivalTimer = null; }, 500); } let hasLunged = false; // Stop gameplay music on game over gameplayMusic.pause(); // Initial lunge setup const lungeDuration = 800; // milliseconds for initial lunge const lungeStartTime = Date.now(); const lungeStartPosition = seaMonster.position.clone(); // Calculate position 20 units in front of player's view direction const cameraForward = new THREE.Vector3(0, 0, -1).applyQuaternion(camera.quaternion); const lungePosition = camera.position.clone().add(cameraForward.multiplyScalar(20)); function animateLunge() { if (hasLunged) { startJumpscareSequence(); return; } const elapsed = Date.now() - lungeStartTime; const progress = Math.min(elapsed / lungeDuration, 1); // Use exponential ease-in for aggressive movement const easeProgress = progress === 0 ? 0 : Math.pow(2, 10 * progress - 10); // Update monster position seaMonster.position.lerpVectors(lungeStartPosition, lungePosition, easeProgress); // Make monster face the player during lunge seaMonster.lookAt(camera.position); if (progress < 1) { requestAnimationFrame(animateLunge); } else { hasLunged = true; // Start the actual jumpscare sequence startJumpscareSequence(); } } function startJumpscareSequence() { // Calculate final position for jumpscare (right in front of camera) const jumpscarePosition = camera.position.clone() .add(new THREE.Vector3(0, 0, -4).applyQuaternion(camera.quaternion)); // Increased distance // Animate sea monster to jumpscare position const jumpscareDuration = 500; // milliseconds const startPosition = seaMonster.position.clone(); const startTime = Date.now(); // Ensure proper material settings for all meshes seaMonster.traverse((child) => { if (child.isMesh) { child.material.side = THREE.FrontSide; // Only render front faces child.material.transparent = false; // Disable transparency child.material.depthWrite = true; // Enable depth writing child.material.depthTest = true; // Enable depth testing } }); function animateJumpscare() { const elapsed = Date.now() - startTime; const progress = Math.min(elapsed / jumpscareDuration, 1); // Calculate position slightly ahead of the camera's view const cameraForward = new THREE.Vector3(0, 0, -1).applyQuaternion(camera.quaternion); const targetPosition = camera.position.clone().add(cameraForward.multiplyScalar(-4)); // Add slight offset for dramatic effect const offsetAmount = Math.sin(progress * Math.PI) * 0.5; const lateralOffset = new THREE.Vector3(offsetAmount, offsetAmount, 0); lateralOffset.applyQuaternion(camera.quaternion); targetPosition.add(lateralOffset); // Update position with a more aggressive curve const easeInExpo = t => t === 0 ? 0 : Math.pow(2, 10 * t - 10); const jumpscareProgress = easeInExpo(progress); seaMonster.position.lerpVectors(startPosition, targetPosition, jumpscareProgress); // Scale up more dramatically during the lunge const scaleProgress = Math.pow(progress, 0.5); seaMonster.scale.setScalar(SEA_MONSTER_SCALE * (1 + scaleProgress * 2)); // Reduced scale multiplier // Maintain minimum distance from camera const distanceToCamera = seaMonster.position.distanceTo(camera.position); if (distanceToCamera < 3) { // Minimum distance threshold const directionFromCamera = seaMonster.position.clone().sub(camera.position).normalize(); seaMonster.position.copy(camera.position.clone().add(directionFromCamera.multiplyScalar(3))); } // Calculate direction to ensure monster faces the camera const monsterToCamera = new THREE.Vector3() .subVectors(camera.position, seaMonster.position) .normalize(); // Apply rotation to face the camera perfectly const targetRotation = Math.atan2(monsterToCamera.x, monsterToCamera.z); seaMonster.rotation.y = targetRotation; // Add slight pitch rotation for more aggressive appearance seaMonster.rotation.x = progress * 0.3; if (progress < 1) { requestAnimationFrame(animateJumpscare); } else { // Show game over screen after jumpscare showGameOver(); } } animateJumpscare(); } // Record the end time when jumpscare is triggered gameEndTime = Date.now(); // Start the lunge animation animateLunge(); } function showGameOver() { // Show the preloaded game over screen preloadedGameOver.style.display = 'flex'; // Play the roar sound const roarSound = new Audio('https://play.rosebud.ai/assets/large-monster-roar-195717.mp3?YivJ'); roarSound.volume = 0.8; roarSound.play(); // Wait for roar to finish before playing game over music roarSound.addEventListener('ended', () => { // Start game over music with fade in gameOverMusic.currentTime = 0; gameOverMusic.volume = 0; gameOverMusic.play(); // Fade in the game over music let fadeVolume = 0; const fadeInterval = setInterval(() => { if (fadeVolume < 0.7) { fadeVolume += 0.05; gameOverMusic.volume = fadeVolume; } else { clearInterval(fadeInterval); } }, 100); }); // Reset the shark jump GIF by creating a new image element const sharkGifContainer = preloadedGameOver.children[1]; const newSharkGif = document.createElement('img'); newSharkGif.src = sharkJumpImage.src; newSharkGif.style.width = '100%'; newSharkGif.style.height = '100%'; newSharkGif.style.objectFit = 'cover'; // Clear previous gif if exists sharkGifContainer.innerHTML = ''; sharkGifContainer.appendChild(newSharkGif); // Remove GIF after sound ends roarSound.addEventListener('ended', () => { sharkGifContainer.innerHTML = ''; }); } // Preload game over screen function preloadGameOverScreen() { // Preload shark jump image sharkJumpImage = new Image(); sharkJumpImage.src = 'https://play.rosebud.ai/assets/shark jump.gif?Nt1k'; // Initialize roar sound const roarSound = new Audio('https://play.rosebud.ai/assets/large-monster-roar-195717.mp3?YivJ'); roarSound.volume = 0.8; // Create game over screen in advance preloadedGameOver = document.createElement('div'); preloadedGameOver.style.position = 'absolute'; preloadedGameOver.style.top = '0'; preloadedGameOver.style.left = '0'; preloadedGameOver.style.width = '100%'; preloadedGameOver.style.height = '100%'; preloadedGameOver.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; preloadedGameOver.style.color = '#ff0000'; preloadedGameOver.style.display = 'none'; preloadedGameOver.style.flexDirection = 'column'; preloadedGameOver.style.justifyContent = 'center'; preloadedGameOver.style.alignItems = 'center'; preloadedGameOver.style.fontSize = '48px'; preloadedGameOver.style.fontWeight = 'bold'; preloadedGameOver.style.textAlign = 'center'; preloadedGameOver.style.zIndex = '1000'; const gameOverText = document.createElement('div'); gameOverText.innerHTML = `GAME OVER
Your worst nightmare came true`; gameOverText.style.position = 'relative'; gameOverText.style.zIndex = '2'; preloadedGameOver.appendChild(gameOverText); const refreshMessage = document.createElement('div'); refreshMessage.innerHTML = 'Refresh browser to play again'; refreshMessage.style.fontSize = '24px'; refreshMessage.style.marginTop = '20px'; refreshMessage.style.animation = 'flash-yellow 1s infinite'; preloadedGameOver.appendChild(refreshMessage); // Add shark jump GIF container (image will be set when needed) const sharkGifContainer = document.createElement('div'); sharkGifContainer.style.position = 'absolute'; sharkGifContainer.style.top = '0'; sharkGifContainer.style.left = '0'; sharkGifContainer.style.width = '100%'; sharkGifContainer.style.height = '100%'; sharkGifContainer.style.zIndex = '1'; preloadedGameOver.appendChild(sharkGifContainer); // Add to DOM but keep hidden parentDiv.appendChild(preloadedGameOver); } // Initialize systems on startup // Load seaweed model function loadSeaweedModel() { objLoader.load('https://play.rosebud.ai/assets/seaweed plant.obj?NEXB', (obj) => { seaweedModel = obj; seaweedModel.scale.set(SEAWEED_SCALE, SEAWEED_SCALE, SEAWEED_SCALE); initSeaweedPool(); }); } // Initialize seaweed pool function initSeaweedPool() { for (let i = 0; i < SEAWEED_COUNT * 1.5; i++) { const seaweed = new THREE.Group(); seaweed.visible = false; scene.add(seaweed); seaweedPool.push(seaweed); } } // Get seaweed from pool function getSeaweedFromPool() { return seaweedPool.length > 0 ? seaweedPool.pop() : null; } // Return seaweed to pool function returnSeaweedToPool(seaweed) { seaweed.visible = false; seaweed.clear(); seaweedPool.push(seaweed); } // Create seaweed at position function createSeaweed() { if (!seaweedModel) return; const seaweed = getSeaweedFromPool(); if (!seaweed) return; // Create a green material for the seaweed const seaweedMaterial = new THREE.MeshPhysicalMaterial({ color: 0x2d5a27, // Deep green color metalness: 0.1, roughness: 0.8, // Optimize material settings flatShading: true, vertexColors: false, fog: true, transmission: 0.2, thickness: 1.0, envMapIntensity: 0.5, clearcoat: 0.3, clearcoatRoughness: 0.4 }); // Random angle and distance from player const angle = Math.random() * Math.PI * 2; const distance = Math.random() * SEAWEED_SPAWN_RADIUS; // Calculate position relative to player const spawnX = camera.position.x + Math.cos(angle) * distance; const spawnZ = camera.position.z + Math.sin(angle) * distance; // Get terrain height at spawn position raycaster.ray.origin.set(spawnX, 1000, spawnZ); raycaster.ray.direction.set(0, -1, 0); const intersects = raycaster.intersectObject(terrain); if (intersects.length > 0) { const terrainHeight = intersects[0].point.y; const seaweedInstance = seaweedModel.clone(); // Apply the green material to all meshes in the seaweed model seaweedInstance.traverse((child) => { if (child.isMesh) { child.material = seaweedMaterial; child.castShadow = true; child.receiveShadow = true; } }); seaweed.add(seaweedInstance); // Position seaweed slightly above terrain to avoid z-fighting and underground placement seaweed.position.set(spawnX, terrainHeight + 0.1, spawnZ); // Random rotation seaweed.rotation.y = Math.random() * Math.PI * 2; // Add slight random tilt seaweed.rotation.x = (Math.random() - 0.5) * 0.2; seaweed.rotation.z = (Math.random() - 0.5) * 0.2; seaweed.visible = true; activeSeaweed.push(seaweed); } } // Update seaweed positions and visibility function updateSeaweed() { // Update frustum for culling checks projScreenMatrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse); frustum.setFromProjectionMatrix(projScreenMatrix); // Remove distant seaweed and apply culling for (let i = activeSeaweed.length - 1; i >= 0; i--) { const seaweed = activeSeaweed[i]; const distanceToPlayer = seaweed.position.distanceTo(camera.position); if (distanceToPlayer > SEAWEED_DESPAWN_DISTANCE) { returnSeaweedToPool(seaweed); activeSeaweed.splice(i, 1); } else { // Check if seaweed is in view frustum const isInFrustum = frustum.containsPoint(seaweed.position); if (!isInFrustum || distanceToPlayer > SEAWEED_CULL_DISTANCE) { seaweed.visible = false; continue; } seaweed.visible = true; // Apply LOD based on distance if (distanceToPlayer > SEAWEED_LOD_DISTANCE) { // Reduce animation updates for distant seaweed if (Math.random() < 0.3) { // Only update some frames const time = Date.now() * 0.001; const swayAmount = 0.05; seaweed.rotation.x = Math.sin(time + seaweed.position.x) * swayAmount; seaweed.rotation.z = Math.cos(time + seaweed.position.z) * swayAmount; } } else { // Full animation for close seaweed const time = Date.now() * 0.001; const swayAmount = 0.05; seaweed.rotation.x = Math.sin(time + seaweed.position.x) * swayAmount; seaweed.rotation.z = Math.cos(time + seaweed.position.z) * swayAmount; } } } // Add new seaweed if needed while (activeSeaweed.length < SEAWEED_COUNT) { createSeaweed(); } } // Preload slides function preloadSlides() { const slideData = [{ imageUrl: 'https://play.rosebud.ai/assets/slide1.webp?s9NY', soundUrl: 'https://play.rosebud.ai/assets/slidesound1.mp3?8V8Z' }, { imageUrl: 'https://play.rosebud.ai/assets/slide2.webp?hdRJ', soundUrl: 'https://play.rosebud.ai/assets/slidesound2.mp3?zNYi' }, { imageUrl: 'https://play.rosebud.ai/assets/slide3.webp?JLce', soundUrl: 'https://play.rosebud.ai/assets/slidesound3.mp3?7kMz' }, { imageUrl: 'https://play.rosebud.ai/assets/slide4.webp?3QWi', soundUrl: 'https://play.rosebud.ai/assets/slidesound4.mp3?C42x' }, { imageUrl: 'https://play.rosebud.ai/assets/slide5.webp?jhir', soundUrl: 'https://play.rosebud.ai/assets/slidesound5.mp3?SyKA' }, { imageUrl: 'https://play.rosebud.ai/assets/slide6.webp?NTFo', soundUrl: 'https://play.rosebud.ai/assets/slidesound6.mp3?Ok51' }]; slideData.forEach((data, index) => { // Load and cache image const img = new Image(); img.src = data.imageUrl; loadingManager.itemStart(data.imageUrl); img.onload = () => { preloadedSlides.set(index + 1, img); loadingManager.itemEnd(data.imageUrl); }; img.onerror = () => { console.error('Failed to load slide:', data.imageUrl); loadingManager.itemError(data.imageUrl); }; // Load and cache sound const audio = new Audio(); audio.src = data.soundUrl; loadingManager.itemStart(data.soundUrl); audio.addEventListener('canplaythrough', () => { preloadedSlideSounds.set(index + 1, audio); loadingManager.itemEnd(data.soundUrl); }, { once: true }); audio.addEventListener('error', () => { console.error('Failed to load slide sound:', data.soundUrl); loadingManager.itemError(data.soundUrl); }); }); } // Start loading assets first loadFishModels(); loadSeaweedModel(); preloadSlides(); // Initialize game once everything is loaded loadingManager.onLoad = function() { assetsLoaded = true; // Initialize game systems initBubblePool(); initFishPool(); preloadGameOverScreen(); // Start the animation loop only after initialization animate(); // Fade out loading screen with a longer duration loadingScreen.style.transition = 'opacity 1.5s ease-out'; loadingScreen.style.opacity = '0'; setTimeout(() => { loadingScreen.style.display = 'none'; // Only create menu elements after loading screen is completely gone if (!menuElements && !isInCutscene) { menuElements = createMenuElements(); } }, 1500); // Increased delay to match transition duration // Initialize audio elements gameplayMusic = new Audio('https://play.rosebud.ai/assets/deep-sea-ambience-6933.mp3?pYw8'); gameplayMusic.loop = true; gameplayMusic.volume = 0.8; // Initialize game over music gameOverMusic = new Audio('https://play.rosebud.ai/assets/Ocean Nightmare Song.mp3?PII5'); gameOverMusic.loop = true; gameOverMusic.volume = 0; // Initialize creepy sound effect creepySound = new Audio('https://play.rosebud.ai/assets/horror-sound-effect-212573.mp3?4qjb'); creepySound.volume = 0.4; // Lower volume for ambient effect // Initialize proximity sound effect proximitySound = new Audio('https://play.rosebud.ai/assets/open-the-door-horror-268582.mp3?XI56'); proximitySound.volume = 0.0; // Start at 0 volume for fade in // Start background music on first user interaction const startAudio = () => { gameplayMusic.play(); document.removeEventListener('click', startAudio); }; document.addEventListener('click', startAudio); }; // 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 // Add event listeners only if elements exist if (parentDiv) { window.addEventListener('resize', onWindowResize); const resizeObserver = new ResizeObserver(onWindowResize); resizeObserver.observe(parentDiv); } // Only start animation after assets are loaded and DOM is ready function startAnimationIfReady() { if (assetsLoaded && parentDiv) { animate(); } } // Check if DOM is loaded if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', startAnimationIfReady); } else { startAnimationIfReady(); } // ========================= // Mobile Controls Integration // ========================= // Create a container for the D-pad const dpadContainer = document.createElement('div'); dpadContainer.id = 'dpadContainer'; document.body.appendChild(dpadContainer); // Create directional buttons const directions = ['up', 'down', 'left', 'right']; directions.forEach(direction => { const button = document.createElement('button'); button.id = `${direction}Button`; button.classList.add('dpad-button'); // Set the appropriate icon based on direction let iconUrl = ''; switch (direction) { case 'up': iconUrl = 'https://play.rosebud.ai/assets/up_chevron.png?SHXw'; break; case 'down': iconUrl = 'https://play.rosebud.ai/assets/down_chevron.png?a4Rx'; break; case 'left': iconUrl = 'https://play.rosebud.ai/assets/left_chevron.png?3ZPr'; break; case 'right': iconUrl = 'https://play.rosebud.ai/assets/right_chevron.png?4Nlv'; break; } button.style.backgroundImage = `url('${iconUrl}')`; dpadContainer.appendChild(button); }); // Inject CSS styles dynamically const styles = ` @keyframes glow-red { 0% { text-shadow: 0 0 20px rgba(255, 0, 0, 0.7), 0 0 30px rgba(255, 0, 0, 0.5), 0 0 40px rgba(255, 0, 0, 0.3); } 50% { text-shadow: 0 0 25px rgba(255, 0, 0, 0.9), 0 0 35px rgba(255, 0, 0, 0.7), 0 0 45px rgba(255, 0, 0, 0.5); } 100% { text-shadow: 0 0 20px rgba(255, 0, 0, 0.7), 0 0 30px rgba(255, 0, 0, 0.5), 0 0 40px rgba(255, 0, 0, 0.3); } } @keyframes flash-yellow { 0% { color: #FFD700; opacity: 1; } 50% { color: #FFD700; opacity: 0.3; } 100% { color: #FFD700; opacity: 1; } } /* D-Pad Container */ #dpadContainer { position: fixed; bottom: 150px; left: 30px; width: 150px; height: 150px; display: none; grid-template-areas: ". up ." "left . right" ". down ."; grid-gap: 10px; /* Spacing between buttons */ z-index: 1000; } /* Positioning each button in the grid */ #upButton { grid-area: up; } #downButton { grid-area: down; } #leftButton { grid-area: left; } #rightButton { grid-area: right; } /* D-Pad Buttons */ .dpad-button { width: 50px; /* Consistent size */ height: 50px; /* Consistent size */ margin: 0; /* Remove margin as grid-gap handles spacing */ background-color: rgba(0, 0, 0, 0.5); /* Dark semi-transparent background */ background-size: 60%; /* Uniform icon size */ background-repeat: no-repeat; background-position: center; border: none; border-radius: 12px; /* Rounded corners */ opacity: 0.9; /* Higher opacity */ transition: opacity 0.2s, transform 0.1s, box-shadow 0.2s, filter 0.2s; /* Smooth transitions */ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Initial shadow */ } /* Active State for D-Pad Buttons */ .dpad-button:active { opacity: 1; transform: scale(0.95); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Shadow becomes more pronounced */ filter: brightness(1.1); /* Slight brightness increase */ } /* Responsive Adjustments */ @media (max-width: 600px) { /* D-Pad Container */ #dpadContainer { bottom: 120px; /* Increased from 80px to move up on smaller screens */ left: 25px; width: 120px; height: 120px; } /* D-Pad Buttons */ .dpad-button { width: 40px; height: 40px; background-size: 60%; /* Ensure uniform size */ } } `; // Append the styles to the head const styleSheet = document.createElement("style"); styleSheet.type = "text/css"; styleSheet.innerText = styles; document.head.appendChild(styleSheet); // Define input state objects const keysPressed = { up: false, down: false, left: false, right: false, }; const gamepadState = { connected: false, leftStickX: 0, leftStickY: 0, rightStickX: 0, rightStickY: 0, deadzone: 0.1 // Adjust deadzone as needed }; // Add gamepad connection handlers window.addEventListener('gamepadconnected', (e) => { console.log('Gamepad connected:', e.gamepad.id); gamepadState.connected = true; }); window.addEventListener('gamepaddisconnected', (e) => { console.log('Gamepad disconnected:', e.gamepad.id); gamepadState.connected = false; }); // Function to apply deadzone to analog stick values function applyDeadzone(value, deadzone) { if (Math.abs(value) < deadzone) { return 0; } // Normalize the value after deadzone const sign = value > 0 ? 1 : -1; return sign * (Math.abs(value) - deadzone) / (1 - deadzone); } // Function to update gamepad state function updateGamepadState() { const gamepads = navigator.getGamepads ? navigator.getGamepads() : []; const gamepad = gamepads[0]; // Use first gamepad // Reset gamepad states to prevent stuck inputs gamepadState.leftStickX = 0; gamepadState.leftStickY = 0; gamepadState.rightStickX = 0; gamepadState.rightStickY = 0; if (gamepad) { // Update analog sticks with deadzone gamepadState.leftStickX = applyDeadzone(gamepad.axes[0], gamepadState.deadzone); gamepadState.leftStickY = applyDeadzone(gamepad.axes[1], gamepadState.deadzone); gamepadState.rightStickX = applyDeadzone(gamepad.axes[2], gamepadState.deadzone); gamepadState.rightStickY = applyDeadzone(gamepad.axes[3], gamepadState.deadzone); // Update directional inputs from d-pad keysPressed.up = keysPressed.up || gamepad.buttons[12]?.pressed; keysPressed.down = keysPressed.down || gamepad.buttons[13]?.pressed; keysPressed.left = keysPressed.left || gamepad.buttons[14]?.pressed; keysPressed.right = keysPressed.right || gamepad.buttons[15]?.pressed; } } // Helper functions to handle button presses function addButtonListeners(buttonId, key) { const button = document.getElementById(buttonId); if (!button) return; // Prevent default to avoid unwanted scrolling or other behaviors button.addEventListener('touchstart', (event) => { event.preventDefault(); keysPressed[key] = true; }, { passive: false }); button.addEventListener('touchend', (event) => { event.preventDefault(); keysPressed[key] = false; }, { passive: false }); // Also handle mouse events for desktop compatibility button.addEventListener('mousedown', (event) => { event.preventDefault(); keysPressed[key] = true; }); button.addEventListener('mouseup', (event) => { event.preventDefault(); keysPressed[key] = false; }); button.addEventListener('mouseleave', (event) => { event.preventDefault(); keysPressed[key] = false; }); } // Map buttons to standardized keys addButtonListeners('upButton', 'up'); addButtonListeners('downButton', 'down'); addButtonListeners('leftButton', 'left'); addButtonListeners('rightButton', 'right'); // ========================= // Keyboard Controls Integration // ========================= // Add event listeners for keyboard controls window.addEventListener('keydown', (event) => { switch (event.code) { case 'ArrowUp': case 'KeyW': keysPressed.up = true; break; case 'ArrowDown': case 'KeyS': keysPressed.down = true; break; case 'ArrowLeft': case 'KeyA': keysPressed.left = true; break; case 'ArrowRight': case 'KeyD': keysPressed.right = true; break; default: break; } }); // Helper function to handle post-processing quality function handleRotationQuality(isStarting) { if (isStarting && !postProcessing.isRotating) { // Reduce quality during rotation postProcessing.isRotating = true; bloomPass.strength = postProcessing.defaultBloomStrength * 0.5; bloomPass.radius = postProcessing.defaultBloomRadius * 0.3; postProcessing.currentResolutionScale = 0.8; // Update composer resolution const width = parentDiv.clientWidth * postProcessing.currentResolutionScale; const height = parentDiv.clientHeight * postProcessing.currentResolutionScale; composer.setSize(width, height, false); } // Clear existing timeout if (postProcessing.rotationTimeout) { clearTimeout(postProcessing.rotationTimeout); } // Set timeout to restore quality postProcessing.rotationTimeout = setTimeout(() => { if (!keysPressed.left && !keysPressed.right) { postProcessing.isRotating = false; bloomPass.strength = postProcessing.defaultBloomStrength; bloomPass.radius = postProcessing.defaultBloomRadius; postProcessing.currentResolutionScale = postProcessing.defaultResolutionScale; // Restore composer resolution const width = parentDiv.clientWidth; const height = parentDiv.clientHeight; composer.setSize(width, height, false); } }, 150); // Delay restoration to prevent flickering } window.addEventListener('keyup', (event) => { switch (event.code) { case 'ArrowUp': case 'KeyW': keysPressed.up = false; break; case 'ArrowDown': case 'KeyS': keysPressed.down = false; break; case 'ArrowLeft': case 'KeyA': keysPressed.left = false; handleRotationQuality(false); break; case 'ArrowRight': case 'KeyD': keysPressed.right = false; handleRotationQuality(false); break; default: break; } }); // ========================= // End of Mobile and Keyboard Controls Integration // ========================= // Variables for terrain rotation let worldRotationY = 0; const ROTATION_THRESHOLD = 1500; const ROTATION_SPEED = 0.0005; // Rotation control variables const rotationState = { currentSpeed: 0, maxSpeed: 0.03, acceleration: 0.003, deceleration: 0.004, momentum: 0, analogMultiplier: 1.5, keyboardMultiplier: 1.0, gameStartThreshold: 0.5 // Threshold for starting game with analog stick }; // Function to apply first-person controls function applyControls() { if (isInMenu) return; // Don't process controls if in menu // Update gamepad state updateGamepadState(); // Check for first movement from any input source if (!hasGameStarted && (keysPressed.up || Math.abs(gamepadState.leftStickY) > 0.5 || Math.abs(gamepadState.leftStickX) > 0.5)) { hasGameStarted = true; gameStartTime = Date.now(); // Set game start time when player first moves if (startPrompt) { startPrompt.style.transition = 'opacity 0.5s ease-out'; startPrompt.style.opacity = '0'; setTimeout(() => { startPrompt.remove(); startPrompt = null; }, 500); } } // Don't process movement until game has started if (!hasGameStarted) return; const moveSpeed = 0.08; // Further reduced for consistent underwater movement const verticalSpeed = 0.15; // Reduced vertical movement const turnSpeed = 0.008; // Reduced turning for better underwater control const waterDrag = 0.92; // Add water resistance // Define terrain boundaries (half-size of terrain) const terrainSize = 4000; // Half of the 8000 total size // Reset move vector moveVector.set(0, 0, 0); // Calculate forward and right vectors const forward = new THREE.Vector3(0, 0, -1); const right = new THREE.Vector3(1, 0, 0); // Rotate vectors based on camera rotation forward.applyQuaternion(camera.quaternion); right.applyQuaternion(camera.quaternion); // Remove vertical component for level movement forward.y = 0; right.y = 0; forward.normalize(); right.normalize(); // Apply movement based on key presses and analog stick with gradual acceleration if (keysPressed.up || gamepadState.leftStickY < -0.5) { moveVector.add(forward.multiplyScalar(moveSpeed * (gamepadState.leftStickY < -0.5 ? -gamepadState.leftStickY : 1))); } if (keysPressed.down || gamepadState.leftStickY > 0.5) { moveVector.add(forward.multiplyScalar(-moveSpeed * (gamepadState.leftStickY > 0.5 ? gamepadState.leftStickY : 1))); } // Apply water drag to movement moveVector.multiplyScalar(waterDrag); // Enhanced rotation handling with momentum const isRotatingKeyboard = keysPressed.left || keysPressed.right; const isRotatingGamepad = Math.abs(gamepadState.rightStickX) > 0.1; if (isRotatingKeyboard || isRotatingGamepad) { handleRotationQuality(true); // Calculate target rotation speed let targetSpeed = 0; if (isRotatingKeyboard) { targetSpeed = keysPressed.left ? rotationState.maxSpeed : -rotationState.maxSpeed; targetSpeed *= rotationState.keyboardMultiplier; } if (isRotatingGamepad) { targetSpeed = -gamepadState.rightStickX * rotationState.maxSpeed * rotationState.analogMultiplier; } // Apply acceleration if (Math.abs(rotationState.currentSpeed) < Math.abs(targetSpeed)) { rotationState.currentSpeed += Math.sign(targetSpeed) * rotationState.acceleration; } else if (Math.abs(rotationState.currentSpeed) > Math.abs(targetSpeed)) { rotationState.currentSpeed -= Math.sign(rotationState.currentSpeed) * rotationState.deceleration; } // Apply rotation with momentum yaw += rotationState.currentSpeed; rotationState.momentum = rotationState.currentSpeed * 0.95; // Preserve some momentum } else { // Apply momentum and deceleration when not actively rotating if (Math.abs(rotationState.momentum) > 0.001) { yaw += rotationState.momentum; rotationState.momentum *= 0.92; // Gradual momentum decay } else { rotationState.momentum = 0; } // Decelerate current speed when no input if (Math.abs(rotationState.currentSpeed) > 0.001) { rotationState.currentSpeed *= 0.85; } else { rotationState.currentSpeed = 0; } } // Apply final rotation camera.rotation.y = yaw; // Calculate new position const newPosition = camera.position.clone().add(moveVector); // Calculate distance from center const distanceFromCenter = Math.sqrt(newPosition.x * newPosition.x + newPosition.z * newPosition.z); // Handle rotation when approaching boundaries if (distanceFromCenter > ROTATION_THRESHOLD) { // Calculate rotation angle based on position const angleToCenter = Math.atan2(newPosition.z, newPosition.x); worldRotationY += ROTATION_SPEED; // Rotate terrain and other world objects terrain.rotation.y = worldRotationY; outOfBoundsWater.rotation.y = worldRotationY; sky.rotation.y = worldRotationY; // Adjust player position to account for rotation const rotationMatrix = new THREE.Matrix4(); rotationMatrix.makeRotationY(ROTATION_SPEED); const adjustedPosition = newPosition.clone(); adjustedPosition.applyMatrix4(rotationMatrix); // Apply the adjusted position camera.position.copy(adjustedPosition); } else { // Normal movement when not near boundaries camera.position.copy(newPosition); } // Get terrain height at player position raycaster.ray.origin.set(camera.position.x, 1000, camera.position.z); raycaster.ray.direction.set(0, -1, 0); const intersects = raycaster.intersectObject(terrain); if (intersects.length > 0) { const terrainHeight = intersects[0].point.y; const playerHeight = 2; // Height offset for player "head" const minHeight = terrainHeight + playerHeight; const maxHeight = terrainHeight + 5; // Maximum height above terrain // Gradually descend camera.position.y -= 0.05; // Reduced gravity effect for underwater // Apply height limits camera.position.y = Math.max(minHeight, Math.min(maxHeight, camera.position.y)); } }