import * as THREE from 'three'; import * as CANNON from 'https://unpkg.com/cannon-es@0.20.0/dist/cannon-es.js'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'; import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'; import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js'; import { SMAAPass } from 'three/addons/postprocessing/SMAAPass.js'; import { SAOPass } from 'three/addons/postprocessing/SAOPass.js'; Object.assign(window, { THREE, CANNON, OrbitControls, EffectComposer, RenderPass, UnrealBloomPass, SMAAPass, SAOPass }); import { ShootingStar } from 'https://play.rosebud.ai/assets/shootingstar_external.js?gRSc'; import { Tree } from 'https://play.rosebud.ai/assets/tree_external.js?BfX4'; import { Flower } from 'https://play.rosebud.ai/assets/Flower_external.js?zfRL'; import { Llama } from 'https://play.rosebud.ai/assets/Llama_external.js?PGIP'; import { Hedgehog } from 'https://play.rosebud.ai/assets/Hedgehog_export.js?kUOK'; import { Pond } from 'https://play.rosebud.ai/assets/Pond_external.js?Iznc'; import { Companion } from 'https://play.rosebud.ai/assets/Companion_lvl1_external.js?UQbl'; const parentDiv = document.getElementById('renderDiv'); const openingScreen = document.createElement('div'); const startScreen = document.createElement('div'); startScreen.id = 'startScreen'; startScreen.style.display = 'none'; openingScreen.id = 'openingScreen'; openingScreen.innerHTML = `

Adventure awaits! Where do you want to begin your journey?

`; parentDiv.appendChild(openingScreen); // Set start screen content startScreen.innerHTML = `

