import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { OBJLoader } from 'three/addons/loaders/OBJLoader.js'; import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'; import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'; // Remove UnrealBloomPass import as we won't use it import { SMAAPass } from 'three/addons/postprocessing/SMAAPass.js'; // Create title menu const titleMenu = document.createElement('div'); titleMenu.id = 'titleMenu'; titleMenu.style.position = 'fixed'; titleMenu.style.top = '0'; titleMenu.style.left = '0'; titleMenu.style.width = '100%'; titleMenu.style.height = '100%'; titleMenu.style.background = `url('https://play.rosebud.ai/assets/titlemenubackground.jpg?yaY7')`; titleMenu.style.backgroundSize = 'cover'; titleMenu.style.backgroundPosition = 'center'; titleMenu.style.display = 'flex'; titleMenu.style.flexDirection = 'column'; titleMenu.style.justifyContent = 'center'; titleMenu.style.alignItems = 'center'; titleMenu.style.zIndex = '3000'; // Add title text const titleText = document.createElement('h1'); titleText.textContent = 'THE CLAW!'; titleText.style.background = 'linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000)'; titleText.style.backgroundSize = '400%'; titleText.style.webkitBackgroundClip = 'text'; titleText.style.webkitTextFillColor = 'transparent'; titleText.style.animation = 'rainbow 20s linear infinite'; titleText.style.fontSize = '6em'; titleText.style.fontWeight = 'bold'; titleText.style.textShadow = '3px 3px 6px rgba(0, 0, 0, 0.3)'; titleText.style.marginBottom = '20px'; titleText.style.fontFamily = '"Press Start 2P", cursive'; // Add creator text const creatorText = document.createElement('p'); creatorText.textContent = 'Created by Brain Joose'; creatorText.style.background = 'linear-gradient(45deg, #00ffd5, #002bff, #7a00ff, #ff00c8)'; creatorText.style.backgroundSize = '300%'; creatorText.style.webkitBackgroundClip = 'text'; creatorText.style.webkitTextFillColor = 'transparent'; creatorText.style.animation = 'rainbow 15s linear infinite'; creatorText.style.fontSize = '2em'; creatorText.style.textShadow = '2px 2px 4px rgba(0, 0, 0, 0.3)'; creatorText.style.marginBottom = '40px'; creatorText.style.fontFamily = '"Press Start 2P", cursive'; // Add start button // Create instructions button const instructionsButton = document.createElement('button'); instructionsButton.textContent = 'How to Play'; instructionsButton.style.padding = '15px 30px'; instructionsButton.style.fontSize = '1.5em'; instructionsButton.style.backgroundColor = '#2196F3'; instructionsButton.style.color = 'white'; instructionsButton.style.border = 'none'; instructionsButton.style.borderRadius = '5px'; instructionsButton.style.cursor = 'pointer'; instructionsButton.style.transition = 'background-color 0.3s'; instructionsButton.style.fontFamily = 'Arial, sans-serif'; instructionsButton.style.marginBottom = '20px'; // Create start button const startButton = document.createElement('button'); startButton.textContent = 'Start Game'; startButton.style.padding = '15px 30px'; startButton.style.fontSize = '1.5em'; startButton.style.backgroundColor = '#4CAF50'; startButton.style.color = 'white'; startButton.style.border = 'none'; startButton.style.borderRadius = '5px'; startButton.style.cursor = 'pointer'; startButton.style.transition = 'background-color 0.3s'; startButton.style.fontFamily = 'Arial, sans-serif'; // Add hover effect // Add hover effects for instructions button instructionsButton.onmouseover = () => { instructionsButton.style.backgroundColor = '#1976D2'; }; instructionsButton.onmouseout = () => { instructionsButton.style.backgroundColor = '#2196F3'; }; // Add click handler for instructions button instructionsButton.onclick = () => { showInstructions(); }; startButton.onmouseover = () => { startButton.style.backgroundColor = '#45a049'; }; startButton.onmouseout = () => { startButton.style.backgroundColor = '#4CAF50'; }; // Add click handler startButton.onclick = () => { // Remove any existing screens first const existingScreens = document.querySelectorAll('.game-screen'); existingScreens.forEach(screen => screen.remove()); titleMenu.style.display = 'none'; canvas.style.display = 'none'; // Hide the game canvas gameInfoDisplay.style.display = 'none'; // Hide game info dpadContainer.style.display = 'none'; // Hide controls jumpContainer.style.display = 'none'; // Hide controls showGirlfriendRequest(); }; // Create girlfriend request screen function showGirlfriendRequest() { // Remove any existing girlfriend request screens const existingScreens = document.querySelectorAll('.girlfriend-screen'); existingScreens.forEach(screen => screen.remove()); // Play girlfriend request sound if (girlfriendRequestSound && girlfriendRequestSound.isReady && !girlfriendRequestSound.isPlaying) { try { girlfriendRequestSound.play(); } catch (error) { console.warn('Error playing girlfriend request sound:', error); } } const girlfriendScreen = document.createElement('div'); girlfriendScreen.classList.add('girlfriend-screen', 'game-screen'); girlfriendScreen.style.position = 'fixed'; girlfriendScreen.style.top = '0'; girlfriendScreen.style.left = '0'; girlfriendScreen.style.width = '100%'; girlfriendScreen.style.height = '100%'; girlfriendScreen.style.background = `url('https://play.rosebud.ai/assets/girlfriendbackgroundintro.jpg?kSQW')`; girlfriendScreen.style.backgroundSize = 'cover'; girlfriendScreen.style.backgroundPosition = 'center'; girlfriendScreen.style.display = 'flex'; girlfriendScreen.style.flexDirection = 'column'; girlfriendScreen.style.justifyContent = 'center'; girlfriendScreen.style.alignItems = 'center'; girlfriendScreen.style.zIndex = '3000'; // Add message const message = document.createElement('div'); message.style.background = 'rgba(0, 0, 0, 0.7)'; message.style.padding = '20px 40px'; message.style.borderRadius = '15px'; message.style.marginBottom = '30px'; message.style.maxWidth = '80%'; message.style.textAlign = 'center'; const text = document.createElement('p'); text.textContent = "Hey handsome, will you win me 20 prizes? I need them for my collection!"; text.style.color = '#ffffff'; text.style.fontSize = '24px'; text.style.fontFamily = 'Arial, sans-serif'; text.style.margin = '0'; message.appendChild(text); girlfriendScreen.appendChild(message); // Add begin button const beginButton = document.createElement('button'); beginButton.textContent = "Let's go"; beginButton.style.padding = '15px 30px'; beginButton.style.fontSize = '24px'; beginButton.style.backgroundColor = '#ff69b4'; beginButton.style.color = 'white'; beginButton.style.border = 'none'; beginButton.style.borderRadius = '10px'; beginButton.style.cursor = 'pointer'; beginButton.style.transition = 'background-color 0.3s'; beginButton.style.fontFamily = 'Arial, sans-serif'; beginButton.onmouseover = () => { beginButton.style.backgroundColor = '#ff1493'; }; beginButton.onmouseout = () => { beginButton.style.backgroundColor = '#ff69b4'; }; beginButton.onclick = () => { isTimerPaused = true; // Pause during transition girlfriendScreen.style.display = 'none'; canvas.style.display = 'block'; // Show the game canvas gameInfoDisplay.style.display = 'flex'; // Show game info dpadContainer.style.display = 'grid'; // Show controls jumpContainer.style.display = 'flex'; // Show controls // Short delay to ensure smooth transition setTimeout(() => { const now = Date.now(); if (lastTimeStamp > 0) { pausedTimeTotal += now - lastTimeStamp; } gameStartTime = now; isGameActive = true; isTimerPaused = false; // Start background music if (backgroundMusic && !backgroundMusic.isPlaying) { backgroundMusic.play(); } }, 500); }; girlfriendScreen.appendChild(beginButton); document.body.appendChild(girlfriendScreen); } // Append elements to title menu titleMenu.appendChild(titleText); titleMenu.appendChild(creatorText); titleMenu.appendChild(instructionsButton); titleMenu.appendChild(startButton); // Function to show instructions screen function showInstructions() { const instructionsScreen = document.createElement('div'); instructionsScreen.style.position = 'fixed'; instructionsScreen.style.top = '50%'; instructionsScreen.style.left = '50%'; instructionsScreen.style.transform = 'translate(-50%, -50%)'; instructionsScreen.style.background = 'rgba(0, 0, 0, 0.95)'; instructionsScreen.style.padding = '40px'; instructionsScreen.style.borderRadius = '20px'; instructionsScreen.style.color = '#fff'; instructionsScreen.style.maxWidth = '80%'; instructionsScreen.style.maxHeight = '80vh'; instructionsScreen.style.overflow = 'auto'; instructionsScreen.style.zIndex = '4000'; instructionsScreen.style.textAlign = 'left'; instructionsScreen.innerHTML = `

How to Win at THE CLAW!

Controls:

