import * as THREE from 'three'; import * as CANNON from 'https://cdn.skypack.dev/cannon-es'; 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 { SMAAPass } from 'three/addons/postprocessing/SMAAPass.js'; window.smaaPass = new SMAAPass(); Object.assign(window, { THREE, CANNON, OrbitControls, EffectComposer, RenderPass, SMAAPass }); import { Duck } from 'https://play.rosebud.ai/assets/Duck_lvl2_external.js?BJVk'; import { Rock } from 'https://play.rosebud.ai/assets/rock_external.js?l6LN'; import { BubbleSystem } from 'https://play.rosebud.ai/assets/BubbleSystem_external.js?Gs6k'; import { SeaPlant } from 'https://play.rosebud.ai/assets/SeaPlant_external.js?wtbc'; import { Crab } from 'https://play.rosebud.ai/assets/Crab_external.js?ar1q'; import { Seaweed } from 'https://play.rosebud.ai/assets/Seaweed_external.js?r4C7'; import { Companion } from 'https://play.rosebud.ai/assets/Companion_external.js?kdRt'; import { FishSchool } from 'https://play.rosebud.ai/assets/FishSchool_external.js?fcs8'; import { Llama } from 'https://play.rosebud.ai/assets/Llama_external.js?PVHh'; import { Tree } from 'https://play.rosebud.ai/assets/tree_lvl1_external.js?NKZS'; import { Cliff } from 'https://play.rosebud.ai/assets/Cliff_external.js?95my'; const GAME_DURATION = 300; // 5 minutes in seconds const CONFIG = { game: { duration: 300, // 5 minutes in seconds waterHeight: 15.5, typingSpeed: 20, duckCount: 5, dayCycleDuration: 300 }, dayNight: { duration: 300, // Day/night cycle duration in seconds morning: { skyColor: new THREE.Color(0xFFA07A), // Warm light coral lightColor: new THREE.Color(0xFFD700), // Golden yellow light intensity: 1.8 }, day: { skyColor: new THREE.Color(0x87CEEB), // Bright sky blue lightColor: new THREE.Color(0xFFFAF0), // Natural sunlight intensity: 3.0 }, evening: { skyColor: new THREE.Color(0xFF7F50), // Warm coral orange lightColor: new THREE.Color(0xFFB266), // Warm amber light intensity: 1.6 }, night: { skyColor: new THREE.Color(0x0C1445), // Deep night blue lightColor: new THREE.Color(0x2A3B7C), // Moonlight blue intensity: 0.6 } }, water: { height: 15.5, surfaceScale: 200 } }; // Initialize DOM elements const parentDiv = document.getElementById('renderDiv'); const startScreen = document.createElement('div'); startScreen.id = 'startScreen'; startScreen.innerHTML = `

`; parentDiv.appendChild(startScreen); window.hasFoundTreasure = false; window.hasPearlGlow = false; window.gameStartTime = Date.now(); let canvas = document.getElementById('threeRenderCanvas'); if (!canvas) { canvas = document.createElement('canvas'); canvas.id = 'threeRenderCanvas'; parentDiv.appendChild(canvas); } // Create inventory container const inventoryContainer = document.createElement('div'); inventoryContainer.id = 'inventoryContainer'; parentDiv.appendChild(inventoryContainer); // Initialize companion counter window.helpedCompanions = 0; // Function to add heart to inventory and check game completion function addHeartToInventory(type) { const heart = document.createElement('div'); heart.className = 'inventory-heart'; heart.innerHTML = type === 'jellyfish' ? '🪼' : '🐢'; inventoryContainer.appendChild(heart); // Increment counter and check for game completion helpedCompanions++; // Check if this is the last companion if (helpedCompanions >= 5) { // Delay the completion screen setTimeout(() => { // Create completion screen with fade-in effect const completionScreen = document.createElement('div'); completionScreen.id = 'completionScreen'; completionScreen.style.opacity = '0'; const completionTime = (Date.now() - gameStartTime) / 1000; // Convert to seconds const minutes = Math.floor(completionTime / 60); const seconds = Math.floor(completionTime % 60); const timeString = `${minutes}:${seconds.toString().padStart(2, '0')}`; // Update high scores and check for new record const isNewRecord = !window.highScores.length || completionTime < window.bestTime; window.highScores.push(completionTime); window.highScores.sort((a, b) => a - b); // Sort ascending window.highScores = window.highScores.slice(0, 5); // Keep top 5 localStorage.setItem('highScores', JSON.stringify(window.highScores)); window.bestTime = window.highScores[0]; // Format best time const bestMinutes = Math.floor(window.bestTime / 60); const bestSeconds = Math.floor(window.bestTime % 60); const bestTimeString = window.bestTime === Infinity ? "No record yet" : `${bestMinutes}:${bestSeconds.toString().padStart(2, '0')}`; completionScreen.innerHTML = `

Congratulations!

You've helped all the companions find their homes!

Your Time: ${timeString}

Best Time: ${bestTimeString}