`; parentDiv.appendChild(startScreen); const canvas = document.createElement('canvas'); canvas.id = 'threeRenderCanvas'; parentDiv.appendChild(canvas); const inventoryContainer = document.createElement('div'); inventoryContainer.id = 'inventoryContainer'; parentDiv.appendChild(inventoryContainer); let helpedCompanions = 0; let hedgehogInteracted = false; // Track if hedgehog interaction has occurred let hasApple = false; // Track if player has collected the apple let currentScore = 0; let highScore = localStorage.getItem('highScore') || 0; let gameStartTime = 0; let completionScreen = null; let isCompletionScreenShown = false; window.hedgehogInteracted = hedgehogInteracted; function addHeartToInventory(type) { const heart = document.createElement('div'); heart.className = type === 'apple' ? 'inventory-heart special-item' : 'inventory-heart'; if (type === 'apple') { heart.innerHTML = '🍎'; hasApple = true; // Set the flag when apple is collected // Create and show bottom speech bubble } else { heart.innerHTML = type === 'bee' ? '🐝' : '🦆'; } inventoryContainer.appendChild(heart); // Increment counter and check for game completion helpedCompanions++; // Check if this is the last companion if (helpedCompanions >= 5 && !isCompletionScreenShown) { isCompletionScreenShown = true; // Delay the completion screen setTimeout(() => { // Create completion screen with fade-in effect const completionScreen = document.createElement('div'); completionScreen.id = 'completionScreen'; completionScreen.style.opacity = '0'; // Calculate final score currentScore = Math.floor((Date.now() - gameStartTime) / 1000); const isNewRecord = currentScore < highScore || highScore === 0; if (isNewRecord) { highScore = currentScore; localStorage.setItem('highScore', highScore); } // Update highscores list updateHighscores(currentScore); function formatTime(seconds) { const minutes = Math.floor(seconds / 60); const remainingSeconds = Math.floor(seconds % 60); return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`; } completionScreen.innerHTML = `

Congratulations!

You've helped five companions to find their homes!

Your Time: ${formatTime(currentScore)}

Best Time: ${formatTime(highScore)}

${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; // Stop background music and play victory music if (backgroundMusic) { backgroundMusic.pause(); backgroundMusic.currentTime = 0; } // Create new Audio instance for victory music window.victoryMusic = new Audio('https://play.rosebud.ai/assets/rosebud_official_theme_02.mp3?SeVB'); window.victoryMusic.volume = 0.3; window.victoryMusic.play().catch(error => console.warn('Victory music playback was prevented:', error)); // Add click handlers for buttons document.getElementById('viewHighscoresButton').addEventListener('click', showScoreboard); document.getElementById('playAgainButton').addEventListener('click', () => { // Reset game state helpedCompanions = 0; hedgehogInteracted = false; isCompletionScreenShown = false; window.hedgehogInteracted = false; // Reset the global state as well hasApple = false; // Reset apple collection state gameTimer = GAME_DURATION; gameStarted = true; currentDialogueLine = 0; targetPoint = null; gameStartTime = Date.now(); // Clear inventory and active markers inventoryContainer.innerHTML = ''; activeMarkers.forEach(marker => scene.remove(marker)); activeMarkers = []; // Remove completion screen completionScreen.remove(); // Reset all flowers flowers.forEach(flower => { flower.bee = null; }); // Reset all ponds ponds.forEach(pond => { pond.swimmingDucks = []; }); // Reset companions with original properties companions.forEach(companion => { companion.collected = false; companion.isAtFlower = false; companion.isSwimming = false; companion.isTransitioning = false; companion.beeSound = null; companion.currentPond = null; companion.followIndex = 0; companion.particles = null; if (companion.beeSound) { companion.beeSound.pause(); companion.beeSound.currentTime = 0; } // Reset companion positions to random starting locations if (companion.type === 'bee') { companion.mesh.position.copy(new THREE.Vector3( (Math.random() - 0.5) * 30, 3 + Math.random() * 2, (Math.random() - 0.5) * 30 )); // Reset flight parameters companion.flightParams = null; } else { companion.mesh.position.copy(new THREE.Vector3( (Math.random() - 0.5) * 30, 1, (Math.random() - 0.5) * 30 )); } // Reset companion rotation companion.mesh.rotation.set(0, 0, 0); }); // Reset llama to initial state and movement speed llama.companions = []; llama.physicsBody.position.set(0, 5, 0); llama.physicsBody.velocity.set(0, 0, 0); llama.physicsBody.quaternion.set(0, 0, 0, 1); llama.group.rotation.set(0, 0, 0); llama.isMoving = false; llama.animationTime = 0; llama.moveSpeed = 15; // Increased default speed llama.jumpForce = 12; // Slightly increased jump force // Reset camera position camera.position.set(0, 8, 15); camera.lookAt(0, 2, 0); controls.target.set(0, 2, 0); controls.update(); // Stop all sounds and restart background music if (backgroundMusic) { // Stop victory music if (window.victoryMusic) { window.victoryMusic.pause(); window.victoryMusic.currentTime = 0; window.victoryMusic = null; } // Reset and restart background music backgroundMusic.currentTime = 0; backgroundMusic.play().catch(error => console.warn('Music playback was prevented')); } // Reset time of day and last time lastTime = Date.now(); }); }, 1000); // 1 second delay } } // Initialize timer and lighting state const GAME_DURATION = 5 * 60; // 5 minutes in seconds let gameTimer = GAME_DURATION; 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(0x87CEEB), // Light blue skyBottom: new THREE.Color(0xE6F3FF), // Light white-blue sunLight: new THREE.Color(0xFFFACD), // Warm morning sun intensity: 2.0, ambientLight: new THREE.Color(0x8899AA) }, noon: { skyTop: new THREE.Color(0x1E90FF), // Deep sky blue skyBottom: new THREE.Color(0x87CEEB), // Light sky blue sunLight: new THREE.Color(0xFFFFFF), // Bright white intensity: 3.0, ambientLight: new THREE.Color(0xFFFFFF) }, 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 let gameStarted = false; // Dialogue system const dialogueLines = [ "Hello there, furry friend! I'm Professor Hoot! 🦉", "Welcome to this magical meadow where amazing creatures await!", "Your mission is to help the bees find their flowers 🐝🌸", "And guide the ducks to their favorite ponds! 🦆💦", "Click or tap to move, double-tap to jump!", "Help five creatures to find their homes to complete this quest.", "Are you ready to start this wonderful 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 // Add event listeners for journey buttons document.getElementById('startJourneyButton').addEventListener('click', () => { openingScreen.style.display = 'none'; startScreen.style.display = 'flex'; }); document.getElementById('seaJourneyButton').addEventListener('click', () => { window.location.href = 'https://play.rosebud.ai/p/5fee4b8c-ae34-4e7d-be0e-ea86c76fba35'; }); document.getElementById('windJourneyButton').addEventListener('click', () => { window.location.href = 'https://rosebud.ai/p/c944b09a-ea13-403c-ba4c-80f5ee0077f2'; }); document.getElementById('startButton').addEventListener('click', () => { gameStarted = true; startScreen.style.display = 'none'; gameStartTime = Date.now(); // 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 const loadingManager = new THREE.LoadingManager(); const textureLoader = new THREE.TextureLoader(loadingManager); let 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 let backgroundMusic = null; let quackSound = null; let beeSound = null; // 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/Rising Sun - DivKid.mp3?hvCN'); backgroundMusic.loop = true; backgroundMusic.volume = 0.1; // Adjusted volume for the new track // Initialize quack sound quackSound = new Audio('https://play.rosebud.ai/assets/418509_5632532-lq.mp3?WvJR'); quackSound.volume = 0.5; window.quackSound = quackSound; // Initialize bee sound beeSound = new Audio('https://play.rosebud.ai/assets/103047_861714-lq.mp3?VepL'); beeSound.volume = 0.05; beeSound.loop = true; window.beeSound = beeSound; backgroundMusic.play().catch((error) => { console.warn('Autoplay was prevented. User interaction is required to play the background music.'); }); }; // Initialize global scene variable window.scene = new THREE.Scene(); // Companion Class (external) // Initialize physics world const world = new CANNON.World(); window.world = world; world.gravity.set(0, -9.82, 0); world.broadphase = new CANNON.NaiveBroadphase(); world.solver.iterations = 10; // Clock for animation const clock = new THREE.Clock(); // 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 ambient occlusion pass const aoPass = new SAOPass(scene, camera, false, true); aoPass.params.output = SAOPass.OUTPUT.Default; aoPass.params.saoBias = 0.5; aoPass.params.saoIntensity = 0.02; aoPass.params.saoScale = 100; aoPass.params.saoKernelRadius = 100; aoPass.params.saoMinResolution = 0; aoPass.params.saoBlur = true; aoPass.params.saoBlurRadius = 8; aoPass.params.saoBlurStdDev = 4; aoPass.params.saoBlurDepthCutoff = 0.01; composer.addPass(aoPass); // 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 // Enhanced fog and scene atmosphere scene.fog = new THREE.FogExp2(0x87CEEB, 0.005); // Lighter fog for sunny day 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 // Create Hedgehog class (externl) // Create hedgehog instance at the edge of the plane const hedgehog = new Hedgehog(80, 80); // Create fallen tree near hedgehog const fallenTree = new Tree(82, 82); // Position slightly offset from hedgehog // Rotate and adjust the tree to appear fallen fallenTree.group.rotation.z = Math.PI / 2; // Rotate 90 degrees to lay it down fallenTree.group.position.y = 0.5; // Adjust height to lay on ground fallenTree.group.rotation.y = Math.PI / 4; // Add slight diagonal angle 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 = 200; // Create simple flat plane for visuals const geometry = new THREE.PlaneGeometry(size, size); const texture = textureLoader.load('https://play.rosebud.ai/assets/3D_playground_grass_diffuse.png?L45u'); const normalMap = textureLoader.load('https://play.rosebud.ai/assets/3D_playground_grass_normal.png?4yvJ'); texture.wrapS = texture.wrapT = THREE.RepeatWrapping; texture.repeat.set(20, 20); // Decreased repeat to 20x20 texture.encoding = THREE.sRGBEncoding; normalMap.wrapS = normalMap.wrapT = THREE.RepeatWrapping; normalMap.repeat.set(20, 20); // Match texture repeat with decreased value const material = new THREE.MeshStandardMaterial({ map: texture, normalMap: normalMap, normalScale: new THREE.Vector2(2, 2), roughness: 0.6, metalness: 0.1, envMapIntensity: 1.2, color: new THREE.Color(0x90EE90) // Light green }); const terrain = new THREE.Mesh(geometry, material); window.terrain = terrain; terrain.rotation.x = -Math.PI / 2; terrain.receiveShadow = true; scene.add(terrain); return terrain; } // Create endless sea function createSea() { const seaGeometry = new THREE.PlaneGeometry(2000, 2000); const seaMaterial = new THREE.MeshStandardMaterial({ color: 0x006994, transparent: true, opacity: 0.8, metalness: 0.1, roughness: 0.3 }); const sea = new THREE.Mesh(seaGeometry, seaMaterial); sea.rotation.x = -Math.PI / 2; sea.position.y = -2; // Position slightly below the terrain scene.add(sea); return sea; } // 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 = 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); // Create clouds function createCloud() { const cloud = new THREE.Group(); const cloudMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff, transparent: true, opacity: 0, roughness: 0.8, metalness: 0.2 }); // Create multiple spheres for fluffy appearance const sphereCount = 5 + Math.floor(Math.random() * 4); for (let i = 0; i < sphereCount; i++) { const radius = 2 + Math.random() * 2; const geometry = new THREE.SphereGeometry(radius, 8, 8); const segment = new THREE.Mesh(geometry, cloudMaterial); // Position segments to form cloud shape segment.position.x = i * 2 - (sphereCount * 0.8); segment.position.y = Math.random() * 1.5; segment.position.z = Math.random() * 2 - 1; segment.scale.y = 0.6 + Math.random() * 0.2; cloud.add(segment); } // Add movement parameters cloud.userData = { speed: 0.2 + Math.random() * 0.3, rotationSpeed: (Math.random() - 0.5) * 0.002, initialX: cloud.position.x }; return cloud; } // 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; for (let i = 0; i < maxShootingStars; i++) { const shootingStar = new ShootingStar(); scene.add(shootingStar.line); shootingStars.push(shootingStar); } // 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 rainbow function createRainbow() { const rainbow = new THREE.Group(); const radius = 45; const thickness = 1; const colors = [ 0xFF5555, // Bright red 0xFF9933, // Bright orange 0xFFFF66, // Bright yellow 0x66FF66, // Bright green 0x66CCFF, // Bright blue 0x9966FF, // Bright purple 0xFF66B2 // Bright pink ]; colors.forEach((color, i) => { const geometry = new THREE.TorusGeometry(radius - (i * thickness), thickness, 16, 64, Math.PI); const material = new THREE.MeshStandardMaterial({ color: color, emissive: color, emissiveIntensity: 0.2 }); const arc = new THREE.Mesh(geometry, material); arc.rotation.x = Math.PI * 0.01; // Almost vertical arc.position.y = -50; // Lower base position arc.position.z = -100; // Slightly closer arc.scale.set(3, 3, 3); // Larger scale for more presence arc.rotation.y = Math.PI; // Keep facing inward arc.rotation.z = Math.PI * 0.02; // Slight tilt for better perspective rainbow.add(arc); }); scene.add(rainbow); return rainbow; // Return the rainbow group for later reference } // Create trees with variation // Initialize ponds array const ponds = []; // Create environmental elements placeholder function createEnvironmentalElements() { // Other environmental elements can be added here if needed } // Create glowing mushrooms // Initialize shared geometries and materials for mushrooms const mushroomGeometries = { stem: new THREE.CylinderGeometry(0.15, 0.25, 1, 6), bulb: new THREE.IcosahedronGeometry(0.3, 0), gills: new THREE.CircleGeometry(0.4, 6) }; const mushroomMaterials = { stem: new THREE.MeshStandardMaterial({ color: 0xF0F0F0, roughness: 0.7, metalness: 0.1, emissive: 0x404040, emissiveIntensity: 0.2 }), pinkCap: new THREE.MeshStandardMaterial({ color: 0xFF69B4, emissive: 0xFF1493, emissiveIntensity: 0.5, roughness: 0.6, metalness: 0.2 }), purpleCap: new THREE.MeshStandardMaterial({ color: 0x7B68EE, emissive: 0x483D8B, emissiveIntensity: 0.5, roughness: 0.6, metalness: 0.2 }), gills: new THREE.MeshStandardMaterial({ color: 0xE0E0E0, roughness: 0.9, metalness: 0.1, side: THREE.DoubleSide }) }; // Create low-poly cap using compound shapes function createLowPolyMushroomCap() { // Create and combine geometries manually const geometry = new THREE.CylinderGeometry(0.7, 0.8, 0.6, 6); // Modify vertices to create mushroom cap shape const pos = geometry.attributes.position; const vertex = new THREE.Vector3(); for (let i = 0; i < pos.count; i++) { vertex.fromBufferAttribute(pos, i); if (vertex.y > 0) { // Create dome shape for top vertices const radius = Math.sqrt(vertex.x * vertex.x + vertex.z * vertex.z); vertex.y = vertex.y * (1.0 - radius * 0.5); } pos.setXYZ(i, vertex.x, vertex.y, vertex.z); } geometry.computeVertexNormals(); return geometry; } mushroomGeometries.cap = createLowPolyMushroomCap(); function createMagicMushroom(x, z) { const mushroom = new THREE.Group(); // Create stem with slight taper and bend const stemMesh = new THREE.Mesh(mushroomGeometries.stem, mushroomMaterials.stem); stemMesh.position.y = 0.5; stemMesh.rotation.z = Math.random() * 0.2 - 0.1; // Slight random tilt // Create root bulb const bulbMesh = new THREE.Mesh(mushroomGeometries.bulb, mushroomMaterials.stem); bulbMesh.position.y = 0; bulbMesh.scale.set(1.2, 0.7, 1.2); // Create cap with enhanced material and positioning const capMaterial = Math.random() > 0.5 ? mushroomMaterials.pinkCap : mushroomMaterials.purpleCap; const cap = new THREE.Mesh(mushroomGeometries.cap, capMaterial); cap.position.y = 1.2; cap.scale.set(1, 1.2, 1); // Create and position gills const gillsTop = new THREE.Mesh(mushroomGeometries.gills, mushroomMaterials.gills); gillsTop.rotation.x = Math.PI / 2; gillsTop.position.y = 1.1; // Add slight random rotation to the entire mushroom mushroom.rotation.y = Math.random() * Math.PI * 2; mushroom.add(stemMesh, bulbMesh, cap, gillsTop); mushroom.position.set(x, 0, z); mushroom.scale.multiplyScalar(0.5 + Math.random() * 0.5); // Add spatial hints for better culling mushroom.frustumCulled = true; mushroom.matrixAutoUpdate = false; mushroom.updateMatrix(); scene.add(mushroom); } // Create floating wisps function createWisps() { const wispCount = 40; // Reduced from 100 to 30 wisps / auf 40 erhoeht const wisps = new THREE.Group(); const wispGeometry = new THREE.BoxGeometry(0.1, 0.1, 0.1); const wispMaterial = new THREE.MeshStandardMaterial({ color: 0xE6E6FA, // Pastel lavender emissive: 0xE6E6FA, emissiveIntensity: 1.5, transparent: true, opacity: 0.9, metalness: 0.2, roughness: 0.2 }); for (let i = 0; i < wispCount; i++) { const wisp = new THREE.Mesh(wispGeometry, wispMaterial.clone()); const radius = 60 * Math.sqrt(Math.random()); const theta = Math.random() * Math.PI * 2; wisp.position.set( radius * Math.cos(theta), 2 + Math.random() * 8, radius * Math.sin(theta) ); wisp.userData = { originalY: wisp.position.y, floatSpeed: 0.5 + Math.random() * 0.5, floatOffset: Math.random() * Math.PI * 2, glowIntensity: 0.5 + Math.random() * 0.5 }; wisps.add(wisp); } scene.add(wisps); return wisps; } // Helper function to check if a position is too close to any pond function isTooCloseToWater(x, z, minDistance = 10) { for (const pond of ponds) { const dx = x - pond.position.x; const dz = z - pond.position.z; const distanceToPond = Math.sqrt(dx * dx + dz * dz); if (distanceToPond < pond.effectiveRadius + minDistance) { return true; } } return false; } // Create a dense forest const treePositions = []; let attempts = 0; const maxAttempts = 100; // Add edge trees first const edgePositions = [ // Corner positions { x: -95, z: -95 }, { x: -95, z: 95 }, { x: 95, z: -95 }, { x: 95, z: 95 }, // North edge { x: -70, z: 95 }, { x: -35, z: 95 }, { x: 35, z: 95 }, { x: 70, z: 95 }, // South edge { x: -70, z: -95 }, { x: -35, z: -95 }, { x: 35, z: -95 }, { x: 70, z: -95 }, // East edge { x: 95, z: -70 }, { x: 95, z: -35 }, { x: 95, z: 35 }, { x: 95, z: 70 }, // West edge { x: -95, z: -70 }, { x: -95, z: -35 }, { x: -95, z: 35 }, { x: -95, z: 70 } ]; edgePositions.forEach(pos => { if (!isTooCloseToWater(pos.x, pos.z, 12)) { treePositions.push(pos); } }); // Then add random trees while (treePositions.length < 70 && attempts < maxAttempts) { const radius = 60 * Math.sqrt(Math.random()); const theta = Math.random() * Math.PI * 2; const x = radius * Math.cos(theta); const z = radius * Math.sin(theta); if (!isTooCloseToWater(x, z, 12)) { treePositions.push({ x, z }); } attempts++; } // Create lush grass patterns function createLushGrassPatterns() { const grassPatternCount = 8; // Reduced number of grass pattern clusters const grassPerPattern = 40; // Reduced number of grass instances per pattern for (let i = 0; i < grassPatternCount; i++) { // Create a random center point for each pattern const centerRadius = 45 * Math.sqrt(Math.random()); const centerTheta = Math.random() * Math.PI * 2; const centerX = centerRadius * Math.cos(centerTheta); const centerZ = centerRadius * Math.sin(centerTheta); // Check if the center point is too close to any pond let tooCloseToWater = false; for (const pond of ponds) { const dx = centerX - pond.position.x; const dz = centerZ - pond.position.z; const distanceToPond = Math.sqrt(dx * dx + dz * dz); if (distanceToPond < pond.effectiveRadius + 6) { tooCloseToWater = true; break; } } if (!tooCloseToWater) { // Create grass pattern for (let j = 0; j < grassPerPattern; j++) { // Random position within the pattern const angle = Math.random() * Math.PI * 2; const spread = 5 + Math.random() * 3; // Pattern size const distance = Math.random() * spread; const x = centerX + Math.cos(angle) * distance; const z = centerZ + Math.sin(angle) * distance; // Create individual grass mesh const height = 0.3 + Math.random() * 0.4; const grassGeometry = new THREE.PlaneGeometry(0.1, height); grassGeometry.translate(0, height / 2, 0); const grassMaterial = new THREE.MeshStandardMaterial({ color: new THREE.Color(0xB5E3B5) .lerp(new THREE.Color(0x98CF98), Math.random() * 0.3), side: THREE.DoubleSide, roughness: 0.8, metalness: 0.1, }); const grass = new THREE.Mesh(grassGeometry, grassMaterial); grass.position.set(x, 0, z); grass.rotation.y = Math.random() * Math.PI; grass.rotation.x = (Math.random() * 0.2) - 0.1; // Add slight random bend for more natural look grass.userData = { originalRotation: grass.rotation.clone(), bendFactor: Math.random() * 0.2, bendSpeed: 0.5 + Math.random() * 0.5, bendOffset: Math.random() * Math.PI * 2 }; scene.add(grass); } } } } // Create flower class (external) // Create flowers array and add flowers to the scene const flowers = []; const flowerTypes = ['daisy', 'tulip', 'sunflower']; // Add 15 random flowers let flowerAttempts = 0; const maxFlowerAttempts = 50; while (flowers.length < 8 && flowerAttempts < maxFlowerAttempts) { 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 (!isTooCloseToWater(x, z, 10)) { const type = flowerTypes[Math.floor(Math.random() * flowerTypes.length)]; flowers.push(new Flower(x, z, type)); } flowerAttempts++; } // Add environmental elements const rainbow = createRainbow(); rainbow.userData.targetOpacity = 1; // Add opacity tracking createLushGrassPatterns(); // Add clouds const clouds = new THREE.Group(); for (let i = 0; i < 15; i++) { const cloud = createCloud(); cloud.position.set( (Math.random() - 0.5) * 200, 30 + Math.random() * 20, (Math.random() - 0.5) * 200 ); cloud.scale.setScalar(2 + Math.random() * 3); clouds.add(cloud); } scene.add(clouds); // Add stars const stars = createStars(); scene.add(stars); // Create trees and other elements after scene is initialized if (window.scene) { // Create and add low poly rocks function createRock() { const rockGroup = new THREE.Group(); // Create base geometry with increased detail for smoother surface const geometry = new THREE.IcosahedronGeometry(1, 1); const positionAttribute = geometry.attributes.position; // Create a noise function for consistent displacement const noiseScale = 0.5; const smoothDisplacement = (x, y, z) => { return (Math.sin(x * 5) * Math.cos(y * 3) * Math.sin(z * 4)) * noiseScale; }; // Modify vertices with smoother displacement for (let i = 0; i < positionAttribute.count; i++) { const vertex = new THREE.Vector3(); vertex.fromBufferAttribute(positionAttribute, i); // Normalize the vertex to ensure consistent surface vertex.normalize(); // Apply smooth displacement const displacement = smoothDisplacement( vertex.x * Math.PI, vertex.y * Math.PI, vertex.z * Math.PI ); // Scale vertex with smooth displacement vertex.multiplyScalar(1 + displacement); positionAttribute.setXYZ(i, vertex.x, vertex.y, vertex.z); } geometry.computeVertexNormals(); // Create material with slight variation in color const material = new THREE.MeshStandardMaterial({ color: new THREE.Color(0x808080) .lerp(new THREE.Color(0x606060), Math.random() * 0.2), roughness: 0.8 + Math.random() * 0.2, metalness: 0.1, flatShading: true }); const rock = new THREE.Mesh(geometry, material); rockGroup.add(rock); // Random rotation and scale rockGroup.rotation.x = Math.random() * Math.PI; rockGroup.rotation.y = Math.random() * Math.PI; rockGroup.rotation.z = Math.random() * Math.PI; const scale = 1 + Math.random() * 1.5; rockGroup.scale.set(scale, scale * 0.8, scale); return rockGroup; } // Generate random rock positions across the plane const rockPositions = []; const numRocks = 35; // Reduced number of rocks for better balance const minDistance = 8; // Minimum distance between rocks // Function to check if a position is too close to existing rocks function isTooCloseToRocks(x, z) { for (const pos of rockPositions) { const dx = x - pos.x; const dz = z - pos.z; const distance = Math.sqrt(dx * dx + dz * dz); if (distance < minDistance) return true; } return false; } // Add some rocks along the edges for border definition for (let i = 0; i < 16; i++) { const angle = (i / 16) * Math.PI * 2; const x = Math.cos(angle) * 95; const z = Math.sin(angle) * 95; rockPositions.push({ x, z }); } // Add random rocks across the plane let attempts = 0; const maxAttempts = 200; while (rockPositions.length < numRocks && attempts < maxAttempts) { // Generate position using polar coordinates for better distribution const radius = Math.random() * 90; // Slightly inside the edges const angle = Math.random() * Math.PI * 2; const x = Math.cos(angle) * radius; const z = Math.sin(angle) * radius; if (!isTooCloseToRocks(x, z) && !isTooCloseToWater(x, z, 10)) { rockPositions.push({ x, z }); } attempts++; } // Place rocks at each position rockPositions.forEach(pos => { if (!isTooCloseToWater(pos.x, pos.z, 8)) { const rock = createRock(); // Add random rotation and slight elevation rock.position.set( pos.x + (Math.random() - 0.5) * 2, // Add slight position variation Math.random() * 0.5, // Vary height slightly pos.z + (Math.random() - 0.5) * 2 ); // Add random rotation for more natural look rock.rotation.y = Math.random() * Math.PI * 2; rock.rotation.z = (Math.random() - 0.5) * 0.2; scene.add(rock); // Add smaller rocks around main rock with more variation const smallRockCount = Math.floor(Math.random() * 4) + 1; for (let i = 0; i < smallRockCount; i++) { const smallRock = createRock(); const angle = Math.random() * Math.PI * 2; const distance = 1.5 + Math.random() * 2.5; smallRock.position.set( pos.x + Math.cos(angle) * distance, Math.random() * 0.3, // Vary height of small rocks pos.z + Math.sin(angle) * distance ); // More varied scaling for small rocks const scale = 0.2 + Math.random() * 0.4; smallRock.scale.set( scale * (0.8 + Math.random() * 0.4), scale * (0.8 + Math.random() * 0.4), scale * (0.8 + Math.random() * 0.4) ); smallRock.rotation.y = Math.random() * Math.PI * 2; smallRock.rotation.z = (Math.random() - 0.5) * 0.3; scene.add(smallRock); } } }); treePositions.forEach(pos => new Tree(pos.x, pos.z)); const terrain = createTerrain(); const sea = createSea(); } // Add magical elements const wisps = createWisps(); // Add mushrooms in clusters let clusterAttempts = 0; const maxClusterAttempts = 20; let clustersCreated = 0; // First add edge mushrooms const edgeMushroomPositions = [{ x: -90, z: -90 }, { x: -90, z: 90 }, { x: 90, z: -90 }, { x: 90, z: 90 }, // Add more positions along the edges { x: -90, z: -45 }, { x: -90, z: 0 }, { x: -90, z: 45 }, { x: 90, z: -45 }, { x: 90, z: 0 }, { x: 90, z: 45 }, { x: -45, z: -90 }, { x: 0, z: -90 }, { x: 45, z: -90 }, { x: -45, z: 90 }, { x: 0, z: 90 }, { x: 45, z: 90 } ]; // Place edge mushrooms edgeMushroomPositions.forEach(pos => { if (!isTooCloseToWater(pos.x, pos.z, 10)) { const mushroomCount = 2 + Math.floor(Math.random() * 2); for (let j = 0; j < mushroomCount; j++) { const angle = (j / mushroomCount) * Math.PI * 2; const radius = 1 + Math.random() * 2; const mushX = pos.x + Math.cos(angle) * radius; const mushZ = pos.z + Math.sin(angle) * radius; createMagicMushroom(mushX, mushZ); } } }); // Then add random clusters in the middle while (clustersCreated < 8 && clusterAttempts < maxClusterAttempts) { const clusterCenter = { x: (Math.random() - 0.5) * 80, z: (Math.random() - 0.5) * 80 }; if (!isTooCloseToWater(clusterCenter.x, clusterCenter.z, 15)) { const mushroomCount = 2 + Math.floor(Math.random() * 2); for (let j = 0; j < mushroomCount; j++) { const angle = (j / mushroomCount) * Math.PI * 2; const radius = 1 + Math.random() * 2; const mushX = clusterCenter.x + Math.cos(angle) * radius; const mushZ = clusterCenter.z + Math.sin(angle) * radius; createMagicMushroom(mushX, mushZ); } clustersCreated++; } clusterAttempts++; } // Create duck house function function createDuckHouse(x, y, z) { const house = new THREE.Group(); // Create main house structure const baseGeometry = new THREE.BoxGeometry(3, 2, 2.5); const baseMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff, roughness: 0.8, metalness: 0.2 }); const base = new THREE.Mesh(baseGeometry, baseMaterial); // Create roof const roofGeometry = new THREE.ConeGeometry(2.5, 2, 4); const roofMaterial = new THREE.MeshStandardMaterial({ color: 0xcc0000, roughness: 0.7, metalness: 0.3 }); const roof = new THREE.Mesh(roofGeometry, roofMaterial); roof.rotation.y = Math.PI / 4; roof.position.y = 1.75; // Create entrance const entranceGeometry = new THREE.CircleGeometry(0.4, 32); const entranceMaterial = new THREE.MeshStandardMaterial({ color: 0x4A3C31, roughness: 0.9, metalness: 0.1 }); const entrance = new THREE.Mesh(entranceGeometry, entranceMaterial); entrance.position.set(0, 0, 1.26); // Create floating platform const platformGeometry = new THREE.BoxGeometry(4, 0.3, 3.5); const platformMaterial = new THREE.MeshStandardMaterial({ color: 0x966F33, roughness: 0.8, metalness: 0.2 }); const platform = new THREE.Mesh(platformGeometry, platformMaterial); platform.position.y = -0.2; house.add(base); house.add(roof); house.add(entrance); house.add(platform); house.position.set(x, y, z); scene.add(house); return house; } // Create pond class // Shared geometries and materials for all ponds const pondGeometries = { waterBase: new THREE.BufferGeometry(), vegetation: new THREE.CylinderGeometry(0.05, 0.05, 0.5, 4), rock: new THREE.SphereGeometry(0.3, 4, 3), edge: new THREE.CylinderGeometry(0.2, 0.2, 0.4, 4) }; // Custom water shader const pondMaterials = { water: new THREE.MeshStandardMaterial({ color: new THREE.Color(0x66ccff), transparent: true, opacity: 0.6, metalness: 0.8, roughness: 0.5, side: THREE.DoubleSide, envMapIntensity: 1.0, depthWrite: false, depthTest: true, blending: THREE.CustomBlending, blendEquation: THREE.AddEquation, blendSrc: THREE.OneFactor, blendDst: THREE.OneMinusSrcAlphaFactor }), bottom: new THREE.MeshStandardMaterial({ color: 0x3C2A21, roughness: 0.9, metalness: 0.1 }), vegetation: new THREE.MeshStandardMaterial({ color: 0x2E8B57, roughness: 0.8, metalness: 0.1 }), rock: new THREE.MeshStandardMaterial({ color: 0x808080, roughness: 0.9, metalness: 0.1, transparent: false, opacity: 1, depthWrite: true }) }; // Add generateOrganicPoints method to Pond class Pond.prototype.generateOrganicPoints = function() { const points = []; const segments = 18; // Increased segments for smoother shape for (let i = 0; i < segments; i++) { const angle = (i / segments) * Math.PI * 2; // More natural variation in radius const radiusVariation = Math.sin(angle * 3) * 0.2 + Math.cos(angle * 2) * 0.3; const radius = this.radius * (0.7 + Math.random() * 0.4 + radiusVariation); points.push({ x: Math.cos(angle) * radius, y: Math.sin(angle) * radius }); } return points; }; // Initialize scene with ponds // Create ponds at specific positions with organic shapes // Initialize required materials and geometries window.pondMaterials = pondMaterials; window.pondGeometries = pondGeometries; const pond1 = new Pond(-25, 25, 'organic'); // Add duck house to pond1 const duckHouse = createDuckHouse(-28, 0.5, 22); window.duckHouse = duckHouse; const pond2 = new Pond(30, -20, 'organic'); const pond3 = new Pond(-30, 35, 'organic'); const pond4 = new Pond(40, -25, 'organic'); // Add ponds to the array ponds.push(pond1); ponds.push(pond2); ponds.push(pond3); ponds.push(pond4); // Initialize ponds in scene // 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) window.world = world; // Create llama instance const llama = new Llama(); window.llama = llama; // Create companions const companions = [ new Companion('duck', new THREE.Vector3(10, 1, 10)), new Companion('duck', new THREE.Vector3(-10, 1, -10)), // Add more bees with varied initial positions new Companion('bee', new THREE.Vector3(15, 3, 0)), new Companion('bee', new THREE.Vector3(-15, 4, 0)), new Companion('bee', new THREE.Vector3(8, 5, 8)), new Companion('bee', new THREE.Vector3(-8, 3, -8)), new Companion('bee', new THREE.Vector3(20, 4, -5)), new Companion('bee', new THREE.Vector3(-20, 5, 5)) ]; // Animation loop // Initialize raycaster and target point const raycaster = new THREE.Raycaster(); const mouse = new THREE.Vector2(); let targetPoint = null; let targetMarker = null; // Initialize target marker let 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); targetPoint = intersects[0].point; } } // Add click event listener canvas.addEventListener('click', (event) => { handlePointerEvent(event.clientX, event.clientY); }); function animate() { requestAnimationFrame(animate); // Only update game if it has started if (!gameStarted) { return; } // Continue game loop const deltaTime = clock.getDelta(); const time = clock.getElapsedTime(); // 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; if (gameTimer > 0) { gameTimer -= timeDiff; // Calculate time period based on remaining time const timeProgress = 1 - (gameTimer / GAME_DURATION); let currentPeriod, nextPeriod, periodProgress; if (timeProgress < 0.2) { currentPeriod = timePeriods.sunrise; nextPeriod = timePeriods.morning; periodProgress = timeProgress / 0.2; } else if (timeProgress < 0.4) { currentPeriod = timePeriods.morning; nextPeriod = timePeriods.noon; periodProgress = (timeProgress - 0.2) / 0.2; } else if (timeProgress < 0.6) { currentPeriod = timePeriods.noon; nextPeriod = timePeriods.evening; periodProgress = (timeProgress - 0.4) / 0.2; } else if (timeProgress < 0.8) { currentPeriod = timePeriods.evening; nextPeriod = timePeriods.sunset; periodProgress = (timeProgress - 0.6) / 0.2; } else { currentPeriod = timePeriods.sunset; nextPeriod = timePeriods.night; periodProgress = (timeProgress - 0.8) / 0.2; } // 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 progress even if game timer is finished const timeProgress = Math.max(0, Math.min(1, 1 - (gameTimer / GAME_DURATION))); const isMidDay = timeProgress >= 0.3 && timeProgress <= 0.5; const isNight = timeProgress >= 0.8; // Update rainbow opacity if (rainbow) { // Set target opacity based on time of day rainbow.userData.targetOpacity = isNight ? 0 : (timeProgress > 0.7 ? (0.8 - timeProgress) / 0.1 : 1); // Smoothly update opacity of all rainbow arcs rainbow.children.forEach(arc => { if (arc.material) { if (!arc.material.transparent) { arc.material.transparent = true; } arc.material.opacity += (rainbow.userData.targetOpacity - arc.material.opacity) * 0.01; } }); } // Update clouds clouds.children.forEach((cloud, index) => { // Move clouds cloud.position.x += cloud.userData.speed * deltaTime; cloud.rotation.y += cloud.userData.rotationSpeed; // Reset cloud position when it moves too far if (cloud.position.x > 200) { cloud.position.x = -200; } // Update cloud opacity based on time of day cloud.children.forEach(segment => { const targetOpacity = isMidDay ? 0.85 : (timeProgress < 0.3 ? timeProgress / 0.3 * 0.85 : (timeProgress > 0.5 && timeProgress < 0.8 ? (0.8 - timeProgress) / 0.3 * 0.85 : 0)); segment.material.opacity += (targetOpacity - segment.material.opacity) * 0.1; }); }); // 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()); } // Animate grass scene.children.forEach(child => { if (child.geometry && child.geometry.type === 'PlaneGeometry' && child.geometry.parameters.width === 0.1) { // Identify grass by geometry const userData = child.userData; if (userData.originalRotation) { // Calculate wind effect const windEffect = Math.sin(time * userData.bendSpeed + userData.bendOffset) * userData.bendFactor; child.rotation.x = userData.originalRotation.x + windEffect; child.rotation.z = userData.originalRotation.z + windEffect * 0.5; } } }); // Animate wisps if (wisps) { wisps.children.forEach(wisp => { // Floating movement wisp.position.y = wisp.userData.originalY + Math.sin(time * wisp.userData.floatSpeed + wisp.userData.floatOffset) * 0.5; // Pulsating glow wisp.material.emissiveIntensity = wisp.userData.glowIntensity * (0.7 + Math.sin(time * 2) * 0.3); // Gentle rotation wisp.rotation.y += deltaTime * 0.5; }); } if (assetsLoaded) { // Update physics world.step(1 / 60); // Check for llama-flower interactions // Create a Set to track processed bees in this frame const processedBees = new Set(); flowers.forEach(flower => { if (!flower.bee) { // Only check flowers without bees const llamaPos = llama.group.position; const dx = llamaPos.x - flower.position.x; const dz = llamaPos.z - flower.position.z; const distance = Math.sqrt(dx * dx + dz * dz); // Increase collection radius if player has apple const collectionRadius = hasApple ? flower.radius + 6 : flower.radius + 2.5; if (distance < collectionRadius) { // Get first available bee that hasn't been processed const beeIndex = llama.companions.findIndex(companion => companion.type === 'bee' && !processedBees.has(companion.id)); if (beeIndex !== -1) { const bee = llama.companions[beeIndex]; // Mark this bee as processed processedBees.add(bee.id); bee.isAtFlower = true; flower.setBee(bee); // Create happiness effect bee.createParticleSystem(bee.mesh.position); // Remove bee from llama's companions llama.companions.splice(beeIndex, 1); // Add heart to inventory addHeartToInventory('bee'); } } } }); // Check for llama-pond interactions for duck companions if (llama.companions.length > 0) { ponds.forEach(pond => { const llamaPos = llama.group.position; const dx = llamaPos.x - pond.position.x; const dz = llamaPos.z - pond.position.z; const distance = Math.sqrt(dx * dx + dz * dz); if (distance < pond.radius * 1.5) { // Find duck companions near the pond llama.companions.forEach((companion, index) => { if (companion.type === 'duck' && !companion.isSwimming) { pond.addDuck(companion); // Remove duck from llama's companions llama.companions.splice(index, 1); // Add heart to inventory addHeartToInventory('duck'); } }); } }); } // Update ponds and swimming ducks ponds.forEach(pond => { pond.updateSwimmingDucks(clock.getElapsedTime()); }); // Update companions and their particles companions.forEach(companion => { companion.update(clock.getElapsedTime(), llama.group.position, deltaTime); // 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 llama.update(); // Move llama towards target point if it exists if (targetPoint) { llama.move(targetPoint, keysPressed.jump); // 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 { // Allow the llama to maintain momentum with less dampening llama.physicsBody.velocity.x *= 0.98; llama.physicsBody.velocity.z *= 0.98; } // Update camera to follow llama in third person const llamaPos = llama.group.position; function updateCamera(camera, llama, controls) { 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(camera, llama, controls); } // Update hedgehog animation if (hedgehog) { hedgehog.update(time); } // Initialize hedgehog sound and bubble state if not already defined if (!window.hedgehogSound) { window.hedgehogSound = new Audio('https://play.rosebud.ai/assets/hedgehog_short.mp3?n4bM'); window.hedgehogSound.volume = 0.3; } if (typeof window.activeBubble === 'undefined') { window.activeBubble = null; } // Check distance between llama and hedgehog (moved above companion checks) if (hedgehog && llama && !hedgehogInteracted) { const distance = llama.group.position.distanceTo(hedgehog.group.position); if (distance < 5) { // If llama is within 5 units of hedgehog // Remove any existing bubble if (activeBubble) { activeBubble.remove(); } // Create and show message bubble activeBubble = document.createElement('div'); activeBubble.className = 'speech-bubble bottom flex-bubble'; activeBubble.innerHTML = `