Use Arrow Keys or WASD to move the claw
Press Space Bar or tap the Jump button to drop the claw

Tips to Win:

Position the claw directly above prizes for better grip
The claw's grip weakens as it rises - time your grabs carefully
Collect prizes from the collection box by clicking them
Look for alien toys - they make special sounds!
You need 20 prizes to win - manage your time wisely
The game lasts 8 minutes - stay focused!

`; document.body.appendChild(instructionsScreen); } // Remove any existing title menus before adding a new one const existingTitleMenus = document.querySelectorAll('#titleMenu'); existingTitleMenus.forEach(menu => menu.remove()); // Add classes for screen management titleMenu.classList.add('game-screen'); document.body.appendChild(titleMenu); // Initialize loading manager and audio const loadingManager = new THREE.LoadingManager(); const audioLoader = new THREE.AudioLoader(loadingManager); const listener = new THREE.AudioListener(); let isClickLocked = false; // Add global click lock const CLICK_LOCK_DURATION = 1000; // 1 second lock duration const backgroundMusic = new THREE.Audio(listener); const winSound = new THREE.Audio(listener); const newAttemptSound = new THREE.Audio(listener); // Game state variables let gameStartTime = 0; let gameTimeLimit = 8 * 60 * 1000; // 8 minutes in milliseconds let isGameActive = false; let attemptCount = 0; let prizesCollected = 0; let requiredPrizes = 20; let isTimerPaused = false; // Collection box grid system const collectionGrid = { columns: 3, rows: 4, spacing: 3, baseHeight: 6, occupied: new Set() }; let lastTimeStamp = 0; let pausedTimeTotal = 0; const clawSound = new THREE.Audio(listener); const clawDropSound = new THREE.Audio(listener); const dingSound = new THREE.Audio(listener); const alienSound = new THREE.Audio(listener); const girlfriendRequestSound = new THREE.Audio(listener); // Load claw movement sound audioLoader.load('https://play.rosebud.ai/assets/clawmovingsound.MP3?cnXm', function(buffer) { clawSound.setBuffer(buffer); clawSound.setLoop(true); clawSound.setVolume(0.5); }); // Load claw dropping sound audioLoader.load('https://play.rosebud.ai/assets/clawdroppingsound.MP3?QD4K', function(buffer) { clawDropSound.setBuffer(buffer); clawDropSound.setLoop(false); clawDropSound.setVolume(0.6); }); // Load ding sound audioLoader.load('https://play.rosebud.ai/assets/dingsound.mp3?JVKv', function(buffer) { dingSound.setBuffer(buffer); dingSound.setLoop(false); dingSound.setVolume(0.7); }); // Load alien sound audioLoader.load('https://play.rosebud.ai/assets/aliensoundeffect.mp3?QCKH', function(buffer) { alienSound.setBuffer(buffer); alienSound.setLoop(false); alienSound.setVolume(0.7); }); // Load girlfriend request sound audioLoader.load('https://play.rosebud.ai/assets/girlfriendrequestsound.mp3?13Gv', function(buffer) { girlfriendRequestSound.setBuffer(buffer); girlfriendRequestSound.setLoop(false); girlfriendRequestSound.setVolume(0.7); girlfriendRequestSound.isReady = true; // Add flag to track readiness }); // Load background music audioLoader.load('https://play.rosebud.ai/assets/gamebackgroundmusic.mp3?aWK1', function(buffer) { backgroundMusic.setBuffer(buffer); backgroundMusic.setLoop(true); backgroundMusic.setVolume(0.5); }); // Load win sound audioLoader.load('https://play.rosebud.ai/assets/winsound.mp3?bVJl', function(buffer) { winSound.setBuffer(buffer); winSound.setLoop(false); winSound.setVolume(0.7); }); // Load new attempt sound audioLoader.load('https://play.rosebud.ai/assets/newattemptsound.mp3?QdhH', function(buffer) { newAttemptSound.setBuffer(buffer); newAttemptSound.setLoop(false); newAttemptSound.setVolume(0.7); }); const textureLoader = new THREE.TextureLoader(loadingManager); const objLoader = new OBJLoader(loadingManager); let assetsLoaded = false; // Prize Management System class PrizeManager { constructor(scene, camera, textureLoader, objLoader) { this.scene = scene; this.camera = camera; this.textureLoader = textureLoader; this.objLoader = objLoader; this.prizes = []; this.score = 0; this.isRedeeming = false; this.toyType = 0; // Create sparkle system this.setupSparkleSystem(); } setupSparkleSystem() { const sparkleGeometry = new THREE.BufferGeometry(); const sparkleParticles = new Float32Array(300); for (let i = 0; i < sparkleParticles.length; i += 3) { sparkleParticles[i] = 0; sparkleParticles[i + 1] = 0; sparkleParticles[i + 2] = 0; } sparkleGeometry.setAttribute('position', new THREE.BufferAttribute(sparkleParticles, 3)); this.sparkleMaterial = new THREE.PointsMaterial({ color: 0xffffcc, size: 0.2, transparent: true, blending: THREE.AdditiveBlending, depthWrite: false }); this.sparkleSystem = new THREE.Points(sparkleGeometry, this.sparkleMaterial); this.sparkleSystem.visible = false; this.scene.add(this.sparkleSystem); } createPrize(x, y, z) { const prize = new THREE.Group(); switch (this.toyType) { case 0: this.loadModel(prize, 'https://play.rosebud.ai/assets/robottoymodel.obj?aTwb', 'https://play.rosebud.ai/assets/robottoytexture.png?iX67'); break; case 1: this.loadModel(prize, 'https://play.rosebud.ai/assets/alien_from_toy_story_0125151524_texture.obj?SISF', 'https://play.rosebud.ai/assets/alien_from_toy_story_0125151524_texture.png?aR6U'); break; case 2: this.loadModel(prize, 'https://play.rosebud.ai/assets/pandamodel.obj?BW3e', 'https://play.rosebud.ai/assets/pandatexture.png?GfE2'); break; case 3: this.loadModel(prize, 'https://play.rosebud.ai/assets/a_toy_that_looks_like_0125161105_texture.obj?aazT', 'https://play.rosebud.ai/assets/a_toy_that_looks_like_0125161105_texture.png?xa46'); break; case 4: this.loadModel(prize, 'https://play.rosebud.ai/assets/mushroommodel.obj?TtyY', 'https://play.rosebud.ai/assets/mushroomtexture.png?2VdW'); break; case 5: this.loadModel(prize, 'https://play.rosebud.ai/assets/catmodel.obj?Hv5g', 'https://play.rosebud.ai/assets/cattexture.png?Vhqo'); break; case 6: this.loadModel(prize, 'https://play.rosebud.ai/assets/bananamodel.obj?LF4d', 'https://play.rosebud.ai/assets/bananatexture.png?2sAP'); break; case 7: this.loadModel(prize, 'https://play.rosebud.ai/assets/buzzmodel.obj?kEBn', 'https://play.rosebud.ai/assets/buzztexture.png?0S63'); break; case 8: this.loadModel(prize, 'https://play.rosebud.ai/assets/mariomodel.obj?Ig5C', 'https://play.rosebud.ai/assets/mariotexture.png?fQeT'); break; case 9: this.loadModel(prize, 'https://play.rosebud.ai/assets/pikachu_plushie_0125194239_texture.obj?uA51', 'https://play.rosebud.ai/assets/pikachu_plushie_0125194239_texture.png?reaO'); break; } this.toyType = (this.toyType + 1) % 10; prize.position.set(x, y, z); prize.isGrabbed = false; this.prizes.push(prize); this.scene.add(prize); return prize; } loadModel(prize, modelUrl, textureUrl) { const texture = this.textureLoader.load(textureUrl); this.objLoader.load(modelUrl, (object) => { object.traverse((child) => { if (child instanceof THREE.Mesh) { child.material.map = texture; child.material.needsUpdate = true; } }); object.scale.set(2.5, 2.5, 2.5); object.rotation.y = 0; prize.add(object); }); } makeClickable(prize) { const raycaster = new THREE.Raycaster(); const mouse = new THREE.Vector2(); prize.isClickable = true; // Add clickable state flag prize.lastClickTime = 0; // Add last click timestamp const clickCooldown = 2000; // 2 second cooldown between clicks const onPrizeClick = (event) => { const currentTime = Date.now(); // Early return if any condition prevents clicking if (!prize.isClickable || prize.isBeingRedeemed || prize.isRedeeming || prize.hasBeenRedeemed || this.isRedeeming) { return; } // Check cooldown separately to show warning message if (currentTime - prize.lastClickTime < clickCooldown) { // Show warning message warningMessage.textContent = 'WAIT'; warningMessage.style.display = 'block'; // Hide warning after 1 second setTimeout(() => { warningMessage.style.display = 'none'; }, 1000); return; } prize.lastClickTime = currentTime; const rect = canvas.getBoundingClientRect(); mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1; mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1; raycaster.setFromCamera(mouse, this.camera); const collectionBoxPrizes = this.prizes.filter(p => p.isInCollectionBox); const intersects = []; collectionBoxPrizes.forEach(p => { const prizeIntersects = raycaster.intersectObject(p, true); if (prizeIntersects.length > 0) { intersects.push({ prize: p, distance: prizeIntersects[0].distance, position: p.position.y }); } }); if (intersects.length > 0) { const topPrize = intersects.reduce((prev, current) => { return (prev.position > current.position) ? prev : current; }); if (topPrize.prize === prize) { // Update prize counter and display prizesCollected++; prizeDisplay.innerHTML = `Prizes: ${prizesCollected}/${requiredPrizes}`; this.redeemPrize(prize); } } }; canvas.addEventListener('click', onPrizeClick); } redeemPrize(prize) { // Comprehensive check for any state that would prevent redemption if (this.isRedeeming || prize.isRedeeming || prize.isBeingRedeemed || !prize.isClickable || prize.hasBeenRedeemed || !prize.isInCollectionBox) return; // Immediately mark states to prevent multiple redemptions prize.isClickable = false; prize.isBeingRedeemed = true; prize.hasBeenRedeemed = true; this.isRedeeming = true; prize.isRedeeming = true; // Select a random position for the new prize const randomIndex = Math.floor(Math.random() * prizePositions.length); const randomPosition = prizePositions[randomIndex]; this.sparkleSystem.position.copy(prize.position); const positions = this.sparkleSystem.geometry.attributes.position.array; for (let i = 0; i < positions.length; i += 3) { positions[i] = (Math.random() - 0.5) * 2; positions[i + 1] = (Math.random() - 0.5) * 2; positions[i + 2] = (Math.random() - 0.5) * 2; } this.sparkleSystem.geometry.attributes.position.needsUpdate = true; this.sparkleMaterial.opacity = 1; this.sparkleSystem.visible = true; prize.traverse((child) => { if (child instanceof THREE.Mesh) { child.material.transparent = true; const fadeOut = setInterval(() => { if (child.material.opacity > 0) { child.material.opacity -= 0.05; } else { clearInterval(fadeOut); this.scene.remove(prize); const index = this.prizes.indexOf(prize); if (index > -1) { this.prizes.splice(index, 1); } this.isRedeeming = false; // Find an unoccupied position for the new prize let availablePositions = prizePositions.filter(pos => { return !this.prizes.some(existingPrize => Math.abs(existingPrize.position.x - pos.x) < 3 && Math.abs(existingPrize.position.z - pos.z) < 3 ); }); // If no positions are available, use positions further from existing prizes if (availablePositions.length === 0) { availablePositions = prizePositions.sort((a, b) => { const aMinDist = Math.min(...this.prizes.map(prize => Math.sqrt(Math.pow(prize.position.x - a.x, 2) + Math.pow(prize.position.z - a.z, 2)) )); const bMinDist = Math.min(...this.prizes.map(prize => Math.sqrt(Math.pow(prize.position.x - b.x, 2) + Math.pow(prize.position.z - b.z, 2)) )); return bMinDist - aMinDist; }).slice(0, 3); } // Select a random position from available positions const newPosition = availablePositions[Math.floor(Math.random() * availablePositions.length)]; // Create new prize at the selected position this.createPrize(newPosition.x, newPosition.y, newPosition.z); } }, 50); } }); } updateSparkles() { if (this.sparkleSystem.visible) { const positions = this.sparkleSystem.geometry.attributes.position.array; for (let i = 0; i < positions.length; i += 3) { positions[i] += (Math.random() - 0.5) * 0.1; positions[i + 1] += Math.random() * 0.1; positions[i + 2] += (Math.random() - 0.5) * 0.1; } this.sparkleSystem.geometry.attributes.position.needsUpdate = true; this.sparkleMaterial.opacity = Math.max(0, this.sparkleMaterial.opacity - 0.02); if (this.sparkleMaterial.opacity <= 0) { this.sparkleSystem.visible = false; } } } updatePrizes() { this.prizes.forEach(prize => { if (!prize.isGrabbed) { const directionToCamera = new THREE.Vector3(); directionToCamera.subVectors(this.camera.position, prize.position); directionToCamera.y = 0; const angle = Math.atan2(directionToCamera.z, directionToCamera.x) + Math.PI / 2; prize.rotation.y = angle; } }); } } // Get DOM elements const parentDiv = document.getElementById('renderDiv'); let canvas = document.getElementById('threeRenderCanvas'); if (!canvas) { canvas = document.createElement('canvas'); canvas.id = 'threeRenderCanvas'; parentDiv.appendChild(canvas); } // Create loading screen const loadingScreen = document.createElement('div'); loadingScreen.style.position = 'absolute'; loadingScreen.style.top = '0'; loadingScreen.style.left = '0'; loadingScreen.style.width = '100%'; loadingScreen.style.height = '100%'; loadingScreen.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; loadingScreen.style.color = 'white'; loadingScreen.style.display = 'flex'; loadingScreen.style.justifyContent = 'center'; loadingScreen.style.alignItems = 'center'; loadingScreen.style.fontSize = '24px'; loadingScreen.innerHTML = 'Loading... 0%'; parentDiv.appendChild(loadingScreen); // Create game info display container const gameInfoDisplay = document.createElement('div'); gameInfoDisplay.id = 'gameInfoDisplay'; gameInfoDisplay.style.position = 'fixed'; gameInfoDisplay.style.top = '20px'; gameInfoDisplay.style.left = '50%'; gameInfoDisplay.style.transform = 'translateX(-50%)'; gameInfoDisplay.style.display = 'flex'; gameInfoDisplay.style.gap = '20px'; gameInfoDisplay.style.background = 'rgba(0, 0, 0, 0.7)'; gameInfoDisplay.style.padding = '10px 20px'; gameInfoDisplay.style.borderRadius = '10px'; gameInfoDisplay.style.zIndex = '1000'; // Create timer display const timerDisplay = document.createElement('div'); timerDisplay.id = 'timerDisplay'; timerDisplay.style.color = '#fff'; timerDisplay.style.fontSize = '24px'; timerDisplay.innerHTML = 'Time: 8:00'; // Create prize counter display const prizeDisplay = document.createElement('div'); prizeDisplay.id = 'prizeDisplay'; prizeDisplay.style.color = '#fff'; prizeDisplay.style.fontSize = '24px'; prizeDisplay.innerHTML = 'Prizes: 0/20'; // Create attempt counter display const attemptDisplay = document.createElement('div'); attemptDisplay.id = 'attemptDisplay'; attemptDisplay.style.color = '#fff'; attemptDisplay.style.fontSize = '24px'; attemptDisplay.style.display = 'flex'; attemptDisplay.style.alignItems = 'center'; attemptDisplay.style.gap = '10px'; const attemptsText = document.createElement('span'); attemptsText.innerHTML = 'Attempts: 0'; const attemptIcon = document.createElement('img'); attemptIcon.src = 'https://play.rosebud.ai/assets/attemptcoinUI.png?nQ6b'; attemptIcon.style.width = '24px'; attemptIcon.style.height = '24px'; attemptIcon.style.verticalAlign = 'middle'; attemptDisplay.appendChild(attemptsText); attemptDisplay.appendChild(attemptIcon); // Add displays to container gameInfoDisplay.appendChild(timerDisplay); gameInfoDisplay.appendChild(prizeDisplay); gameInfoDisplay.appendChild(attemptDisplay); parentDiv.appendChild(gameInfoDisplay); // Create warning message container const warningMessage = document.createElement('div'); warningMessage.id = 'warningMessage'; warningMessage.style.position = 'fixed'; warningMessage.style.top = '50%'; warningMessage.style.left = '50%'; warningMessage.style.transform = 'translate(-50%, -50%)'; warningMessage.style.background = 'rgba(255, 0, 0, 0.8)'; warningMessage.style.color = 'white'; warningMessage.style.padding = '20px 40px'; warningMessage.style.borderRadius = '10px'; warningMessage.style.fontSize = '24px'; warningMessage.style.fontWeight = 'bold'; warningMessage.style.zIndex = '2000'; warningMessage.style.display = 'none'; warningMessage.textContent = 'WAIT'; parentDiv.appendChild(warningMessage); // 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'; // Don't automatically start the game, wait for button click if (!gameStartTime) { titleMenu.style.display = 'flex'; } }; // Initialize the scene const scene = new THREE.Scene(); // Initialize the camera const camera = new THREE.PerspectiveCamera( 75, canvas.offsetWidth / canvas.offsetHeight, 0.1, 1000 ); // Add audio listener to camera camera.add(listener); // Position camera in front of the machine camera.position.set(-35, 25, 0); camera.lookAt(0, 15, 0); // Initialize PrizeManager after scene and camera creation const prizeManager = new PrizeManager(scene, camera, textureLoader, objLoader); // Create sparkle particle system const sparkleGeometry = new THREE.BufferGeometry(); const sparkleParticles = new Float32Array(300); // 100 particles, 3 values each (x,y,z) for (let i = 0; i < sparkleParticles.length; i += 3) { sparkleParticles[i] = 0; // x sparkleParticles[i + 1] = 0; // y sparkleParticles[i + 2] = 0; // z } sparkleGeometry.setAttribute('position', new THREE.BufferAttribute(sparkleParticles, 3)); const sparkleMaterial = new THREE.PointsMaterial({ color: 0xffffcc, size: 0.2, transparent: true, blending: THREE.AdditiveBlending, depthWrite: false }); const sparkleSystem = new THREE.Points(sparkleGeometry, sparkleMaterial); sparkleSystem.visible = false; scene.add(sparkleSystem); // Clock for animation and delta time const clock = new THREE.Clock(); let deltaTime = 0; const BASE_FRAME_RATE = 60; // Target frame rate const TIME_STEP = 1 / BASE_FRAME_RATE; // Initialize the renderer with optimized settings const renderer = new THREE.WebGLRenderer({ antialias: false, // Disable built-in antialiasing canvas: canvas, powerPreference: 'high-performance', precision: 'mediump', // Use medium precision for better performance stencil: false, // Disable stencil buffer if not needed depth: true }); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); // Cap pixel ratio at 2 renderer.setSize(canvas.offsetWidth, canvas.offsetHeight); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; renderer.outputEncoding = THREE.sRGBEncoding; renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.2; // Initialize post-processing const composer = new EffectComposer(renderer); // Regular scene render pass const renderPass = new RenderPass(scene, camera); composer.addPass(renderPass); // Remove bloom pass // 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(0xffffff); // White ground reflection // 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: skyColor }, bottomColor: { value: groundColor }, offset: { value: 33 }, exponent: { value: 0.6 }, }; 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); // Disable OrbitControls for fixed view const controls = new OrbitControls(camera, renderer.domElement); controls.enabled = false; // Disable controls completely controls.enableZoom = false; controls.enablePan = false; controls.enableRotate = false; // 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/OIP.jpg?9CFb'); texture.wrapS = texture.wrapT = THREE.RepeatWrapping; texture.repeat.set(4, 4); texture.encoding = THREE.sRGBEncoding; const material = new THREE.MeshStandardMaterial({ map: texture, roughness: 0.8, metalness: 0.1, envMapIntensity: 1.0, }); const terrain = new THREE.Mesh(geometry, material); terrain.rotation.x = -Math.PI / 2; terrain.receiveShadow = true; scene.add(terrain); return terrain; } // Setup focused lighting system for the claw machine // Main spotlight inside the machine const mainSpotlight = new THREE.SpotLight(0xffffff, 2.5); mainSpotlight.position.set(0, 29, 0); mainSpotlight.angle = Math.PI / 2.5; mainSpotlight.penumbra = 0.3; mainSpotlight.decay = 1.2; mainSpotlight.distance = 50; mainSpotlight.target.position.set(0, 0, 0); mainSpotlight.castShadow = true; mainSpotlight.shadow.mapSize.width = 512; // Further reduced shadow map size mainSpotlight.shadow.mapSize.height = 512; mainSpotlight.shadow.camera.near = 1; mainSpotlight.shadow.camera.far = 40; mainSpotlight.shadow.bias = -0.001; scene.add(mainSpotlight); scene.add(mainSpotlight.target); // Collection box spotlight const collectionSpotlight = new THREE.SpotLight(0xffffff, 2.5); collectionSpotlight.position.set(-22, 25, 0); // Position above collection box collectionSpotlight.target.position.set(-22, 0, 0); // Point at collection box collectionSpotlight.angle = Math.PI / 3.5; // Wider cone collectionSpotlight.penumbra = 0.4; // Softer edges collectionSpotlight.decay = 1.2; collectionSpotlight.distance = 35; collectionSpotlight.castShadow = true; collectionSpotlight.shadow.mapSize.width = 256; // Further reduced shadow map size collectionSpotlight.shadow.mapSize.height = 256; collectionSpotlight.shadow.camera.near = 1; collectionSpotlight.shadow.camera.far = 30; collectionSpotlight.shadow.bias = -0.001; scene.add(collectionSpotlight); scene.add(collectionSpotlight.target); // Corner spotlights for additional interior lighting const cornerSpotlights = []; const cornerPositions = [{ pos: new THREE.Vector3(-15, 25, -15), target: new THREE.Vector3(0, 5, 0) }, { pos: new THREE.Vector3(15, 25, -15), target: new THREE.Vector3(0, 5, 0) }, { pos: new THREE.Vector3(-15, 25, 15), target: new THREE.Vector3(0, 5, 0) }, { pos: new THREE.Vector3(15, 25, 15), target: new THREE.Vector3(0, 5, 0) }]; cornerPositions.forEach(({ pos, target }) => { const spotlight = new THREE.SpotLight(0xffffff, 1.2); spotlight.position.copy(pos); spotlight.target.position.copy(target); spotlight.angle = Math.PI / 3.5; spotlight.penumbra = 0.4; spotlight.decay = 1.2; spotlight.distance = 40; spotlight.castShadow = false; // Disable shadows for corner spotlights spotlight.shadow.mapSize.width = 256; // Reduced shadow map for corner lights spotlight.shadow.mapSize.height = 256; spotlight.shadow.camera.near = 1; spotlight.shadow.camera.far = 35; spotlight.shadow.bias = -0.001; cornerSpotlights.push(spotlight); scene.add(spotlight); scene.add(spotlight.target); }); // Ambient light for minimal base lighting // Detect device performance const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); const isLowPerfDevice = isMobile || !window.matchMedia('(min-width: 600px)').matches; // Adjust lighting based on device performance const ambientLight = new THREE.AmbientLight(0xffffff, isLowPerfDevice ? 0.6 : 0.4); // Adjust shadow quality based on device performance if (isLowPerfDevice) { renderer.shadowMap.type = THREE.BasicShadowMap; // Use basic shadow mapping for better performance mainSpotlight.shadow.mapSize.width = 256; mainSpotlight.shadow.mapSize.height = 256; collectionSpotlight.shadow.mapSize.width = 128; collectionSpotlight.shadow.mapSize.height = 128; cornerSpotlights.forEach(spotlight => { spotlight.castShadow = false; // Disable shadows for corner lights on low-end devices }); } scene.add(ambientLight); // Create initial scene const terrain = createTerrain(); // Create claw machine enclosure const enclosureGroup = new THREE.Group(); // Load trippy texture const trippyTexture = textureLoader.load('https://play.rosebud.ai/assets/trippytexture.png?GdEN'); trippyTexture.wrapS = THREE.RepeatWrapping; trippyTexture.wrapT = THREE.RepeatWrapping; trippyTexture.repeat.set(2, 2); // Create the ceiling const ceilingGeometry = new THREE.BoxGeometry(45, 1, 45); const ceilingMaterial = new THREE.MeshStandardMaterial({ map: trippyTexture, metalness: 0.3, roughness: 0.7 }); const ceiling = new THREE.Mesh(ceilingGeometry, ceilingMaterial); ceiling.position.set(0, 30, 0); enclosureGroup.add(ceiling); // Create the claw machine's ground const machineGroundGeometry = new THREE.BoxGeometry(44, 0.5, 44); const machineGroundMaterial = new THREE.MeshStandardMaterial({ color: 0xff69b4, // Pink color metalness: 0.2, roughness: 0.8, emissive: 0xff69b4, emissiveIntensity: 0.2 }); const machineGround = new THREE.Mesh(machineGroundGeometry, machineGroundMaterial); machineGround.position.set(0, 0.25, 0); machineGround.receiveShadow = true; enclosureGroup.add(machineGround); // Create walls materials const glassGeometry = new THREE.BoxGeometry(0.5, 30, 45); const frontGlassMaterial = new THREE.MeshPhysicalMaterial({ color: 0xadd8e6, // Light blue tint transparent: true, opacity: 0.2, roughness: 0.05, metalness: 0.9, transmission: 0.95, thickness: 0.5, envMapIntensity: 1.5, clearcoat: 1.0, clearcoatRoughness: 0.1, ior: 1.5, // Glass IOR reflectivity: 0.9, side: THREE.DoubleSide }); const wallMaterial = new THREE.MeshStandardMaterial({ map: trippyTexture, metalness: 0.3, roughness: 0.7 }); // Front glass (transparent) const frontGlass = new THREE.Mesh(glassGeometry, frontGlassMaterial); frontGlass.position.set(-22, 15, 0); enclosureGroup.add(frontGlass); // Back glass (trippy texture) const backGlass = new THREE.Mesh(glassGeometry, wallMaterial); backGlass.position.set(22, 15, 0); enclosureGroup.add(backGlass); // Side glass geometry const sideGlassGeometry = new THREE.BoxGeometry(45, 30, 0.5); // Left glass (trippy texture) const leftGlass = new THREE.Mesh(sideGlassGeometry, wallMaterial); leftGlass.position.set(0, 15, -22); enclosureGroup.add(leftGlass); // Right glass (trippy texture) const rightGlass = new THREE.Mesh(sideGlassGeometry, wallMaterial); rightGlass.position.set(0, 15, 22); enclosureGroup.add(rightGlass); // Create prize collection area const collectionBoxGeometry = new THREE.BoxGeometry(15, 10, 15); const collectionBoxMaterial = new THREE.MeshStandardMaterial({ color: 0x404040, metalness: 0.5, roughness: 0.5 }); const collectionBox = new THREE.Mesh(collectionBoxGeometry, collectionBoxMaterial); collectionBox.position.set(-22, 5, 0); // Create collection box opening (hole in the glass) const openingGeometry = new THREE.BoxGeometry(3, 5, 10); const opening = new THREE.Mesh(openingGeometry, collectionBoxMaterial); opening.position.set(-21, 7, 0); enclosureGroup.add(opening); scene.add(enclosureGroup); // Create and position prizes let toyType = 0; // Track which toy to create next (0: robot, 1: alien, 2: plushie, 3: new toy, 4: mushroom, 5: cat, 6: banana, 7: buzz, 8: mario, 9: pikachu) function createPrize(x, y, z) { const prize = new THREE.Group(); if (toyType === 0) { // Load robot model and texture const robotTexture = textureLoader.load('https://play.rosebud.ai/assets/robottoytexture.png?iX67'); objLoader.load('https://play.rosebud.ai/assets/robottoymodel.obj?aTwb', (object) => { object.traverse((child) => { if (child instanceof THREE.Mesh) { child.material.map = robotTexture; child.material.needsUpdate = true; } }); object.scale.set(2.5, 2.5, 2.5); object.rotation.y = 0; prize.add(object); }); } else if (toyType === 1) { // Load alien model and texture const alienTexture = textureLoader.load('https://play.rosebud.ai/assets/alien_from_toy_story_0125151524_texture.png?aR6U'); objLoader.load('https://play.rosebud.ai/assets/alien_from_toy_story_0125151524_texture.obj?SISF', (object) => { object.traverse((child) => { if (child instanceof THREE.Mesh) { child.material.map = alienTexture; child.material.needsUpdate = true; } }); // Mark the entire prize group as an alien prize.userData.isAlien = true; // Scale and rotate the alien model away from camera object.scale.set(2.5, 2.5, 2.5); object.rotation.y = 0; // Face away from camera (+X direction) prize.add(object); }); } else if (toyType === 1) { // Load plushie model and texture const plushieTexture = textureLoader.load('https://play.rosebud.ai/assets/pandatexture.png?GfE2'); objLoader.load('https://play.rosebud.ai/assets/pandamodel.obj?BW3e', (object) => { object.traverse((child) => { if (child instanceof THREE.Mesh) { child.material.map = plushieTexture; child.material.needsUpdate = true; } }); // Scale and rotate the plushie model away from camera object.scale.set(2.5, 2.5, 2.5); object.rotation.y = 0; // Face away from camera (+X direction) prize.add(object); }); } else if (toyType === 2) { // Load the new toy model and texture const toyTexture = textureLoader.load('https://play.rosebud.ai/assets/a_toy_that_looks_like_0125161105_texture.png?xa46'); objLoader.load('https://play.rosebud.ai/assets/a_toy_that_looks_like_0125161105_texture.obj?aazT', (object) => { object.traverse((child) => { if (child instanceof THREE.Mesh) { child.material.map = toyTexture; child.material.needsUpdate = true; } }); // Scale and rotate the new toy model object.scale.set(2.5, 2.5, 2.5); object.rotation.y = 0; // Face away from camera (+X direction) prize.add(object); }); } else if (toyType === 3) { // Load the mushroom model and texture const mushroomTexture = textureLoader.load('https://play.rosebud.ai/assets/mushroomtexture.png?2VdW'); objLoader.load('https://play.rosebud.ai/assets/mushroommodel.obj?TtyY', (object) => { object.traverse((child) => { if (child instanceof THREE.Mesh) { child.material.map = mushroomTexture; child.material.needsUpdate = true; } }); // Scale and rotate the mushroom model object.scale.set(2.5, 2.5, 2.5); object.rotation.y = 0; // Face away from camera (+X direction) prize.add(object); }); } else if (toyType === 4) { // Load the cat model and texture const catTexture = textureLoader.load('https://play.rosebud.ai/assets/cattexture.png?Vhqo'); objLoader.load('https://play.rosebud.ai/assets/catmodel.obj?Hv5g', (object) => { object.traverse((child) => { if (child instanceof THREE.Mesh) { child.material.map = catTexture; child.material.needsUpdate = true; } }); // Scale and rotate the cat model object.scale.set(2.5, 2.5, 2.5); object.rotation.y = 0; // Face away from camera (+X direction) prize.add(object); }); } else if (toyType === 5) { // Load the banana model and texture const bananaTexture = textureLoader.load('https://play.rosebud.ai/assets/bananatexture.png?2sAP'); objLoader.load('https://play.rosebud.ai/assets/bananamodel.obj?LF4d', (object) => { object.traverse((child) => { if (child instanceof THREE.Mesh) { child.material.map = bananaTexture; child.material.needsUpdate = true; } }); // Scale and rotate the banana model object.scale.set(2.5, 2.5, 2.5); object.rotation.y = 0; // Face away from camera (+X direction) prize.add(object); }); } else if (toyType === 6) { // Load the Buzz Lightyear model and texture const buzzTexture = textureLoader.load('https://play.rosebud.ai/assets/buzztexture.png?0S63'); objLoader.load('https://play.rosebud.ai/assets/buzzmodel.obj?kEBn', (object) => { object.traverse((child) => { if (child instanceof THREE.Mesh) { child.material.map = buzzTexture; child.material.needsUpdate = true; } }); // Scale and rotate the Buzz model object.scale.set(2.5, 2.5, 2.5); object.rotation.y = 0; // Face away from camera (+X direction) prize.add(object); }); } else if (toyType === 7) { // Load the Mario model and texture const marioTexture = textureLoader.load('https://play.rosebud.ai/assets/mariotexture.png?fQeT'); objLoader.load('https://play.rosebud.ai/assets/mariomodel.obj?Ig5C', (object) => { object.traverse((child) => { if (child instanceof THREE.Mesh) { child.material.map = marioTexture; child.material.needsUpdate = true; } }); // Scale and rotate the Mario model object.scale.set(2.5, 2.5, 2.5); object.rotation.y = 0; // Face away from camera (+X direction) prize.add(object); }); } else { // Load the Pikachu plushie model and texture const pikachuTexture = textureLoader.load('https://play.rosebud.ai/assets/pikachu_plushie_0125194239_texture.png?reaO'); objLoader.load('https://play.rosebud.ai/assets/pikachu_plushie_0125194239_texture.obj?uA51', (object) => { object.traverse((child) => { if (child instanceof THREE.Mesh) { child.material.map = pikachuTexture; child.material.needsUpdate = true; } }); // Scale and rotate the Pikachu model object.scale.set(2.5, 2.5, 2.5); object.rotation.y = 0; // Face away from camera (+X direction) prize.add(object); }); } // Cycle through toy types (0 -> 1 -> 2 -> 3 -> 4 -> 5 -> 6 -> 7 -> 8 -> 0) toyType = (toyType + 1) % 10; prize.position.set(x, y, z); prize.isGrabbed = false; prizes.push(prize); scene.add(prize); return prize; } // Create multiple prizes in different positions const prizePositions = [{ x: -15, y: 5, z: -15 }, { x: 15, y: 5, z: 15 }, { x: -15, y: 5, z: 15 }, { x: 15, y: 5, z: -15 }, { x: 0, y: 5, z: 0 }, { x: -8, y: 5, z: 8 }, { x: 8, y: 5, z: -8 }, { x: -8, y: 5, z: -8 }, { x: 8, y: 5, z: 8 }, { x: 0, y: 5, z: 15 }, { x: 0, y: 5, z: -15 }, { x: 15, y: 5, z: 0 }, { x: -15, y: 5, z: 0 }, { x: -5, y: 5, z: 0 }, { x: 5, y: 5, z: 0 }]; prizePositions.forEach(pos => { prizeManager.createPrize(pos.x, pos.y, pos.z); }); // Create the claw const clawGroup = new THREE.Group(); // Create the base/pole of the claw const poleGeometry = new THREE.CylinderGeometry(0.3, 0.3, 8, 8); const poleMaterial = new THREE.MeshStandardMaterial({ color: 0x00ff00, metalness: 0.6, roughness: 0.3, emissive: 0x00ff00, emissiveIntensity: 0.2 }); const pole = new THREE.Mesh(poleGeometry, poleMaterial); pole.position.y = 4; clawGroup.add(pole); // Create the claw head (base for arms) const clawHeadGeometry = new THREE.CylinderGeometry(0.4, 0.4, 0.5, 8); const clawHead = new THREE.Mesh(clawHeadGeometry, poleMaterial); clawHead.position.y = -0.5; clawGroup.add(clawHead); // Create the claw arms with curved geometry const clawArms = []; const armMaterial = new THREE.MeshStandardMaterial({ color: 0x00ff00, metalness: 0.8, roughness: 0.2, emissive: 0x00ff00, emissiveIntensity: 0.2 }); for (let i = 0; i < 4; i++) { const armGroup = new THREE.Group(); // Create a curved path for the arm const curve = new THREE.CubicBezierCurve3( new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, -0.6, 0.2), new THREE.Vector3(0, -1.2, 0.1), new THREE.Vector3(0, -1.8, 0.3) ); // Create tube geometry following the curve const tubeGeometry = new THREE.TubeGeometry(curve, 20, 0.08, 8, false); const arm = new THREE.Mesh(tubeGeometry, armMaterial); armGroup.add(arm); // Create pincer tip const tipCurve = new THREE.CubicBezierCurve3( new THREE.Vector3(0, -1.8, 0.3), new THREE.Vector3(0, -2.0, 0.4), new THREE.Vector3(0, -2.2, 0.3), new THREE.Vector3(0, -2.4, 0.1) ); const tipGeometry = new THREE.TubeGeometry(tipCurve, 10, 0.06, 8, false); const tip = new THREE.Mesh(tipGeometry, armMaterial); armGroup.add(tip); // Add joint sphere at connection points const jointGeometry = new THREE.SphereGeometry(0.1, 16, 16); const joint = new THREE.Mesh(jointGeometry, armMaterial); joint.position.set(0, -1.8, 0.3); armGroup.add(joint); // Position and rotate the arm group armGroup.position.y = 0; armGroup.position.x = Math.cos((i * Math.PI * 2) / 4) * 0.8; armGroup.position.z = Math.sin((i * Math.PI * 2) / 4) * 0.8; armGroup.rotation.x = 0.3; clawArms.push(armGroup); clawGroup.add(armGroup); } // Position the claw group clawGroup.position.set(0, 20, 0); scene.add(clawGroup); // Claw movement and animation properties const clawState = { position: new THREE.Vector3(0, 20, 0), moveSpeed: 0.5, boundaries: { minX: -18, maxX: 18, minZ: -18, maxZ: 18, minY: 8, maxY: 28 }, isGrabbing: false, canGrab: true, grabPhase: 'idle', // idle, descending, grabbing, ascending initialY: 20, descentSpeed: 0.3, ascentSpeed: 0.2, grabDelay: 500, // milliseconds to hold grab position lastGrabTime: 0, // Physics parameters baseGripStrength: 0.95, // Much higher base grip strength currentGripStrength: 0.95, // Much higher current grip strength gripDecayRate: 0.0005, // Much slower grip decay dropProbability: 0.05, // Much lower drop probability heightDropMultiplier: 0.005, // Much lower height penalty lastGripUpdate: 0, gripUpdateInterval: 200 // Slower updates for more stability }; // Animation loop function animate() { requestAnimationFrame(animate); deltaTime = Math.min(clock.getDelta(), 0.1); // Cap delta time to prevent huge jumps const timeScale = deltaTime / TIME_STEP; // Scale factor for movements if (isGameActive && gameStartTime && !isTimerPaused) { // Update timer accounting for paused time const currentTime = Date.now(); const elapsedTime = currentTime - gameStartTime - pausedTimeTotal; const remainingTime = Math.max(0, gameTimeLimit - elapsedTime); if (remainingTime > 0) { // Update timer display const minutes = Math.floor(remainingTime / 60000); const seconds = Math.floor((remainingTime % 60000) / 1000); timerDisplay.innerHTML = `Time: ${minutes}:${seconds.toString().padStart(2, '0')}`; // Check win condition if (prizesCollected >= requiredPrizes) { isGameActive = false; showGameOver(true); } } else { // Time's up isGameActive = false; showGameOver(false); } } prizeManager.updatePrizes(); prizeManager.updateSparkles(); // Update falling prizes prizeManager.prizes.forEach(prize => { if (prize.isFalling) { // Update position prize.fallData.velocity += prize.fallData.gravity; prize.position.y -= prize.fallData.velocity; // Update rotation prize.rotation.x += prize.fallData.rotationSpeed.x; prize.rotation.y += prize.fallData.rotationSpeed.y; prize.rotation.z += prize.fallData.rotationSpeed.z; // Check for ground collision if (prize.position.y <= 5) { prize.position.y = 5; if (prize.fallData.bounceCount < prize.fallData.maxBounces) { // Bounce with dampening prize.fallData.velocity = -prize.fallData.velocity * prize.fallData.damping; prize.fallData.bounceCount++; // Reduce rotation speed after each bounce prize.fallData.rotationSpeed.x *= 0.8; prize.fallData.rotationSpeed.y *= 0.8; prize.fallData.rotationSpeed.z *= 0.8; } else { // Stop falling prize.isFalling = false; prize.fallData = null; } } } }); if (assetsLoaded) { applyControls(); // Apply camera controls controls.update(); } composer.render(); } // Handle window resize function onWindowResize() { const width = parentDiv.clientWidth; const height = parentDiv.clientHeight; // Update camera camera.aspect = width / height; camera.updateProjectionMatrix(); // Update renderer and composer renderer.setSize(width, height); composer.setSize(width, height); // Update post-processing passes 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 // ========================= // Create a container for the D-pad const dpadContainer = document.createElement('div'); dpadContainer.id = 'dpadContainer'; document.body.appendChild(dpadContainer); // Create directional buttons const directions = ['up', 'down', 'left', 'right']; directions.forEach(direction => { const button = document.createElement('button'); button.id = `${direction}Button`; button.classList.add('dpad-button'); // Set the appropriate icon based on direction let iconUrl = ''; switch (direction) { case 'up': iconUrl = 'https://play.rosebud.ai/assets/up_chevron.png?SHXw'; break; case 'down': iconUrl = 'https://play.rosebud.ai/assets/down_chevron.png?a4Rx'; break; case 'left': iconUrl = 'https://play.rosebud.ai/assets/left_chevron.png?3ZPr'; break; case 'right': iconUrl = 'https://play.rosebud.ai/assets/right_chevron.png?4Nlv'; break; } button.style.backgroundImage = `url('${iconUrl}')`; dpadContainer.appendChild(button); }); // Create a container for the Jump button const jumpContainer = document.createElement('div'); jumpContainer.id = 'jumpContainer'; document.body.appendChild(jumpContainer); // Create Jump button const jumpButton = document.createElement('button'); jumpButton.id = 'jumpButton'; jumpButton.classList.add('jump-button'); jumpButton.style.backgroundImage = `url('https://play.rosebud.ai/assets/Up-Arrow.png?64qV')`; jumpContainer.appendChild(jumpButton); // Inject CSS styles dynamically const styles = ` /* D-Pad Container */ /* D-Pad Container */ #dpadContainer { position: fixed; bottom: 150px; /* Moved up further */ left: 30px; /* Moved inward */ width: 150px; /* Increased size */ height: 150px; /* Increased size */ display: grid; grid-template-areas: ". up ." "left . right" ". down ."; grid-gap: 10px; /* Spacing between buttons */ z-index: 1000; } /* Positioning each button in the grid */ #upButton { grid-area: up; } #downButton { grid-area: down; } #leftButton { grid-area: left; } #rightButton { grid-area: right; } /* D-Pad Buttons */ .dpad-button { width: 50px; /* Consistent size */ height: 50px; /* Consistent size */ margin: 0; /* Remove margin as grid-gap handles spacing */ background-color: rgba(0, 0, 0, 0.5); /* Dark semi-transparent background */ background-size: 60%; /* Uniform icon size */ background-repeat: no-repeat; background-position: center; border: none; border-radius: 12px; /* Rounded corners */ opacity: 0.9; /* Higher opacity */ transition: opacity 0.2s, transform 0.1s, box-shadow 0.2s, filter 0.2s; /* Smooth transitions */ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Initial shadow */ } /* Active State for D-Pad Buttons */ .dpad-button:active { opacity: 1; transform: scale(0.95); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Shadow becomes more pronounced */ filter: brightness(1.1); /* Slight brightness increase */ } /* Jump Button Container */ #jumpContainer { position: fixed; bottom: 150px; /* Moved up further */ right: 30px; /* Moved inward */ width: 80px; /* Maintained size */ height: 80px; /* Maintained size */ display: flex; justify-content: center; align-items: center; z-index: 1000; } /* Jump Button */ .jump-button { width: 70px; /* Increased size */ height: 70px; /* Increased size */ background-color: rgba(0, 0, 0, 0.5); /* Dark semi-transparent background */ background-size: 60%; /* Uniform icon size */ background-repeat: no-repeat; background-position: center; border: none; border-radius: 35px; /* Fully rounded */ opacity: 0.9; /* Higher opacity */ transition: opacity 0.2s, transform 0.1s, box-shadow 0.2s, filter 0.2s; /* Smooth transitions */ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Initial shadow */ background-image: url('https://play.rosebud.ai/assets/Up-Arrow.png?64qV'); /* Jump button icon */ } /* Active State for Jump Button */ .jump-button:active { opacity: 1; transform: scale(0.95); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Shadow becomes more pronounced */ filter: brightness(1.1); /* Slight brightness increase */ } /* Responsive Adjustments */ @media (max-width: 600px) { /* D-Pad Container */ #dpadContainer { bottom: 120px; /* Increased from 80px to move up on smaller screens */ left: 25px; width: 120px; height: 120px; } /* D-Pad Buttons */ .dpad-button { width: 40px; height: 40px; background-size: 60%; /* Ensure uniform size */ } /* Jump Button Container */ #jumpContainer { bottom: 120px; /* Increased from 80px */ right: 25px; width: 60px; height: 60px; } /* Jump Button */ .jump-button { width: 60px; height: 60px; background-size: 60%; /* Ensure uniform size */ } } `; // Append the styles to the head // Add Google Font link const fontLink = document.createElement('link'); fontLink.rel = 'stylesheet'; fontLink.href = 'https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap'; document.head.appendChild(fontLink); // Create style element const styleSheet = document.createElement("style"); styleSheet.type = "text/css"; // Add rainbow animation keyframes const rainbowAnimation = ` @keyframes rainbow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } `; styleSheet.innerText = rainbowAnimation + styles; document.head.appendChild(styleSheet); // Define keysPressed object with standardized key names const keysPressed = { up: false, down: false, left: false, right: false, jump: false, }; // Helper functions to handle button presses function addButtonListeners(buttonId, key) { const button = document.getElementById(buttonId); if (!button) return; // Prevent default to avoid unwanted scrolling or other behaviors button.addEventListener('touchstart', (event) => { event.preventDefault(); keysPressed[key] = true; }, { passive: false }); button.addEventListener('touchend', (event) => { event.preventDefault(); keysPressed[key] = false; }, { passive: false }); // Also handle mouse events for desktop compatibility button.addEventListener('mousedown', (event) => { event.preventDefault(); keysPressed[key] = true; }); button.addEventListener('mouseup', (event) => { event.preventDefault(); keysPressed[key] = false; }); button.addEventListener('mouseleave', (event) => { event.preventDefault(); keysPressed[key] = false; }); } // Map buttons to standardized keys addButtonListeners('upButton', 'up'); addButtonListeners('downButton', 'down'); addButtonListeners('leftButton', 'left'); addButtonListeners('rightButton', 'right'); addButtonListeners('jumpButton', 'jump'); // ========================= // Keyboard Controls Integration // ========================= // Add event listeners for keyboard controls window.addEventListener('keydown', (event) => { switch (event.code) { case 'ArrowUp': case 'KeyW': keysPressed.up = true; break; case 'ArrowDown': case 'KeyS': keysPressed.down = true; break; case 'ArrowLeft': case 'KeyA': keysPressed.left = true; break; case 'ArrowRight': case 'KeyD': keysPressed.right = true; break; case 'Space': keysPressed.jump = true; break; default: break; } }); window.addEventListener('keyup', (event) => { switch (event.code) { case 'ArrowUp': case 'KeyW': keysPressed.up = false; break; case 'ArrowDown': case 'KeyS': keysPressed.down = false; break; case 'ArrowLeft': case 'KeyA': keysPressed.left = false; break; case 'ArrowRight': case 'KeyD': keysPressed.right = false; break; case 'Space': keysPressed.jump = false; break; default: break; } }); // ========================= // End of Mobile and Keyboard Controls Integration // ========================= // Function to apply controls based on keysPressed function applyControls() { const timeScale = deltaTime / TIME_STEP; // Calculate timeScale at the start of the function // Check if any prizes are currently falling const isPrizeFalling = prizeManager.prizes.some(prize => prize.isFalling); // Only allow movement if not in grabbing sequence and no prizes are falling if (clawState.grabPhase === 'idle') { // Start sound if any movement key is pressed and sound isn't already playing if ((keysPressed.up || keysPressed.down || keysPressed.left || keysPressed.right) && !clawSound.isPlaying) { clawSound.play(); } // Stop sound if no movement keys are pressed if (!keysPressed.up && !keysPressed.down && !keysPressed.left && !keysPressed.right && clawSound.isPlaying) { clawSound.stop(); } // Up (W/Up Arrow) moves claw away from camera (positive X) if (keysPressed.up) { clawState.position.x = Math.min( clawState.boundaries.maxX, clawState.position.x + clawState.moveSpeed * timeScale ); } // Down (S/Down Arrow) moves claw towards camera (negative X) if (keysPressed.down) { clawState.position.x = Math.max( clawState.boundaries.minX, clawState.position.x - clawState.moveSpeed * timeScale ); } // Left (A/Left Arrow) moves claw left (negative Z) if (keysPressed.left) { clawState.position.z = Math.max( clawState.boundaries.minZ, clawState.position.z - clawState.moveSpeed * timeScale ); } // Right (D/Right Arrow) moves claw right (positive Z) if (keysPressed.right) { clawState.position.z = Math.min( clawState.boundaries.maxZ, clawState.position.z + clawState.moveSpeed * timeScale ); } // Initiate grab sequence only if no prizes are falling if (keysPressed.jump && clawState.canGrab) { if (isPrizeFalling) { // Show warning message warningMessage.style.display = 'block'; // Hide warning message after 1 second setTimeout(() => { warningMessage.style.display = 'none'; }, 1000); } else { clawState.grabPhase = 'descending'; clawState.canGrab = false; clawState.initialY = clawState.position.y; } } } // Handle grab sequence const checkPrizeCollision = () => { const clawPosition = new THREE.Vector3(); clawGroup.getWorldPosition(clawPosition); let closestPrize = null; let closestDistance = 10; // Much larger grab range // Find the closest prize within range prizeManager.prizes.forEach(prize => { if (!prize.isGrabbed && !prize.isInCollectionBox) { const prizePosition = new THREE.Vector3(); prize.getWorldPosition(prizePosition); const distance = clawPosition.distanceTo(prizePosition); if (distance < closestDistance) { closestDistance = distance; closestPrize = prize; } } }); // Grab only the closest prize if one was found if (closestPrize) { // Calculate initial grip strength with some randomization clawState.currentGripStrength = clawState.baseGripStrength * (0.95 + Math.random() * 0.1); // Much higher minimum grip strength closestPrize.isGrabbed = true; closestPrize.parent = clawGroup; closestPrize.position.set(0, -2, 0); // Position relative to claw closestPrize.dropChance = Math.random(); // Random value to compare against drop probability } }; switch (clawState.grabPhase) { case 'descending': if (!clawDropSound.isPlaying) { clawDropSound.play(); // Increment attempt counter when claw starts descending attemptCount++; attemptsText.innerHTML = `Attempts: ${attemptCount}`; // Play new attempt sound if (newAttemptSound && !newAttemptSound.isPlaying) { newAttemptSound.play(); } } clawState.position.y -= clawState.descentSpeed * timeScale; if (clawState.position.y <= clawState.boundaries.minY) { clawState.position.y = clawState.boundaries.minY; clawState.grabPhase = 'grabbing'; clawState.lastGrabTime = Date.now(); checkPrizeCollision(); // Close the claw clawArms.forEach(armGroup => { armGroup.rotation.x = 0.9; // Scale the arm group slightly to create grabbing effect armGroup.scale.set(1, 0.9, 1); }); } break; case 'grabbing': if (!clawDropSound.isPlaying) { clawDropSound.play(); } if (Date.now() - clawState.lastGrabTime > clawState.grabDelay) { clawState.grabPhase = 'ascending'; } break; case 'ascending': if (!clawDropSound.isPlaying) { clawDropSound.play(); } clawState.position.y += clawState.ascentSpeed * timeScale; // Update grip strength and check for dropping const now = Date.now(); if (now - clawState.lastGripUpdate > clawState.gripUpdateInterval) { clawState.lastGripUpdate = now; // Decrease grip strength over time clawState.currentGripStrength = Math.max( 0.1, clawState.currentGripStrength - clawState.gripDecayRate ); // Check for prize dropping prizeManager.prizes.forEach(prize => { if (prize.isGrabbed) { // Calculate drop probability based on height and base probability const heightFactor = (clawState.position.y - clawState.boundaries.minY) * clawState.heightDropMultiplier; const totalDropChance = clawState.dropProbability + heightFactor; // Check if prize should drop if (prize.dropChance > clawState.currentGripStrength || Math.random() < totalDropChance) { prize.isGrabbed = false; prize.parent = scene; // Initialize falling properties prize.fallData = { velocity: 0, rotationSpeed: { x: (Math.random() - 0.5) * 0.1, y: (Math.random() - 0.5) * 0.1, z: (Math.random() - 0.5) * 0.1 }, bounceCount: 0, maxBounces: 2, gravity: 0.015, damping: 0.6 }; // Set initial position const dropX = clawState.position.x + (Math.random() - 0.5) * 2; const dropZ = clawState.position.z + (Math.random() - 0.5) * 2; prize.position.set(dropX, clawState.position.y, dropZ); prize.isFalling = true; } } }); } if (clawState.position.y >= clawState.initialY) { clawState.position.y = clawState.initialY; clawState.grabPhase = 'idle'; clawDropSound.stop(); // Release any grabbed prizes prizeManager.prizes.forEach(prize => { if (prize.isGrabbed) { prize.isGrabbed = false; prize.parent = scene; // Find next available position in collection grid let gridPosition = null; for (let row = 0; row < collectionGrid.rows; row++) { for (let col = 0; col < collectionGrid.columns; col++) { const key = `${row},${col}`; if (!collectionGrid.occupied.has(key)) { gridPosition = { row, col }; collectionGrid.occupied.add(key); break; } } if (gridPosition) break; } // Calculate position based on grid if (gridPosition) { const x = -22; // Base collection box X position const y = collectionGrid.baseHeight + (gridPosition.row * collectionGrid.spacing); const z = -2 + (gridPosition.col * collectionGrid.spacing); prize.position.set(x, y, z); prize.gridPosition = gridPosition; } else { // Fallback position if grid is full prize.position.set(-22, 10, 0); } prize.rotation.y = Math.PI; // Face the camera prize.isInCollectionBox = true; // Play appropriate sound based on prize type const children = []; prize.traverse((child) => children.push(child)); const isAlienToy = children.some(child => child.material && child.material.map && child.material.map.image && child.material.map.image.src.includes('alien_from_toy_story') ); if (isAlienToy) { if (alienSound && !alienSound.isPlaying) { alienSound.play(); } } else if (dingSound && !dingSound.isPlaying) { dingSound.play(); } // Add click detection for the prize prizeManager.makeClickable(prize); } }); // Open the claw clawArms.forEach(armGroup => { armGroup.rotation.x = 0.3; // Reset arm group scale armGroup.scale.set(1, 1, 1); }); // Reset grab availability after a short delay setTimeout(() => { clawState.canGrab = true; }, 1000); } break; } // Update claw position clawGroup.position.copy(clawState.position); } // Function to make prizes clickable when in collection box function makeClickable(prize) { const raycaster = new THREE.Raycaster(); const mouse = new THREE.Vector2(); function onPrizeClick(event) { // Check global click lock first if (isClickLocked) return; // Set click lock isClickLocked = true; setTimeout(() => { isClickLocked = false; }, CLICK_LOCK_DURATION); // Comprehensive check for any state that should prevent clicking if (prize.isBeingRedeemed || prize.isRedeeming || prize.hasBeenRedeemed || !prize.isInCollectionBox) { isClickLocked = false; // Release lock if click is invalid return; } // Convert mouse position to normalized device coordinates const rect = canvas.getBoundingClientRect(); mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1; mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1; raycaster.setFromCamera(mouse, camera); // Get camera direction for depth sorting const cameraDirection = new THREE.Vector3(); camera.getWorldDirection(cameraDirection); // Get all valid prizes that can be redeemed const collectionBoxPrizes = prizeManager.prizes.filter(p => p.isInCollectionBox && !p.isBeingRedeemed && !p.hasBeenRedeemed); // Calculate visibility and intersection data for each prize const intersects = []; collectionBoxPrizes.forEach(p => { const prizeIntersects = raycaster.intersectObject(p, true); if (prizeIntersects.length > 0) { // Calculate dot product for front-to-back ordering const toPrize = new THREE.Vector3(); toPrize.subVectors(p.position, camera.position).normalize(); const dotProduct = toPrize.dot(cameraDirection); // Check if prize is occluded by other prizes let isOccluded = false; const occlusionRay = new THREE.Raycaster(); occlusionRay.set(camera.position, toPrize); const occlusionIntersects = occlusionRay.intersectObjects( collectionBoxPrizes.filter(op => op !== p), true ); if (occlusionIntersects.length > 0) { const distanceToPrize = p.position.distanceTo(camera.position); isOccluded = occlusionIntersects[0].distance < distanceToPrize; } if (!isOccluded) { intersects.push({ prize: p, distance: prizeIntersects[0].distance, position: p.position.y, dotProduct: dotProduct, gridPosition: p.gridPosition || { row: -1, col: -1 } }); } } }); // Sort intersects by multiple criteria if (intersects.length > 0) { const sortedIntersects = intersects.sort((a, b) => { // First, prioritize by grid row (front to back) if (a.gridPosition.row !== b.gridPosition.row) { return b.gridPosition.row - a.gridPosition.row; } // Then by height within the same row if (Math.abs(a.position - b.position) > 0.1) { return b.position - a.position; } // Finally by distance from camera return a.distance - b.distance; }); // Check if clicked prize is the top priority if (sortedIntersects[0].prize === prize) { redeemPrize(prize); } } } canvas.addEventListener('click', onPrizeClick); } // Function to handle prize redemption animation function redeemPrize(prize) { // Prevent multiple redemptions and check if prize is valid for redemption if (isRedeeming || prize.isBeingRedeemed || prize.isRedeeming || !prize.isInCollectionBox || prize.hasBeenRedeemed) { isClickLocked = false; // Release lock if redemption is invalid return; } isRedeeming = true; prize.isBeingRedeemed = true; prize.hasBeenRedeemed = true; // Mark the prize as permanently redeemed // Select a random position from prizePositions const randomPosition = prizePositions[Math.floor(Math.random() * prizePositions.length)]; // Setup sparkle effect sparkleSystem.position.copy(prize.position); const positions = sparkleSystem.geometry.attributes.position.array; for (let i = 0; i < positions.length; i += 3) { positions[i] = (Math.random() - 0.5) * 2; // x positions[i + 1] = (Math.random() - 0.5) * 2; // y positions[i + 2] = (Math.random() - 0.5) * 2; // z } sparkleSystem.geometry.attributes.position.needsUpdate = true; sparkleMaterial.opacity = 1; sparkleSystem.visible = true; // Animate prize fade out prize.traverse((child) => { if (child instanceof THREE.Mesh) { child.material.transparent = true; const fadeOut = setInterval(() => { if (child.material.opacity > 0) { child.material.opacity -= 0.05; } else { clearInterval(fadeOut); scene.remove(prize); // Remove from prizes array const index = prizeManager.prizes.indexOf(prize); if (index > -1) { prizeManager.prizes.splice(index, 1); // Free up grid position when prize is removed if (prize.gridPosition) { const key = `${prize.gridPosition.row},${prize.gridPosition.col}`; collectionGrid.occupied.delete(key); } } // Only update game state without affecting timer prizesCollected++; prizeDisplay.innerHTML = `Prizes: ${prizesCollected}/${requiredPrizes}`; // Check win condition without resetting timer if (prizesCollected >= requiredPrizes && isGameActive) { isGameActive = false; showGameOver(true); } // Reset only redemption-related states isRedeeming = false; if (dingSound && !dingSound.isPlaying) { dingSound.play(); } // Spawn a new prize in the machine prizeManager.createPrize(randomPosition.x, randomPosition.y, randomPosition.z); // Reset prize redemption state prize.isRedeeming = false; } }, 50); } }); } // Function to show game over screen function showGameOver(isWin) { // Pause timer during game over screen isTimerPaused = true; // Stop background music if (backgroundMusic && backgroundMusic.isPlaying) { backgroundMusic.stop(); } lastTimeStamp = Date.now(); const playAgainDelay = 2000; // 2 seconds delay let playAgainButton; if (isWin && winSound && !winSound.isPlaying) { winSound.play(); } const gameOverScreen = document.createElement('div'); gameOverScreen.style.position = 'fixed'; gameOverScreen.style.top = '50%'; gameOverScreen.style.left = '50%'; gameOverScreen.style.transform = 'translate(-50%, -50%)'; gameOverScreen.style.background = 'rgba(0, 0, 0, 0.9)'; gameOverScreen.style.padding = '40px'; gameOverScreen.style.borderRadius = '20px'; gameOverScreen.style.color = '#fff'; gameOverScreen.style.textAlign = 'center'; gameOverScreen.style.zIndex = '2000'; const message = isWin ? `OH MY GOD! NOW I LOVE YOU! CAN YOU DO IT AGAIN?` : `You did not meet my expectations. Good luck next time.`; const attemptsMessage = `Total Attempts: ${attemptCount}`; gameOverScreen.innerHTML = `

${isWin ? 'Victory!' : 'Time\'s Up!'}

${isWin ? `

` : `

` }

${attemptsMessage}

${message}

`; document.body.appendChild(gameOverScreen); // Get the button element playAgainButton = document.getElementById('playAgainButton'); // Enable the button after the delay setTimeout(() => { playAgainButton.style.background = '#2196F3'; playAgainButton.style.color = 'white'; playAgainButton.style.cursor = 'pointer'; playAgainButton.textContent = 'Play Again'; playAgainButton.onclick = () => location.reload(); }, playAgainDelay); }