import * as THREE from 'three'; import * as CANNON from 'https://cdn.jsdelivr.net/npm/cannon-es@0.20.0/dist/cannon-es.js'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { SAOPass } from 'three/addons/postprocessing/SAOPass.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'; import * as BufferGeometryUtils from 'three/addons/utils/BufferGeometryUtils.js'; const GAME_CONFIG = { GAME_DURATION: 3 * 60, // 3 minutes in seconds ZONES: { GROUND: { min: 0, max: 40, lightIntensity: 1.0, fogColor: 0x87CEEB, fogDensity: 0.001, ambientLight: 0.6 }, SKY: { min: 40, max: 150, lightIntensity: 0.8, transitionStart: 120, transitionEnd: 150, fogColor: 0xB0E2FF, fogDensity: 0.002, ambientLight: 0.5 }, SPACE: { min: 150, max: Infinity, lightIntensity: 0.3, starIntensity: 1.0, ambientLight: 0.2, fogColor: 0x000033, fogDensity: 0.001 } }, BOUNDARY: 300, DEBUG: false }; const globals = { THREE, CANNON, OrbitControls, EffectComposer, RenderPass, UnrealBloomPass, SMAAPass, BufferGeometryUtils }; Object.assign(window, globals); let assetsLoaded = false; import { ShootingStar } from 'https://play.rosebud.ai/assets/shootingstar_external.js?gRSc'; import { Llama } from 'https://play.rosebud.ai/assets/Llama_external.js?vNnm'; import { Pigeon } from 'https://play.rosebud.ai/assets/Pigeon_external.js?je6V'; import { Rainbow } from 'https://play.rosebud.ai/assets/Rainbow_external.js?zxic'; import { WindySpot } from 'https://play.rosebud.ai/assets/WindySpot_external.js?ZypR'; import { Duck } from 'https://play.rosebud.ai/assets/Duck_lvl3_external.js?JSa5'; import { Owl } from 'https://rosebud.ai/assets/Owl_external.js?dDyQ'; import { Cloud } from 'https://play.rosebud.ai/assets/Cloud_external.js?R1Qt'; import { Balloon } from 'https://rosebud.ai/assets/Balloon_external.js?Nb9N'; import { Butterfly } from 'https://rosebud.ai/assets/Butterfly_external.js?5XFV'; import { Jetpack } from 'https://rosebud.ai/assets/Jetpack_external.js?Cw8U'; window.owlDialogueTriggered = false; const parentDiv = document.getElementById('renderDiv'); const startScreen = document.createElement('div'); startScreen.id = 'startScreen'; // Set start screen content startScreen.innerHTML = `

`; parentDiv.appendChild(startScreen); window.canvas = document.createElement('canvas'); window.canvas.id = 'threeRenderCanvas'; parentDiv.appendChild(window.canvas); const inventoryContainer = document.createElement('div'); inventoryContainer.id = 'inventoryContainer'; parentDiv.appendChild(inventoryContainer); window.spaceLlamaInteracted = false; window.currentScore = 0; let highScore = parseInt(localStorage.getItem('highScore')) || 0; let topScores = JSON.parse(localStorage.getItem('topScores')) || []; let gameStartTime = 0; let gameTimer = GAME_CONFIG.GAME_DURATION; window.totalCollectibles = 0; window.totalCollected = 0; let completionScreen = null; let isCompletionScreenShown = false; let timerDisplay = document.createElement('div'); timerDisplay.id = 'timerDisplay'; timerDisplay.style.position = 'fixed'; timerDisplay.style.top = '50px'; timerDisplay.style.right = '20px'; timerDisplay.style.padding = '10px'; timerDisplay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; timerDisplay.style.color = 'white'; timerDisplay.style.borderRadius = '5px'; timerDisplay.style.fontSize = '24px'; timerDisplay.style.display = 'none'; parentDiv.appendChild(timerDisplay); // Remove redundant assignment window.createParticleSystem = createParticleSystem; window.addHeartToInventory = addHeartToInventory; function addHeartToInventory(type) { const heart = document.createElement('div'); heart.className = 'inventory-heart'; heart.innerHTML = type === 'duck' ? '🦆' : '🕊️'; inventoryContainer.appendChild(heart); totalCollected += 1; } // Initialize lighting state let lastTime = Date.now(); // Define time periods and their lighting settings const timePeriods = { sunrise: { skyTop: new THREE.Color(0x1E4877), // Dark blue skyBottom: new THREE.Color(0xFF9966), // Warm orange sunLight: new THREE.Color(0xFFB74D), // Warm sunrise intensity: 1.0, ambientLight: new THREE.Color(0x666666) }, morning: { skyTop: new THREE.Color(0x6CB4EE), // Softer light blue skyBottom: new THREE.Color(0xD4E6F1), // Softer white-blue sunLight: new THREE.Color(0xFFF5E1), // Softer warm morning sun intensity: 1.8, ambientLight: new THREE.Color(0x7A8B99) }, noon: { skyTop: new THREE.Color(0x4682B4), // Softer deep sky blue skyBottom: new THREE.Color(0x87CEEB), // Light sky blue sunLight: new THREE.Color(0xFFFAF0), // Softer white intensity: 2.0, ambientLight: new THREE.Color(0xCCDDEE) }, evening: { skyTop: new THREE.Color(0x1E4877), // Dark blue skyBottom: new THREE.Color(0xFFA07A), // Light salmon sunLight: new THREE.Color(0xFFB74D), // Warm evening sun intensity: 2.0, ambientLight: new THREE.Color(0x8899AA) }, sunset: { skyTop: new THREE.Color(0x1E4877), // Dark blue skyBottom: new THREE.Color(0xFF4500), // Orange red sunLight: new THREE.Color(0xFF8C00), // Dark orange intensity: 1.0, ambientLight: new THREE.Color(0x666666) }, night: { skyTop: new THREE.Color(0x000033), // Very dark blue skyBottom: new THREE.Color(0x000066), // Dark blue sunLight: new THREE.Color(0x3333AA), // Moon light intensity: 0.5, ambientLight: new THREE.Color(0x222222) } }; // Game state initialization window.gameStarted = false; // Dialogue system const dialogueLines = [ "Hello there, brave explorer! I'm Professor Hoot! 🦉 Welcome to our magical world of whimsical winds!", "Click or tap anywhere to move, use windy spots 🌪️ to soar into the sky and make friends along the way!", "Keep your eyes bright for the gentle-hearted pigeons in the sky 🕊️🌈 and the playful ducks soaring through the clouds 🦆☁️.", "Nature's moods can be tricky - watch out for thunderous storms and gentle rain that might slow your joyful journey ⛈️.", "As you venture higher, the cosmic wonders of space await your discovery ✨. And who knows? Our paths might cross again.", "You have 3 minutes to explore and make as many friends as you can!⌛ Your magical journey awaits - are you ready for adventure?" ]; let currentDialogueLine = 0; let isTyping = false; const typingSpeed = 20; // milliseconds per character function typeDialogue(text, element) { let index = 0; isTyping = true; 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 startScreen.style.display = 'flex'; // Show tutorial screen immediately document.getElementById('startButton').addEventListener('click', () => { if (!window.gameStarted) { window.gameStarted = true; startScreen.style.display = 'none'; timerDisplay.style.display = 'block'; } gameStartTime = Date.now(); gameTimer = GAME_CONFIG.GAME_DURATION; // Start background music here if (window.backgroundMusic) { window.backgroundMusic = backgroundMusic; window.backgroundMusic.play().catch((error) => { console.warn('Autoplay was prevented. User interaction is required to play the background music.'); }); } }); // Initialize asset loading system const loadingManager = new THREE.LoadingManager(); const textureLoader = new THREE.TextureLoader(loadingManager); // 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.style.display = 'none'; loadingScreen.innerHTML = 'Loading... 0%'; parentDiv.appendChild(loadingScreen); // Initialize audio system const AudioSystem = { sounds: {}, init() { this.sounds = { hoot: { element: new Audio('https://play.rosebud.ai/assets/hoot.mp3?RUFR'), config: { volume: 0.5 } }, background: { element: new Audio('https://play.rosebud.ai/assets/735354__vrymaa__exspirare-dreamy-loop.mp3?eZhX'), config: { loop: true, volume: 0.2 } }, thrusters: { element: new Audio('https://play.rosebud.ai/assets/thrusters.mp3?jpVm'), config: { loop: true, volume: 0.3 } }, thunder: { element: new Audio('https://play.rosebud.ai/assets/678364__msx2plus__synthesized-thunder.mp3?xqdA'), config: { volume: 1.0 } }, rain: { element: new Audio('https://play.rosebud.ai/assets/happyLlama_rain.mp3?cI4G'), config: { loop: true, volume: 0 } }, quack: { element: new Audio('https://play.rosebud.ai/assets/418509_5632532-lq.mp3?WvJR'), config: { volume: 0.5 } }, wind: { element: new Audio('https://rosebud.ai/assets/737682__thelittlecrow__ambient-wind.mp3?Htzd'), config: { loop: true, volume: 0 } }, victory: { element: new Audio('https://rosebud.ai/assets/438901__yellowtree__ambient-loop.mp3?WJFO'), config: { volume: 0.3 } }, sonar: { element: new Audio('https://play.rosebud.ai/assets/389768__buzbe20__sonar-beeping-echo.mp3?k8L2'), config: { volume: 0.5 } } }; // Initialize all sounds Object.entries(this.sounds).forEach(([key, sound]) => { Object.assign(sound.element, sound.config); sound.element.load(); }); // Set up global references window.backgroundMusic = this.sounds.background.element; window.thunderSound = this.sounds.thunder.element; window.rainSound = this.sounds.rain.element; window.quackSound = this.sounds.quack.element; window.windSound = this.sounds.wind.element; window.victoryMusic = this.sounds.victory.element; window.sonarSound = this.sounds.sonar.element; window.thrustersSound = this.sounds.thrusters.element; window.hootSound = this.sounds.hoot.element; }, play(soundName, options = {}) { const sound = this.sounds[soundName]?.element; if (!sound) return; if (options.resetTime) sound.currentTime = 0; if (options.volume !== undefined) sound.volume = options.volume; sound.play().catch(error => console.warn(`${soundName} playback prevented:`, error)); }, stop(soundName) { const sound = this.sounds[soundName]?.element; if (!sound) return; sound.pause(); sound.currentTime = 0; } }; // Sound control variables let lastQuackTime = 0; const quackCooldown = 3000; const quackMinDistance = 10; const quackChance = 0.02; // Loading manager events loadingManager.onProgress = function(url, itemsLoaded, itemsTotal) { const progress = ((itemsLoaded / itemsTotal) * 100).toFixed(0); loadingScreen.style.display = 'block'; loadingScreen.innerHTML = `Loading... ${progress}%`; }; loadingManager.onLoad = function() { assetsLoaded = true; // Immediately hide loading screen loadingScreen.style.display = 'none'; loadingScreen.remove(); // Completely remove loading screen from DOM // Ensure tutorial screen is visible startScreen.style.display = 'flex'; // Start the dialogue when assets are loaded typeDialogue(dialogueLines[0], document.querySelector('.dialogue-text')); // Initialize audio system AudioSystem.init(); // Start background music (will require user interaction) setTimeout(() => AudioSystem.play('background'), 100); // Start wind sound with fade-in capability AudioSystem.play('wind'); // Ensure continuous wind sound setInterval(() => { if (AudioSystem.sounds.wind.element.paused) { AudioSystem.play('wind'); } }, 1000); }; // Initialize global scene variable window.scene = new THREE.Scene(); // Add createParticleSystem function function createParticleSystem(position) { const particleCount = 6; // Create heart geometry only once and reuse it const heartShape = new THREE.Shape(); // Draw heart shape path heartShape.moveTo(0, 0); heartShape.bezierCurveTo(-0.25, 0.25, -0.5, 0.15, -0.3, -0.2); heartShape.bezierCurveTo(0, -0.3, 0, -0.3, 0, -0.3); heartShape.bezierCurveTo(0, -0.3, 0, -0.3, 0.3, -0.2); heartShape.bezierCurveTo(0.5, 0.15, 0.25, 0.25, 0, 0); const extrudeSettings = { steps: 1, depth: 0.1, bevelEnabled: false }; const heartGeometry = new THREE.ExtrudeGeometry(heartShape, extrudeSettings); heartGeometry.scale(1.2, 1.2, 1.2); heartGeometry.rotateX(Math.PI / 4); // Rotate to face camera const material = new THREE.MeshStandardMaterial({ color: 0xff69b4, emissive: 0xff1493, emissiveIntensity: 0.5, transparent: true, opacity: 0.8, side: THREE.DoubleSide }); const hearts = new THREE.Group(); hearts.frustumCulled = true; for (let i = 0; i < particleCount; i++) { const heart = new THREE.Mesh(heartGeometry, material.clone()); heart.position.copy(position); heart.userData.velocity = { x: (Math.random() - 0.5) * 0.8, y: Math.random() * 1.8 + 0.6, z: (Math.random() - 0.5) * 0.8 }; heart.rotation.y = Math.random() * Math.PI * 2; hearts.add(heart); } hearts.userData.startTime = Date.now(); hearts.userData.duration = 1000; // Ensure the group is removed after animation setTimeout(() => { scene.remove(hearts); hearts.children.forEach(heart => { heart.geometry.dispose(); heart.material.dispose(); }); }, hearts.userData.duration); scene.add(hearts); return hearts; } // Companion Class (external) const world = new CANNON.World({ gravity: new CANNON.Vec3(0, -9.82, 0) }); window.world = world; window.windSpots = []; window.keysPressed = { jump: false, space: false }; window.activeMarkers = []; world.broadphase = new CANNON.NaiveBroadphase(); world.solver.iterations = 20; // Increased for better collision resolution // Create WindySpot class // Define zones directly from GAME_CONFIG window.ZONES = GAME_CONFIG.ZONES; // Create wind spots at different heights new WindySpot(0, 5, 0, 25, 450); // Ground level wind spot // Create owl instance in sky zone, positioned farther from start window.parentDiv = parentDiv; // Make parentDiv globally accessible const owl = new Owl(scene, new THREE.Vector3(30, 90, -40)); // Create a small cloud below the owl const owlCloud = new Cloud('low'); owlCloud.setPosition(30, 85, -40); // Position slightly below owl's initial position owlCloud.setScale(1.5); // Small scale for the cloud owlCloud.cloudMaterial.opacity = 0.7; // Semi-transparent scene.add(owlCloud.group); new WindySpot(75, 50, -20, 40, 1800); // Mid-height wind spot with increased radius and strength new WindySpot(150, 110, 100, 45, 2200); // High-altitude wind spot with increased radius and strength new WindySpot(0, 35, -150, 35, 1600); // Behind-rainbow wind spot with moderate strength world.defaultContactMaterial = new CANNON.ContactMaterial( new CANNON.Material(), new CANNON.Material(), { friction: 0.1, // Reduced friction restitution: 0.4, // Slight bounce contactEquationStiffness: 1e6, // Increased stiffness contactEquationRelaxation: 3 // Adjusted relaxation } ); // Create pigeon instances const pigeons = []; // Create initial pigeon const pigeon = new Pigeon(scene, new THREE.Vector3(20, 5, 20)); pigeons.push(pigeon); totalCollectibles += 1; // Add to total collectibles count // Create 5 additional pigeons with random positions for (let i = 0; i < 5; i++) { // Generate random coordinates within reasonable bounds const x = (Math.random() - 0.5) * 200; // Random x position between -100 and 100 const y = 5 + Math.random() * 10; // Random height between 5 and 15 const z = (Math.random() - 0.5) * 200; // Random z position between -100 and 100 // Create new pigeon with random position const newPigeon = new Pigeon(scene, new THREE.Vector3(x, y, z)); pigeons.push(newPigeon); } // Create ducks const ducks = []; // Add flying ducks in sky zone // Add ducks at various heights in the sky zone const numberOfDucks = 8; // Total number of ducks to create for (let i = 0; i < numberOfDucks; i++) { const x = (Math.random() - 0.5) * GAME_CONFIG.BOUNDARY * 0.8; // Random X within 80% of boundary const z = (Math.random() - 0.5) * GAME_CONFIG.BOUNDARY * 0.8; // Random Z within 80% of boundary // Random height within sky zone, ensuring good vertical distribution const heightSection = (ZONES.SKY.max - ZONES.SKY.min) / numberOfDucks; const baseHeight = ZONES.SKY.min + (heightSection * i); const y = baseHeight + (Math.random() * heightSection); ducks.push(new Duck(x, y, z, true)); totalCollectibles += 1; // Add to total collectibles count } // Add ducks to the scene ducks.forEach(duck => { scene.add(duck.mesh); duck.mesh.userData.isCollectible = true; }); // Clock for animation window.clock = new THREE.Clock(); // Initialize the camera const camera = new THREE.PerspectiveCamera( 60, canvas.offsetWidth / canvas.offsetHeight, 0.1, 1000 ); camera.position.set(0, 50, 40); // Set initial position high above ground camera.lookAt(0, 0, 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(window.scene, camera); composer.addPass(renderPass); // Remove SAOPass as it's not needed // Add bloom effect const bloomPass = new UnrealBloomPass( new THREE.Vector2(window.innerWidth, window.innerHeight), 0.4, // bloom strength 0.5, // radius 0.85 // threshold ); composer.addPass(bloomPass); window.bloomPass = bloomPass; // Store reference for resize handler // Add anti-aliasing const smaaPass = new SMAAPass( window.innerWidth * renderer.getPixelRatio(), window.innerHeight * renderer.getPixelRatio() ); composer.addPass(smaaPass); // Initialize composer size composer.setSize(parentDiv.clientWidth, parentDiv.clientHeight); // Define sky colors for environmental lighting const skyColor = new THREE.Color(0x87CEEB); // Bright sky blue const groundColor = new THREE.Color(0xFFE87C); // Sunny yellow // Set scene background color scene.background = new THREE.Color(0x87CEEB); // 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 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: new THREE.Color(0x1E90FF) // Deep sky blue at top }, bottomColor: { value: new THREE.Color(0x87CEEB) // Light sky blue at horizon }, offset: { value: 20 // Adjusted for more gradual blend }, exponent: { value: 0.5 // Softer transition }, }; 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); // 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 = 15; controls.maxDistance = 120; // Increased max camera distance for better view of larger area controls.enableRotate = true; // Disable manual rotation / aktiviert controls.enableZoom = false; // Disable zooming // Create flat terrain function createTerrain() { const size = 800; // Increased terrain size to match larger boundary // Create simple flat plane for visuals const geometry = new THREE.PlaneGeometry(size, size, 20, 20); // Added more segments for better detail // Use pixel sky texture instead of non-existent transparent bg const texture = textureLoader.load('https://play.rosebud.ai/assets/Transparent-bg.png?eVF1'); // Set texture parameters texture.wrapS = texture.wrapT = THREE.RepeatWrapping; texture.repeat.set(200, 200); // Increased repeat for smaller texture texture.encoding = THREE.sRGBEncoding; texture.magFilter = THREE.NearestFilter; // Better for pixel art textures texture.minFilter = THREE.NearestFilter; const material = new THREE.MeshStandardMaterial({ map: texture, transparent: true, opacity: 1.0, alphaTest: 0.1, depthWrite: true, color: new THREE.Color(0xFFFFFF), side: THREE.DoubleSide, roughness: 0.5, metalness: 0.0 }); const terrain = new THREE.Mesh(geometry, material); window.terrain = terrain; terrain.rotation.x = -Math.PI / 2; terrain.receiveShadow = true; scene.add(terrain); return terrain; } // Setup enhanced lighting system const sunLight = new THREE.DirectionalLight(0xFFFACD, 3.0); // Warm sunlight color 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 = 800; sunLight.shadow.camera.left = -400; sunLight.shadow.camera.right = 400; sunLight.shadow.camera.top = 400; sunLight.shadow.camera.bottom = -400; sunLight.shadow.bias = -0.001; sunLight.shadow.normalBias = 0.02; scene.add(sunLight); // Cloud class definition window.Cloud = Cloud; // Create a cloud below the wind spot const windSpotCloud = new Cloud('low'); windSpotCloud.setPosition(0, -5, 0); // Position below the wind spot windSpotCloud.setScale(4); // Larger scale for better visibility windSpotCloud.cloudMaterial.opacity = 0.9; // More opaque for better visibility scene.add(windSpotCloud.group); // Butterfly class definition // Create single butterfly const butterflies = []; const x = (Math.random() - 0.5) * GAME_CONFIG.BOUNDARY * 0.8; const y = ZONES.GROUND.min + Math.random() * (ZONES.SKY.min - ZONES.GROUND.min) * 0.8; const z = (Math.random() - 0.5) * GAME_CONFIG.BOUNDARY * 0.8; const butterfly = new Butterfly(new THREE.Vector3(x, y, z)); butterflies.push(butterfly); // Create stars function createStars() { const starGeometry = new THREE.BufferGeometry(); const starCount = 1000; const positions = new Float32Array(starCount * 3); const sizes = new Float32Array(starCount); for (let i = 0; i < starCount; i++) { const i3 = i * 3; // Position stars in a dome shape const radius = 400; const theta = Math.random() * Math.PI * 2; const phi = Math.random() * Math.PI * 0.5; positions[i3] = radius * Math.sin(phi) * Math.cos(theta); positions[i3 + 1] = radius * Math.cos(phi); positions[i3 + 2] = radius * Math.sin(phi) * Math.sin(theta); sizes[i] = Math.random() * 2; } starGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); starGeometry.setAttribute('size', new THREE.BufferAttribute(sizes, 1)); const starMaterial = new THREE.PointsMaterial({ color: 0xffffff, sizeAttenuation: true, transparent: true, opacity: 0, size: 0.5 }); const stars = new THREE.Points(starGeometry, starMaterial); return stars; } // Create shooting stars system (now external file) // Create shooting stars array const shootingStars = []; const maxShootingStars = 5; const initShootingStars = () => { for (let i = 0; i < maxShootingStars; i++) { const shootingStar = new ShootingStar(); scene.add(shootingStar.line); shootingStars.push(shootingStar); } }; initShootingStars(); // Add hemisphere light for ambient illumination // Scene lighting setup const hemiLight = new THREE.HemisphereLight(0x87CEEB, 0xFFE87C, 1.2); const ambientLight = new THREE.AmbientLight(0xFFFAF0, 0.6); scene.add(hemiLight, ambientLight); // Create initial scene // Create environmental elements placeholder function createEnvironmentalElements() { // Other environmental elements can be added here if needed } // Add environmental elements // Add clouds using the Cloud class const clouds = new THREE.Group(); // Create high clouds for (let i = 0; i < 30; i++) { // Increased number of clouds const cloud = new Cloud('high'); cloud.setPosition( (Math.random() - 0.5) * GAME_CONFIG.BOUNDARY * 1.8, // Spread across playable area ZONES.SKY.min + Math.random() * (ZONES.SKY.max - ZONES.SKY.min) * 0.8, // Position within sky zone (Math.random() - 0.5) * GAME_CONFIG.BOUNDARY * 1.8 ); cloud.setScale(2 + Math.random() * 3); clouds.add(cloud.group); // Store a reference to the cloud instance for updates cloud.group.userData = { cloudInstance: cloud }; } // Create low-floating clouds for (let i = 0; i < 20; i++) { // Increased number of low clouds const cloud = new Cloud('low'); cloud.setPosition( (Math.random() - 0.5) * GAME_CONFIG.BOUNDARY * 1.6, ZONES.GROUND.max * 0.3 + Math.random() * (ZONES.SKY.min * 0.4), // Lower altitude spread (Math.random() - 0.5) * GAME_CONFIG.BOUNDARY * 1.6 ); cloud.setScale(1.5 + Math.random() * 2); clouds.add(cloud.group); // Store a reference to the cloud instance for updates cloud.group.userData = { cloudInstance: cloud }; } // Create underground clouds for (let i = 0; i < 15; i++) { // Increased number of underground clouds const cloud = new Cloud('underground'); cloud.setPosition( (Math.random() - 0.5) * GAME_CONFIG.BOUNDARY * 1.4, -2 - Math.random() * ZONES.GROUND.max * 0.2, // Slight underground positioning (Math.random() - 0.5) * GAME_CONFIG.BOUNDARY * 1.4 ); cloud.setScale(2 + Math.random() * 2.5); clouds.add(cloud.group); // Store a reference to the cloud instance for updates cloud.group.userData = { cloudInstance: cloud }; } scene.add(clouds); // Add stars const stars = createStars(); scene.add(stars); // Create trees and other elements after scene is initialized if (window.scene) { window.terrain = createTerrain(); } // Create ground physics body // Create Rainbow instance (singleton) if (!window.rainbowInstance) { window.rainbowInstance = new Rainbow(scene); } const rainbowInstance = window.rainbowInstance; const groundMaterial = new CANNON.Material('groundMaterial'); const groundShape = new CANNON.Plane(); const groundBody = new CANNON.Body({ mass: 0, material: groundMaterial, collisionFilterGroup: 1, collisionFilterMask: 1 }); groundBody.addShape(groundShape); groundBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), -Math.PI / 2); // Add small margin to prevent clipping groundBody.position.y = -0.01; world.addBody(groundBody); // Llama class definition (external) // World already assigned at line 692 // Create lightweight llama instance const llama = new Llama(); // Main playable llama // Create space llama const spaceLlama = new Llama(); spaceLlama.physicsBody.mass = 0.1; // Lower mass for space environment spaceLlama.physicsBody.linearDamping = 0.2; // Less damping in space spaceLlama.physicsBody.angularDamping = 0.4; spaceLlama.physicsBody.position.set(20, ZONES.SPACE.min + 10, 20); // Position in space zone spaceLlama.group.scale.set(0.8, 0.8, 0.8); // Slightly smaller scale const helmetGroup = new THREE.Group(); const helmetGeometry = new THREE.BoxGeometry(2.3, 2.3, 2.3); const helmetMaterial = new THREE.MeshStandardMaterial({ color: 0xFFFFFF, metalness: 0.8, roughness: 0.2, transparent: true, opacity: 0.8 }); const helmet = new THREE.Mesh(helmetGeometry, helmetMaterial); // Create visor (front face) const visorGeometry = new THREE.BoxGeometry(2, 1.8, 0.1); const visorMaterial = new THREE.MeshStandardMaterial({ color: 0x4499FF, metalness: 0.9, roughness: 0.1, transparent: true, opacity: 0.6 }); const visor = new THREE.Mesh(visorGeometry, visorMaterial); visor.position.z = 1; // Create neck ring const neckRingGeometry = new THREE.CylinderGeometry(1.2, 1.1, 0.3, 8); const neckRingMaterial = new THREE.MeshStandardMaterial({ color: 0xCCCCCC, metalness: 0.8, roughness: 0.2 }); const neckRing = new THREE.Mesh(neckRingGeometry, neckRingMaterial); neckRing.position.y = -1; // Add all parts to helmet group helmetGroup.add(helmet); helmetGroup.add(visor); helmetGroup.add(neckRing); // Position helmet on space llama's head helmetGroup.position.set(0, 5.4, -1.35); // Adjust these values to fit the llama's head helmetGroup.rotation.x = 0.2; // Slight tilt forward // Add helmet to space llama spaceLlama.group.add(helmetGroup); llama.physicsBody.mass = 0.1; // Reduce mass from default llama.physicsBody.linearDamping = 0.2; // Reduced air resistance llama.physicsBody.angularDamping = 0.3; // Reduced rotational damping window.llama = llama; // Create belt for llama (initial equipment) const beltGeometry = new THREE.CylinderGeometry(1.4, 1.2, 0.2, 10, 0.5); // Significantly reduced radius and height const beltMaterial = new THREE.MeshStandardMaterial({ color: 0x4A3C31, // Brown color for leather-like appearance roughness: 0.8, metalness: 0.1, side: THREE.DoubleSide, // Ensure both sides are visible flatShading: true // Enable flat shading for low-poly look }); const belt = new THREE.Mesh(beltGeometry, beltMaterial); belt.position.y = 2.8; // Position even higher on llama's body belt.position.z = 0; // Center on the llama belt.rotation.x = Math.PI / 2; // Rotate to be horizontal llama.group.add(belt); // Add belt to llama's group // Balloon class definition // Create balloons with different colors const balloonColors = [ 0xff0000, // Red 0x00ff00, // Green 0x0000ff, // Blue 0xffff00, // Yellow 0xff00ff // Purple ]; let balloons = balloonColors.map((color, index) => new Balloon(llama, color, index)); window.balloons = balloons; // Make balloons accessible globally // Create companions // Animation loop // Initialize raycaster and target point const raycaster = new THREE.Raycaster(); const mouse = new THREE.Vector2(); window.targetPoint = null; window.targetMarker = null; // Initialize target marker window.activeMarkers = []; // Array to track active markers // 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.intersectObject(terrain); if (intersects.length > 0) { createMarker(intersects[0].point); window.targetPoint = intersects[0].point; } } // Add click event listener canvas.addEventListener('click', (event) => { handlePointerEvent(event.clientX, event.clientY); }); function animate() { requestAnimationFrame(animate); // Update particle effects if they exist scene.children.forEach(child => { if (child instanceof THREE.Group && child.userData.startTime) { const age = Date.now() - child.userData.startTime; const progress = age / child.userData.duration; if (progress <= 1) { child.children.forEach(heart => { // Update position based on velocity heart.position.x += heart.userData.velocity.x; heart.position.y += heart.userData.velocity.y; heart.position.z += heart.userData.velocity.z; // Add rotation heart.rotation.y += 0.1; // Update opacity heart.material.opacity = 1 - progress; // Slow down vertical velocity (gravity effect) heart.userData.velocity.y -= 0.05; }); } } }); if (!window.gameStarted) { composer.render(); return; } const deltaTime = clock.getDelta(); const time = clock.getElapsedTime(); // Update game timer if (gameTimer > 0) { gameTimer = GAME_CONFIG.GAME_DURATION - Math.floor((Date.now() - gameStartTime) / 1000); const minutes = Math.floor(gameTimer / 60); const seconds = gameTimer % 60; timerDisplay.textContent = `${minutes}:${seconds.toString().padStart(2, '0')}`; // Check for both game over conditions if ((gameTimer <= 0 || totalCollected >= totalCollectibles) && !isCompletionScreenShown) { // Game Over isCompletionScreenShown = true; window.gameStarted = false; // Create completion screen completionScreen = document.createElement('div'); completionScreen.id = 'completionScreen'; completionScreen.style.position = 'fixed'; completionScreen.style.zIndex = '1000'; const collectedPigeons = pigeons.filter(pigeon => pigeon.isCollected).length; const collectedDucks = ducks.filter(duck => duck.isCollected).length; const totalCollected = collectedPigeons + collectedDucks; completionScreen.innerHTML = `

Time's Up!

You made ${totalCollected} new ${totalCollected === 1 ? 'friend who will cherish your company' : 'friends who will cherish your company'}:

🕊️ Pigeons: ${collectedPigeons}

🦆 Ducks: ${collectedDucks}

`; parentDiv.appendChild(completionScreen); // Function to reset the game function resetGame() { // Reset game state variables gameStartTime = Date.now(); gameTimer = GAME_CONFIG.GAME_DURATION; window.totalCollected = 0; window.totalCollectibles = 0; window.currentScore = 0; // Don't reset topScores here to preserve the hall of fame isCompletionScreenShown = false; window.gameStarted = true; window.spaceLlamaInteracted = false; window.owlDialogueTriggered = false; window.targetPoint = null; // Reset llama position and physics llama.physicsBody.position.set(0, 5, 0); llama.physicsBody.velocity.set(0, 0, 0); llama.physicsBody.angularVelocity.set(0, 0, 0); llama.physicsBody.force.set(0, 0, 0); llama.group.position.set(0, 5, 0); llama.group.rotation.set(0, 0, 0); // Reset camera and controls camera.position.set(0, 50, 40); camera.lookAt(0, 0, 0); controls.target.set(0, 0, 0); controls.update(); // Clear active markers activeMarkers.forEach(marker => { scene.remove(marker); }); activeMarkers.length = 0; // Reset collectibles (pigeons and ducks) pigeons.forEach(pigeon => { // Reset position to a random location const x = (Math.random() - 0.5) * 200; const y = 5 + Math.random() * 10; const z = (Math.random() - 0.5) * 200; pigeon.group.position.set(x, y, z); pigeon.isCollected = false; scene.add(pigeon.group); totalCollectibles++; }); // Reset butterflies butterflies.forEach(butterfly => { const x = (Math.random() - 0.5) * GAME_CONFIG.BOUNDARY * 0.8; const y = ZONES.GROUND.min + Math.random() * (ZONES.SKY.min - ZONES.GROUND.min) * 0.8; const z = (Math.random() - 0.5) * GAME_CONFIG.BOUNDARY * 0.8; butterfly.group.position.set(x, y, z); butterfly.isCollected = false; butterfly.interacted = false; scene.add(butterfly.group); totalCollectibles++; }); ducks.forEach(duck => { // Reset position to a random location in the sky zone const x = (Math.random() - 0.5) * GAME_CONFIG.BOUNDARY * 0.8; const z = (Math.random() - 0.5) * GAME_CONFIG.BOUNDARY * 0.8; const heightSection = (ZONES.SKY.max - ZONES.SKY.min) / ducks.length; const baseHeight = ZONES.SKY.min + (heightSection * ducks.indexOf(duck)); const y = baseHeight + (Math.random() * heightSection); duck.mesh.position.set(x, y, z); duck.targetHeight = y; duck.isCollected = false; duck.floatOffset = Math.random() * Math.PI * 2; duck.floatSpeed = 0.5 + Math.random() * 0.3; duck.floatHeight = 0.2; duck.mesh.userData.wingSpeed = 4 + Math.random() * 1.5; duck.mesh.userData.bobOffset = Math.random() * Math.PI * 2; duck.mesh.userData.bobSpeed = 1.5 + Math.random() * 0.5; scene.add(duck.mesh); totalCollectibles++; }); // Reset UI elements inventoryContainer.innerHTML = ''; timerDisplay.style.display = 'block'; timerDisplay.textContent = `${Math.floor(GAME_CONFIG.GAME_DURATION / 60)}:00`; // Reset balloons while (window.balloons && window.balloons.length > 0) { const balloon = window.balloons.pop(); scene.remove(balloon.group); balloon.group.clear(); } // Create initial balloons balloons = balloonColors.map((color, index) => new Balloon(llama, color, index)); window.balloons = balloons; // Reset all sounds Object.values(AudioSystem.sounds).forEach(sound => { sound.element.pause(); sound.element.currentTime = 0; }); // Reset jetpack state if (llama.jetpack) { llama.group.remove(llama.jetpack.group); llama.jetpack = null; llama.applyJetpackThrust = null; } // Restore initial belt const beltGeometry = new THREE.CylinderGeometry(1.4, 1.2, 0.2, 10, 0.5); const beltMaterial = new THREE.MeshStandardMaterial({ color: 0x4A3C31, roughness: 0.8, metalness: 0.1, side: THREE.DoubleSide, flatShading: true }); const belt = new THREE.Mesh(beltGeometry, beltMaterial); belt.position.y = 2.8; belt.position.z = 0; belt.rotation.x = Math.PI / 2; llama.group.add(belt); // Reset space llama if (spaceLlama) { spaceLlama.physicsBody.position.set(20, ZONES.SPACE.min + 10, 20); spaceLlama.physicsBody.velocity.set(0, 0, 0); spaceLlama.physicsBody.angularVelocity.set(0, 0, 0); spaceLlama.group.position.copy(spaceLlama.physicsBody.position); spaceLlama.group.rotation.set(0, 0, 0); } // Reset any speech bubbles if (window.activeBubble) { window.activeBubble.remove(); window.activeBubble = null; } // Reset key states window.keysPressed = { jump: false, space: false }; // Remove completion screen if (completionScreen) { completionScreen.remove(); completionScreen = null; } // Remove scoreboard if it exists const scoreboardScreen = document.getElementById('scoreboardScreen'); if (scoreboardScreen) { scoreboardScreen.remove(); } // Reset and show timer display timerDisplay.style.display = 'block'; timerDisplay.textContent = `${Math.floor(GAME_CONFIG.GAME_DURATION / 60)}:00`; // Restart background music if (backgroundMusic) { backgroundMusic.currentTime = 0; backgroundMusic.play().catch(error => { console.warn('Background music playback was prevented:', error); }); } // Stop victory music if it's playing if (window.victoryMusic && !window.victoryMusic.paused) { window.victoryMusic.pause(); window.victoryMusic.currentTime = 0; } } // Create and append scoreboard with improved styling and proper z-index const scoreboardScreen = document.createElement('div'); scoreboardScreen.id = 'scoreboardScreen'; scoreboardScreen.className = 'scoreboard'; scoreboardScreen.style.display = 'none'; scoreboardScreen.style.position = 'fixed'; scoreboardScreen.style.top = '50%'; scoreboardScreen.style.left = '50%'; scoreboardScreen.style.transform = 'translate(-50%, -50%)'; scoreboardScreen.style.backgroundColor = 'rgba(0, 0, 0, 0.9)'; scoreboardScreen.style.padding = '20px'; scoreboardScreen.style.borderRadius = '10px'; scoreboardScreen.style.color = 'white'; scoreboardScreen.style.zIndex = '3000'; // Further increased z-index to ensure it appears above completion screen scoreboardScreen.style.minWidth = '300px'; scoreboardScreen.style.textAlign = 'center'; scoreboardScreen.innerHTML = `

Top Scores

Current Score: ${totalCollected} ${totalCollected === 1 ? 'friend' : 'friends'}

Hall of Fame

${getTopScoresHTML()}

`; parentDiv.appendChild(scoreboardScreen); // Update scores function updateTopScores(newScore) { // Calculate total collected friends (pigeons + ducks) const collectedPigeons = pigeons.filter(pigeon => pigeon.isCollected).length; const collectedDucks = ducks.filter(duck => duck.isCollected).length; const totalFriends = collectedPigeons + collectedDucks; // Add new score to array topScores.push({ score: totalFriends, date: new Date().toLocaleDateString() }); // Sort scores in descending order topScores.sort((a, b) => b.score - a.score); // Keep only top 5 scores topScores = topScores.slice(0, 5); // Save to localStorage localStorage.setItem('topScores', JSON.stringify(topScores)); // Update high score if needed if (newScore > highScore) { highScore = newScore; localStorage.setItem('highScore', highScore); } } function getTopScoresHTML() { if (topScores.length === 0) { return '

No scores yet!

'; } const formattedScores = topScores.map((score, index) => { const collectedFriends = score.score; return `

#${index + 1} ${collectedFriends} ${collectedFriends === 1 ? 'friend' : 'friends'} ${score.date}

`; }); return formattedScores.join(''); } // Update scores with current game updateTopScores(totalCollected); // Add event listeners for scoreboard buttons // Add event listeners with improved functionality document.getElementById('viewHighscoresButton').addEventListener('click', () => { const scoreboardScreen = document.getElementById('scoreboardScreen'); if (scoreboardScreen) { scoreboardScreen.style.display = 'flex'; scoreboardScreen.style.opacity = '0'; // Force reflow void scoreboardScreen.offsetWidth; scoreboardScreen.style.transition = 'opacity 0.3s ease'; scoreboardScreen.style.opacity = '1'; } }); document.getElementById('closeScoreboard').addEventListener('click', () => { const scoreboardScreen = document.getElementById('scoreboardScreen'); if (scoreboardScreen) { scoreboardScreen.style.transition = 'opacity 0.3s ease'; scoreboardScreen.style.opacity = '0'; setTimeout(() => { scoreboardScreen.style.display = 'none'; }, 300); } }); document.getElementById('playAgainButton').addEventListener('click', () => { resetGame(); }); // Stop background music and play victory music if (backgroundMusic) { backgroundMusic.pause(); backgroundMusic.currentTime = 0; } if (window.victoryMusic) { window.victoryMusic.play().catch(error => console.warn('Victory music playback was prevented:', error)); } } } // Update game timer const currentTime = Date.now(); // 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; // Calculate time period based on time of day cycle (5 minute loop) const timeProgress = ((currentTime % (5 * 60 * 1000)) / (5 * 60 * 1000)); let currentPeriod, nextPeriod, periodProgress; if (timeProgress < 0.15) { // Sunrise to Morning currentPeriod = timePeriods.sunrise; nextPeriod = timePeriods.morning; periodProgress = timeProgress / 0.15; } else if (timeProgress < 0.35) { // Morning to Noon currentPeriod = timePeriods.morning; nextPeriod = timePeriods.noon; periodProgress = (timeProgress - 0.15) / 0.2; } else if (timeProgress < 0.55) { // Noon to Evening currentPeriod = timePeriods.noon; nextPeriod = timePeriods.evening; periodProgress = (timeProgress - 0.35) / 0.2; } else if (timeProgress < 0.75) { // Evening to Night currentPeriod = timePeriods.evening; nextPeriod = timePeriods.night; periodProgress = (timeProgress - 0.55) / 0.2; } else { // Night to Sunrise (completing the cycle) currentPeriod = timePeriods.night; nextPeriod = timePeriods.sunrise; periodProgress = (timeProgress - 0.75) / 0.25; } // Interpolate lighting colors skyMat.uniforms.topColor.value.lerpColors( currentPeriod.skyTop, nextPeriod.skyTop, periodProgress ); skyMat.uniforms.bottomColor.value.lerpColors( currentPeriod.skyBottom, nextPeriod.skyBottom, periodProgress ); // Update sunlight sunLight.color.lerpColors( currentPeriod.sunLight, nextPeriod.sunLight, periodProgress ); sunLight.intensity = THREE.MathUtils.lerp( currentPeriod.intensity, nextPeriod.intensity, periodProgress ); // Update ambient light ambientLight.color.lerpColors( currentPeriod.ambientLight, nextPeriod.ambientLight, periodProgress ); // Calculate time states const isMidDay = timeProgress >= 0.25 && timeProgress <= 0.45; const isNight = timeProgress >= 0.55 && timeProgress <= 0.75; // Rainbow opacity handling if (rainbowInstance && llama && llama.physicsBody) { rainbowInstance.update(timeProgress, llama.physicsBody.position.y); } // Update clouds using the Cloud class methods clouds.children.forEach((cloudGroup) => { if (cloudGroup.userData && cloudGroup.userData.cloudInstance) { const cloudInstance = cloudGroup.userData.cloudInstance; cloudInstance.update(deltaTime, timeProgress, isMidDay); // Add visual feedback for debugging (optional) if (cloudInstance.isRaining && window.llama) { const llamaPos = window.llama.physicsBody.position; const cloudPos = cloudGroup.position; const inRain = ( Math.abs(llamaPos.x - cloudPos.x) < 4 && Math.abs(llamaPos.z - cloudPos.z) < 4 && llamaPos.y < cloudPos.y + 2 && llamaPos.y > cloudPos.y - 15 ); if (inRain) { // Optional: Modify rain particle opacity or color for visual feedback if (cloudInstance.rainParticles) { cloudInstance.rainParticles.material.opacity = 0.9; } } } // Randomly start rain with a 0.01% chance per frame per cloud if (!cloudInstance.isRaining && Math.random() < 0.0001) { cloudInstance.startRaining(); } // Update rain particles with more natural movement if (cloudInstance.isRaining && cloudInstance.rainParticles) { const positions = cloudInstance.rainParticles.geometry.attributes.position.array; const velocities = cloudInstance.rainParticles.geometry.attributes.velocity.array; for (let i = 0; i < positions.length; i += 3) { // Apply velocity positions[i] += velocities[i] * deltaTime * 10; positions[i + 1] += velocities[i + 1] * deltaTime * 10; positions[i + 2] += velocities[i + 2] * deltaTime * 10; // Add slight wind effect velocities[i] += (Math.random() - 0.5) * 0.1 * deltaTime; velocities[i + 2] += (Math.random() - 0.5) * 0.1 * deltaTime; // Reset particle when it falls too far if (positions[i + 1] < -15) { // Reset position to bottom of cloud positions[i] = (Math.random() - 0.5) * 8; // Match the smaller spawn area positions[i + 1] = -2 + Math.random() * 0.5; // Keep same reset height positions[i + 2] = (Math.random() - 0.5) * 8; // Match the smaller spawn area // Reset velocity velocities[i] = (Math.random() - 0.5) * 0.2; velocities[i + 1] = -1 - Math.random() * 1; // Reduced reset velocity velocities[i + 2] = (Math.random() - 0.5) * 0.1; // Reduced reset drift } } cloudInstance.rainParticles.geometry.attributes.position.needsUpdate = true; cloudInstance.rainParticles.geometry.attributes.velocity.needsUpdate = true; } } }); // Update stars if (stars.material) { const targetOpacity = isNight ? 1 : (timeProgress > 0.7 ? (timeProgress - 0.7) / 0.1 : 0); stars.material.opacity += (targetOpacity - stars.material.opacity) * 0.1; stars.rotation.y += deltaTime * 0.01; } // Update shooting stars if (isNight) { // Randomly activate new shooting stars if (Math.random() < 0.01) { // 1% chance each frame const inactiveStars = shootingStars.filter(star => !star.isActive); if (inactiveStars.length > 0) { const star = inactiveStars[Math.floor(Math.random() * inactiveStars.length)]; star.activate(); } } // Update all shooting stars shootingStars.forEach(star => star.update()); } if (assetsLoaded) { // Update owl animation and check for dialogue trigger if (owl && window.parentDiv && llama && !window.owlDialogueTriggered) { // Update owl's cloud position if (owlCloud) { owlCloud.group.position.set( owl.group.position.x, owl.group.position.y - 5, // 5 units below the owl owl.group.position.z ); owlCloud.update(deltaTime, timeProgress, isMidDay); } owl.update(deltaTime); // Scale down the entire owl group owl.group.scale.set(0.4, 0.4, 0.4); // Reduced from default 1.0 to 0.4 // Update animation time regardless of interaction state owl.animationTime += deltaTime; // Always perform animation updates // Small vertical movement for subtle animation owl.group.position.y = owl.baseY + Math.sin(owl.animationTime * 0.5) * 0.2; // Subtle tilting motion owl.group.rotation.z = Math.sin(owl.animationTime * 0.3) * 0.05; // Wing animation - now flapping parallel to ground const wingAngle = Math.sin(owl.animationTime * 5) * 0.3; owl.leftWing.rotation.z = wingAngle; owl.rightWing.rotation.z = -wingAngle; // Opposite direction for right wing // Gentle body and head bobbing owl.body.rotation.x = Math.sin(owl.animationTime * 2) * 0.1; owl.head.rotation.x = Math.sin(owl.animationTime * 2 + 1) * 0.05; owl.tail.rotation.x = Math.PI / 8 + Math.sin(owl.animationTime * 2) * 0.15; // Animate eyebrows slightly const eyebrowAngle = Math.sin(owl.animationTime * 2) * 0.05; owl.leftEyebrow.rotation.z = Math.PI / 12 + eyebrowAngle; owl.rightEyebrow.rotation.z = -Math.PI / 12 - eyebrowAngle; // Calculate distance between llama and owl const distance = llama.group.position.distanceTo(owl.group.position); // Play hoot sound when llama is close if (distance < 15 && window.hootSound) { if (window.hootSound.paused) { window.hootSound.currentTime = 0; window.hootSound.play().catch(error => console.warn('Owl sound playback was prevented:', error)); } } // Check for initial interaction only if not already triggered if (distance < 15 && !window.owlDialogueTriggered) { window.owlDialogueTriggered = true; // Create a new balloon with a special color for the owl (only once) const owlBalloonColor = 0x9370DB; // Purple color for owl balloon const newBalloon = new Balloon(llama, owlBalloonColor, balloons.length); // Add the new balloon to the balloons array balloons.push(newBalloon); // Create and show message bubble const owlBubble = document.createElement('div'); owlBubble.className = 'speech-bubble bottom flex-bubble'; owlBubble.innerHTML = `

Hoot! Air is getting thin up here. Take this balloon to fly even higher! 🎈 `; owlBubble.style.transform = 'translate(-50%, 0)'; owlBubble.style.left = '50%'; owlBubble.style.bottom = '20px'; owlBubble.style.top = 'auto'; parentDiv.appendChild(owlBubble); // Remove bubble after a delay setTimeout(() => { owlBubble.remove(); }, 4000); } } // Update physics world.step(1 / 60); // Update all pigeons' animations pigeons.forEach(pigeon => { if (pigeon) { pigeon.update(deltaTime); } }); // Update llama with balloon lift and wind effects const numBalloons = balloons.length; const targetHeight = 12; const heightDifference = targetHeight - llama.physicsBody.position.y; // Check if llama has reached space height // Calculate current zone and transitions let currentZone; let transitionProgress = 0; const llamaHeight = llama.physicsBody.position.y; // Add height limit check and restriction const MAX_HEIGHT = ZONES.SPACE.max - 50; // Set maximum height 50 units below the infinite ceiling if (llamaHeight > MAX_HEIGHT) { llama.physicsBody.position.y = MAX_HEIGHT; llama.physicsBody.velocity.y = Math.min(0, llama.physicsBody.velocity.y); // Stop upward movement currentZone = ZONES.SPACE; } else if (llamaHeight >= ZONES.SPACE.min) { currentZone = ZONES.SPACE; // Full space effects world.gravity.set(0, -1, 0); skyMat.uniforms.topColor.value.setHex(0x000033); skyMat.uniforms.bottomColor.value.setHex(0x000066); ambientLight.intensity = ZONES.SPACE.ambientLight; stars.material.opacity = ZONES.SPACE.starIntensity; bloomPass.strength = 1.5; // Remove fog in space scene.fog = null; } else if (llamaHeight >= ZONES.SKY.min) { currentZone = ZONES.SKY; // Calculate transition progress within sky zone if (llamaHeight >= ZONES.SKY.transitionStart) { transitionProgress = (llamaHeight - ZONES.SKY.transitionStart) / (ZONES.SKY.transitionEnd - ZONES.SKY.transitionStart); // Interpolate gravity const gravity = THREE.MathUtils.lerp(-9.82, -1, transitionProgress); world.gravity.set(0, gravity, 0); // Interpolate lighting with blue transition const skyTopColor = new THREE.Color(); // Determine transition colors based on time period const isEvening = timeProgress >= 0.55 && timeProgress <= 0.75; const transitionColor = isEvening ? new THREE.Color(0x00264D) : // Darker blue for evening/night transition new THREE.Color(0x0066FF); // Regular bright blue for day transition const startColor = new THREE.Color(0x1E90FF); const endColor = new THREE.Color(0x000033); // First lerp to transition color, then to end color if (transitionProgress < 0.5) { skyTopColor.copy(startColor).lerp(transitionColor, transitionProgress * 2); } else { skyTopColor.copy(transitionColor).lerp(endColor, (transitionProgress - 0.5) * 2); } skyMat.uniforms.topColor.value.copy(skyTopColor); const skyBottomColor = new THREE.Color(); const startBottomColor = new THREE.Color(0x87CEEB); const transitionBottomColor = isEvening ? new THREE.Color(0x003366) : // Darker blue for evening/night transition new THREE.Color(0x00CCFF); // Regular lighter blue for day transition const endBottomColor = new THREE.Color(0x000066); // First lerp to transition color, then to end color if (transitionProgress < 0.5) { skyBottomColor.copy(startBottomColor).lerp(transitionBottomColor, transitionProgress * 2); } else { skyBottomColor.copy(transitionBottomColor).lerp(endBottomColor, (transitionProgress - 0.5) * 2); } skyMat.uniforms.bottomColor.value.copy(skyBottomColor); // Interpolate ambient light and effects ambientLight.intensity = THREE.MathUtils.lerp( ZONES.SKY.lightIntensity, ZONES.SPACE.ambientLight, transitionProgress ); stars.material.opacity = THREE.MathUtils.lerp(0, 1, transitionProgress); bloomPass.strength = THREE.MathUtils.lerp(0.4, 1.5, transitionProgress); } else { // Regular sky zone effects world.gravity.set(0, -9.82, 0); stars.material.opacity = 0; bloomPass.strength = 0.4; } } else { currentZone = ZONES.GROUND; // Ground level effects world.gravity.set(0, -9.82, 0); stars.material.opacity = 0; bloomPass.strength = 0.4; } // Check for wind spot effects window.windSpots.forEach(spot => { spot.update(time); // Update the wind spot cloud position and animation if (windSpotCloud) { windSpotCloud.group.position.x = spot.position.x; windSpotCloud.group.position.z = spot.position.z; windSpotCloud.update(deltaTime, timeProgress, isMidDay); } // Check if llama and its physics body exist before applying wind effect const windForce = llama && llama.physicsBody ? spot.applyWindForce(llama.physicsBody) : null; if (windForce && window.windSound) { console.log('Wind force applied:', windForce, 'Wind sound volume:', window.windSound.volume); const MAX_HEIGHT = ZONES.SPACE.max - 50; // Add wind force to current velocity instead of setting it directly llama.physicsBody.velocity.y += windForce * 0.1; // Reduced multiplier for smoother acceleration // Limit maximum velocity rather than position if (llama.physicsBody.position.y > MAX_HEIGHT) { llama.physicsBody.velocity.y = Math.min(0, llama.physicsBody.velocity.y); } // Apply reduced horizontal damping for smoother movement llama.physicsBody.velocity.x *= 0.98; llama.physicsBody.velocity.z *= 0.98; } }); // Apply floating mechanics if (numBalloons > 0) { // Calculate gravity multiplier based on number of balloons const optimalBalloons = 5; const gravityMultiplier = numBalloons < optimalBalloons ? 1 + ((optimalBalloons - numBalloons) * 0.5) : 1; // Apply increased gravity when fewer than optimal balloons llama.physicsBody.velocity.y -= (9.82 * deltaTime * (gravityMultiplier - 1)); // Very smooth dampening for stable floating llama.physicsBody.velocity.y *= 0.998; // Reduced dampening for more responsive movement // Reduced bobbing motion with smaller amplitude const primaryBob = Math.sin(time * 0.4) * 0.3; // Slower, smaller primary bobbing const secondaryBob = Math.sin(time * 0.8) * 0.15; // Slower, smaller secondary bobbing const tertiaryBob = Math.sin(time * 1.5) * 0.05; // Smaller micro-movements const combinedBob = primaryBob + secondaryBob + tertiaryBob; const horizontalDrift = Math.sin(time * 0.4) * 0.04; // Slower, weaker drift const secondaryDrift = Math.cos(time * 0.8) * 0.02; // Reduced secondary drift llama.physicsBody.velocity.x += horizontalDrift + secondaryDrift; // Combine height adjustment with enhanced bobbing motion const liftMultiplier = numBalloons < optimalBalloons ? numBalloons / optimalBalloons : 1; llama.physicsBody.velocity.y += (heightDifference + combinedBob) * 0.15 * liftMultiplier; // Wider velocity constraints with adjusted maximum fall speed const maxUpwardVelocity = 3 * (numBalloons / optimalBalloons); const maxDownwardVelocity = -3 * gravityMultiplier; llama.physicsBody.velocity.y = Math.max(maxDownwardVelocity, Math.min(maxUpwardVelocity, llama.physicsBody.velocity.y)); // Adjust llama's rotation for floating effect // Add gentle bounce animation during movement const verticalVelocity = llama.physicsBody.velocity.y; const horizontalSpeed = Math.sqrt( llama.physicsBody.velocity.x ** 2 + llama.physicsBody.velocity.z ** 2 ); // Significantly reduced tilt for minimal floating feel const tiltAmount = 0.005; // Reduced from 0.02 llama.group.rotation.x = Math.sin(time * 0.4) * tiltAmount + (verticalVelocity * 0.005); // Further reduced multiplier llama.group.rotation.z = Math.cos(time * 0.3) * tiltAmount * (horizontalSpeed > 0.1 ? 0.3 : 0.2); // Further reduced rotation // Almost eliminate Y-axis rotation llama.group.rotation.y += Math.sin(time * 0.2) * 0.001; // Reduced from 0.005 } llama.update(); // Apply jetpack thrust when space is pressed if (window.keysPressed.space && llama.applyJetpackThrust) { llama.applyJetpackThrust(deltaTime); } else if (llama.jetpack) { llama.jetpack.hideFlames(); } // Update all pigeons' following behavior pigeons.forEach((pigeon, index) => { if (pigeon && pigeon.isCollected) { // Randomly play cooing sound while following const currentTime = Date.now(); if (currentTime - pigeon.lastSoundTime > pigeon.soundCooldown && Math.random() < 0.002) { pigeon.cooSound.currentTime = 0; pigeon.cooSound.play().catch(error => console.warn('Pigeon sound playback was prevented:', error)); pigeon.lastSoundTime = currentTime; } // Continue wing flapping and head bobbing animation const animTime = time * 3; const bobAmount = Math.sin(animTime) * pigeon.headBobAmplitude; pigeon.head.position.y = 1.3 + bobAmount; pigeon.neck.position.y = 0.9 + bobAmount * 0.5; // Wing flapping animation pigeon.leftWing.rotation.z = Math.sin(animTime * 2) * pigeon.wingFlapAmplitude; pigeon.rightWing.rotation.z = Math.sin(animTime * 2) * pigeon.wingFlapAmplitude; // Calculate unique offset for each pigeon const angle = (index / pigeons.length) * Math.PI * 2 + time; const radius = 4; const targetPos = new THREE.Vector3( llama.group.position.x + Math.sin(angle) * radius, llama.group.position.y + 6 + Math.cos(time * 1.5 + index * 0.5) * 0.5, llama.group.position.z + Math.cos(angle) * radius ); // Smooth interpolation to target position pigeon.group.position.lerp(targetPos, 0.05); // Make pigeon face movement direction const direction = new THREE.Vector3().subVectors(targetPos, pigeon.group.position); if (direction.length() > 0.1) { const targetRotation = Math.atan2(direction.x, direction.z); pigeon.group.rotation.y = targetRotation; } } }); // Update ducks for (let i = ducks.length - 1; i >= 0; i--) { const duck = ducks[i]; // Update wing flapping animation regardless of collection status const wings = duck.mesh.children.filter(child => child.geometry === Duck.sharedGeometries.wing ); wings.forEach((wing, index) => { // Calculate wing flap angle - more pronounced flapping motion const baseFlap = Math.sin(time * duck.mesh.userData.wingSpeed) * 0.4; // Add secondary motion for more natural movement const secondaryFlap = Math.sin(time * duck.mesh.userData.wingSpeed * 2) * 0.1; // Combine movements and apply different angles for each wing const flapAngle = baseFlap + secondaryFlap; // Apply rotation to create flapping motion wing.rotation.z = flapAngle; wing.rotation.x = (index === 0 ? 0.3 : -0.3); // Slight outward angle wing.rotation.y = (index === 0 ? 0.2 : -0.2); // Slight forward angle }); if (duck.isCollected) { // Update following behavior for collected ducks // Calculate position behind llama based on movement direction const llamaDirection = new THREE.Vector3( -Math.sin(llama.group.rotation.y), 0, -Math.cos(llama.group.rotation.y) ); // Position duck behind llama with slight offset based on index const followDistance = 2 + (i * 3); // Reduced initial distance, keep same spacing const targetPos = new THREE.Vector3( llama.group.position.x - (llamaDirection.x * followDistance), // Negative direction to position behind llama.group.position.y + 2 + Math.sin(time * 1.5 + i) * 0.5, // Slightly lower height and gentler bobbing llama.group.position.z - (llamaDirection.z * followDistance) // Negative direction to position behind ); // Smooth interpolation to target position duck.mesh.position.lerp(targetPos, 0.05); // Set rotation to match llama's direction exactly, ensuring ducks face forward duck.mesh.rotation.y = llama.group.rotation.y + Math.PI / 2; // Add PI to face forward duck.mesh.rotation.x = 0; // Reset any x-rotation duck.mesh.rotation.z = 0; // Reset any z-rotation continue; } // Check distance to llama and play sound if (llama && quackSound) { const distanceToLlama = duck.mesh.position.distanceTo(llama.group.position); const currentTime = Date.now(); if (distanceToLlama < 10 && // Within 10 units currentTime - lastQuackTime > quackCooldown && // Past cooldown Math.random() < quackChance) { // Random chance to quack quackSound.currentTime = 0; quackSound.play().catch(error => console.warn('Duck sound playback was prevented:', error)); lastQuackTime = currentTime; } } // Update flying motion with vertical movement const currentTime = performance.now() * 0.001; // Get current time in seconds const verticalMovement = Math.sin(currentTime * duck.floatSpeed + duck.floatOffset) * duck.floatHeight; // Smoothly move towards target height const heightDiff = duck.targetHeight - duck.mesh.position.y; duck.mesh.position.y += heightDiff * duck.verticalSpeed; // Add bobbing to the flight duck.mesh.position.y += verticalMovement; // Keep ducks within sky zone if (duck.mesh.position.y < ZONES.SKY.min) { duck.mesh.position.y = ZONES.SKY.min; duck.targetHeight = ZONES.SKY.min + 0.5; } else if (duck.mesh.position.y > ZONES.SKY.max - 10) { duck.mesh.position.y = ZONES.SKY.max - 10; duck.targetHeight = duck.mesh.position.y - 0.5; } // Occasionally change target height with smaller variation if (Math.random() < 0.001) { // 0.1% chance per frame duck.targetHeight = duck.mesh.position.y + (Math.random() * 1 - 0.5); // Stay within ±0.5 units of current height } // Update wing flapping (reuse existing wings reference) // Previous wings declaration is already available from line 2059 // Continue with the animation logic wings.forEach((wing, index) => { // Calculate wing flap angle - more pronounced flapping motion const baseFlap = Math.sin(time * duck.mesh.userData.wingSpeed) * 0.4; // Add secondary motion for more natural movement const secondaryFlap = Math.sin(time * duck.mesh.userData.wingSpeed * 2) * 0.1; // Combine movements and apply different angles for each wing const flapAngle = baseFlap + secondaryFlap; // Apply rotation to create flapping motion wing.rotation.z = flapAngle; wing.rotation.x = (index === 0 ? 0.3 : -0.3); // Slight outward angle wing.rotation.y = (index === 0 ? 0.2 : -0.2); // Slight forward angle }); // Circular movement pattern const circleAngle = time * duck.circleSpeed; const newX = Math.cos(circleAngle) * duck.circleRadius; const newZ = Math.sin(circleAngle) * duck.circleRadius; // Smooth position transition duck.mesh.position.x += (newX - duck.mesh.position.x) * 0.02; duck.mesh.position.z += (newZ - duck.mesh.position.z) * 0.02; // Store old positions for next frame duck.mesh.position.oldX = duck.mesh.position.x; duck.mesh.position.oldZ = duck.mesh.position.z; // Check for collection if (duck.isCollectible && llama) { const distanceToLlama = duck.mesh.position.distanceTo(llama.group.position); if (distanceToLlama < 5) { // Collection distance threshold // Create particle effect at duck's position createParticleSystem(duck.mesh.position.clone()); // Collect the duck and reset animation states duck.isCollected = true; // Reset animation parameters duck.floatOffset = Math.random() * Math.PI * 2; duck.floatSpeed = 0.5 + Math.random() * 0.3; duck.floatHeight = 0.2; duck.mesh.userData.wingSpeed = 4 + Math.random() * 1.5; duck.mesh.userData.bobOffset = Math.random() * Math.PI * 2; duck.mesh.userData.bobSpeed = 1.5 + Math.random() * 0.5; // Reset wing rotations duck.mesh.children.forEach(child => { if (child.geometry === Duck.sharedGeometries.wing) { child.rotation.set(0, 0, 0); } }); // Transform position to be relative to llama for following duck.mesh.position.set( Math.random() * 4 - 2, // Random offset X 4 + Math.random() * 2, // Slightly above llama Math.random() * 4 - 2 // Random offset Z ); // Add to inventory addHeartToInventory('duck'); // Play collection sound if (quackSound) { quackSound.currentTime = 0; quackSound.play().catch(error => console.warn('Duck sound playback was prevented:', error)); } } } } // Update space llama if (spaceLlama) { // Space movement parameters const spaceTime = time * 0.5; const baseHeight = ZONES.SPACE.min + 10; const jumpHeight = 15; const horizontalRadius = 30; // Calculate circular path movement const xPos = Math.cos(spaceTime * 0.5) * horizontalRadius; const zPos = Math.sin(spaceTime * 0.5) * horizontalRadius; // Calculate vertical movement (jumping pattern) const yPos = baseHeight + Math.abs(Math.sin(spaceTime * 1.5)) * jumpHeight; // Update physics body position spaceLlama.physicsBody.position.set(xPos, yPos, zPos); spaceLlama.physicsBody.velocity.set( Math.cos(spaceTime * 0.5) * 2, Math.cos(spaceTime * 1.5) * 4, Math.sin(spaceTime * 0.5) * 2 ); // Add gentle rotation spaceLlama.group.rotation.y = Math.atan2( -Math.sin(spaceTime * 0.5), -Math.cos(spaceTime * 0.5) ); // Add floating animation spaceLlama.group.rotation.x = Math.sin(spaceTime) * 0.1; spaceLlama.group.rotation.z = Math.cos(spaceTime * 0.8) * 0.05; spaceLlama.update(); } // Update balloons balloons.forEach((balloon, index) => { // Update balloon position and animation with fixed total positions balloon.update(time); }); // Move llama towards target point if it exists if (window.targetPoint) { // Check if target point is within boundaries const BOUNDARY = 300; // Match the new larger boundary const clampedTarget = { x: Math.max(-BOUNDARY, Math.min(BOUNDARY, window.targetPoint.x)), y: window.targetPoint.y, z: Math.max(-BOUNDARY, Math.min(BOUNDARY, window.targetPoint.z)) }; llama.move(clampedTarget, window.keysPressed?.jump || false); // Check if we've reached the target const distance = new THREE.Vector3( clampedTarget.x - llama.physicsBody.position.x, 0, clampedTarget.z - llama.physicsBody.position.z ).length(); if (distance < 0.1) { window.targetPoint = null; // Clear target when reached } } else { // Allow the llama to maintain momentum with less dampening // Apply boundary constraints to current position const BOUNDARY = 180; llama.physicsBody.position.x = Math.max(-BOUNDARY, Math.min(BOUNDARY, llama.physicsBody.position.x)); llama.physicsBody.position.z = Math.max(-BOUNDARY, Math.min(BOUNDARY, llama.physicsBody.position.z)); // Smoothly reduce velocity when near boundaries const distanceFromBoundaryX = Math.min(Math.abs(BOUNDARY - Math.abs(llama.physicsBody.position.x)), 10); const distanceFromBoundaryZ = Math.min(Math.abs(BOUNDARY - Math.abs(llama.physicsBody.position.z)), 10); const boundaryDamping = Math.min(distanceFromBoundaryX, distanceFromBoundaryZ) / 10; llama.physicsBody.velocity.x *= 0.99 * (0.7 + 0.3 * boundaryDamping); llama.physicsBody.velocity.z *= 0.99 * (0.7 + 0.3 * boundaryDamping); } // Update camera to follow llama in third person const llamaPos = llama.group.position; // Update camera with space transition function updateCameraWithSpace(camera, llama, controls) { const llamaPos = llama.group.position; const transitionStart = ZONES.SKY.min; const transitionEnd = ZONES.SPACE.min; // Calculate transition progress let transitionProgress = 0; if (llamaPos.y > transitionStart) { transitionProgress = Math.min( (llamaPos.y - transitionStart) / (transitionEnd - transitionStart), 1 ); } // Smoothly interpolate camera parameters const baseDistance = 15; const spaceDistance = 30; const distance = THREE.MathUtils.lerp(baseDistance, spaceDistance, transitionProgress); const baseHeight = 12; const spaceHeight = 20; const heightOffset = THREE.MathUtils.lerp(baseHeight, spaceHeight, transitionProgress); const cameraOffset = new THREE.Vector3( -Math.sin(llama.group.rotation.y) * distance, heightOffset, -Math.cos(llama.group.rotation.y) * distance ); // Calculate camera target position with smooth transition const baseLookAtHeight = 2; const spaceLookAtHeight = 5; const lookAtHeight = THREE.MathUtils.lerp(baseLookAtHeight, spaceLookAtHeight, transitionProgress); const targetCameraPos = new THREE.Vector3( llamaPos.x - cameraOffset.x, llamaPos.y + cameraOffset.y, llamaPos.z - cameraOffset.z ); camera.position.lerp(targetCameraPos, 0.1); // Smoothly transition the look-at point const lookAtPoint = new THREE.Vector3( llamaPos.x, llamaPos.y + lookAtHeight, llamaPos.z ); camera.lookAt(lookAtPoint); controls.target.copy(lookAtPoint); controls.update(); } updateCameraWithSpace(camera, llama, controls); } // Check distance between llama and space llama if (spaceLlama && llama) { const distance = llama.group.position.distanceTo(spaceLlama.group.position); // Play sonar sound when close to space llama if (distance < 50 && window.sonarSound) { if (window.sonarSound.paused) { window.sonarSound.play().catch(error => console.warn('Sonar sound playback was prevented:', error)); } // Adjust volume based on distance const volume = Math.max(0, Math.min(1, 1 - (distance - 15) / 35)); window.sonarSound.volume = volume * 0.5; // Max volume of 0.5 } else if (window.sonarSound && !window.sonarSound.paused) { window.sonarSound.pause(); window.sonarSound.currentTime = 0; } if (distance < 15 && !window.spaceLlamaInteracted) { // If llama is within 15 units of space llama // Remove any existing bubble if (window.activeBubble) { window.activeBubble.remove(); window.activeBubble = null; } // Create and show message bubble const newBubble = document.createElement('div'); window.activeBubble = newBubble; window.activeBubble.className = 'speech-bubble bottom flex-bubble'; window.activeBubble.innerHTML = `

Hello fellow explorer! Welcome to the space zone! ⭐ `; window.activeBubble.style.transform = 'translate(-50%, 0)'; window.activeBubble.style.left = '50%'; window.activeBubble.style.bottom = '20px'; window.activeBubble.style.top = 'auto'; parentDiv.appendChild(window.activeBubble); // Update message after a delay setTimeout(() => { if (window.activeBubble) { window.activeBubble.innerHTML = `

Let's speed up your travels! Press the spacebar or touch the screen to activate the thrusters. Safe journey! 🚀 `; // Remove bubble after showing the second message setTimeout(() => { if (window.activeBubble) { window.activeBubble.remove(); window.activeBubble = null; } }, 4000); } }, 4000); window.spaceLlamaInteracted = true; // Replace belt with jetpack const belt = llama.group.children.find(child => child instanceof THREE.Mesh && child.geometry instanceof THREE.CylinderGeometry); if (belt) { llama.group.remove(belt); belt.geometry.dispose(); belt.material.dispose(); } // Add jetpack const jetpack = new Jetpack(); llama.group.add(jetpack.group); llama.jetpack = jetpack; // Initialize jetpack userData llama.jetpack.userData = { flames: jetpack.flames || [] }; // Add thrust functionality llama.applyJetpackThrust = (deltaTime) => { if (!llama.jetpack) return; llama.jetpack.applyThrust(llama, deltaTime, camera); }; } } composer.render(); // Update single butterfly with simple floating movement if (butterflies[0]) { const butterfly = butterflies[0]; const currentTime = time * 0.5; // Calculate circular path const radius = 40; // Increased base radius const height = ZONES.GROUND.min + 15 + Math.sin(currentTime * 0.7) * 8; // Higher base height and wider vertical movement // Move in a larger figure-8 pattern with varying radius const x = Math.sin(currentTime * 0.4) * radius * (1 + Math.sin(currentTime * 0.2) * 0.3); // Additional radius modulation const z = Math.sin(currentTime * 0.8) * (radius * 0.7); // Wider z movement with different frequency butterfly.group.position.set(x, height, z); // Face movement direction butterfly.group.rotation.y = Math.atan2( butterfly.group.position.x - butterfly.group.position.oldX || 0, butterfly.group.position.z - butterfly.group.position.oldZ || 0 ); // Store current position for next frame butterfly.group.position.oldX = butterfly.group.position.x; butterfly.group.position.oldZ = butterfly.group.position.z; butterfly.update(time); // Check distance between llama and butterfly if (llama && !butterfly.interacted) { const distance = butterfly.group.position.distanceTo(llama.group.position); if (distance < 15) { // Within 15 units butterfly.interacted = true; // Create and show message bubble const butterflyBubble = document.createElement('div'); butterflyBubble.className = 'speech-bubble bottom flex-bubble'; butterflyBubble.innerHTML = `

Time flies when you're having fun! Take a little more time for your adventure! ⌛ `; butterflyBubble.style.transform = 'translate(-50%, 0)'; butterflyBubble.style.left = '50%'; butterflyBubble.style.bottom = '20px'; butterflyBubble.style.top = 'auto'; parentDiv.appendChild(butterflyBubble); // Add time bonus with visual effect gameTimer += 30; gameStartTime = Date.now() - ((GAME_CONFIG.GAME_DURATION - gameTimer) * 1000); // Add visual effect to timer timerDisplay.classList.add('time-bonus-effect'); // Create floating "+30s" text const bonusText = document.createElement('div'); bonusText.className = 'bonus-time-text'; bonusText.textContent = '+30s'; bonusText.style.position = 'fixed'; bonusText.style.right = '20px'; bonusText.style.top = '40px'; parentDiv.appendChild(bonusText); // Remove the effect and bonus text after animation setTimeout(() => { timerDisplay.classList.remove('time-bonus-effect'); bonusText.remove(); }, 1500); // Remove bubble after a delay setTimeout(() => { butterflyBubble.remove(); }, 4000); } } } } // Function to update background position function updateBackgroundPosition() { const startScreen = document.getElementById('startScreen'); if (startScreen && startScreen.style.display !== 'none') { const currentPos = parseFloat(startScreen.style.backgroundPosition) || 0; const newPos = (currentPos + 0.03) % 100; // Further reduced speed to 0.03 pixels per frame startScreen.style.backgroundPosition = `${newPos}% center`; } } // Add background position update to animation loop requestAnimationFrame(function animateBackground() { updateBackgroundPosition(); requestAnimationFrame(animateBackground); }); // 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 (bloomPass && bloomPass.resolution) { bloomPass.resolution.set(width, height); } 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) { let touchDuration = 0; let touchTimer = null; function handleTouchStart(event) { if (!event || !event.touches || !event.touches[0]) return; if (event.cancelable) event.preventDefault(); isTouching = true; touchStartX = event.touches[0].clientX; touchStartY = event.touches[0].clientY; handlePointerEvent(event.touches[0].clientX, event.touches[0].clientY); // Start touch duration timer touchDuration = 0; touchTimer = setInterval(() => { touchDuration += 10; // If touching for more than 300ms, activate thrusters if (touchDuration >= 300 && llama && llama.jetpack) { window.keysPressed.space = true; const flames = llama.jetpack.userData.flames; flames.forEach(flame => { flame.visible = true; }); // Play thruster sound continuously if (window.thrustersSound) { if (window.thrustersSound.paused || window.thrustersSound.ended) { window.thrustersSound.currentTime = 0; window.thrustersSound.play().catch(error => console.warn('Thruster sound playback was prevented:', error)); } } } }, 10); } function handleTouchMove(event) { event.preventDefault(); if (!isTouching) return; handlePointerEvent(event.touches[0].clientX, event.touches[0].clientY); } function handleTouchEnd(event) { event.preventDefault(); isTouching = false; // Clear touch timer if (touchTimer) { clearInterval(touchTimer); touchTimer = null; } // If touch was short, handle as double click if (touchDuration < 300) { handleDoubleClick(); } // Ensure thrusters are completely deactivated window.keysPressed.space = false; // Deactivate thrusters and ensure flames are hidden if (llama && llama.jetpack) { if (llama.jetpack && llama.jetpack.userData) { const flames = llama.jetpack.userData.flames || []; flames.forEach(flame => { if (flame) { flame.visible = false; } }); } // Stop thruster sound if (window.thrustersSound && !window.thrustersSound.paused) { window.thrustersSound.pause(); window.thrustersSound.currentTime = 0; } // Reset any thruster-related properties llama.physicsBody.velocity.x *= 0.95; // Gentle slowdown llama.physicsBody.velocity.z *= 0.95; } touchDuration = 0; // Reset touch duration } 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 && llama) { // Check if llama has jetpack if (llama.jetpack) { // Activate thrusters window.keysPressed.space = true; // Show flames if (!llama.jetpack.userData) { llama.jetpack.userData = {}; } if (!llama.jetpack.userData.flames) { llama.jetpack.userData.flames = llama.jetpack.flames || []; } const flames = llama.jetpack.userData.flames; flames.forEach(flame => { if (flame) { flame.visible = true; } }); // Deactivate after a short duration setTimeout(() => { window.keysPressed.space = false; flames.forEach(flame => { flame.visible = false; }); }, 500); // Half second burst } else { // Regular jump if no jetpack if (Math.abs(llama.physicsBody.velocity.y) < 0.1) { llama.physicsBody.velocity.y = 6; const currentDirection = new THREE.Vector3( llama.physicsBody.velocity.x, 0, llama.physicsBody.velocity.z ).normalize(); llama.physicsBody.velocity.x += currentDirection.x * 2; llama.physicsBody.velocity.z += currentDirection.z * 2; } } } lastTap = currentTime; } canvas.addEventListener('click', (event) => { handlePointerEvent(event.clientX, event.clientY); handleDoubleClick(); }); // Create and add styles for timer effects const styleElement = document.createElement('style'); styleElement.textContent = ` @keyframes timeBonusGlow { 0% { background-color: rgba(0, 0, 0, 0.5); } 50% { background-color: rgba(124, 252, 0, 0.8); } 100% { background-color: rgba(0, 0, 0, 0.5); } } .time-bonus-effect { animation: timeBonusGlow 1.5s ease-in-out; } @keyframes bonusTextFloat { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-50px); opacity: 0; } } .bonus-time-text { color: #7CFC00; font-size: 24px; font-weight: bold; text-shadow: 0 0 5px rgba(124, 252, 0, 0.5); animation: bonusTextFloat 1.5s ease-out forwards; } `; document.head.appendChild(styleElement); // Link the external CSS file const linkElement = document.createElement("link"); linkElement.rel = "stylesheet"; linkElement.href = "https://rosebud.ai/assets/styles.css?PKT7"; document.head.appendChild(linkElement); // Key states already initialized at line 501 // Add keyboard event listeners const handleKeyEvent = (event, isKeyDown) => { if (event.code === 'Space' && llama) { window.keysPressed.jump = isKeyDown; window.keysPressed.space = isKeyDown; // Handle jetpack flames and sound if (llama && llama.jetpack) { if (!llama.jetpack.userData) { llama.jetpack.userData = {}; } if (!llama.jetpack.userData.flames) { llama.jetpack.userData.flames = llama.jetpack.flames || []; } const flames = llama.jetpack.userData.flames; flames.forEach(flame => { if (flame) { flame.visible = isKeyDown; } }); // Handle thruster sound if (isKeyDown && window.thrustersSound) { if (window.thrustersSound.paused || window.thrustersSound.ended) { window.thrustersSound.currentTime = 0; const playPromise = window.thrustersSound.play(); if (playPromise !== undefined) { playPromise.catch(error => console.warn('Thruster sound playback was prevented:', error)); } } } else if (window.thrustersSound && !isKeyDown) { window.thrustersSound.pause(); window.thrustersSound.currentTime = 0; } // Reset camera position when thrusters are deactivated if (!isKeyDown) { // Smoothly interpolate back to the original camera position const currentPos = camera.position.clone(); const targetPos = new THREE.Vector3( currentPos.x, currentPos.y, currentPos.z ); camera.position.lerp(targetPos, 0.5); } } } }; window.addEventListener('keydown', (event) => handleKeyEvent(event, true)); window.addEventListener('keyup', (event) => handleKeyEvent(event, false)); // ========================= // End of Mobile and Keyboard Controls Integration // =========================