Oh hi there! Are you hungry? Take this apple! 🍎 `; activeBubble.style.transform = 'translate(-50%, 0)'; activeBubble.style.left = '50%'; activeBubble.style.bottom = '20px'; activeBubble.style.top = 'auto'; parentDiv.appendChild(activeBubble); // Play hedgehog sound only if not already playing if (window.hedgehogSound.paused) { window.hedgehogSound.currentTime = 0; window.hedgehogSound.play().catch(error => console.warn('Hedgehog sound playback was prevented')); } // Set hedgehog interaction state hasApple = true; hedgehogInteracted = true; window.hedgehogInteracted = true; // Update message after a delay setTimeout(() => { if (activeBubble) { activeBubble.innerHTML = `

The bees will like the sweet smell of it. 🐝 `; // Add apple to inventory const heart = document.createElement('div'); heart.className = 'inventory-heart special-item'; heart.innerHTML = '🍎'; inventoryContainer.appendChild(heart); // Remove bubble after showing the thank you message setTimeout(() => { if (activeBubble) { activeBubble.remove(); activeBubble = null; } }, 3000); } }, 3000); } } composer.render(); } // 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) { function handleTouchStart(event) { 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) { 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 (Math.abs(llama.physicsBody.velocity.y) < 0.1) { llama.physicsBody.velocity.y = 10; } } lastTap = currentTime; } canvas.addEventListener('click', (event) => { handlePointerEvent(event.clientX, event.clientY); handleDoubleClick(); }); // Initialize highscores in localStorage if they don't exist if (!localStorage.getItem('highscores')) { localStorage.setItem('highscores', JSON.stringify([])); } // Function to update highscores function updateHighscores(newScore) { let highscores = JSON.parse(localStorage.getItem('highscores')); highscores.push(newScore); highscores.sort((a, b) => a - b); // Sort in ascending order (faster times are better) highscores = highscores.slice(0, 5); // Keep only top 5 scores localStorage.setItem('highscores', JSON.stringify(highscores)); } // Create scoreboard screen const scoreboardScreen = document.createElement('div'); scoreboardScreen.id = 'scoreboardScreen'; scoreboardScreen.style.display = 'none'; scoreboardScreen.innerHTML = `