${isNewRecord ? '

New Record! 🏆

' : ''}

`; parentDiv.appendChild(completionScreen); // Fade in the completion screen requestAnimationFrame(() => { completionScreen.style.transition = 'opacity 1s ease-in'; completionScreen.style.opacity = '1'; }); // Stop game loop gameStarted = false; // Play victory sound if (backgroundMusic) { backgroundMusic.pause(); window.victoryMusic = new Audio('https://rosebud.ai/assets/438901__yellowtree__ambient-loop.mp3?6b6k'); window.victoryMusic.volume = 0.3; window.victoryMusic.play().catch(error => console.warn('Victory music playback was prevented')); } // Add click handlers for buttons document.getElementById('playAgainButton').addEventListener('click', () => { const scoreBoard = document.getElementById('scoreBoard'); if (scoreBoard) { scoreBoard.classList.add('hidden'); } // Reset core game state helpedCompanions = 0; gameTimer = GAME_DURATION; window.GAME_DURATION = GAME_DURATION; gameStarted = true; currentDialogueLine = 0; targetPoint = null; // Clear UI elements inventoryContainer.innerHTML = ''; activeMarkers.forEach(marker => scene.remove(marker)); activeMarkers = []; // Remove completion screen completionScreen.remove(); // Reset all seaweeds seaweeds.forEach(seaweed => { seaweed.jellyfish = null; }); // Reset companions array and create new companions companions.forEach(companion => { // Remove old companion meshes from scene scene.remove(companion.mesh); if (companion.particles) { scene.remove(companion.particles); } }); // Clear companions array companions.length = 0; // Reinitialize companions initializeCompanions(); // Reset game start time gameStartTime = Date.now(); // Reset llama to initial state llama.companions = []; llama.physicsBody.position.set(0, 5, 0); llama.physicsBody.velocity.set(0, 0, 0); llama.physicsBody.quaternion.set(0, 0, 0, 1); // Reset feather status for new game session window.hasReceivedFeather = false; // Reset duck feather status ducks.forEach(duck => { duck.hasGivenFeather = undefined; }); llama.group.position.set(0, 5, 0); llama.group.rotation.set(0, 0, 0); llama.isMoving = false; llama.animationTime = 0; llama.currentOxygen = llama.maxOxygen; // Reset camera position camera.position.set(0, 8, 15); camera.lookAt(0, 2, 0); controls.target.set(0, 2, 0); controls.update(); // Reset sounds if (backgroundMusic) { if (window.victoryMusic) { window.victoryMusic.pause(); window.victoryMusic.currentTime = 0; } backgroundMusic.currentTime = 0; backgroundMusic.play().catch(error => console.warn('Music playback was prevented')); } // Reset time lastTime = Date.now(); clock.start(); }); }, 1000); // 1 second delay } } const clock = new THREE.Clock(); let gameTimer = CONFIG.game.duration; let dayNightTimer = 0; let lastTime = Date.now(); // Helper function to interpolate between colors function lerpColor(color1, color2, factor) { const result = new THREE.Color(); result.r = color1.r + (color2.r - color1.r) * factor; result.g = color1.g + (color2.g - color1.g) * factor; result.b = color1.b + (color2.b - color1.b) * factor; return result; } // Helper function to get current phase colors and intensity function getDayNightPhase(time) { const cycle = CONFIG.dayNight; const normalizedTime = (time % cycle.duration) / cycle.duration * 4; // 4 phases const phase = Math.floor(normalizedTime); const phaseFactor = normalizedTime - phase; let color1, color2, intensity1, intensity2; switch (phase) { case 0: // Morning to Day color1 = cycle.morning; color2 = cycle.day; break; case 1: // Day to Evening color1 = cycle.day; color2 = cycle.evening; break; case 2: // Evening to Night color1 = cycle.evening; color2 = cycle.night; break; case 3: // Night to Morning color1 = cycle.night; color2 = cycle.morning; break; } return { skyColor: lerpColor(color1.skyColor, color2.skyColor, phaseFactor), lightColor: lerpColor(color1.lightColor, color2.lightColor, phaseFactor), intensity: color1.intensity + (color2.intensity - color1.intensity) * phaseFactor, midColor: lerpColor( new THREE.Color().lerpColors(color1.skyColor, color1.lightColor, 0.5), new THREE.Color().lerpColors(color2.skyColor, color2.lightColor, 0.5), phaseFactor ) }; } window.gameStarted = false; window.targetPoint = null; window.GAME_DURATION = GAME_DURATION; window.CONFIG = CONFIG; window.helpedCompanions = 0; window.assetsLoaded = false; window.gameStartTime = 0; window.hasFoundTreasure = false; // Add flag to track treasure discovery // Initialize high scores window.highScores = localStorage.getItem('highScores') ? JSON.parse(localStorage.getItem('highScores')) : []; window.bestTime = window.highScores.length > 0 ? window.highScores[0] : Infinity; const dialogueLines = [ "Hello there, adventurous swimmer! I'm Professor Hoot! 🦉", "Welcome to the shimmering sea!", "Your mission is to help guide our ocean friends home:", "Match jellyfish to their seaweed hideouts, 🪼", "And help turtles find their cozy rock perches! 🐢", "Click or tap to swim - and when your oxygen is getting low, double-tap to dive up and catch some fresh air! 🫧", "Help five creatures find their homes to complete your quest.", "Are you ready to dive into this wonderful adventure?" ]; let currentDialogueLine = 0; let isTyping = false; function typeDialogue(text, element) { let index = 0; isTyping = true; const typingSpeed = CONFIG.game.typingSpeed; // Get typing speed from CONFIG function type() { if (index < text.length) { element.textContent += text.charAt(index); index++; setTimeout(type, typingSpeed); } else { isTyping = false; if (currentDialogueLine === dialogueLines.length - 1) { document.getElementById('startButton').style.display = 'block'; } } } element.textContent = ''; type(); } // Handle dialogue progression const dialogueBox = document.querySelector('.dialogue-box'); // Add skip button functionality document.getElementById('skipButton').addEventListener('click', () => { isTyping = false; currentDialogueLine = dialogueLines.length - 1; document.querySelector('.dialogue-text').textContent = dialogueLines[currentDialogueLine]; document.getElementById('startButton').style.display = 'block'; document.getElementById('skipButton').style.display = 'none'; document.getElementById('nextButton').style.display = 'none'; }); document.getElementById('nextButton').addEventListener('click', () => { if (isTyping) { return; } currentDialogueLine++; if (currentDialogueLine < dialogueLines.length) { typeDialogue(dialogueLines[currentDialogueLine], document.querySelector('.dialogue-text')); // Check if this is the last line if (currentDialogueLine === dialogueLines.length - 1) { // Hide navigation buttons document.getElementById('nextButton').style.display = 'none'; document.getElementById('skipButton').style.display = 'none'; } } }); // Start button event listener document.getElementById('startButton').addEventListener('click', () => { gameStarted = true; gameStartTime = Date.now(); startScreen.style.display = 'none'; // Start background music here if (backgroundMusic) { backgroundMusic.play().catch((error) => { console.warn('Autoplay was prevented. User interaction is required to play the background music.'); }); } }); // Initialize asset loading system and loaders const loadingManager = new THREE.LoadingManager(); window.loadingManager = loadingManager; // Make it globally available const textureLoader = new THREE.TextureLoader(loadingManager); window.textureLoader = textureLoader; // Make it globally available window.assetsLoaded = false; // Create loading screen with cleaner style declaration const loadingScreen = document.createElement('div'); Object.assign(loadingScreen.style, { position: 'absolute', top: '0', left: '0', width: '100%', height: '100%', backgroundColor: 'rgba(0, 0, 0, 0.8)', color: 'white', display: 'flex', justifyContent: 'center', alignItems: 'center', fontSize: '24px' }); loadingScreen.innerHTML = 'Loading... 0%'; parentDiv.appendChild(loadingScreen); // Initialize audio variables window.backgroundMusic = null; let crabSound, underwaterAmbience; // 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'; // Start the dialogue when assets are loaded typeDialogue(dialogueLines[0], document.querySelector('.dialogue-text')); // Initialize and play background music backgroundMusic = new Audio('https://play.rosebud.ai/assets/ThisSnowDoesnt-pATCHES.mp3?RG2o'); backgroundMusic.loop = true; backgroundMusic.volume = 0.15; // Increased background music volume // Initialize underwater ambience underwaterAmbience = new Audio('https://play.rosebud.ai/assets/393819__kinoton__underwater-ambience.mp3?W3sM'); underwaterAmbience.loop = true; underwaterAmbience.volume = 0; // Initialize crab sound crabSound = new Audio('https://play.rosebud.ai/assets/751085__smallconfusion__mechanical-plastic-click-07.wav?FjX4'); crabSound.volume = 0.6; // Initialize duck sound window.duckSound = new Audio('https://play.rosebud.ai/assets/duck.mp3?Gvq8'); window.duckSound.volume = 1.0; backgroundMusic.play().catch((error) => { console.warn('Autoplay was prevented. User interaction is required to play the background music.'); }); }; // Fish School System (external) // Initialize global scene variable and add to window const scene = new THREE.Scene(); window.scene = scene; // Initialize physics world window.world = new CANNON.World(); window.world.gravity.set(0, -9.82, 0); // Initialize empty ponds array const ponds = []; // Companion Class (external) // Minecraft-style Crab class (external) // Bubble particle system (external) window.CONFIG = CONFIG; const bubbleSystem = new BubbleSystem(); window.bubbleSystem = bubbleSystem; // Additional physics world configuration window.world.broadphase = new CANNON.NaiveBroadphase(); window.world.solver.iterations = 10; // Add wall physics bodies const wallShape = new CANNON.Box(new CANNON.Vec3(100, CONFIG.water.height / 2, 2)); const sideWallShape = new CANNON.Box(new CANNON.Vec3(2, CONFIG.water.height / 2, 100)); // North wall physics const northWallBody = new CANNON.Body({ mass: 0 }); northWallBody.addShape(wallShape); northWallBody.position.set(0, CONFIG.water.height / 2, -100); world.addBody(northWallBody); // South wall physics const southWallBody = new CANNON.Body({ mass: 0 }); southWallBody.addShape(wallShape); southWallBody.position.set(0, CONFIG.water.height / 2, 100); world.addBody(southWallBody); // East wall physics const eastWallBody = new CANNON.Body({ mass: 0 }); eastWallBody.addShape(sideWallShape); eastWallBody.position.set(100, CONFIG.water.height / 2, 0); world.addBody(eastWallBody); // West wall physics const westWallBody = new CANNON.Body({ mass: 0 }); // Create a compound shape for more realistic collision const mainWallShape = new CANNON.Box(new CANNON.Vec3(1.5, CONFIG.water.height / 2, 100)); const bottomLedgeShape = new CANNON.Box(new CANNON.Vec3(3, 2, 100)); westWallBody.addShape(mainWallShape); westWallBody.addShape(bottomLedgeShape, new CANNON.Vec3(-1, -CONFIG.water.height / 2 + 2, 0)); westWallBody.position.set(-100, CONFIG.water.height / 2, 0); world.addBody(westWallBody); // Configure world physics world.broadphase = new CANNON.NaiveBroadphase(); world.solver.iterations = 10; window.WATER_HEIGHT = CONFIG.water.height; window.waterConfig = CONFIG.water; // Create water surface plane for troubleshooting // Create water surface const waterSurfaceGeometry = new THREE.PlaneGeometry( window.waterConfig.surfaceScale * 8, // Greatly increased scale for endless appearance window.waterConfig.surfaceScale * 8, 4, 4 // Added more segments for better wave effect ); // Load water surface texture const waterSurfaceTexture = textureLoader.load('https://play.rosebud.ai/assets/Water surface top down no shadow.png?PC6S'); waterSurfaceTexture.wrapS = waterSurfaceTexture.wrapT = THREE.RepeatWrapping; waterSurfaceTexture.repeat.set(32, 32); // Increased repeat for more detailed water surface const waterSurfaceMaterial = new THREE.MeshStandardMaterial({ color: new THREE.Color(0x89CFF0), // Light blue color map: waterSurfaceTexture, transparent: true, opacity: 0.85, side: THREE.DoubleSide, roughness: 0.1, metalness: 0.6, envMapIntensity: 1.5 }); const waterSurfacePlane = new THREE.Mesh(waterSurfaceGeometry, waterSurfaceMaterial); waterSurfacePlane.rotation.x = -Math.PI / 2; waterSurfacePlane.position.y = 15.45; // Slightly lower to prevent gap scene.add(waterSurfacePlane); // Initialize the camera const camera = new THREE.PerspectiveCamera( 60, canvas.offsetWidth / canvas.offsetHeight, 0.1, 1000 ); camera.position.set(0, 8, 15); // Set initial position closer to ground camera.lookAt(0, 2, 0); // Initialize the renderer with optimized settings const renderer = new THREE.WebGLRenderer({ antialias: true, canvas: canvas, powerPreference: 'high-performance', stencil: false, depth: true, logarithmicDepthBuffer: true }); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; renderer.outputEncoding = THREE.sRGBEncoding; renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.2; renderer.physicallyCorrectLights = true; renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); // Initialize post-processing composer first const composer = new EffectComposer(renderer); // Regular scene render pass const renderPass = new RenderPass(scene, camera); composer.addPass(renderPass); // Add anti-aliasing window.smaaPass = new SMAAPass( window.innerWidth * renderer.getPixelRatio(), window.innerHeight * renderer.getPixelRatio() ); composer.addPass(window.smaaPass); // Initialize composer size composer.setSize(parentDiv.clientWidth, parentDiv.clientHeight); // Define sky colors for environmental lighting function updateAtmosphere() { const isUnderwater = camera.position.y < window.waterConfig.height; const { skyColor, lightColor, intensity } = getDayNightPhase(dayNightTimer); // Calculate time of day factor (0-1) const timeOfDay = (dayNightTimer % CONFIG.dayNight.duration) / CONFIG.dayNight.duration; // Enhanced fog density based on time of day const fogDensity = isUnderwater ? 0.035 : (timeOfDay < 0.5 ? 0.012 : 0.018); scene.fog = new THREE.FogExp2(skyColor.getHex(), fogDensity); scene.background = skyColor; // Enhanced star visibility calculation with stronger night presence const skyBrightness = (skyColor.r + skyColor.g + skyColor.b) / 3; stars.material.opacity = Math.max(0, Math.min(1, 1.5 - (skyBrightness * 2))); // Enhanced sky dome colors with better gradients const skyLerpFactor = Math.sin(timeOfDay * Math.PI) * 0.3 + 0.7; uniforms.topColor.value = skyColor; uniforms.bottomColor.value = new THREE.Color() .copy(skyColor) .multiplyScalar(timeOfDay < 0.5 ? 1.3 : 0.8); uniforms.midColor.value = new THREE.Color() .copy(skyColor) .lerpHSL(lightColor, skyLerpFactor); // Enhanced lighting updates sunLight.color = lightColor; const underwaterFactor = isUnderwater ? 0.5 : 1.0; const timeBasedIntensity = timeOfDay < 0.25 || timeOfDay > 0.75 ? 0.8 : 1.0; sunLight.intensity = intensity * underwaterFactor * timeBasedIntensity; ambientLight.intensity = (isUnderwater ? 0.5 : 0.7) * (intensity / 2.2); hemiLight.intensity = 1.2 * (intensity / 2.2); } // Create sky dome with improved colors 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 vec3 midColor; uniform float offset; uniform float exponent; varying vec3 vWorldPosition; void main() { float h = normalize(vWorldPosition + offset).y; h = max(h, 0.0); vec3 color; if (h < 0.5) { color = mix(bottomColor, midColor, h * 2.0); } else { color = mix(midColor, topColor, (h - 0.5) * 2.0); } gl_FragColor = vec4(color, 1.0); }`; const uniforms = { topColor: { value: new THREE.Color(0x87CEEB) }, bottomColor: { value: new THREE.Color(0xE6F3FF) }, midColor: { value: new THREE.Color(0xADD8E6) }, offset: { value: 33 // Higher value for more sky visibility }, exponent: { value: 0.6 // Slightly stronger gradient }, }; const skyGeo = new THREE.SphereGeometry(500, 32, 15); const skyMat = new THREE.ShaderMaterial({ uniforms: uniforms, vertexShader: vertexShader, fragmentShader: fragmentShader, side: THREE.BackSide, }); const sky = new THREE.Mesh(skyGeo, skyMat); scene.add(sky); // Create stars const starsGeometry = new THREE.BufferGeometry(); const starsCount = 1000; const starsPositions = new Float32Array(starsCount * 3); const starsColors = new Float32Array(starsCount * 3); for (let i = 0; i < starsCount; i++) { const i3 = i * 3; // Position stars in a dome above the scene const radius = 400; const theta = Math.random() * Math.PI * 2; const phi = Math.random() * Math.PI * 0.5; starsPositions[i3] = radius * Math.sin(phi) * Math.cos(theta); starsPositions[i3 + 1] = radius * Math.cos(phi) + 100; // Lift stars up starsPositions[i3 + 2] = radius * Math.sin(phi) * Math.sin(theta); // Brighter white-ish colors for stars with slight color variation starsColors[i3] = 0.9 + Math.random() * 0.1; // Red component starsColors[i3 + 1] = 0.9 + Math.random() * 0.1; // Green component starsColors[i3 + 2] = 1.0; // Blue component always max for extra brightness } starsGeometry.setAttribute('position', new THREE.BufferAttribute(starsPositions, 3)); starsGeometry.setAttribute('color', new THREE.BufferAttribute(starsColors, 3)); const starsMaterial = new THREE.PointsMaterial({ size: 2.5, vertexColors: true, transparent: true, opacity: 0, sizeAttenuation: false }); const stars = new THREE.Points(starsGeometry, starsMaterial); scene.add(stars); function createCloud() { const cloud = new THREE.Group(); const cloudMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff, transparent: true, opacity: 0, roughness: 0.8 }); for (let i = 0; i < 7; i++) { const segment = new THREE.Mesh( new THREE.SphereGeometry(2 + Math.random() * 2, 8, 8), cloudMaterial ); segment.position.set( i * 2 - 5.6, Math.random() * 1.5, Math.random() * 2 - 1 ); segment.scale.y = 0.6 + Math.random() * 0.2; cloud.add(segment); } cloud.userData.speed = 0.2 + Math.random() * 0.3; return cloud; } // Create clouds // Create clouds const clouds = []; const CLOUD_COUNT = 15; for (let i = 0; i < CLOUD_COUNT; i++) { const cloud = createCloud(); // Position clouds randomly in the sky const radius = 80 + Math.random() * 40; // Distance from center const angle = Math.random() * Math.PI * 2; cloud.position.set( Math.cos(angle) * radius, 35 + Math.random() * 10, // Height variation Math.sin(angle) * radius ); // Start with opacity 0 and fade in cloud.children.forEach(segment => { segment.material.opacity = 0; }); clouds.push(cloud); scene.add(cloud); } // Modify OrbitControls setup const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.25; controls.screenSpacePanning = false; controls.maxPolarAngle = Math.PI / 2; controls.minDistance = 10; controls.maxDistance = 20; controls.enableRotate = true; // Disable manual rotation / aktiviert controls.enableZoom = false; // Disable zooming // Create flat terrain function createTerrain() { const size = 1000; // Significantly increased size // Create simple flat plane for visuals const geometry = new THREE.PlaneGeometry(size, size, 50, 50); // Added more segments for better detail const texture = textureLoader.load('https://play.rosebud.ai/assets/high res beach sand texture top down.png?iQuh'); const normalMap = textureLoader.load('https://play.rosebud.ai/assets/high res beach sand texture top down.png?iQuh'); texture.wrapS = texture.wrapT = THREE.RepeatWrapping; texture.repeat.set(20, 20); // Decreased repeat for more visible pattern texture.encoding = THREE.sRGBEncoding; normalMap.wrapS = normalMap.wrapT = THREE.RepeatWrapping; normalMap.repeat.set(20, 20); const material = new THREE.MeshStandardMaterial({ map: texture, normalMap: normalMap, normalScale: new THREE.Vector2(1.5, 1.5), roughness: 0.6, metalness: 0.1, envMapIntensity: 0.8, color: new THREE.Color(0xF5DEB3), // Warmer sand color fog: true // Enable fog for distance fade }); // Create the main terrain const terrain = new THREE.Mesh(geometry, material); window.terrain = terrain; terrain.rotation.x = -Math.PI / 2; terrain.receiveShadow = true; terrain.renderOrder = 0; // Set lower render order for ground scene.add(terrain); return { terrain }; } // Create underwater caustics const causticsTextureLoader = new THREE.TextureLoader(); const causticsTexture = causticsTextureLoader.load('https://play.rosebud.ai/assets/Water surface top down no shadow.png?PC6S'); causticsTexture.wrapS = causticsTexture.wrapT = THREE.RepeatWrapping; const causticsMaterial = new THREE.MeshPhongMaterial({ map: causticsTexture, transparent: true, opacity: 0.3, blending: THREE.AdditiveBlending, depthWrite: false, side: THREE.DoubleSide }); const causticsPlane = new THREE.Mesh( new THREE.PlaneGeometry(200, 200), causticsMaterial ); causticsPlane.rotation.x = -Math.PI / 2; causticsPlane.position.y = 0.1; scene.add(causticsPlane); // Setup enhanced lighting system const sunLight = new THREE.DirectionalLight(0xFFFAF0, 2.0); // Warm white sunlight for friendly day sunLight.position.set(-100, 200, -100); sunLight.castShadow = true; sunLight.shadow.mapSize.width = 4096; sunLight.shadow.mapSize.height = 4096; // Create marker material and geometry const markerGeometry = new THREE.RingGeometry(0.5, 1, 32); const markerMaterial = new THREE.MeshBasicMaterial({ color: 0xFFFFFF, transparent: true, opacity: 0.9, side: THREE.DoubleSide }); sunLight.shadow.camera.near = 10; sunLight.shadow.camera.far = 400; sunLight.shadow.camera.left = -100; sunLight.shadow.camera.right = 100; sunLight.shadow.camera.top = 100; sunLight.shadow.camera.bottom = -100; sunLight.shadow.bias = -0.001; sunLight.shadow.normalBias = 0.02; scene.add(sunLight); // Initialize lighting // Add hemisphere light for ambient illumination const hemiLight = new THREE.HemisphereLight(0x87CEEB, 0xFFE87C, 1.2); // Brighter sky contribution scene.add(hemiLight); // Add warmer ambient light const ambientLight = new THREE.AmbientLight(0xFFFAF0, 0.6); // Increased ambient for friendly day scene.add(ambientLight); // Create initial scene // Initialize rocks array const rocks = []; // Helper function to check if a position is too close to any pond function isTooCloseToRocks(x, z, minDistance = 10) { for (const rock of rocks) { const dx = x - rock.position.x; const dz = z - rock.position.z; const distanceToRock = Math.sqrt(dx * dx + dz * dz); if (distanceToRock < rock.radius + minDistance) { return true; } } return false; } // Initialize lighting // Create flower class (external) // Create flowers array and add flowers to the scene const seaweeds = []; const seaweedTypes = ['tall', 'medium', 'short']; // Sea Plant class for decorative underwater vegetation (external) // Create array to store all sea plants const seaPlants = []; // Add sea plants around the scene boundaries // Add plants along north and south edges for (let x = -90; x <= 90; x += 20) { // North edge const northPlant = new SeaPlant(x, -90 + Math.random() * 10); seaPlants.push(northPlant); // South edge const southPlant = new SeaPlant(x, 90 + Math.random() * -10); seaPlants.push(southPlant); } // Add plants along east and west edges for (let z = -90; z <= 90; z += 20) { // East edge const eastPlant = new SeaPlant(90 + Math.random() * -10, z); seaPlants.push(eastPlant); // West edge const westPlant = new SeaPlant(-90 + Math.random() * 10, z); seaPlants.push(westPlant); } // Create decorative rock formations const rockGeometries = { base: new THREE.BoxGeometry(3, 3, 3), smallBase: new THREE.BoxGeometry(1.5, 1.5, 1.5), detail: new THREE.BoxGeometry(0.8, 0.8, 0.8), coral: { branch: new THREE.CylinderGeometry(0.1, 0.2, 1, 5), fan: new THREE.BoxGeometry(0.8, 0.05, 0.8), polyp: new THREE.SphereGeometry(0.1, 4, 4) } }; const rockMaterials = { main: new THREE.MeshStandardMaterial({ color: 0x808080, roughness: 0.8, metalness: 0.2, flatShading: true, map: textureLoader.load('https://play.rosebud.ai/assets/natural rock texture.png?iMcl'), normalMap: textureLoader.load('https://play.rosebud.ai/assets/natural rock texture.png?iMcl'), bumpMap: textureLoader.load('https://play.rosebud.ai/assets/natural rock texture.png?iMcl'), bumpScale: 0.5, normalScale: new THREE.Vector2(1.5, 1.5) }), detail: new THREE.MeshStandardMaterial({ color: 0x707070, roughness: 0.9, metalness: 0.1, flatShading: true, map: textureLoader.load('https://play.rosebud.ai/assets/natural rock texture.png?iMcl'), normalMap: textureLoader.load('https://play.rosebud.ai/assets/natural rock texture.png?iMcl'), bumpMap: textureLoader.load('https://play.rosebud.ai/assets/natural rock texture.png?iMcl'), bumpScale: 0.3, normalScale: new THREE.Vector2(1.0, 1.0) }), coral: { pink: new THREE.MeshStandardMaterial({ color: 0xFF69B4, roughness: 0.7, metalness: 0.3, flatShading: true }), orange: new THREE.MeshStandardMaterial({ color: 0xFF7F50, roughness: 0.7, metalness: 0.3, flatShading: true }), purple: new THREE.MeshStandardMaterial({ color: 0x9370DB, roughness: 0.7, metalness: 0.3, flatShading: true }) } }; function generateRockPosition(radius, angle, scaleMin, scaleMax) { return { x: Math.cos(angle) * radius, z: Math.sin(angle) * radius, scale: scaleMin + Math.random() * (scaleMax - scaleMin), rotation: Math.random() * Math.PI * 2 }; } function createRockFormation(position) { const rockGroup = new THREE.Group(); const size = 2 + Math.random() * 3; // Reduced from (3 + Math.random() * 4) const geometry = new THREE.BoxGeometry(size, size, size, 3, 3, 3); // Modify vertices for more natural look with controlled displacement const positions = geometry.attributes.position; for (let j = 0; j < positions.count; j++) { const x = positions.getX(j); const y = positions.getY(j); const z = positions.getZ(j); const distanceFromCenter = Math.sqrt(x * x + y * y + z * z); const displacementFactor = 0.15 * Math.min(1, distanceFromCenter / (size * 0.5)); positions.setXYZ( j, x + (Math.sin(y * 0.5) * displacementFactor * size), y + (Math.cos(x * 0.5) * displacementFactor * size), z + (Math.sin((x + y) * 0.5) * displacementFactor * size) ); } // Update normals after vertex modification geometry.computeVertexNormals(); const mainRock = new THREE.Mesh( geometry, rockMaterials.main ); // Enhanced variable scaling for more natural look const scaleX = position.scale * (0.6 + Math.random() * 0.3); // Reduced from (0.8 + Math.random() * 0.4) const scaleY = position.scale * (0.4 + Math.random() * 0.3); // Reduced from (0.6 + Math.random() * 0.4) const scaleZ = position.scale * (0.6 + Math.random() * 0.3); // Reduced from (0.8 + Math.random() * 0.4) mainRock.scale.set(scaleX, scaleY, scaleZ); // Add slight random rotation for variety mainRock.rotation.set( Math.random() * 0.3, position.rotation, Math.random() * 0.3 ); // Add detail rocks const detailCount = 2 + Math.random() * 3; for (let i = 0; i < detailCount; i++) { const detailGeometry = rockGeometries.detail.clone(); const detail = new THREE.Mesh(detailGeometry, rockMaterials.detail); // Position details around main rock const angle = (i / detailCount) * Math.PI * 2; const radius = (size * 0.3) * (0.8 + Math.random() * 0.4); detail.position.set( Math.cos(angle) * radius, size * 0.3 * Math.random(), Math.sin(angle) * radius ); detail.rotation.set( Math.random() * Math.PI, Math.random() * Math.PI, Math.random() * Math.PI ); detail.scale.multiplyScalar(0.8 + Math.random() * 0.4); mainRock.add(detail); } rockGroup.add(mainRock); rockGroup.position.set(position.x, 0, position.z); return rockGroup; } function createDecorativeRocks() { // Create edge rocks const edgePositions = Array.from({ length: 12 }, (_, i) => { const angle = (i / 12) * Math.PI * 2; const radius = 90 + Math.random() * 5; return generateRockPosition(radius, angle, 2, 5); }); // Create cluster rocks const clusterPositions = Array.from({ length: 6 }, (_, i) => { const angle = (i / 6) * Math.PI * 2 + Math.random() * 0.5; const radius = 30 + Math.random() * 30; return generateRockPosition(radius, angle, 1.5, 3.5); }); // Create and add all rock formations [...edgePositions, ...clusterPositions] .map(createRockFormation) .forEach(rockGroup => scene.add(rockGroup)); } // Call the function to create decorative rocks createDecorativeRocks(); for (let i = 0; i < 30; i++) { const radius = 40 * Math.sqrt(Math.random()); const theta = Math.random() * Math.PI * 2; const x = radius * Math.cos(theta); const z = radius * Math.sin(theta); // Only place if not too close to rocks or seaweed if (!isTooCloseToRocks(x, z, 5)) { const seaPlant = new SeaPlant(x, z); seaPlants.push(seaPlant); } } // Add decorative SeaPlants near the crab const crabPosition = { x: -67, // Moved 5 units forward (away from cliff) z: -55 }; const crabSeaPlantCount = 8; // Number of plants to add around crab const crabSeaPlantRadius = 6; // Radius around crab to place plants for (let i = 0; i < crabSeaPlantCount; i++) { const angle = (i / crabSeaPlantCount) * Math.PI * 2; const distance = 2 + Math.random() * crabSeaPlantRadius; // Random distance between 2 and radius const x = crabPosition.x + Math.cos(angle) * distance; const z = crabPosition.z + Math.sin(angle) * distance; const seaPlant = new SeaPlant(x, z); seaPlants.push(seaPlant); } // Add some additional sea plants in front of the crab area for (let i = 0; i < 5; i++) { const x = crabPosition.x + 8 + Math.random() * 6; // 8-14 units in front of crab const z = crabPosition.z - 5 + Math.random() * 10; // Spread along z-axis const seaPlant = new SeaPlant(x, z); seaPlants.push(seaPlant); } // Add seaweed patches let seaweedAttempts = 0; const maxSeaweedAttempts = 50; while (seaweeds.length < 8 && seaweedAttempts < maxSeaweedAttempts) { const radius = 35 * Math.sqrt(Math.random()); const theta = Math.random() * Math.PI * 2; const x = radius * Math.cos(theta); const z = radius * Math.sin(theta); if (!isTooCloseToRocks(x, z, 10)) { const type = seaweedTypes[Math.floor(Math.random() * seaweedTypes.length)]; seaweeds.push(new Seaweed(x, z, type)); } seaweedAttempts++; } // Create terrain after scene is initialized // Create terrain const { terrain } = createTerrain(); // Create walls const wallThickness = 12; // Increased wall thickness for more dramatic cliff const wallHeight = CONFIG.water.height; // Define wall height using water height from CONFIG // West wall (cliff) creation starts here // Create treasure object (pile of coins) const coinMaterial = new THREE.MeshStandardMaterial({ color: 0xFFD700, metalness: 0.8, roughness: 0.2, emissive: 0xFFD700, emissiveIntensity: 0.3 }); const treasure = new THREE.Group(); const gemGeometry = new THREE.IcosahedronGeometry(0.3, 0); // Create a pile of gems for (let i = 0; i < 15; i++) { const gem = new THREE.Mesh(gemGeometry, new THREE.MeshStandardMaterial({ color: new THREE.Color().setHSL(Math.random(), 0.8, 0.6), metalness: 0.9, roughness: 0.1, emissive: new THREE.Color().setHSL(Math.random(), 0.8, 0.6), emissiveIntensity: 0.3 })); // Random position within a small area gem.position.set( Math.random() * 2 - 1, i * 0.2 + Math.random() * 0.1, Math.random() * 2 - 1 ); // Random rotation for more natural look gem.rotation.set( Math.random() * Math.PI * 2, Math.random() * Math.PI * 2, Math.random() * Math.PI * 2 ); // Random scale variation const scale = 0.7 + Math.random() * 0.6; gem.scale.set(scale, scale, scale); treasure.add(gem); } // Create shimmering particle system const particleCount = 50; const particleGeometry = new THREE.BufferGeometry(); const particlePositions = new Float32Array(particleCount * 3); const particleSizes = new Float32Array(particleCount); for (let i = 0; i < particleCount; i++) { const i3 = i * 3; // Random position around the treasure const radius = 1.5; const theta = Math.random() * Math.PI * 2; const phi = Math.random() * Math.PI; particlePositions[i3] = radius * Math.sin(phi) * Math.cos(theta); particlePositions[i3 + 1] = Math.random() * 2; // Height variation particlePositions[i3 + 2] = radius * Math.sin(phi) * Math.sin(theta); particleSizes[i] = 0.1 + Math.random() * 0.2; } particleGeometry.setAttribute('position', new THREE.BufferAttribute(particlePositions, 3)); particleGeometry.setAttribute('size', new THREE.BufferAttribute(particleSizes, 1)); const particleMaterial = new THREE.PointsMaterial({ color: 0xFFD700, size: 0.2, transparent: true, opacity: 0.6, blending: THREE.AdditiveBlending, depthWrite: false }); const particles = new THREE.Points(particleGeometry, particleMaterial); treasure.add(particles); // Position the entire treasure group treasure.position.set(-90, 0.5, -40); // Lowered to ground level inside the cliff treasure.rotation.y = Math.PI / 4; scene.add(treasure); // Add animation for the particles function animateTreasureParticles() { const positions = particles.geometry.attributes.position.array; const time = Date.now() * 0.001; for (let i = 0; i < particleCount; i++) { const i3 = i * 3; // Circular motion positions[i3] += Math.sin(time + i) * 0.01; positions[i3 + 1] += Math.cos(time + i) * 0.01; positions[i3 + 2] += Math.sin(time + i) * 0.01; // Reset particles that move too far if (Math.abs(positions[i3]) > 2) positions[i3] *= 0.8; if (Math.abs(positions[i3 + 1]) > 2) positions[i3 + 1] *= 0.8; if (Math.abs(positions[i3 + 2]) > 2) positions[i3 + 2] *= 0.8; } particles.geometry.attributes.position.needsUpdate = true; } // Create cliff details function createCliffDetails() { // Load boulder texture and normal map const boulderTexture = textureLoader.load('https://play.rosebud.ai/assets/natural rock texture.png?iMcl'); const boulderNormalMap = textureLoader.load('https://play.rosebud.ai/assets/natural rock texture.png?iMcl'); // Configure texture settings boulderTexture.wrapS = boulderTexture.wrapT = THREE.RepeatWrapping; boulderTexture.repeat.set(1, 1); boulderNormalMap.wrapS = boulderNormalMap.wrapT = THREE.RepeatWrapping; boulderNormalMap.repeat.set(1, 1); // Create enhanced boulder material const boulderMaterial = rockMaterials.main.clone(); boulderMaterial.map = boulderTexture; boulderMaterial.normalMap = boulderNormalMap; boulderMaterial.bumpMap = boulderTexture; boulderMaterial.bumpScale = 0.5; boulderMaterial.normalScale = new THREE.Vector2(1.5, 1.5); const boulderGroup = new THREE.Group(); const boulderCount = 24; // Increased boulder count for wider cliff const cliffFace = new THREE.BoxGeometry(wallThickness * 4, wallHeight * 2, 200, 16, 16, 24); // Modify vertices for enhanced irregularity const positions = cliffFace.attributes.position; for (let i = 0; i < positions.count; i++) { const x = positions.getX(i); const y = positions.getY(i); const z = positions.getZ(i); const maxHeight = wallHeight; // Create Perlin-like noise effect const noiseX = Math.sin(y * 0.2 + z * 0.05) * 2; const noiseY = Math.cos(x * 0.15 + z * 0.05) * 2; const noiseZ = Math.sin(x * 0.1 + y * 0.15) * 2; // Create more dramatic irregularities at the top if (y > maxHeight * 0.8) { positions.setY(i, y + noiseY + (Math.random() * 6 - 3)); positions.setX(i, x + noiseX + (Math.random() * 4 - 2)); positions.setZ(i, z + noiseZ + (Math.random() * 5 - 2.5)); } else if (x > -wallThickness) { positions.setX(i, x + noiseX * 0.5 + (Math.random() * 3 - 1.5)); positions.setZ(i, z + noiseZ * 0.5 + (Math.random() * 4 - 2)); } // Modify UVs for better texture mapping const uvAttribute = cliffFace.attributes.uv; const u = uvAttribute.getX(i); const v = uvAttribute.getY(i); // Scale UVs based on position to prevent stretching uvAttribute.setXY(i, u * (1 + Math.abs(noiseX) * 0.1), v * (1 + Math.abs(noiseY) * 0.1) ); } // Add random boulders along the cliff base for (let i = 0; i < boulderCount; i++) { const size = 3 + Math.random() * 4; // Increased base size // Create more detailed boulder geometry with more segments const geometry = new THREE.BoxGeometry(size, size, size, 3, 3, 3); // Modify vertices for more natural look with controlled displacement const positions = geometry.attributes.position; for (let j = 0; j < positions.count; j++) { const x = positions.getX(j); const y = positions.getY(j); const z = positions.getZ(j); // Use smoother displacement based on position const distanceFromCenter = Math.sqrt(x * x + y * y + z * z); const displacementFactor = 0.15 * Math.min(1, distanceFromCenter / (size * 0.5)); positions.setXYZ( j, x + (Math.sin(y * 0.5) * displacementFactor * size), y + (Math.cos(x * 0.5) * displacementFactor * size), z + (Math.sin((x + y) * 0.5) * displacementFactor * size) ); } // Update normals after vertex modification geometry.computeVertexNormals(); const boulder = new THREE.Mesh(geometry, boulderMaterial); // Position boulders along cliff base with overlap const segment = i * (580 / (boulderCount * 1.2)); // Increased overlap boulder.position.set( -70 + Math.cos(i * 0.8) * 15, // X position moved 5 units forward size / 2 + Math.sin(i * 0.8) * 2 + 0.5, // Y position on ground -85 + (i * 12) + (Math.random() - 0.5) * 15 // Z position with more variation ); // Create cave-like indentation near treasure if (Math.abs(boulder.position.z + 40) < 10 && Math.abs(boulder.position.y - 8) < 5) { boulder.scale.multiplyScalar(0.5); // Make boulders smaller near treasure } // Controlled random rotation for more natural clustering boulder.rotation.set( Math.random() * Math.PI * 0.5, Math.random() * Math.PI * 2, Math.random() * Math.PI * 0.5 ); // Add slight scale variation const scaleVar = 0.8 + Math.random() * 0.4; boulder.scale.set(scaleVar, scaleVar * 0.9, scaleVar * 1.1); boulderGroup.add(boulder); // Add sea plants near boulders (33% chance) if (Math.random() < 0.33) { const plant = new SeaPlant( boulder.position.x + 2 + Math.random(), boulder.position.z + (Math.random() * 2 - 1) ); seaPlants.push(plant); } } return { cliffFace, boulderGroup }; } // Load and configure the rock textures // Cliff class (external) const cliff = new Cliff(scene, textureLoader, renderer, rockMaterials, CONFIG.water.height); for (let i = 0; i < 8; i++) { const plant = new SeaPlant( -97, -80 + i * 20 + Math.random() * 10 ); // Rotate plants to grow from cliff face plant.group.rotation.z = Math.PI * 0.25; seaPlants.push(plant); } // Add trees on top of the cliff const cliffTrees = []; const treePositions = [{ x: -95, y: 32, z: -60 }, { x: -98, y: 32, z: -20 }, { x: -93, y: 32, z: 20 }]; treePositions.forEach(pos => { const tree = new Tree(); tree.group.position.set(pos.x, pos.y, pos.z); tree.group.scale.set(0.8, 0.8, 0.8); tree.group.rotation.y = Math.random() * Math.PI * 2; cliffTrees.push(tree); }); // Add water animation // Shared geometries and materials for all ponds // Initialize scene with rocks window.rockGeometries = rockGeometries; window.rockMaterials = rockMaterials; // Initialize scene with rocks // Create rocks at specific positions window.rockGeometries = rockGeometries; window.rockMaterials = rockMaterials; const rock1 = new Rock(-15, 15); const rock2 = new Rock(15, -15); // Create a crab and position it behind rock1 const crab = new Crab(-67, -55); // Moved 5 units forward (away from cliff) crab.hasGivenFork = false; // Initialize fork giving state // Create flat rock variants const flatRock1 = new Rock(-18, 18); const flatRock2 = new Rock(18, -18); // Scale down the flat rocks and make them flatter [flatRock1, flatRock2].forEach(rock => { rock.group.scale.set(0.7, 0.3, 0.7); rock.radius *= 0.7; // Adjust collision radius for scaled rock }); // Add all rocks to the array rocks.push(rock1, rock2, flatRock1, flatRock2); // Create ground physics body const groundShape = new CANNON.Plane(); const groundBody = new CANNON.Body({ mass: 0 }); groundBody.addShape(groundShape); groundBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), -Math.PI / 2); world.addBody(groundBody); // Llama class definition (external) // Create llama instance const llama = new Llama(); window.llama = llama; // Create companions // Initialize companions array first const companions = []; // Initialize ducks array const ducks = []; // Then create and add companions function initializeCompanions() { companions.push(new Companion('turtle', new THREE.Vector3(10, 1, 10))); companions.push(new Companion('turtle', new THREE.Vector3(-10, 1, -10))); const jellyfish1 = new Companion('jellyfish', new THREE.Vector3(15, 5, 0)); const jellyfish2 = new Companion('jellyfish', new THREE.Vector3(-15, 6, 0)); const jellyfish3 = new Companion('jellyfish', new THREE.Vector3(8, 7, 8)); const jellyfish4 = new Companion('jellyfish', new THREE.Vector3(-8, 5, -8)); const jellyfish5 = new Companion('jellyfish', new THREE.Vector3(20, 6, -5)); const jellyfish6 = new Companion('jellyfish', new THREE.Vector3(-20, 7, 5)); // Add glowing material to jellyfish [jellyfish1, jellyfish2, jellyfish3, jellyfish4, jellyfish5, jellyfish6].forEach(jellyfish => { if (jellyfish.mesh && jellyfish.mesh.material) { jellyfish.mesh.material.emissive = new THREE.Color(0x4B0082); // Indigo glow jellyfish.mesh.material.emissiveIntensity = 0.2; // Base glow intensity } companions.push(jellyfish); }); } // Call initialization after scene is ready initializeCompanions(); // Initialize ducks for (let i = 0; i < CONFIG.game.duckCount; i++) { const radius = 30 + Math.random() * 20; // Random radius between 30-50 units const angle = Math.random() * Math.PI * 2; // Random angle const x = Math.cos(angle) * radius; const z = Math.sin(angle) * radius; const duck = new Duck(x, CONFIG.water.height - 0.5, z); scene.add(duck.mesh); ducks.push(duck); } // Animation loop // Initialize raycaster and target point const raycaster = new THREE.Raycaster(); const mouse = new THREE.Vector2(); window.activeMarkers = []; let activeMarkers = window.activeMarkers; // Local reference to global array // Function to create and animate marker function createMarker(position) { const marker = new THREE.Mesh(markerGeometry, markerMaterial.clone()); marker.position.copy(position); marker.position.y += 0.1; // Slightly above ground marker.rotation.x = -Math.PI / 2; // Lay flat // Add animation parameters marker.userData = { createdAt: Date.now(), duration: 1000, // Duration in milliseconds initialScale: 0.5, targetScale: 2 }; scene.add(marker); activeMarkers.push(marker); // Clean up old markers while (activeMarkers.length > 3) { const oldMarker = activeMarkers.shift(); scene.remove(oldMarker); } return marker; } // Handle pointer events (mouse/touch) function handlePointerEvent(clientX, clientY) { const rect = canvas.getBoundingClientRect(); mouse.x = ((clientX - rect.left) / rect.width) * 2 - 1; mouse.y = -((clientY - rect.top) / rect.height) * 2 + 1; raycaster.setFromCamera(mouse, camera); const intersects = raycaster.intersectObjects([terrain]); if (intersects.length > 0) { createMarker(intersects[0].point); targetPoint = intersects[0].point; } } // Add click event listener canvas.addEventListener('click', (event) => { handlePointerEvent(event.clientX, event.clientY); }); // Initialize fish schools const fishSchools = new FishSchool(50, { x: 180, z: 180 }); function animate() { requestAnimationFrame(animate); // Animate treasure particles if (treasure) { animateTreasureParticles(); } // Update llama glow effect if pearl is collected if (window.hasPearlGlow && llama) { const { skyColor } = getDayNightPhase(dayNightTimer); const brightness = skyColor.r + skyColor.g + skyColor.b; const isUnderwater = camera.position.y < CONFIG.water.height; const isNearCliff = llama.group.position.x < -60; // Check if near cliff // Calculate glow intensity based on conditions let glowIntensity = 0; if (isNearCliff) { glowIntensity = 0.6; // Strong glow near cliff } else if (brightness < 1.5) { // Night time glowIntensity = 0.4; // Medium glow at night } // Apply glow effect to llama materials llama.group.traverse((child) => { if (child.isMesh && child.material) { child.material.emissiveIntensity = glowIntensity; } }); } // Update atmosphere based on camera position and water level const waterLevel = window.WATER_HEIGHT; const isUnderwater = camera.position.y < waterLevel; updateAtmosphere(); // Only update game if it has started if (!gameStarted) { return; } const deltaTime = clock.getDelta(); const time = clock.getElapsedTime(); // Update game timer const currentTime = Date.now(); // Update day/night cycle dayNightTimer += deltaTime; if (dayNightTimer >= CONFIG.dayNight.duration) { dayNightTimer = 0; } // Update markers activeMarkers.forEach((marker, index) => { const age = currentTime - marker.userData.createdAt; const progress = age / marker.userData.duration; if (progress >= 1) { scene.remove(marker); activeMarkers.splice(index, 1); } else { // Scale up const scale = THREE.MathUtils.lerp( marker.userData.initialScale, marker.userData.targetScale, progress ); marker.scale.set(scale, scale, scale); // Fade out marker.material.opacity = 1 - progress; // Add pulsing effect const pulse = Math.sin(progress * Math.PI * 4) * 0.2 + 0.8; marker.scale.multiplyScalar(pulse); } }); const timeDiff = (currentTime - lastTime) / 1000; // Convert to seconds lastTime = currentTime; if (gameTimer > 0) { gameTimer -= timeDiff; } // Update game state if (assetsLoaded) { // Update physics world.step(1 / 60); // Check for llama-flower interactions seaweeds.forEach(seaweed => { if (!seaweed.jellyfish) { // Only check seaweeds without jellyfish const llamaPos = llama.group.position; const dx = llamaPos.x - seaweed.position.x; const dz = llamaPos.z - seaweed.position.z; const distance = Math.sqrt(dx * dx + dz * dz); if (distance < seaweed.radius + 1) { // Get first available bee const jellyfishIndex = llama.companions.findIndex(companion => companion.type === 'jellyfish'); if (jellyfishIndex !== -1) { const jellyfish = llama.companions[jellyfishIndex]; // Start transition animation jellyfish.isTransitioningToSeaweed = true; jellyfish.transitionProgress = 0; jellyfish.transitionStartPos = jellyfish.mesh.position.clone(); jellyfish.transitionEndPos = new THREE.Vector3( seaweed.position.x, seaweed.position.y + 5, seaweed.position.z ); // Set up completion callback jellyfish.onTransitionComplete = () => { jellyfish.isAtFlower = true; seaweed.setJellyfish(jellyfish); // Create happiness effect jellyfish.createParticleSystem(jellyfish.mesh.position); // Remove jellyfish from llama's companions but keep it in the scene llama.companions.splice(jellyfishIndex, 1); // Keep jellyfish in companions array for updates companions.push(jellyfish); // Add heart to inventory addHeartToInventory('jellyfish'); // Jellyfish placed at seaweed - no sound }; } } } }); // Check for llama-rock interactions for companions rocks.forEach(rock => { const llamaPos = llama.group.position; const dx = llamaPos.x - rock.position.x; const dz = llamaPos.z - rock.position.z; const distance = Math.sqrt(dx * dx + dz * dz); // If llama is touching the rock if (distance < rock.radius * 1.5) { // Get all turtle companions that haven't been delivered yet const turtleCompanions = llama.companions.filter(companion => companion.type === 'turtle' && !companion.hasBeenDelivered); if (turtleCompanions.length > 0) { // Process all turtles one by one turtleCompanions.forEach(companion => { // Store reference to current rock companion.currentRock = rock; }); } // Process all turtles at once turtleCompanions.forEach((turtle, index) => { // Create happiness effect turtle.createParticleSystem(turtle.mesh.position); // Set up climbing animation parameters turtle.isClimbingRock = true; turtle.climbStartPos = turtle.mesh.position.clone(); // Simplified target position calculation const offset = new THREE.Vector3( (Math.random() - 0.5) * rock.radius, 2, (Math.random() - 0.5) * rock.radius ); turtle.climbTargetPos = rock.position.clone().add(offset); turtle.climbProgress = 0; turtle.climbDuration = 2.0; turtle.collected = false; // Remove turtle from llama's companions const companionIndex = llama.companions.indexOf(turtle); if (companionIndex !== -1) { turtle.hasBeenDelivered = true; // Mark the turtle as delivered llama.companions.splice(companionIndex, 1); // Keep turtle in companions array for updates companions.push(turtle); // Add heart to inventory addHeartToInventory('turtle'); } }); } }); // Update companions and their particles companions.forEach(companion => { companion.update(clock.getElapsedTime(), llama.group.position, deltaTime, rocks); // Update jellyfish glow based on day/night cycle if (companion.type === 'jellyfish' && companion.mesh && companion.mesh.material) { const { skyColor } = getDayNightPhase(dayNightTimer); const brightness = skyColor.r + skyColor.g + skyColor.b; // Increase glow intensity as it gets darker companion.mesh.material.emissiveIntensity = THREE.MathUtils.lerp(0.2, 1.0, 1 - (brightness / 3)); } // Update hearts if they exist if (companion.particles) { const hearts = companion.particles.children; const elapsedTime = Date.now() - companion.particles.userData.startTime; const duration = companion.particles.userData.duration; // Update each heart hearts.forEach(heart => { const velocity = heart.userData.velocity; // Update position heart.position.x += velocity.x * 0.1; heart.position.y += velocity.y * 0.1; heart.position.z += velocity.z * 0.1; // Add gentle rotation heart.rotation.y += 0.05; // Add floating effect velocity.y -= 0.03; // Gentler gravity }); // Fade out hearts const progress = elapsedTime / duration; hearts.forEach(heart => { heart.material.opacity = 1 - progress; }); // Remove hearts after duration if (elapsedTime >= duration) { scene.remove(companion.particles); companion.particles = null; } } }); // Update llama window.underwaterAmbience = underwaterAmbience; window.clock = clock; window.companions = companions; window.parentDiv = parentDiv; // Check oxygen level and show game over screen if it reaches 0 if (llama.currentOxygen <= 0 && gameStarted) { gameStarted = false; const gameOverScreen = document.createElement('div'); gameOverScreen.id = 'gameOverScreen'; gameOverScreen.innerHTML = `

Oh no! You ran out of oxygen!

Remember to swim up for air when your oxygen gets low.

`; parentDiv.appendChild(gameOverScreen); // Add event listener for the try again button document.getElementById('tryAgainButton').addEventListener('click', () => { gameOverScreen.remove(); // Reset core game state helpedCompanions = 0; gameTimer = CONFIG.game.duration; gameStarted = true; currentDialogueLine = 0; targetPoint = null; window.hasFoundTreasure = false; window.hasReceivedFeather = false; // Clear UI elements inventoryContainer.innerHTML = ''; activeMarkers.forEach(marker => scene.remove(marker)); activeMarkers = []; // Reset all seaweeds seaweeds.forEach(seaweed => { seaweed.jellyfish = null; }); // Reset companions array and create new companions companions.forEach(companion => { scene.remove(companion.mesh); if (companion.particles) { scene.remove(companion.particles); } }); // Clear companions array and reinitialize companions.length = 0; initializeCompanions(); // Reset game start time gameStartTime = Date.now(); // Reset llama to initial state llama.companions = []; llama.currentOxygen = llama.maxOxygen; window.hasPearlGlow = false; // Reset pearl glow state window.hasReceivedFeather = false; // Reset feather state // Remove sparkles if they exist if (llama.sparkles) { llama.group.remove(llama.sparkles); llama.sparkles.geometry.dispose(); llama.sparkles.material.dispose(); llama.sparkles = null; } // Reset llama materials llama.group.traverse((child) => { if (child.isMesh && child.material) { child.material.emissive = new THREE.Color(0x000000); child.material.emissiveIntensity = 0; } }); llama.physicsBody.position.set(0, 5, 0); llama.physicsBody.velocity.set(0, 0, 0); llama.physicsBody.quaternion.set(0, 0, 0, 1); llama.group.position.set(0, 5, 0); llama.group.rotation.set(0, 0, 0); llama.isMoving = false; llama.animationTime = 0; // Reset ducks ducks.forEach(duck => { duck.hasGivenFeather = undefined; }); // Reset crab if (crab) { crab.hasGivenFork = false; } // Reset camera position camera.position.set(0, 8, 15); camera.lookAt(0, 2, 0); controls.target.set(0, 2, 0); controls.update(); // Reset time lastTime = Date.now(); clock.start(); // Reset sound if (backgroundMusic) { backgroundMusic.currentTime = 0; backgroundMusic.play().catch(error => console.warn('Music playback was prevented')); } }); return; // Stop further game updates } // Check for treasure proximity if (!window.hasFoundTreasure && treasure) { const distanceToTreasure = llama.group.position.distanceTo(treasure ? treasure.position : new THREE.Vector3()); if (distanceToTreasure < 8) { // If within 8 units of treasure // Create sparkle particle system for llama const sparkleGeometry = new THREE.BufferGeometry(); const sparkleCount = 50; const sparklePositions = new Float32Array(sparkleCount * 3); const sparkleSizes = new Float32Array(sparkleCount); for (let i = 0; i < sparkleCount; i++) { sparklePositions[i * 3] = (Math.random() - 0.5) * 4; sparklePositions[i * 3 + 1] = (Math.random() - 0.5) * 4; sparklePositions[i * 3 + 2] = (Math.random() - 0.5) * 4; sparkleSizes[i] = 0.1 + Math.random() * 0.2; } sparkleGeometry.setAttribute('position', new THREE.BufferAttribute(sparklePositions, 3)); sparkleGeometry.setAttribute('size', new THREE.BufferAttribute(sparkleSizes, 1)); const sparkleMaterial = new THREE.PointsMaterial({ color: 0xFFD700, size: 0.2, transparent: true, opacity: 0.6, blending: THREE.AdditiveBlending, depthWrite: false }); llama.sparkles = new THREE.Points(sparkleGeometry, sparkleMaterial); llama.group.add(llama.sparkles); // Add treasure to inventory const treasureItem = document.createElement('div'); treasureItem.className = 'inventory-heart special-item'; treasureItem.innerHTML = '💎'; inventoryContainer.appendChild(treasureItem); // Show message for treasure collection showBottomMessage("✨ You found the mysterious treasure! The gems sparkle with ancient magic... ✨", 3000); // Play treasure found sound const treasureSound = new Audio('https://play.rosebud.ai/assets/gems.mp3?6wv2'); treasureSound.volume = 0; treasureSound.play().catch(error => console.warn('Treasure sound playback was prevented')); // Fade in the treasure sound const fadeInterval = setInterval(() => { if (treasureSound.volume < 0.2) { treasureSound.volume = Math.min(treasureSound.volume + 0.01, 0.2); } else { clearInterval(fadeInterval); } }, 50); // Update every 50ms for a smooth fade window.hasFoundTreasure = true; } } llama.update(); // Update sparkle effect if it exists if (llama.sparkles && window.hasFoundTreasure) { const positions = llama.sparkles.geometry.attributes.position.array; const time = Date.now() * 0.001; for (let i = 0; i < positions.length; i += 3) { // Circular motion around llama positions[i] += Math.sin(time + i) * 0.01; positions[i + 1] += Math.cos(time + i) * 0.01; positions[i + 2] += Math.sin(time + i) * 0.01; // Reset particles that move too far if (Math.abs(positions[i]) > 2) positions[i] *= 0.8; if (Math.abs(positions[i + 1]) > 2) positions[i + 1] *= 0.8; if (Math.abs(positions[i + 2]) > 2) positions[i + 2] *= 0.8; } llama.sparkles.geometry.attributes.position.needsUpdate = true; } // Update llama // Check for faster falling when above water with feather if (window.hasReceivedFeather && llama.physicsBody.position.y > CONFIG.water.height) { // Apply stronger downward force llama.physicsBody.velocity.y -= 0.8; // Increased downward acceleration } // Move llama towards target point if it exists if (targetPoint) { llama.move(targetPoint, keysPressed.dive); // Check if we've reached the target const distance = new THREE.Vector3( targetPoint.x - llama.physicsBody.position.x, 0, targetPoint.z - llama.physicsBody.position.z ).length(); if (distance < 0.1) { targetPoint = null; // Clear target when reached } } else { // Ensure the llama comes to a complete stop llama.physicsBody.velocity.x *= 0.95; llama.physicsBody.velocity.z *= 0.95; } // Update camera to follow llama in third person const llamaPos = llama.group.position; function updateCamera() { const llamaPos = llama.group.position; const llamaRotation = llama.group.rotation.y; const cameraOffset = new THREE.Vector3( -Math.sin(llamaRotation) * 15, 8, -Math.cos(llamaRotation) * 15 ); const targetCameraPos = new THREE.Vector3( llamaPos.x - cameraOffset.x, llamaPos.y + cameraOffset.y, llamaPos.z - cameraOffset.z ); camera.position.lerp(targetCameraPos, 0.1); const lookAtPoint = new THREE.Vector3( llamaPos.x, llamaPos.y + 2, llamaPos.z ); camera.lookAt(lookAtPoint); controls.target.copy(lookAtPoint); controls.update(); } updateCamera(); } // Update bubble system bubbleSystem.update(deltaTime); // Update fish schools fishSchools.update(deltaTime); // Check for duck proximity and play sound ducks.forEach(duck => { const distanceToDuck = llama.group.position.distanceTo(duck.mesh.position); if (distanceToDuck < 8 && Math.random() < 0.05) { // 5% chance per frame when within 8 units // Add feather to inventory if not already given let hasReceivedFeather = window.hasReceivedFeather || false; if (!hasReceivedFeather && duck.hasGivenFeather === undefined) { const feather = document.createElement('div'); feather.className = 'inventory-heart special-item'; feather.innerHTML = '🪶'; inventoryContainer.appendChild(feather); duck.hasGivenFeather = true; window.hasReceivedFeather = true; // Show message for feather collection showBottomMessage("Quack! What are you doing down there? Take this golden feather and you will feel as light as air. 🪶", 3000, 'duck'); } // Play duck sound const duckSoundClone = window.duckSound.cloneNode(); duckSoundClone.volume = 0.9 * (1 - distanceToDuck / 8); // Volume decreases with distance duckSoundClone.play().catch(error => { console.warn('Duck sound playback was prevented:', error); }); } }); // Update ducks ducks.forEach(duck => { // Update duck movement const currentTime = Date.now(); // Check if it's time to change direction if (currentTime > duck.nextDirectionChange) { duck.targetAngle = Math.random() * Math.PI * 2; duck.nextDirectionChange = currentTime + 3000 + Math.random() * 4000; // Next change in 3-7 seconds } // Gradually turn towards target angle const angleDiff = (duck.targetAngle - duck.moveAngle + Math.PI * 3) % (Math.PI * 2) - Math.PI; duck.moveAngle += Math.sign(angleDiff) * Math.min(Math.abs(angleDiff), duck.turnSpeed); // Calculate new position const newX = duck.mesh.position.x + Math.cos(duck.moveAngle) * duck.moveSpeed; const newZ = duck.mesh.position.z + Math.sin(duck.moveAngle) * duck.moveSpeed; // Check if new position would be too far from center (radius of 50 units) const distanceFromCenter = Math.sqrt(newX * newX + newZ * newZ); if (distanceFromCenter < 50) { duck.mesh.position.x = newX; duck.mesh.position.z = newZ; } else { // Turn back towards center if too far duck.targetAngle = Math.atan2(-duck.mesh.position.z, -duck.mesh.position.x); } // Update duck rotation to face movement direction duck.mesh.rotation.y = -duck.moveAngle + Math.PI / 2; // Update floating animation duck.mesh.position.y = duck.initialY + Math.sin(time * duck.floatSpeed + duck.floatOffset) * duck.floatHeight; // Update wing animation const leftWing = duck.mesh.children[5]; // Left wing const rightWing = duck.mesh.children[6]; // Right wing const leftLeg = duck.mesh.children[8]; // Left leg const rightLeg = duck.mesh.children[9]; // Right leg const leftFoot = duck.mesh.children[10]; // Left foot const rightFoot = duck.mesh.children[11]; // Right foot const wingAngle = Math.sin(time * duck.mesh.userData.wingSpeed) * 0.2; leftWing.rotation.x = wingAngle; rightWing.rotation.x = wingAngle; // Add paddling motion to feet const paddleAngle = Math.sin(time * duck.mesh.userData.wingSpeed * 0.5) * 0.2; leftLeg.rotation.x = paddleAngle; rightLeg.rotation.x = -paddleAngle; leftFoot.rotation.x = paddleAngle; rightFoot.rotation.x = -paddleAngle; // Gentle rotation duck.mesh.rotation.y += 0.001; }); // Update crab animation and speech bubble if (crab) { crab.update(deltaTime); // Calculate distance between llama and crab for sound and interaction const distanceToCrab = llama.group.position.distanceTo(crab.group.position); // Randomly play crab sound when llama is near (within 10 units) if (distanceToCrab < 10 && Math.random() < 0.005 && crabSound) { // 0.5% chance per frame const crabSoundClone = crabSound.cloneNode(); crabSoundClone.volume = 0.6; crabSoundClone.play().catch(error => { console.warn('Crab sound playback was prevented:', error); }); } // Update speech bubble position const crabScreenPosition = new THREE.Vector3(); crab.group.getWorldPosition(crabScreenPosition); crabScreenPosition.project(camera); // Show speech bubble when llama is within range if (distanceToCrab < 10) { if (!crab.hasGivenFork) { // Create fork item in inventory const pearl = document.createElement('div'); pearl.className = 'inventory-heart special-item'; pearl.innerHTML = '🪩'; inventoryContainer.appendChild(pearl); crab.hasGivenFork = true; // Show message for pearl collection showBottomMessage("Take this beautiful shiny pearl! 🪩 It will guide you in the dark.", 3000, 'crab'); // Add glow effect to llama llama.group.traverse((child) => { if (child.isMesh && child.material) { child.material.emissive = new THREE.Color(0x6495ED); // Cornflower blue glow child.material.emissiveIntensity = 0.0; // Start with no glow } }); window.hasPearlGlow = true; // Track pearl collection state // Play crab sound if (crabSound) { const crabSoundClone = crabSound.cloneNode(); crabSoundClone.play().catch(error => { console.warn('Crab sound playback was prevented:', error); }); } } } } // Update sea plants seaPlants.forEach(plant => { plant.update(time); }); // Update water surface texture // Create a more complex water movement pattern const currentWaterTime = Date.now() * 0.001; waterSurfaceTexture.offset.x = Math.sin(currentWaterTime * 0.1) * 0.0001; waterSurfaceTexture.offset.y = Math.cos(currentWaterTime * 0.1) * 0.0001; // Update caustics if (causticsTexture) { causticsTexture.offset.x += 0.0002; // Reduced speed by 5x causticsTexture.offset.y += 0.0002; // Reduced speed by 5x // Simplified caustics effect if (camera.position.y < 15) { // Below water causticsMaterial.opacity = 0.15; // Reduced opacity for subtler effect } else { causticsMaterial.opacity = 0; } } // Update clouds clouds.forEach(cloud => { cloud.position.x += cloud.userData.speed * deltaTime; cloud.children.forEach(segment => { segment.material.opacity = Math.min(0.85, segment.material.opacity + 0.001); }); if (cloud.position.x > 200) cloud.position.x = -200; }); 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 if (smaaPass && typeof smaaPass.setSize === 'function') { smaaPass.setSize(width, height); } } // Add event listeners window.addEventListener('resize', onWindowResize); const resizeObserver = new ResizeObserver(onWindowResize); resizeObserver.observe(parentDiv); // Start animation animate(); // ========================= // Mobile Controls Integration // ========================= // Touch controls variables let lastTap = 0; const doubleTapThreshold = 300; // milliseconds let isTouching = false; let touchStartX = 0; let touchStartY = 0; // Add touch event handlers for mobile movement function initializeTouchControls(canvas, handlePointerEvent) { function handleTouchStart(event) { if (!event || !event.touches || !event.touches[0]) return; event.preventDefault(); isTouching = true; touchStartX = event.touches[0].clientX; touchStartY = event.touches[0].clientY; handlePointerEvent(event.touches[0].clientX, event.touches[0].clientY); } function handleTouchMove(event) { if (!event || !event.touches || !event.touches[0]) return; event.preventDefault(); if (!isTouching) return; handlePointerEvent(event.touches[0].clientX, event.touches[0].clientY); } function handleTouchEnd(event) { event.preventDefault(); isTouching = false; handleDoubleClick(); } canvas.addEventListener('touchstart', handleTouchStart, { passive: false }); canvas.addEventListener('touchmove', handleTouchMove, { passive: false }); canvas.addEventListener('touchend', handleTouchEnd, { passive: false }); } initializeTouchControls(canvas, handlePointerEvent); // Add double tap/click handler function handleDoubleClick() { const currentTime = Date.now(); const tapLength = currentTime - lastTap; if (tapLength < doubleTapThreshold && tapLength > 0) { if (window.hasReceivedFeather) { // Super jump behavior when feather is collected if (llama.physicsBody.position.y < CONFIG.water.height) { llama.physicsBody.velocity.set( llama.physicsBody.velocity.x * 2.5, // Boost horizontal speed 45, // Even higher upward velocity for super jump llama.physicsBody.velocity.z * 2.5 // Boost horizontal speed ); // Set a flag for fast falling llama.isFastFalling = true; } } else { if (keysPressed.dive) { // Only disable diving if currently diving keysPressed.dive = false; } } } lastTap = currentTime; } canvas.addEventListener('click', function(event) { if (!event) return; if (!isTouching && event.target === canvas) { if (event.clientX !== undefined && event.clientY !== undefined) { handlePointerEvent(event.clientX, event.clientY); handleDoubleClick(); } } }); // Inject CSS styles dynamically const styles = ` /* Base styles for responsiveness */ :root { --min-font: 18px; --min-button-height: 48px; --responsive-scale: clamp(1, 1vw, 1.5); } /* Completion Screen */ #completionScreen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, #87CEEB 0%, #E0F7FA 100%); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 3000; animation: fadeIn 1s ease-in; padding: 0; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .completion-content { background: rgba(255, 255, 255, 0.9); padding: min(40px, 5vw); text-align: center; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1); animation: popIn 0.5s ease-out; border-radius: 20px; font-family: "Georgia", serif; font-size: clamp(16px, 4vw, 18px); line-height: 1.5; width: clamp(300px, 40vw, 400px); margin: 0 20px; max-height: 90vh; overflow-y: auto; } #completionScreen .owl { width: 100px; height: 100px; margin-bottom: 20px; z-index: 3001; } .text-content { text-align: center; margin-bottom: 18px; } .completion-content h1 { color: #4CAF50; margin-bottom: min(20px, 4vw); font-size: clamp(24px, 6vw, 30px); word-wrap: break-word; } .owl img { width: 100%; height: 100%; object-fit: contain; animation: owlBob 2s infinite ease-in-out; } .completion-content .owl img { width: 100%; height: 100%; object-fit: contain; } /* Start Screen */ #startScreen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url('https://play.rosebud.ai/assets/nastara_Shimmering_sea_as_pixelart_illustration_seaweed_bubbl_9d4b3cd0-44e4-4229-8b70-5125c50d955c_3.png?Obvu') repeat-x; background-size: auto 100%; animation: scrollBackground 60s linear infinite; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 2000; } .owl-container { display: flex; flex-direction: column; align-items: center; } .air-bubble { width: 180px; height: 180px; background: url('https://play.rosebud.ai/assets/8bit pixel art air bubble.png?0BxQ') center center no-repeat; background-size: contain; display: flex; justify-content: center; align-items: center; animation: bubbleFloat 3s infinite ease-in-out; margin-bottom: -20px; position: relative; z-index: 2; } .owl { width: 120px; height: 120px; position: relative; z-index: 3; } @keyframes bubbleFloat { 0%, 100% { transform: translateY(0) rotate(2deg); } 50% { transform: translateY(-15px) rotate(-2deg); } } .owl img { width: 100%; height: 100%; object-fit: contain; } @keyframes owlBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .dialogue-box { background: rgba(255, 255, 255, 0.9); padding: clamp(20px, 3vw, 40px); width: clamp(300px, 40vw, 400px); border-radius: 20px; min-height: 160px; display: flex; align-items: center; justify-content: center; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1); cursor: default; transition: transform 0.2s; margin: 0 20px; } .dialogue-box { cursor: default; } .dialogue-text { font-family: 'Georgia', serif; font-size: clamp(18px, calc(18px + 0.5vw), 24px); line-height: 1.5; margin: 0 0 15px 0; color: #333; } #nextButton { background: #4CAF50; color: white; } .button-container { display: flex; flex-direction: column; gap: 4px; align-items: center; margin-top: 30px; } .game-button { padding: 15px 30px; font-size: clamp(18px, calc(18px + 0.5vw), 24px); font-family: 'Georgia', serif; border: none; cursor: pointer; transition: all 0.3s ease; box-shadow: 2px 2px 0 rgba(0, 0, 0, 1); min-height: 48px; width: clamp(300px, 40vw, 400px); display: flex; align-items: center; justify-content: center; background: #4CAF50; color: white; } .game-button:hover { transform: scale(1.05); background: #45a049; box-shadow: 6px 6px 0 rgba(0, 0, 0, 1); } .game-button.secondary { background: #2196F3; } .game-button.secondary:hover { transform: scale(1.05); background: #1976D2; box-shadow: 6px 6px 0 rgba(0, 0, 0, 1); } /* Inventory Container */ #inventoryContainer { position: fixed; top: 20px; left: 20px; display: flex; flex-wrap: wrap; gap: 10px; z-index: 1000; } .special-item { background: linear-gradient(45deg, #FFD700, #FFA500); border: 2px solid #FFD700; position: relative; cursor: help; } .special-item .item-icon { font-size: 1.2em; filter: drop-shadow(0 0 2px #FFF); } .special-item .item-tooltip { position: absolute; background: rgba(255, 255, 255, 0.8); color: black; padding: 5px 10px; border-radius: 5px; font-size: 12px; bottom: -30px; left: 50%; transform: translateX(-50%); white-space: nowrap; opacity: 0; transition: opacity 0.3s; pointer-events: none; } .special-item:hover .item-tooltip { opacity: 1; } .inventory-heart { width: clamp(48px, 5vw, 60px); height: clamp(48px, 5vw, 60px); background-color: rgba(255, 105, 180, 0.8); border-radius: 50%; display: flex; justify-content: center; align-items: center; animation: popIn 0.3s ease-out; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1); } @keyframes popIn { 0% { transform: scale(0); opacity: 0; } 70% { transform: scale(1.2); opacity: 0.7; } 100% { transform: scale(1); opacity: 1; } } @keyframes scrollBackground { from { background-position: 0 0; } to { background-position: -1920px 0; } } /* Removed duplicate button styles as they're now using .game-button class */ /* Time Display Styles */ .score-container { background: rgba(255, 255, 255, 0.9); padding: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); border-radius: 20px; } .score-container p { margin: 5px 0; font-size: 18px; color: #333; font-family: 'Georgia', serif; } .time { font-family: 'Georgia', serif; font-size: 18px; font-weight: bold; color: #4CAF50; } .new-record { color: #f57c00; animation: pulse 1s infinite; } .score-container.new-record { animation: newRecord 1s ease-in-out infinite; background: linear-gradient(45deg, #ffd700, #fff8e7); } .new-record-text { color: #ff4500; font-weight: bold; font-size: 24px; animation: pulse 1s infinite; } @keyframes newRecord { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } /* Score Board Styles */ .score-board { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 30px; z-index: 3002; } #scoreBoard { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, #87CEEB 0%, #E0F7FA 100%); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 3000; } .scoreboard-content { background: rgba(255, 255, 255, 1); font-family: 'Georgia', serif; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1); border-radius: 20px; width: clamp(300px, 40vw, 400px); padding: clamp(20px, 3vw, 40px); margin: 0 20px; } .scoreboard-content h2 { color: #4CAF50; margin-bottom: 20px; text-align: center; font-size: 32px; font-family: 'Georgia', serif; } .scores-list { margin: 20px; } .score-entry { display: flex; justify-content: space-between; align-items: center; padding: 15px; margin: 10px 0; background: rgba(255, 255, 255, 0.7); border-radius: 8px; font-size: 20px; transition: transform 0.2s; font-family: 'Georgia', serif; } .score-entry:hover { transform: scale(1.02); } .score-entry { background: rgba(76, 175, 80, 0.1); font-weight: bold; } .rank { color: #666; font-weight: bold; } .button-group { display: flex; flex-direction: column; gap: 15px; align-items: center; margin-top: 20px; } #showScoresButton { background: #2196F3; color: white; padding: 15px 30px; font-size: 18px; font-family: 'Georgia', serif; border: none; cursor: pointer; transition: all 0.3s ease; box-shadow: 2px 2px 0 rgba(0, 0, 0, 1); display: flex; align-items: center; justify-content: center; } #showScoresButton:hover { transform: scale(1.05); background: #1976D2; box-shadow: 6px 6px 0 rgba(0, 0, 0, 1); } .game-button { background: #4CAF50; color: white; padding: 15px; width: clamp(300px, 40vw, 400px); font-size: 18px; font-family: 'Georgia', serif; border: none; cursor: pointer; transition: all 0.3s ease; box-shadow: 2px 2px 0 rgba(0, 0, 0, 1); margin: 10px; min-height: 48px; display: flex; align-items: center; justify-content: center; } .game-button:hover { transform: scale(1.05); background: #45a049; box-shadow: 6px 6px 0 rgba(0, 0, 0, 1); } .game-button.secondary { background: #2196F3; } .game-button.secondary:hover { background: #1976D2; }`; // Add oxygen gauge styles const oxygenStyles = ` #oxygenContainer { position: fixed; top: 100px; right: 20px; z-index: 1000; display: flex; align-items: center; } #oxygenGauge { width: 80px; height: 80px; position: relative; background: url('https://play.rosebud.ai/assets/8bit pixel art air bubble.png?0BxQ') center center; background-size: cover; border-radius: 50%; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1); overflow: hidden; } #oxygenFill { position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(52, 152, 219, 0.7); transition: height 0.3s ease-out; backdrop-filter: blur(2px); border-radius: 0 0 40px 40px; } #oxygenValue { position: absolute; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: 'Arial', sans-serif; font-size: 20px; font-weight: bold; color: white; text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5); z-index: 1; } `; // Add game over screen styles const gameOverStyles = ` #gameOverScreen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, #87CEEB 0%, #E0F7FA 100%); display: flex; justify-content: center; align-items: center; z-index: 3000; animation: fadeIn 1s ease-in; } .game-over-content { background: rgba(255, 255, 255, 0.9); padding: clamp(20px, 3vw, 40px); text-align: center; border-radius: 20px; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1); animation: popIn 0.5s ease-out; font-family: 'Georgia', serif; width: clamp(300px, 40vw, 400px); margin: 0 20px; align-items: center; } #gameOverScreen .owl-container { display: flex; flex-direction: column; align-items: center; margin-bottom: 20px; } #gameOverScreen .air-bubble { width: 180px; height: 180px; background: url('https://play.rosebud.ai/assets/8bit pixel art air bubble.png?0BxQ') center center no-repeat; background-size: contain; display: flex; justify-content: center; align-items: center; animation: bubbleFloat 3s infinite ease-in-out; position: relative; z-index: 2; } #gameOverScreen .owl { width: 120px; height: 120px; position: relative; z-index: 3; } #gameOverScreen .owl img { width: 100%; height: 100%; object-fit: contain; animation: owlBob 2s infinite ease-in-out; } .game-over-content h1 { color: #FF6B6B; margin-bottom: 20px; font-size: 34px; } /* Removed duplicate button styles as they're now using .game-button class */ `; // Add bottom speech bubble styles const bottomSpeechBubbleStyles = ` .bottom-speech-bubble { position: relative; margin-bottom: 15px; } .bottom-speech-bubble::before { content: ''; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid rgba(255, 255, 255, 0.95); } .bottom-speech-bubble { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); background: rgba(255, 255, 255, 0.95); border-radius: 20px; padding: 20px 30px; font-family: 'Georgia', serif; font-size: clamp(18px, calc(18px + 0.5vw), 24px); color: #333; text-align: center; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); opacity: 0; transition: opacity 0.3s ease-in-out; .bottom-speech-bubble span { transition: opacity 0.3s ease-in-out; } z-index: 2000; pointer-events: none; width: clamp(300px, 40vw, 400px); display: flex; align-items: center; justify-content: center; gap: 10px; } .bottom-speech-bubble.show { opacity: 1; } `; const finalStyles = styles + oxygenStyles + gameOverStyles + bottomSpeechBubbleStyles + ";"; // Append the styles to the head const styleSheet = document.createElement("style"); styleSheet.type = "text/css"; styleSheet.innerText = finalStyles; document.head.appendChild(styleSheet); // Create oxygen gauge container const oxygenContainer = document.createElement('div'); oxygenContainer.id = 'oxygenContainer'; // Create gauge element const oxygenGauge = document.createElement('div'); oxygenGauge.id = 'oxygenGauge'; // Create circular progress const oxygenFill = document.createElement('div'); oxygenFill.id = 'oxygenFill'; // Create value display const oxygenValue = document.createElement('div'); oxygenValue.id = 'oxygenValue'; oxygenGauge.appendChild(oxygenFill); oxygenGauge.appendChild(oxygenValue); oxygenContainer.appendChild(oxygenGauge); parentDiv.appendChild(oxygenContainer); // Function to show bottom message function showBottomMessage(messages, duration = 3000, characterType = null) { // Ensure messages is an array const messageArray = Array.isArray(messages) ? messages : [messages]; if (messageArray.length === 0) return; // Remove any existing bottom speech bubbles const existingBubbles = document.querySelectorAll('.bottom-speech-bubble'); existingBubbles.forEach(bubble => bubble.remove()); // Create new speech bubble const bubble = document.createElement('div'); bubble.className = 'bottom-speech-bubble'; // Add tip element const tip = document.createElement('div'); tip.className = 'speech-bubble-tip'; bubble.appendChild(tip); // Create message container const messageText = document.createElement('span'); messageText.textContent = messageArray[0]; // Create and add the character image based on type if (characterType) { const characterImage = document.createElement('img'); characterImage.style.display = 'block'; characterImage.style.flexShrink = '0'; if (characterType === 'crab') { characterImage.src = 'https://play.rosebud.ai/assets/PSX_20250220_090912.png?Q5Ay'; characterImage.alt = 'Pixel Crab'; characterImage.style.width = 'auto'; characterImage.style.height = 'auto'; characterImage.style.maxWidth = '50px'; characterImage.style.maxHeight = '50px'; characterImage.style.objectFit = 'contain'; } else if (characterType === 'duck') { characterImage.src = 'https://rosebud.ai/assets/duck.png?Qdx5'; characterImage.alt = 'Cute Duck'; characterImage.style.width = 'auto'; characterImage.style.height = 'auto'; characterImage.style.maxWidth = '60px'; characterImage.style.maxHeight = '60px'; characterImage.style.objectFit = 'contain'; } bubble.appendChild(characterImage); bubble.appendChild(messageText); } else { bubble.appendChild(messageText); } parentDiv.appendChild(bubble); // Show the bubble requestAnimationFrame(() => { bubble.classList.add('show'); }); let currentMessageIndex = 0; function showNextMessage() { currentMessageIndex++; if (currentMessageIndex < messageArray.length) { // Fade out current message messageText.style.opacity = '0'; // Change text and fade in after a short delay setTimeout(() => { messageText.textContent = messageArray[currentMessageIndex]; messageText.style.opacity = '1'; // Schedule next message or removal setTimeout(() => { if (currentMessageIndex === messageArray.length - 1) { // Last message, remove bubble bubble.classList.remove('show'); setTimeout(() => bubble.remove(), 300); } else { showNextMessage(); } }, duration); }, 300); } } // Schedule first transition if (messageArray.length > 1) { setTimeout(() => showNextMessage(), duration); } else { // Single message case setTimeout(() => { bubble.classList.remove('show'); setTimeout(() => bubble.remove(), 300); }, duration); } } // Add event listeners for score board document.addEventListener('click', function(e) { if (e.target.id === 'showScoresButton') { // Create and show the separate score board screen const scoreBoard = document.createElement('div'); scoreBoard.id = 'scoreBoard'; scoreBoard.innerHTML = `

Top 5 Times

${window.highScores.map((time, index) => { const mins = Math.floor(time / 60); const secs = Math.floor(time % 60); const timeStr = `${mins}:${secs.toString().padStart(2, '0')}`; return `

#${index + 1} ${timeStr}

`; }).join('')}

`; document.body.appendChild(scoreBoard); // Hide completion screen document.getElementById('completionScreen').style.display = 'none'; } else if (e.target.id === 'closeScoreboardButton') { // Show completion screen again const completionScreen = document.getElementById('completionScreen'); if (completionScreen) { completionScreen.style.display = 'flex'; } // Remove score board const scoreBoard = document.getElementById('scoreBoard'); if (scoreBoard) { scoreBoard.remove(); } } }); const keysPressed = { dive: false, lastDiveToggle: Date.now() // Add timestamp to prevent rapid toggling }; window.keysPressed = keysPressed; // Make it globally available // ========================= // End of Mobile and Keyboard Controls Integration // ========================