Top 5 Times

`; parentDiv.appendChild(scoreboardScreen); // Function to show scoreboard function showScoreboard() { const highscores = JSON.parse(localStorage.getItem('highscores')); const scoresList = document.getElementById('scoresList'); scoresList.innerHTML = ''; if (highscores.length === 0) { scoresList.innerHTML = '

No scores yet!

'; } else { // Define formatTime function within the scope function formatTime(seconds) { const minutes = Math.floor(seconds / 60); const remainingSeconds = Math.floor(seconds % 60); return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`; } highscores.forEach((score, index) => { const scoreElement = document.createElement('div'); scoreElement.className = 'score-entry'; scoreElement.innerHTML = ` #${index + 1} ${formatTime(score)} `; scoresList.appendChild(scoreElement); }); } // Remove duplicate formatTime function definition as it's already defined above scoreboardScreen.style.display = 'flex'; } // Add event listener for closing scoreboard document.getElementById('closeScoreboardButton').addEventListener('click', () => { scoreboardScreen.style.display = 'none'; }); // Inject CSS styles dynamically let styles = ` /* Speech Bubble Styles */ .speech-bubble { position: fixed; width: 400px; max-width: 90%; padding: 15px; background: white; border-radius: 20px; font: 18px "Georgia", serif; color: #333; text-align: center; box-shadow: 2px 2px 5px rgba(0,0,0,0.2); opacity: 1; z-index: 1000; animation: fadeIn 0.3s ease-out; } .speech-bubble:after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 0; border: 10px solid transparent; border-top-color: white; border-bottom: 0; margin-left: -10px; margin-bottom: -10px; } .speech-bubble.bottom:after { bottom: auto; top: 0; border: 10px solid transparent; border-bottom-color: white; border-top: 0; margin-top: -10px; margin-bottom: 0; } /* Speech Bubble Additions */ .flex-bubble { display: flex; align-items: center; gap: 15px; padding: 20px; } .bubble-image { width: 60px; height: 60px; object-fit: contain; } /* Opening Screen */ @keyframes logoFadeIn { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes contentFadeIn { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes logoFloat { 0% { transform: translateY(0) scale(1); } 50% { transform: translateY(-10px) scale(1.02); } 100% { transform: translateY(0) scale(1); } } @keyframes logoSparkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.05); } } .logo { width: 90%; max-width: 400px; height: auto; display: block; margin-left: auto; margin-right: auto; opacity: 0; animation: logoFadeIn 1s ease-out forwards, logoFloat 3s ease-in-out infinite, logoSparkle 2s ease-in-out infinite; } #openingScreen { 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: 2001; } .opening-container { display: flex; flex-direction: column; align-items: center; gap: 30px; width: 90%; max-width: 600px; margin: 0 auto; padding: 20px; } .opening-content { background: rgba(255, 255, 255, 0.9); padding: 30px; border-radius: 10px; text-align: center; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1); font-family: "Georgia", serif; opacity: 0; animation: contentFadeIn 1s ease-out forwards; animation-delay: 0.5s; width: 90%; max-width: 400px; box-sizing: border-box; margin: 0 auto; } .level-selection { display: flex; flex-direction: column; gap: 15px; align-items: center; } .scenario-text { font-family: "Georgia", serif; font-size: clamp(18px, 3vw, 20px); color: #333; text-align: center; } .journey-button { background: #4CAF50; color: white; padding: 12px 20px; font-size: 16px; font-family: 'Georgia', serif; border: none; cursor: pointer; transition: all 0.3s ease; box-shadow: 2px 2px 0 rgba(0, 0, 0, 1); width: 100%; max-width: 300px; min-height: 48px; white-space: normal; word-wrap: break-word; line-height: 1.3; display: flex; align-items: center; justify-content: center; text-align: center; } .journey-button:hover { transform: scale(1.05); background: #45a049; box-shadow: 6px 6px 0 rgba(0, 0, 0, 1); } .journey-button.sea-button { background: #1E90FF; margin-top: 10px; } .journey-button.sea-button:hover { background: #1873CC; } .journey-button.wind-button { background: #9C27B0; margin-top: 10px; } .journey-button.wind-button:hover { background: #7B1FA2; } /* Completion Screen */ #completionScreen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url('https://play.rosebud.ai/assets/nastara_Magical_meadow_trees_purple_mushrooms_ponds_rainbow_p_e92fa838-708b-493c-9222-319c0dd4c425_0.png?JDty') 0 center; background-size: cover; background-repeat: repeat-x; display: flex; justify-content: center; align-items: center; z-index: 3000; animation: fadeIn 1s ease-in; overflow: hidden; padding: 10px; box-sizing: border-box; -webkit-overflow-scrolling: touch; } #completionScreen::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(135, 206, 235, 0.1); z-index: -1; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .completion-container { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 600px; margin: 0 auto; padding: 20px; overflow-y: auto; overflow-x: hidden; max-height: 100vh; box-sizing: border-box; } .completion-content { background: rgba(255, 255, 255, 0.95); padding: 30px; border-radius: 10px; text-align: center; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); animation: popIn 0.5s ease-out; font-family: "Georgia", serif; font-size: clamp(18px, 3vw, 20px); line-height: 1.6; width: 400px; max-width: 90%; max-height: 80vh; overflow-y: auto; box-sizing: border-box; margin: -40px auto 0; } .completion-content h1 { color: #4CAF50; font-size: 24px; margin-bottom: 15px; } .completion-container { display: flex; flex-direction: column; align-items: center; gap: 15px; } #completionScreen .completion-owl { width: auto; height: 120px; margin-bottom: -20px; animation: owlBob 2s infinite ease-in-out; object-fit: contain; position: relative; z-index: 2; } @media (min-width: 768px) { .completion-content { font-size: 18px; padding: 40px; } .completion-content h1 { font-size: 30px; } #completionScreen .completion-owl { height: 80px; } } /* Start Screen */ #startScreen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url('https://play.rosebud.ai/assets/nastara_Magical_meadow_trees_purple_mushrooms_ponds_rainbow_p_e92fa838-708b-493c-9222-319c0dd4c425_0.png?JDty') 0 center; background-size: cover; background-repeat: repeat-x; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 2000; gap: 30px; padding: 20px; box-sizing: border-box; } #startScreen::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(135, 206, 235, 0.1); z-index: -1; } .owl-container { display: flex; flex-direction: column; align-items: center; gap: 0; position: relative; } .owl { width: auto; height: 120px; animation: owlBob 2s infinite ease-in-out; margin-bottom: -30px; position: relative; z-index: 2; } @keyframes owlBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .dialogue-box { background: rgba(255, 255, 255, 0.9); padding: 40px; width: 400px; min-height: 200px; border-radius: 10px; position: relative; z-index: 1; max-height: 80vh; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1); cursor: default; transition: transform 0.2s; box-sizing: border-box; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; overflow-y: auto; } @media (max-width: 480px) { .dialogue-box { width: 90%; max-width: 400px; padding: 30px; } } .dialogue-text { font-family: "Georgia", serif; font-size: clamp(18px, 3vw, 20px); line-height: 1.6; margin: 0 0 15px 0; color: #333; } #nextButton { background: #4CAF50; color: white; } .button-container { display: flex; gap: 15px; margin-top: 30px; flex-direction: column; align-items: center; width: 100%; max-width: 300px; } #startButton { width: 100%; max-width: 300px; margin: 20px auto 0; padding: 12px 20px; background: #4CAF50; color: white; display: block; } #skipButton { background: #ff9800; color: white; } #skipButton:hover { transform: scale(1.05); background: #f57c00; box-shadow: 6px 6px 0 rgba(0, 0, 0, 1); } #startButton:hover, #nextButton:hover { transform: scale(1.05); background: #45a049; 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.95); color: black; padding: 8px 12px; border-radius: 5px; font-size: 16px; bottom: -35px; left: 50%; transform: translateX(-50%); white-space: nowrap; opacity: 0; transition: opacity 0.3s; pointer-events: auto; } .special-item .item-tooltip { opacity: 0; transition: opacity 0.3s; } .special-item:hover .item-tooltip { opacity: 1; } .inventory-heart { width: 40px; height: 40px; 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; } } .score-container { background: rgba(255, 255, 255, 0.9); padding: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } .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); } } #playAgainButton { background: #4CAF50; 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); margin: 0; min-height: 48px; flex: 1; } #playAgainButton:hover { transform: scale(1.05); background: #45a049; box-shadow: 6px 6px 0 rgba(0, 0, 0, 1); } `; // Add scoreboard styles styles += ` #scoreboardScreen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, #87CEEB 0%, #E0F7FA 100%); display: none; justify-content: center; align-items: center; z-index: 3001; padding: 20px; box-sizing: border-box; } .scoreboard-content { width: 400px; height: auto; min-height: 200px; max-height: 90vh; max-width: 90%; margin: auto; border-radius: 10px; padding: 30px; background: rgba(255, 255, 255, 0.95); font-family: 'Georgia', serif; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); box-sizing: border-box; display: flex; flex-direction: column; align-items: center; } .scoreboard-content h2 { color: #4CAF50; margin: 0 0 20px 0; font-size: 30px; text-align: center; width: 100%; } .score-entry { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; margin: 8px 0; background: #E8F5E9; border-radius: 8px; font-size: 18px; transition: transform 0.2s, background-color 0.3s; width: 100%; box-sizing: border-box; } .score-entry:hover { transform: scale(1.02); background: #C8E6C9; } .rank { font-weight: bold; color: #4CAF50; text-align: left; padding-right: 20px; flex: 0 0 auto; } .time { color: #333; text-align: right; white-space: nowrap; } .no-scores { color: #666; font-style: italic; padding: 20px; } #closeScoreboardButton { background: #2196F3; color: white; margin-top: 30px; margin-left: auto; margin-right: auto; width: 100%; max-width: 300px; } #closeScoreboardButton:hover { background: #1976D2; transform: scale(1.05); box-shadow: 6px 6px 0 rgba(0, 0, 0, 1); } #viewHighscoresButton { background: #2196F3; color: white; } #viewHighscoresButton:hover { transform: scale(1.05); background: #1976D2; box-shadow: 6px 6px 0 rgba(0, 0, 0, 1); } .completion-buttons { display: flex; gap: 15px; flex-direction: column; align-items: center; width: 100%; max-width: 300px; margin: 20px auto 0; } .completion-buttons button, #startButton, #skipButton, #nextButton, #closeScoreboardButton, #viewHighscoresButton, #playAgainButton { padding: 12px 20px; font: 16px Georgia, serif; width: 100%; min-height: 48px; border: none; cursor: pointer; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; box-shadow: 2px 2px 0 rgba(0, 0, 0, 1); transition: all 0.3s ease; } `; // Append the styles to the head const styleSheet = document.createElement("style"); styleSheet.type = "text/css"; styleSheet.innerText = styles; document.head.appendChild(styleSheet); // Define keysPressed object with standardized key names // Define keysPressed object at the start window.keysPressed = { up: false, down: false, left: false, right: false, jump: false, space: false }; // Add keyboard event listeners window.addEventListener('keydown', (event) => { switch (event.code) { case 'Space': keysPressed.jump = true; keysPressed.space = true; break; } }); window.addEventListener('keyup', (event) => { switch (event.code) { case 'Space': keysPressed.jump = false; keysPressed.space = false; break; } }); // ========================= // End of Mobile and Keyboard Controls Integration // =========================