// Initialize time tracking variables let lastTransitionTime = 0; // Define ASSETS array first const ASSETS = [{ "name": "arrowup", "shortid": "FOVY", "file_type": "png", "url": "https://play.rosebud.ai/assets/arrowup.png?FOVY" }, { "name": "arrowleft", "shortid": "67jJ", "file_type": "png", "url": "https://play.rosebud.ai/assets/arrowleft.png?67jJ" }, { "name": "arrowright", "shortid": "tsyN", "file_type": "png", "url": "https://play.rosebud.ai/assets/arrowright.png?tsyN" }, { "name": "arrowdown", "shortid": "g2O2", "file_type": "png", "url": "https://play.rosebud.ai/assets/arrowdown.png?g2O2" }, { "name": "lefthalfofthedanceclubdoor", "shortid": "VW2A", "file_type": "png", "url": "https://play.rosebud.ai/assets/lefthalfofthedanceclubdoor.png?VW2A" }, { "name": "righthalfofdanceclubdoor", "shortid": "ZpUg", "file_type": "png", "url": "https://play.rosebud.ai/assets/righthalfofdanceclubdoor.png?ZpUg" }, { "name": "danceclub", "shortid": "Mu0v", "file_type": "png", "url": "https://play.rosebud.ai/assets/danceclub.png?Mu0v" }, { "name": "danceclubentrancesign", "shortid": "B9io", "file_type": "png", "url": "https://play.rosebud.ai/assets/danceclubentrancesign.png?B9io" }, { "name": "danceclubdoornoframe", "shortid": "hpWo", "file_type": "png", "url": "https://play.rosebud.ai/assets/danceclubdoornoframe.png?hpWo" }, { "name": "noclownsallowedsign", "shortid": "BRk1", "file_type": "png", "url": "https://play.rosebud.ai/assets/noclownsallowedsign.png?BRk1" }, { "name": "clubshakeemoff", "shortid": "pGot", "file_type": "png", "url": "https://play.rosebud.ai/assets/clubshakeemoff.png?pGot" }]; // Initialize parent div first const parentDiv = document.getElementById('renderDiv'); import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { FBXLoader } from 'three/addons/loaders/FBXLoader.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'; // Initialize loading manager const loadingManager = new THREE.LoadingManager(); const textureLoader = new THREE.TextureLoader(loadingManager); const fbxLoader = new FBXLoader(loadingManager); const audioListener = new THREE.AudioListener(); // LOD System Configuration const LODConfig = { performance: { targetFPS: 60, minFPS: 30, measurementPeriod: 1000, // ms }, quality: { high: { bloomStrength: 0.2, particleCount: 1000, shadowMapSize: 2048, maxLights: 24, }, medium: { bloomStrength: 0.1, particleCount: 500, shadowMapSize: 1024, maxLights: 16, }, low: { bloomStrength: 0, particleCount: 200, shadowMapSize: 512, maxLights: 8, } } }; // Performance monitoring variables let frameCount = 0; let lastFPSUpdate = 0; let currentFPS = 60; let currentQualityLevel = 'high'; const backgroundMusic = new THREE.Audio(audioListener); const audioLoader = new THREE.AudioLoader(loadingManager); // Available songs const availableSongs = [{ name: "Trollin' in the Shadows", url: "https://play.rosebud.ai/assets/Trollin' in the Shadows Brain Joose dance song.mp3?6JSl" }, { name: "AIGod", url: "https://play.rosebud.ai/assets/AIGod.mp3?otI7" }, { name: "Rosebud Love", url: "https://play.rosebud.ai/assets/Rosebud Love.mp3?wcjd" }, { name: "No Clowns Allowed", url: "https://play.rosebud.ai/assets/NoClownsAllowedthirdlevelsong.mp3?ciiK" }, { name: "Mind Games", url: "https://play.rosebud.ai/assets/MindGamesfourthlevelsong.mp3?1xxb" }, { name: "Troll Patrol", url: "https://play.rosebud.ai/assets/TrollPatrolfifthlevelsong.mp3?OBVU" }, { name: "Who Cares", url: "https://play.rosebud.ai/assets/Who Cares.mp3?8B59" }, { name: "Trollin' Behind Screens", url: "https://play.rosebud.ai/assets/Trollin' Behind Screens.mp3?UWRj" }, { name: "Jealous Greene", url: "https://play.rosebud.ai/assets/Jealous Greene.mp3?P08I" }, { name: "Don't Troll Me", url: "https://play.rosebud.ai/assets/Don't Troll Me.mp3?Q2iR" }, { name: "Troll Anthem", url: "https://play.rosebud.ai/assets/Troll Anthem.mp3?7o2z" }]; // Game difficulty settings const difficulties = { easy: { noteSpeed: 0.3, // Even slower speed for better learning hitWindow: 0.35, // Keep forgiving timing spawnInterval: 2.2, // Keep same spawn interval label: 'Easy' }, medium: { noteSpeed: 0.5, // More manageable medium speed hitWindow: 0.30, spawnInterval: 1.8, label: 'Medium' }, legendary: { noteSpeed: 0.8, // Still challenging but more manageable hitWindow: 0.25, spawnInterval: 1.5, label: 'Legendary' } }; // Rhythm game variables let notes = []; let score = 0; let combo = 0; let maxCombo = 0; let noteSpeed = 0.5; // Default speed matches new medium difficulty let hitWindow = 0.30; // More forgiving default timing window let lastSpawnTime = 0; let spawnInterval = 1.8; // More time between notes by default let assetsLoaded = false; let gameStarted = false; let selectedDifficulty = null; let startButtonClicked = false; let gameOver = false; // Make sure parentDiv exists before creating title screen if (!parentDiv) { throw new Error('Parent div with id "renderDiv" not found'); } // Create epilepsy warning screen const epilepsyWarning = document.createElement('div'); epilepsyWarning.style.position = 'absolute'; epilepsyWarning.style.top = '0'; epilepsyWarning.style.left = '0'; epilepsyWarning.style.width = '100%'; epilepsyWarning.style.height = '100%'; epilepsyWarning.style.background = 'black'; epilepsyWarning.style.color = '#ffffff'; epilepsyWarning.style.display = 'flex'; epilepsyWarning.style.flexDirection = 'column'; epilepsyWarning.style.justifyContent = 'center'; epilepsyWarning.style.alignItems = 'center'; epilepsyWarning.style.zIndex = '20000'; epilepsyWarning.style.padding = '20px'; epilepsyWarning.style.textAlign = 'center'; const warningText = document.createElement('div'); warningText.innerHTML = `

⚠️ WARNING - PHOTOSENSITIVITY/EPILEPSY SEIZURES ⚠️

This game contains flashing lights, bright colors, and patterns that may trigger seizures in people with photosensitive epilepsy. If you experience any discomfort, dizziness, or seizures, immediately stop playing and consult a doctor.

`; const continueButton = document.createElement('button'); continueButton.textContent = 'I Understand - Continue'; continueButton.style.padding = '15px 30px'; continueButton.style.fontSize = '18px'; continueButton.style.background = '#ff0000'; continueButton.style.color = 'white'; continueButton.style.border = 'none'; continueButton.style.borderRadius = '5px'; continueButton.style.cursor = 'pointer'; continueButton.style.marginTop = '20px'; continueButton.onclick = () => { epilepsyWarning.style.transition = 'opacity 1s ease-out'; epilepsyWarning.style.opacity = '0'; setTimeout(() => { epilepsyWarning.remove(); }, 1000); }; epilepsyWarning.appendChild(warningText); epilepsyWarning.appendChild(continueButton); parentDiv.appendChild(epilepsyWarning); // Create title screen const titleScreen = document.createElement('div'); titleScreen.style.position = 'absolute'; titleScreen.style.top = '0'; titleScreen.style.left = '0'; titleScreen.style.width = '100%'; titleScreen.style.height = '100%'; titleScreen.style.background = 'linear-gradient(45deg, #000000, #1a1a1a)'; titleScreen.style.color = '#ffffff'; titleScreen.style.display = 'flex'; titleScreen.style.flexDirection = 'column'; titleScreen.style.justifyContent = 'center'; titleScreen.style.alignItems = 'center'; titleScreen.style.zIndex = '10000'; // Create door container // Add title text // Create entrance sign const entranceSign = document.createElement('img'); entranceSign.src = ASSETS.find(a => a.name === 'danceclubentrancesign').url; entranceSign.style.width = '400px'; entranceSign.style.marginBottom = '-150px'; // Much larger negative margin for closer positioning entranceSign.style.position = 'relative'; entranceSign.style.zIndex = '1'; // Ensure sign appears above the door // Create shake em off sign const shakeEmOffSign = document.createElement('img'); const shakeEmOffAsset = ASSETS.find(a => a.name === 'clubshakeemoff'); if (shakeEmOffAsset) { shakeEmOffSign.src = shakeEmOffAsset.url; } else { console.warn('clubshakeemoff asset not found'); } shakeEmOffSign.style.position = 'absolute'; shakeEmOffSign.style.width = '300px'; shakeEmOffSign.style.left = '-350px'; // Position it to the left of the door shakeEmOffSign.style.top = '50%'; shakeEmOffSign.style.transform = 'translateY(-50%)'; // Center it vertically shakeEmOffSign.style.zIndex = '1'; // Create door image const doorImage = document.createElement('img'); doorImage.src = ASSETS.find(a => a.name === 'danceclubdoornoframe').url; doorImage.style.width = '300px'; doorImage.style.cursor = 'pointer'; doorImage.style.transition = 'transform 0.3s ease-in-out'; doorImage.style.position = 'relative'; // Create container for the door and sign const doorContainer = document.createElement('div'); doorContainer.style.position = 'relative'; doorContainer.style.display = 'inline-block'; // Create and position the No Clowns sign const noClownsSign = document.createElement('img'); noClownsSign.src = ASSETS.find(a => a.name === 'noclownsallowedsign').url; noClownsSign.style.position = 'absolute'; noClownsSign.style.width = '80px'; noClownsSign.style.right = '30px'; noClownsSign.style.top = '40px'; noClownsSign.style.transform = 'perspective(1000px) rotate(5deg) translateZ(20px)'; // Add depth noClownsSign.style.zIndex = '2'; // Ensure it's in front noClownsSign.style.pointerEvents = 'none'; // Add both elements to the container doorContainer.appendChild(doorImage); doorContainer.appendChild(noClownsSign); // Update title screen to use the container instead of just the door titleScreen.appendChild(entranceSign); doorContainer.appendChild(shakeEmOffSign); // Add shake em off sign to door container // Add instructions modal first const instructionsModal = document.createElement('div'); instructionsModal.style.display = 'none'; instructionsModal.style.position = 'fixed'; instructionsModal.style.top = '50%'; instructionsModal.style.left = '50%'; instructionsModal.style.transform = 'translate(-50%, -50%)'; instructionsModal.style.backgroundColor = 'rgba(0, 0, 0, 0.95)'; instructionsModal.style.padding = '30px'; instructionsModal.style.borderRadius = '15px'; instructionsModal.style.border = '2px solid #00ff00'; instructionsModal.style.color = '#ffffff'; instructionsModal.style.zIndex = '20000'; instructionsModal.style.maxWidth = '600px'; instructionsModal.style.textAlign = 'center'; instructionsModal.style.boxShadow = '0 0 20px rgba(0, 255, 0, 0.3)'; instructionsModal.innerHTML = `

How to Play

Hit the arrow keys when falling arrows align with the still arrows!

⬆️ Use the Up Arrow key for up arrows

⬇️ Use the Down Arrow key for down arrows

⬅️ Use the Left Arrow key for left arrows

➡️ Use the Right Arrow key for right arrows

Perfect timing = Perfect score! Everyone wins, scores may vary!

`; // Add click handler for close button instructionsModal.querySelector('#closeInstructions').onclick = () => { instructionsModal.style.display = 'none'; }; titleScreen.appendChild(instructionsModal); // Create instructions button const instructionsButton = document.createElement('button'); instructionsButton.textContent = 'How to Play'; instructionsButton.style.position = 'absolute'; instructionsButton.style.top = '20px'; instructionsButton.style.right = '20px'; instructionsButton.style.padding = '15px 30px'; instructionsButton.style.fontSize = '18px'; instructionsButton.style.fontWeight = 'bold'; instructionsButton.style.background = 'rgba(0, 0, 0, 0.8)'; instructionsButton.style.color = '#00ff00'; instructionsButton.style.border = '2px solid #00ff00'; instructionsButton.style.borderRadius = '10px'; instructionsButton.style.cursor = 'pointer'; instructionsButton.style.zIndex = '10001'; instructionsButton.style.transition = 'all 0.3s ease'; instructionsButton.onmouseover = () => { instructionsButton.style.transform = 'scale(1.1)'; instructionsButton.style.boxShadow = '0 0 20px rgba(0, 255, 0, 0.5)'; }; instructionsButton.onmouseout = () => { instructionsButton.style.transform = 'scale(1)'; instructionsButton.style.boxShadow = 'none'; }; instructionsButton.onclick = () => { instructionsModal.style.display = 'block'; }; titleScreen.appendChild(instructionsButton); // Create game settings container const gameSettingsContainer = document.createElement('div'); gameSettingsContainer.style.position = 'absolute'; gameSettingsContainer.style.top = '65%'; gameSettingsContainer.style.left = '50%'; gameSettingsContainer.style.transform = 'translateX(-50%)'; gameSettingsContainer.style.display = 'flex'; gameSettingsContainer.style.flexDirection = 'column'; gameSettingsContainer.style.alignItems = 'center'; gameSettingsContainer.style.gap = '30px'; gameSettingsContainer.style.padding = '20px'; gameSettingsContainer.style.background = 'rgba(0, 0, 0, 0.5)'; gameSettingsContainer.style.borderRadius = '15px'; gameSettingsContainer.style.boxShadow = '0 0 20px rgba(0, 255, 0, 0.2)'; gameSettingsContainer.style.zIndex = '2'; // Create difficulty selection container const difficultyContainer = document.createElement('div'); difficultyContainer.style.display = 'flex'; difficultyContainer.style.gap = '20px'; difficultyContainer.style.position = 'absolute'; difficultyContainer.style.right = '20px'; difficultyContainer.style.top = '50%'; difficultyContainer.style.transform = 'translateY(-50%)'; difficultyContainer.style.flexDirection = 'column'; difficultyContainer.style.zIndex = '2'; // Create difficulty buttons Object.entries(difficulties).forEach(([key, diff]) => { const button = document.createElement('button'); button.textContent = diff.label; button.style.padding = '15px 30px'; button.style.fontSize = '20px'; button.style.fontWeight = 'bold'; button.style.border = '3px solid #00ff00'; button.style.borderRadius = '10px'; button.style.background = 'rgba(0, 0, 0, 0.8)'; button.style.color = '#00ff00'; button.style.cursor = 'pointer'; button.style.transition = 'all 0.3s ease'; button.style.textShadow = '0 0 10px #00ff00'; button.style.boxShadow = '0 0 20px rgba(0, 255, 0, 0.3)'; button.onmouseover = () => { button.style.transform = 'scale(1.1)'; button.style.boxShadow = '0 0 30px rgba(0, 255, 0, 0.5)'; }; button.onmouseout = () => { button.style.transform = 'scale(1)'; button.style.boxShadow = '0 0 20px rgba(0, 255, 0, 0.3)'; }; button.onclick = () => { // Deselect all buttons difficultyContainer.querySelectorAll('button').forEach(btn => { btn.style.background = 'rgba(0, 0, 0, 0.8)'; btn.style.color = '#00ff00'; }); // Select clicked button button.style.background = '#00ff00'; button.style.color = '#000000'; selectedDifficulty = key; // Update game parameters noteSpeed = difficulties[key].noteSpeed; hitWindow = difficulties[key].hitWindow; spawnInterval = difficulties[key].spawnInterval; }; difficultyContainer.appendChild(button); }); // Create song selection dropdown const songContainer = document.createElement('div'); songContainer.style.display = 'flex'; songContainer.style.flexDirection = 'column'; songContainer.style.alignItems = 'center'; songContainer.style.gap = '15px'; songContainer.style.width = '100%'; const songLabel = document.createElement('label'); songLabel.textContent = 'SELECT SONG'; songLabel.style.color = '#00ff00'; songLabel.style.fontSize = '24px'; songLabel.style.fontWeight = 'bold'; songLabel.style.textShadow = '0 0 10px #00ff00'; songLabel.style.letterSpacing = '2px'; songLabel.style.marginBottom = '5px'; const songSelect = document.createElement('select'); songSelect.style.padding = '15px 30px'; songSelect.style.fontSize = '20px'; songSelect.style.background = 'rgba(0, 0, 0, 0.8)'; songSelect.style.color = '#00ff00'; songSelect.style.border = '2px solid #00ff00'; songSelect.style.borderRadius = '10px'; songSelect.style.cursor = 'pointer'; songSelect.style.outline = 'none'; songSelect.style.boxShadow = '0 0 15px rgba(0, 255, 0, 0.3)'; songSelect.style.width = '80%'; songSelect.style.textAlign = 'center'; songSelect.style.appearance = 'none'; songSelect.style.webkitAppearance = 'none'; songSelect.style.mozAppearance = 'none'; availableSongs.forEach((song, index) => { const option = document.createElement('option'); option.value = index; option.textContent = song.name; songSelect.appendChild(option); }); songContainer.appendChild(songLabel); songContainer.appendChild(songSelect); // Add containers to game settings songContainer.style.marginRight = '180px'; // Add margin to prevent overlap with difficulty buttons gameSettingsContainer.appendChild(songContainer); titleScreen.appendChild(difficultyContainer); // Move difficulty container directly to title screen titleScreen.appendChild(gameSettingsContainer); titleScreen.appendChild(doorContainer); // Add hover effect to the door doorImage.onmouseover = () => { doorImage.style.transform = 'scale(1.05)'; }; doorImage.onmouseout = () => { doorImage.style.transform = 'scale(1)'; }; // Add start button // Add click handler to the door doorImage.onclick = () => { if (startButtonClicked || !selectedDifficulty || songSelect.value === '') return; // Prevent clicking if no difficulty or song selected startButtonClicked = true; // Add door opening animation doorImage.style.transition = 'transform 1s ease-in-out'; doorImage.style.transformOrigin = 'right'; doorImage.style.transform = 'perspective(1000px) rotateY(-70deg)'; // After animation completes, ensure door stays open doorImage.addEventListener('transitionend', function permanentOpen() { doorImage.style.transition = 'none'; // Disable further transitions doorImage.style.transform = 'perspective(1000px) rotateY(-70deg)'; // Keep final position doorImage.removeEventListener('transitionend', permanentOpen); // Clean up listener }); // Play opening sound or add other effects here // Fade out title screen after door opens setTimeout(() => { titleScreen.style.transition = 'opacity 1s ease-out'; titleScreen.style.opacity = '0'; setTimeout(() => { titleScreen.style.display = 'none'; gameStarted = true; titleScreen.remove(); // Actually remove the title screen from DOM // Create score display const scoreDisplay = document.createElement('div'); scoreDisplay.id = 'scoreDisplay'; scoreDisplay.style.position = 'absolute'; scoreDisplay.style.top = '20px'; scoreDisplay.style.left = '20px'; scoreDisplay.style.color = '#00ff00'; scoreDisplay.style.fontSize = '24px'; scoreDisplay.style.fontWeight = 'bold'; scoreDisplay.style.textShadow = '0 0 10px #00ff00'; scoreDisplay.innerHTML = 'Score: 0
Combo: 0x'; parentDiv.appendChild(scoreDisplay); // Start playing music when game starts const selectedSong = availableSongs[parseInt(songSelect.value)]; audioLoader.load(selectedSong.url, function(buffer) { backgroundMusic.setBuffer(buffer); backgroundMusic.setLoop(false); backgroundMusic.setVolume(0.5); backgroundMusic.play(); }); }, 1000); }, 1000); // Wait for door animation to complete }; // Add elements to title screen // These lines are now handled in the door creation code above parentDiv.appendChild(titleScreen); // Trail system class TrailPoint { constructor(position, lifetime = 4.0) { this.position = position.clone(); this.lifetime = lifetime; this.age = 0; this.initialScale = 1 + Math.random() * 2; // Random initial scale } update(delta) { this.age += delta; return this.age < this.lifetime; } getOpacity() { return 1 - (this.age / this.lifetime); } } class NeonTrail { constructor(scene, color = 0x00ff00) { this.points = []; this.scene = scene; this.color = color; this.trailObjects = []; this.pointSpacing = 0.05; this.lastPosition = null; this.geometries = []; // Store geometries for disposal this.materials = []; // Store materials for disposal } addPoint(position) { if (this.lastPosition && this.lastPosition.distanceTo(position) < this.pointSpacing) { return; } const point = new TrailPoint(position); this.points.push(point); // Create visual representation const geometry = new THREE.SphereGeometry(0.8, 32, 32); const material = new THREE.MeshPhongMaterial({ color: this.color, transparent: true, opacity: 1, toneMapped: false, emissive: this.color, emissiveIntensity: 5, shininess: 100, blending: THREE.AdditiveBlending }); const mesh = new THREE.Mesh(geometry, material); mesh.position.copy(position); this.scene.add(mesh); this.trailObjects.push(mesh); this.lastPosition = position.clone(); } update(delta) { for (let i = this.points.length - 1; i >= 0; i--) { const point = this.points[i]; const mesh = this.trailObjects[i]; if (!point.update(delta)) { // Properly dispose of resources this.points.splice(i, 1); this.scene.remove(mesh); mesh.geometry.dispose(); mesh.material.dispose(); this.geometries.splice(i, 1); this.materials.splice(i, 1); this.trailObjects.splice(i, 1); } else { // Update opacity mesh.material.opacity = point.getOpacity() * 0.8; // Enhanced pulsating size effect const pulseScale = point.initialScale * (1 + Math.sin(point.age * 8) * 0.5); const fadeScale = pulseScale * (1 - (point.age / point.lifetime) * 0.5); mesh.scale.set(fadeScale, fadeScale, fadeScale); } } } } let neonTrails = []; const trailColors = [0xff00ff, 0x00ffff, 0xffff00]; let mixer; let character; let currentAnimation = 0; let animations = []; const animationFiles = [ 'https://play.rosebud.ai/assets/Hip Hop Dancing.fbx?fK7j', 'https://play.rosebud.ai/assets/Hip Hop Dancing (1).fbx?quRj', 'https://play.rosebud.ai/assets/Hip Hop Dancing (2).fbx?vQ9Y', 'https://play.rosebud.ai/assets/Hip Hop Dancing (3).fbx?anQ8', 'https://play.rosebud.ai/assets/Hip Hop Dancing (4).fbx?B6FA', 'https://play.rosebud.ai/assets/Belly Dance.fbx?IV0B', 'https://play.rosebud.ai/assets/Macarena Dance.fbx?Asy7', 'https://play.rosebud.ai/assets/Northern Soul Spin Combo.fbx?EngF', 'https://play.rosebud.ai/assets/Northern Soul Floor Combo.fbx?RVEs', 'https://play.rosebud.ai/assets/Samba Dancing.fbx?tfr4' ]; 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.background = 'linear-gradient(45deg, #000000, #1a1a1a)'; loadingScreen.style.color = '#ffffff'; loadingScreen.style.display = 'flex'; loadingScreen.style.flexDirection = 'column'; loadingScreen.style.justifyContent = 'center'; loadingScreen.style.alignItems = 'center'; loadingScreen.style.fontSize = '24px'; loadingScreen.style.zIndex = '9999'; // Create loading bar container const loadingBarContainer = document.createElement('div'); loadingBarContainer.style.width = '80%'; loadingBarContainer.style.maxWidth = '400px'; loadingBarContainer.style.height = '20px'; loadingBarContainer.style.background = 'rgba(255, 255, 255, 0.1)'; loadingBarContainer.style.borderRadius = '10px'; loadingBarContainer.style.margin = '20px 0'; loadingBarContainer.style.overflow = 'hidden'; // Create loading bar const loadingBar = document.createElement('div'); loadingBar.style.width = '0%'; loadingBar.style.height = '100%'; loadingBar.style.background = 'linear-gradient(90deg, #00ff00, #00ffaa)'; loadingBar.style.transition = 'width 0.3s ease-out'; loadingBarContainer.appendChild(loadingBar); // Create loading text const loadingText = document.createElement('div'); loadingText.innerHTML = 'Loading assets...'; loadingText.style.marginBottom = '10px'; // Create loading percentage const loadingPercentage = document.createElement('div'); loadingPercentage.style.fontSize = '18px'; loadingPercentage.style.marginTop = '10px'; loadingPercentage.innerHTML = '0%'; // Add elements to loading screen loadingScreen.appendChild(loadingText); loadingScreen.appendChild(loadingBarContainer); loadingScreen.appendChild(loadingPercentage); parentDiv.appendChild(loadingScreen); // Loading manager events // Enhanced loading manager with detailed progress tracking loadingManager.onStart = function(url, itemsLoaded, itemsTotal) { loadingText.innerHTML = 'Starting to load assets...'; }; loadingManager.onProgress = function(url, itemsLoaded, itemsTotal) { const progress = ((itemsLoaded / itemsTotal) * 100).toFixed(0); loadingBar.style.width = `${progress}%`; loadingPercentage.innerHTML = `${progress}%`; // Update loading text based on type of asset being loaded if (url.includes('.fbx')) { loadingText.innerHTML = 'Loading animations...'; } else if (url.includes('.png')) { loadingText.innerHTML = 'Loading textures...'; } }; loadingManager.onError = function(url) { loadingText.innerHTML = `Error loading asset: ${url.split('/').pop()}`; loadingText.style.color = '#ff0000'; }; loadingManager.onLoad = function() { loadingText.innerHTML = 'Initializing game...'; loadingBar.style.width = '100%'; loadingPercentage.innerHTML = '100%'; // Fade out loading screen and show title screen setTimeout(() => { loadingScreen.style.transition = 'opacity 1s ease-out'; loadingScreen.style.opacity = '0'; setTimeout(() => { loadingScreen.style.display = 'none'; assetsLoaded = true; titleScreen.style.display = 'flex'; titleScreen.style.opacity = '1'; }, 1000); }, 500); }; // Create HUD for rhythm game function createRhythmGameHUD() { const hudContainer = document.createElement('div'); hudContainer.id = 'rhythmGameHUD'; hudContainer.style.position = 'fixed'; hudContainer.style.top = '0'; hudContainer.style.left = '50%'; hudContainer.style.transform = 'translateX(-50%)'; hudContainer.style.width = '100vw'; hudContainer.style.height = '100vh'; hudContainer.style.display = 'flex'; hudContainer.style.justifyContent = 'center'; hudContainer.style.alignItems = 'flex-end'; hudContainer.style.gap = '20px'; hudContainer.style.pointerEvents = 'none'; hudContainer.style.zIndex = '1000'; // Add timing line const timingLine = document.createElement('div'); timingLine.className = 'timing-line'; timingLine.style.position = 'absolute'; timingLine.style.width = '30vw'; timingLine.style.height = '4px'; timingLine.style.backgroundColor = '#ff69b4'; timingLine.style.bottom = '20vh'; timingLine.style.left = '50%'; timingLine.style.transform = 'translateX(-50%)'; timingLine.style.boxShadow = '0 0 1vw #ff69b4, 0 0 2vw #ff69b4'; timingLine.style.zIndex = '1001'; hudContainer.appendChild(timingLine); // Create target markers for each direction const directions = ['left', 'right', 'up', 'down']; directions.forEach(direction => { const marker = document.createElement('div'); marker.className = 'arrow-marker'; marker.dataset.direction = direction; marker.style.position = 'absolute'; marker.style.width = '4vw'; marker.style.height = '4vw'; marker.style.background = `url(${getArrowTexture(direction)}) no-repeat center center`; marker.style.backgroundSize = 'contain'; marker.style.opacity = '0.5'; marker.style.bottom = '20vh'; const offset = { 'left': -6, 'up': -2, 'down': 2, 'right': 6 } [direction]; marker.style.left = `calc(50% + ${offset}vw)`; marker.style.transform = 'translateX(-50%)'; hudContainer.appendChild(marker); }); parentDiv.appendChild(hudContainer); return hudContainer; } // Initialize the scene and materials const scene = new THREE.Scene(); // Add CSS styles for rhythm game const styleSheet = document.createElement('style'); styleSheet.textContent = ` .troll-comment { position: fixed; left: 2vw; bottom: 2vh; color: #ff69b4; font-size: 2.5vh; font-weight: bold; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); opacity: 0; transform: translateY(20px); transition: all 0.3s ease-out; z-index: 1000; pointer-events: none; max-width: 300px; text-align: left; } .troll-comment.active { opacity: 1; transform: translateY(0); } .rhythm-note { position: absolute; pointer-events: none; filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3)); transition: filter 0.1s ease-out; } .arrow-marker { position: relative; filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3)); transition: all 0.2s ease-out; opacity: 0.7; } .arrow-marker.active { opacity: 1; filter: drop-shadow(0 0 10px #ff69b4); } .timing-line { animation: glow 1s ease-in-out infinite alternate; } .arrow-marker { margin-bottom: 20px; // Add some space below the markers } @keyframes glow { from { box-shadow: 0 0 10px #ff69b4, 0 0 20px #ff69b4; } to { box-shadow: 0 0 15px #ff69b4, 0 0 25px #ff69b4; } } `; document.head.appendChild(styleSheet); // Create the rhythm game HUD createRhythmGameHUD(); // Create materials for dance floor const danceFloorMaterials = [ new THREE.MeshPhongMaterial({ color: 0xff0000 }), // Red new THREE.MeshPhongMaterial({ color: 0x00ff00 }), // Green new THREE.MeshPhongMaterial({ color: 0x0000ff }), // Blue new THREE.MeshPhongMaterial({ color: 0xffff00 }), // Yellow new THREE.MeshPhongMaterial({ color: 0xff00ff }), // Purple new THREE.MeshPhongMaterial({ color: 0x00ffff }), // Cyan ]; let currentDanceFloorColor = 0; // Clock for animation const clock = new THREE.Clock(); // Initialize the camera const camera = new THREE.PerspectiveCamera( 75, canvas.offsetWidth / canvas.offsetHeight, 0.1, 1000 ); camera.position.set(0, 50, 100); camera.lookAt(0, 0, 0); // Create frustum for culling const frustum = new THREE.Frustum(); const cameraViewProjectionMatrix = new THREE.Matrix4(); // Function to update frustum function updateFrustum() { camera.updateMatrixWorld(); // Ensure camera matrix is up to date camera.matrixWorldInverse.copy(camera.matrixWorld).invert(); cameraViewProjectionMatrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse); frustum.setFromProjectionMatrix(cameraViewProjectionMatrix); } // Function to check if object should be rendered function isInView(object) { if (!object.geometry || !object.geometry.boundingSphere) { object.geometry?.computeBoundingSphere(); } if (object.geometry?.boundingSphere) { const center = object.geometry.boundingSphere.center.clone(); const radius = object.geometry.boundingSphere.radius; center.applyMatrix4(object.matrixWorld); return frustum.containsPoint(center) || frustum.intersectsSphere(new THREE.Sphere(center, radius)); } return true; } // Initialize the renderer with HDR const renderer = new THREE.WebGLRenderer({ antialias: true, canvas: canvas, powerPreference: 'high-performance', }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(canvas.offsetWidth, canvas.offsetHeight); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; renderer.outputEncoding = THREE.sRGBEncoding; renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.2; // Initialize post-processing const composer = new EffectComposer(renderer); // Regular scene render pass const renderPass = new RenderPass(scene, camera); composer.addPass(renderPass); // Add subtle bloom effect const bloomPass = new UnrealBloomPass( new THREE.Vector2(window.innerWidth, window.innerHeight), 0.2, // bloom strength 0.4, // radius 0.9 // threshold ); composer.addPass(bloomPass); // 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; varying vec2 vUv; void main() { vec4 worldPosition = modelMatrix * vec4(position, 1.0); vWorldPosition = worldPosition.xyz; vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }`; const fragmentShader = ` uniform float time; varying vec3 vWorldPosition; varying vec2 vUv; vec3 hsv2rgb(vec3 c) { vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0); vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www); return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y); } void main() { float h = normalize(vWorldPosition).y; // Create moving patterns float pattern1 = sin(vUv.x * 10.0 + time) * cos(vUv.y * 10.0 + time * 0.5); float pattern2 = sin(vUv.x * 20.0 - time * 0.7) * cos(vUv.y * 15.0 + time * 0.3); // Create shifting hues float hue = fract(time * 0.1 + pattern1 * 0.2); float sat = 0.7 + pattern2 * 0.3; float val = 0.8 + pattern1 * 0.2; // Mix colors based on height vec3 color1 = hsv2rgb(vec3(hue, sat, val)); vec3 color2 = hsv2rgb(vec3(fract(hue + 0.5), sat * 0.8, val * 0.8)); vec3 finalColor = mix(color2, color1, h * 0.5 + 0.5); gl_FragColor = vec4(finalColor, 1.0); }`; const uniforms = { time: { value: 0.0 } }; 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); // Remove OrbitControls // Create flat terrain function createTerrain() { const size = 200; const segments = 20; // Load textures first const texture = textureLoader.load('https://play.rosebud.ai/assets/3D_playground_grass_diffuse.png?Gefb'); const normalMap = textureLoader.load('https://play.rosebud.ai/assets/3D_playground_grass_normal.png?XGKY'); // Setup texture properties texture.wrapS = texture.wrapT = THREE.RepeatWrapping; texture.repeat.set(20, 20); texture.encoding = THREE.sRGBEncoding; normalMap.wrapS = normalMap.wrapT = THREE.RepeatWrapping; normalMap.repeat.set(20, 20); // Create geometry const geometry = new THREE.PlaneGeometry(size, size, segments, segments); // Create dance floor material const terrainMaterial = new THREE.MeshStandardMaterial({ map: texture, normalMap: normalMap, normalScale: new THREE.Vector2(2, 2), roughness: 0.8, metalness: 0.1, envMapIntensity: 1.0, color: 0xffffff, shininess: 100, specular: 0xffffff }); const terrain = new THREE.Mesh(geometry, terrainMaterial); terrain.rotation.x = -Math.PI / 2; terrain.receiveShadow = true; scene.add(terrain); // Create walls const wallHeight = 150; // Create trippy wall shader const wallShader = { uniforms: { time: { value: 0 }, colorA: { value: new THREE.Color(0xff0000) }, colorB: { value: new THREE.Color(0x0000ff) }, colorC: { value: new THREE.Color(0x00ff00) } }, vertexShader: ` varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `, fragmentShader: ` uniform float time; uniform vec3 colorA; uniform vec3 colorB; uniform vec3 colorC; varying vec2 vUv; void main() { float t = time * 0.5; vec3 color1 = mix(colorA, colorB, (sin(t) + 1.0) * 0.5); vec3 color2 = mix(colorB, colorC, (sin(t + 2.094) + 1.0) * 0.5); vec3 finalColor = mix(color1, color2, (sin(vUv.y * 10.0 + time * 2.0) + 1.0) * 0.5); gl_FragColor = vec4(finalColor, 0.8); } ` }; const wallMaterial = new THREE.ShaderMaterial({ uniforms: wallShader.uniforms, vertexShader: wallShader.vertexShader, fragmentShader: wallShader.fragmentShader, transparent: true }); // Back wall const backWall = new THREE.Mesh( new THREE.BoxGeometry(size, wallHeight, 2), wallMaterial ); backWall.position.set(0, wallHeight / 2, -size / 2); scene.add(backWall); // Side walls const leftWall = new THREE.Mesh( new THREE.BoxGeometry(2, wallHeight, size), wallMaterial ); leftWall.position.set(-size / 2, wallHeight / 2, 0); scene.add(leftWall); const rightWall = new THREE.Mesh( new THREE.BoxGeometry(2, wallHeight, size), wallMaterial ); rightWall.position.set(size / 2, wallHeight / 2, 0); scene.add(rightWall); // Create ceiling const ceilingMaterial = new THREE.MeshPhongMaterial({ color: 0x111111, shininess: 50, opacity: 0.8, transparent: true }); const ceiling = new THREE.Mesh( new THREE.PlaneGeometry(size, size), ceilingMaterial ); ceiling.position.set(0, 140, 0); // Position ceiling above disco ball (disco ball is at 120) ceiling.rotation.x = Math.PI / 2; // Rotate to be horizontal scene.add(ceiling); // Create disco ball // Create disco ball with facets const discoBallGeometry = new THREE.SphereGeometry(5, 16, 16); // Modify geometry to create facets const positionAttribute = discoBallGeometry.attributes.position; const vertices = positionAttribute.array; for (let i = 0; i < vertices.length; i += 3) { const randomness = 0.2; vertices[i] *= 1 + (Math.random() - 0.5) * randomness; vertices[i + 1] *= 1 + (Math.random() - 0.5) * randomness; vertices[i + 2] *= 1 + (Math.random() - 0.5) * randomness; } const discoBall = new THREE.Mesh( discoBallGeometry, new THREE.MeshPhongMaterial({ color: 0xffffff, shininess: 1000, specular: 0xffffff, metalness: 1.0, roughness: 0.2 }) ); discoBall.position.set(0, 120, 0); scene.add(discoBall); // Add disco ball reflection spots const reflectionSpots = []; const numReflections = 24; const reflectionColors = [0xff0000, 0x00ff00, 0x0000ff, 0xffff00, 0xff00ff, 0x00ffff]; for (let i = 0; i < numReflections; i++) { const spotLight = new THREE.SpotLight( reflectionColors[i % reflectionColors.length], 5, // Increased intensity 200, Math.PI / 16, 0.5, 1 ); spotLight.position.copy(discoBall.position); const targetObject = new THREE.Object3D(); scene.add(targetObject); spotLight.target = targetObject; scene.add(spotLight); reflectionSpots.push({ light: spotLight, target: targetObject, angleX: Math.random() * Math.PI * 2, angleY: Math.random() * Math.PI * 2, speed: 0.2 + Math.random() * 0.5, radius: 50 + Math.random() * 50 }); } window.reflectionSpots = reflectionSpots; // Add laser spots const laserSpots = []; const laserColors = [0xff0000, 0x00ff00, 0x0000ff, 0xff00ff]; for (let i = 0; i < 8; i++) { const spotLight = new THREE.SpotLight( laserColors[i % laserColors.length], 2, 100, Math.PI / 8, 0.5, 1 ); spotLight.position.set( Math.sin(i * Math.PI / 4) * size / 2, 130, // Moved closer to ceiling (which is at 140) Math.cos(i * Math.PI / 4) * size / 2 ); spotLight.target.position.set(0, 0, 0); scene.add(spotLight.target); scene.add(spotLight); laserSpots.push({ light: spotLight, angle: i * Math.PI / 4, radius: size / 2 }); } // Store laser spots in the global scope for animation window.laserSpots = laserSpots; window.discoBall = discoBall; // Add zigzag laser beams const laserBeams = []; const laserBeamColors = [0xff0000, 0x00ff00, 0x0000ff, 0xff00ff]; for (let i = 0; i < 12; i++) { const laserGeometry = new THREE.CylinderGeometry(0.1, 0.1, 1, 8); laserGeometry.rotateX(Math.PI / 2); const laserMaterial = new THREE.MeshStandardMaterial({ color: laserBeamColors[i % laserBeamColors.length], transparent: true, opacity: 0.7, emissive: laserBeamColors[i % laserBeamColors.length], emissiveIntensity: 2, toneMapped: false }); const laser = new THREE.Mesh(laserGeometry, laserMaterial); laser.position.set( Math.random() * size - size / 2, 50 + Math.random() * 40, Math.random() * size - size / 2 ); scene.add(laser); laserBeams.push({ mesh: laser, speed: 0.5 + Math.random() * 1.5, direction: new THREE.Vector3( Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5 ).normalize(), timeOffset: Math.random() * Math.PI * 2, originalY: laser.position.y }); } window.laserBeams = laserBeams; return terrain; } // Setup improved lighting system const sunLight = new THREE.DirectionalLight(skyColor, 2.0); sunLight.position.set(-50, 100, -50); sunLight.castShadow = true; sunLight.shadow.mapSize.width = 2048; sunLight.shadow.mapSize.height = 2048; 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; scene.add(sunLight); // Add hemisphere light to simulate sky and ground bounce light const hemiLight = new THREE.HemisphereLight(skyColor, groundColor, 0.6); scene.add(hemiLight); // Create initial scene let terrain = null; // Declare terrain variable first terrain = createTerrain(); // Then assign it // Load character model function loadCharacterModel() { fbxLoader.load('https://play.rosebud.ai/assets/Character_output.fbx?FuVj', (model) => { character = model; model.scale.set(0.5, 0.5, 0.5); model.position.set(0, 0, 0); model.traverse((child) => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; } }); scene.add(model); // Create neon trails trailColors.forEach(color => { neonTrails.push(new NeonTrail(scene, color)); }); // Create animation mixer mixer = new THREE.AnimationMixer(model); // Load all dance animations loadNextAnimation(0); }); } function loadNextAnimation(index) { if (index >= animationFiles.length) { // All animations loaded, start playing the first one playNextAnimation(); return; } // Clear previous animation data if exists if (animations[index]) { animations[index].stop(); animations[index].getMixer().uncacheClip(animations[index].getClip()); animations[index].getMixer().uncacheRoot(animations[index].getRoot()); } fbxLoader.load(animationFiles[index], (anim) => { const action = mixer.clipAction(anim.animations[0]); animations.push(action); loadNextAnimation(index + 1); }); } function playNextAnimation() { if (animations.length === 0) return; // Stop current animation with fade out if (animations[currentAnimation]) { animations[currentAnimation].fadeOut(0.5); } // Move to next animation currentAnimation = (currentAnimation + 1) % animations.length; // Start new animation with fade in animations[currentAnimation].reset(); animations[currentAnimation].fadeIn(0.5); animations[currentAnimation].play(); } // Change animation every 5 seconds setInterval(playNextAnimation, 5000); // Load the character loadCharacterModel(); // Clean up resources when switching scenes or closing function cleanup() { // Dispose of all trail resources neonTrails.forEach(trail => { trail.trailObjects.forEach(mesh => { mesh.geometry.dispose(); mesh.material.dispose(); trail.scene.remove(mesh); }); trail.geometries = []; trail.materials = []; trail.trailObjects = []; trail.points = []; }); // Clean up animations animations.forEach(action => { if (action) { action.stop(); action.getMixer().uncacheClip(action.getClip()); action.getMixer().uncacheRoot(action.getRoot()); } }); animations = []; // Dispose of character model resources if (character) { character.traverse(child => { if (child.isMesh) { child.geometry.dispose(); if (child.material) { if (Array.isArray(child.material)) { child.material.forEach(material => material.dispose()); } else { child.material.dispose(); } } } }); scene.remove(character); } } // Add event listener for cleanup window.addEventListener('unload', cleanup); // Create game over screen function showGameOverScreen() { // Play victory sound const victorySound = new THREE.Audio(audioListener); audioLoader.load('https://play.rosebud.ai/assets/you-win-made-with-Voicemod.mp3?Suhu', function(buffer) { victorySound.setBuffer(buffer); victorySound.setVolume(0.5); victorySound.play(); }); const gameOverScreen = document.createElement('div'); gameOverScreen.style.position = 'absolute'; gameOverScreen.style.top = '0'; gameOverScreen.style.left = '0'; gameOverScreen.style.width = '100%'; gameOverScreen.style.height = '100%'; gameOverScreen.style.background = 'linear-gradient(45deg, #000000, #1a1a1a)'; gameOverScreen.style.color = '#ffffff'; gameOverScreen.style.display = 'flex'; gameOverScreen.style.flexDirection = 'column'; gameOverScreen.style.justifyContent = 'center'; gameOverScreen.style.alignItems = 'center'; gameOverScreen.style.fontSize = '32px'; gameOverScreen.style.fontWeight = 'bold'; gameOverScreen.style.zIndex = '10000'; gameOverScreen.style.opacity = '0'; gameOverScreen.style.transition = 'opacity 1s ease-in'; gameOverScreen.innerHTML = `

YOU WIN!

Final Score: ${score}

Max Combo: ${maxCombo}x

Nice moves, champ!

Refresh the browser to do it again!

After refreshing, pick a new song to continue!

`; parentDiv.appendChild(gameOverScreen); // Fade in the game over screen setTimeout(() => { gameOverScreen.style.opacity = '1'; }, 100); } // Define troll comments array const trollComments = [ "My grandma dances better! 👵", "Nice moves... for a newbie! 😏", "Did you learn that from TikTok? 📱", "Is that supposed to be dancing? 🤔", "Even my cat has better rhythm! 😺", "Are you dancing or having a seizure? 😅", "That's... unique? 🤪", "10/10... on the awkward scale! 😂", "Save some anti-talent for the rest of us! 🌟", "Dancing like nobody's watching... please keep it that way! 🙈", "I've seen better moves in a retirement home! 🦿", "Your dance moves just gave my phone anxiety 📱😰", "Breaking news: Dancing declared officially broken 📰", "Plot twist: The floor is actually fighting back! 🤼", "Your rhythm is as smooth as dial-up internet 📞", "Did you get those moves from a glitching NPC? 🎮", "The music is crying... literally 🎵😢", "Even AI would dance better! 🤖", "You're making the disco ball dizzy! 💫", "Sorry, but interpretive chaos isn't a dance style 🌪️", "Loading... dance skills not found 404 ⚠️", "Those moves are so yesterday's yesterday 📅", "The dance floor is filing for emotional damage 💔", "You dance like a sim with corrupted animations 🎲", "Achievement unlocked: Maximum Awkwardness 🏆" ]; let currentTrollComment = null; let lastTrollTime = 0; function showTrollComment() { // Remove existing comment if present if (currentTrollComment) { currentTrollComment.remove(); } // Create new comment const comment = document.createElement('div'); comment.className = 'troll-comment'; comment.textContent = trollComments[Math.floor(Math.random() * trollComments.length)]; parentDiv.appendChild(comment); // Trigger animation setTimeout(() => { comment.classList.add('active'); }, 100); // Remove after display setTimeout(() => { comment.classList.remove('active'); setTimeout(() => { comment.remove(); }, 300); }, 3000); currentTrollComment = comment; lastTrollTime = clock.getElapsedTime(); } // FPS Monitoring and LOD Management function updatePerformance() { frameCount++; const now = performance.now(); if (now - lastFPSUpdate >= LODConfig.performance.measurementPeriod) { currentFPS = (frameCount * 1000) / (now - lastFPSUpdate); frameCount = 0; lastFPSUpdate = now; // Adjust quality based on FPS if (currentFPS < LODConfig.performance.minFPS) { adjustQualityLevel('down'); } else if (currentFPS > LODConfig.performance.targetFPS + 10) { adjustQualityLevel('up'); } } } function adjustQualityLevel(direction) { const levels = ['low', 'medium', 'high']; const currentIndex = levels.indexOf(currentQualityLevel); if (direction === 'down' && currentIndex > 0) { currentQualityLevel = levels[currentIndex - 1]; applyQualitySettings(); } else if (direction === 'up' && currentIndex < levels.length - 1) { currentQualityLevel = levels[currentIndex + 1]; applyQualitySettings(); } } function applyQualitySettings() { const settings = LODConfig.quality[currentQualityLevel]; // Update bloom pass if (bloomPass) { bloomPass.strength = settings.bloomStrength; } // Update shadow quality if (sunLight) { sunLight.shadow.mapSize.width = settings.shadowMapSize; sunLight.shadow.mapSize.height = settings.shadowMapSize; sunLight.shadow.map?.dispose(); sunLight.shadow.map = null; } // Update reflection spots and laser beams count if (window.reflectionSpots) { while (window.reflectionSpots.length > settings.maxLights) { const spot = window.reflectionSpots.pop(); scene.remove(spot.light); scene.remove(spot.target); } } // Update laser beams if (window.laserBeams) { while (window.laserBeams.length > settings.maxLights / 2) { const beam = window.laserBeams.pop(); scene.remove(beam.mesh); beam.mesh.geometry.dispose(); beam.mesh.material.dispose(); } } // Force shadow map update renderer.shadowMap.needsUpdate = true; } // Animation loop // Enhanced animation function with loading check function animate() { if (!assetsLoaded || !gameStarted) { // Only render loading screen or title screen when needed renderer.clear(); requestAnimationFrame(animate); return; } requestAnimationFrame(animate); // Update performance monitoring updatePerformance(); const delta = clock.getDelta(); const time = clock.getElapsedTime(); if (assetsLoaded && !gameOver) { // Update frustum for culling updateFrustum(); // Apply culling to scene objects scene.traverse(object => { if (object.isMesh && !object.isGround && !object.isSky) { object.visible = isInView(object); } }); // Show troll comments periodically if (time - lastTrollTime > 5 + Math.random() * 3) { // Random interval between 5-8 seconds showTrollComment(); } // Update rhythm game if (backgroundMusic.isPlaying) { // Spawn new notes const currentTime = backgroundMusic.context.currentTime; if (currentTime - lastSpawnTime >= spawnInterval) { spawnNote(); lastSpawnTime = currentTime; } // Update existing notes updateNotes(delta); } // Check if music has ended if (backgroundMusic.buffer && !backgroundMusic.isPlaying && gameStarted) { gameOver = true; showGameOverScreen(); return; } // Update wall and sky shader time uniforms if (sky && sky.material.uniforms) { sky.material.uniforms.time.value = time; } scene.traverse((child) => { if (child.material && child.material.uniforms) { // Check for time uniform if (child.material.uniforms.time) { child.material.uniforms.time.value = time; } // Check for color uniforms before updating if (child.material.uniforms.colorA && child.material.uniforms.colorB && child.material.uniforms.colorC) { child.material.uniforms.colorA.value.setHSL(Math.sin(time * 0.2) * 0.5 + 0.5, 0.8, 0.5); child.material.uniforms.colorB.value.setHSL(Math.sin(time * 0.3 + 2.0) * 0.5 + 0.5, 0.8, 0.5); child.material.uniforms.colorC.value.setHSL(Math.sin(time * 0.4 + 4.0) * 0.5 + 0.5, 0.8, 0.5); } } }); applyControls(); // Apply camera controls // Update animation mixer if (mixer) { mixer.update(delta); // Update neon trails if (character) { // Get character's position const position = new THREE.Vector3(); character.getWorldPosition(position); // Get current animation state const currentAction = animations[currentAnimation]; if (currentAction) { const time = clock.getElapsedTime(); // Add more trail points during faster movements neonTrails.forEach((trail, index) => { // Create multiple trail points per frame for more density for (let i = 0; i < 3; i++) { const offset = new THREE.Vector3( Math.sin(time * 3 + index * Math.PI * 2 / 3 + i) * 2, Math.cos(time * 2.5 + index * Math.PI * 2 / 3 + i) * 2, Math.sin(time * 4 + index * Math.PI * 2 / 3 + i) * 2 ); // Add randomized vertical offset for more dynamic trails offset.y += Math.sin(time * 5 + i) * 1.5; trail.addPoint(position.clone().add(offset)); } trail.update(delta); }); } } } // Animate laser spots if (window.laserSpots) { window.laserSpots.forEach((spot, index) => { // Move in circular pattern with consistent speed const rotationSpeed = 30; // degrees per second spot.angle += (rotationSpeed * Math.PI / 180) * delta; spot.light.position.x = Math.sin(spot.angle) * spot.radius; spot.light.position.z = Math.cos(spot.angle) * spot.radius; // Make the laser move up and down at a higher position spot.light.position.y = 130 + Math.sin(time * 2 + index) * 10; // Update target position for swaying effect spot.light.target.position.x = Math.sin(time + index) * 20; spot.light.target.position.z = Math.cos(time + index) * 20; }); } // Rotate disco ball and update reflection spots if (window.discoBall) { const discoBallSpeed = 30; // rotations per second window.discoBall.rotation.y += (discoBallSpeed * Math.PI / 180) * delta; window.discoBall.rotation.x = Math.sin(time * 15 * delta) * 0.2; // Update reflection spots if (window.reflectionSpots) { window.reflectionSpots.forEach((spot, index) => { // Calculate spot position spot.angleX += spot.speed * delta; spot.angleY += spot.speed * 0.7 * delta; // Create dynamic movement pattern const x = Math.sin(spot.angleX) * spot.radius; const z = Math.cos(spot.angleX) * spot.radius; const y = Math.sin(spot.angleY) * spot.radius * 0.5; // Update target position spot.target.position.set(x, y, z); // Smoothly change colors with delta timing const colorSpeed = 0.1; const hue = ((time * colorSpeed * delta * 60) + index * 0.1) % 1; spot.light.color.setHSL(hue, 1, 0.5); // Modulate intensity spot.light.intensity = 3 + Math.sin(time * 2 + index) * 2; }); } } // Animate zigzag laser beams if (window.laserBeams) { window.laserBeams.forEach((beam, index) => { // Update position with zigzag pattern beam.mesh.position.x += beam.direction.x * beam.speed; beam.mesh.position.z += beam.direction.z * beam.speed; // Vertical oscillation beam.mesh.position.y = beam.originalY + Math.sin(time * 2 + beam.timeOffset) * 10; // Change direction when hitting walls if (Math.abs(beam.mesh.position.x) > 95) { beam.direction.x *= -1; beam.mesh.position.x = Math.sign(beam.mesh.position.x) * 95; } if (Math.abs(beam.mesh.position.z) > 95) { beam.direction.z *= -1; beam.mesh.position.z = Math.sign(beam.mesh.position.z) * 95; } // Random direction changes if (Math.random() < 0.02) { beam.direction.x = (Math.random() - 0.5) * 2; beam.direction.z = (Math.random() - 0.5) * 2; beam.direction.normalize(); } // Update laser orientation beam.mesh.lookAt( beam.mesh.position.x + beam.direction.x, beam.mesh.position.y, beam.mesh.position.z + beam.direction.z ); // Modulate color and intensity with proper checks const hue = (time * 0.1 + index * 0.1) % 1; if (beam.mesh.material.color) { beam.mesh.material.color.setHSL(hue, 1, 0.5); } if (beam.mesh.material.emissive) { beam.mesh.material.emissive.setHSL(hue, 1, 0.5); } beam.mesh.material.opacity = 0.5 + Math.sin(time * 3 + index) * 0.3; }); } // Change dance floor colors if (Math.random() < 0.02) { // 2% chance each frame const terrainObject = scene.children.find(child => child instanceof THREE.Mesh && child.geometry instanceof THREE.PlaneGeometry); if (terrainObject) { currentDanceFloorColor = (currentDanceFloorColor + 1) % danceFloorMaterials.length; terrainObject.material = danceFloorMaterials[currentDanceFloorColor]; } } } 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 with delta-based transitions renderer.setSize(width, height); composer.setSize(width, height); // Reset delta-based transition states with safety check if (clock) { lastTransitionTime = clock.getElapsedTime(); } // Update post-processing passes bloomPass.resolution.set(width, height); 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 // ========================= // 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; }); } // Initialize empty listeners for mobile controls (functionality maintained without UI) const initializeControls = () => { ['up', 'down', 'left', 'right', 'jump'].forEach(key => { keysPressed[key] = false; }); }; initializeControls(); // ========================= // 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 // ========================= // Note class for rhythm game class Note { constructor(direction) { this.direction = direction; this.position = 0; this.active = true; this.isMultiNote = false; // Flag for multi-note visualization // Create HTML element for the note this.element = document.createElement('div'); this.element.className = 'rhythm-note'; this.element.style.position = 'absolute'; this.element.style.width = '4vw'; this.element.style.height = '4vw'; this.element.style.background = `url(${getArrowTexture(direction)}) no-repeat center center`; this.element.style.backgroundSize = 'contain'; this.element.style.transition = 'transform 0.1s ease-out'; this.element.style.position = 'absolute'; this.element.style.left = '50%'; // Position horizontally based on direction const offset = { 'left': -6, 'up': -2, 'down': 2, 'right': 6 } [direction]; this.element.style.left = `calc(50% + ${offset}vw)`; this.element.style.transform = 'translateX(-50%)'; this.element.style.top = '-10vh'; // Start above the screen document.getElementById('rhythmGameHUD').appendChild(this.element); } update(delta) { if (!this.active) return; // Use fixed time step of 1/60th of a second const fixedDelta = 1 / 60; this.position += noteSpeed * fixedDelta; // Calculate visual position const marker = document.querySelector(`.arrow-marker[data-direction="${this.direction}"]`); if (marker) { const rect = marker.getBoundingClientRect(); const timingLine = document.querySelector('.timing-line'); const timingLineRect = timingLine.getBoundingClientRect(); const startY = -1200; // Much higher starting point for more reaction time const targetY = timingLineRect.top; // Use timing line position as target const currentY = startY + (targetY - startY) * this.position; // Make arrows more visible as they approach the line const distanceToLine = Math.abs(this.position - 1.0); const opacity = distanceToLine < 0.2 ? 1 : 0.7; this.element.style.transform = `translateY(${currentY}px)`; this.element.style.opacity = opacity; // Highlight effect when crossing the timing line if (distanceToLine < 0.05) { this.element.style.filter = 'brightness(1.5) drop-shadow(0 0 10px #ff69b4)'; } else { this.element.style.filter = 'none'; } } // Remove note if it goes too high if (this.position > 1.2) { this.miss(); } } hit() { this.active = false; this.element.style.transition = 'all 0.2s ease-out'; this.element.style.transform += ' scale(1.5)'; this.element.style.opacity = '0'; setTimeout(() => this.element.remove(), 200); // Add special effects for multi-notes const multiNoteCount = notes.filter(n => Math.abs(n.position - this.position) < 0.1 && n.active ).length; if (multiNoteCount > 1) { this.element.style.filter = 'hue-rotate(90deg) brightness(1.5)'; } // Calculate score based on timing const timing = Math.abs(this.position - 1.0); let hitText, hitColor, points; if (timing <= hitWindow * 0.1) { // Much stricter timing for PERFECT hitText = 'PERFECT!'; hitColor = '#00ff00'; points = 100; } else if (timing <= hitWindow * 0.4) { hitText = 'GREAT!'; hitColor = '#00ffaa'; points = 75; } else if (timing <= hitWindow * 0.7) { hitText = 'GOOD!'; hitColor = '#ffff00'; points = 50; } else { hitText = 'OK!'; hitColor = '#ffa500'; points = 25; } // Apply combo multiplier score += points * (combo + 1); combo++; maxCombo = Math.max(maxCombo, combo); updateScoreDisplay(); // Show hit effect at note's position // Get the current position of the note element const rect = this.element.getBoundingClientRect(); const position = { x: rect.left + (rect.width / 2) + 'px', y: rect.top + (rect.height / 2) + 'px' }; showHitEffect(hitText, hitColor, position); } miss() { this.active = false; this.element.style.transition = 'all 0.2s ease-out'; this.element.style.opacity = '0'; setTimeout(() => this.element.remove(), 200); // Reset combo combo = 0; updateScoreDisplay(); // Show miss effect showHitEffect('MISS!', '#ff0000'); } } function getArrowTexture(direction) { let asset; switch (direction) { case 'left': asset = ASSETS.find(a => a.name === 'arrowleft'); break; case 'right': asset = ASSETS.find(a => a.name === 'arrowright'); break; case 'up': asset = ASSETS.find(a => a.name === 'arrowup'); break; case 'down': asset = ASSETS.find(a => a.name === 'arrowdown'); break; } if (!asset) { console.error(`Arrow texture not found for direction: ${direction}`); // Return a default texture or handle the error appropriately return ASSETS.find(a => a.name === 'arrowup').url; } return asset.url; } function spawnNote() { const directions = ['left', 'right', 'up', 'down']; let arrowCount = 1; // Determine number of arrows based on difficulty if (selectedDifficulty === 'legendary') { arrowCount = 3; } else if (selectedDifficulty === 'medium' || selectedDifficulty === 'easy') { arrowCount = Math.random() < 0.3 ? 2 : 1; // 30% chance of double arrows } // Create array of unique directions for multiple arrows let selectedDirections = []; while (selectedDirections.length < arrowCount) { const direction = directions[Math.floor(Math.random() * directions.length)]; if (!selectedDirections.includes(direction)) { selectedDirections.push(direction); } } // Spawn the arrows with slight vertical offset selectedDirections.forEach((direction, index) => { const note = new Note(direction); // Adjust initial position for synchronized arrival note.position -= index * 0.05; // Small offset for visual separation notes.push(note); }); } function updateNotes(delta) { notes = notes.filter(note => note.active); notes.forEach(note => note.update(delta)); } function updateScoreDisplay() { const scoreDisplay = document.getElementById('scoreDisplay'); if (scoreDisplay) { scoreDisplay.innerHTML = `Score: ${score}
Combo: ${combo}x`; } } function showHitEffect(text, color, position = { x: '50%', y: '50%' }) { const effect = document.createElement('div'); effect.style.position = 'absolute'; effect.style.left = position.x; effect.style.top = position.y; effect.style.transform = 'translate(-50%, -50%) scale(1)'; effect.style.color = color; effect.style.fontSize = '5vh'; effect.style.fontWeight = 'bold'; effect.style.textShadow = `0 0 10px ${color}, 0 0 20px ${color}, 0 0 30px ${color}`; effect.style.pointerEvents = 'none'; effect.style.zIndex = '1000'; effect.style.opacity = '1'; effect.innerHTML = text; parentDiv.appendChild(effect); // Animate and remove effect.style.transition = 'all 0.5s ease-out'; setTimeout(() => { effect.style.opacity = '0'; effect.style.transform = 'translate(-50%, -100%)'; setTimeout(() => effect.remove(), 500); }, 100); } function checkNoteHit(direction) { const targetPosition = 1.0; // Position where notes should be hit for (const note of notes) { if (!note.active || note.direction !== direction) continue; const timing = Math.abs(note.position - targetPosition); if (timing <= hitWindow) { note.hit(); return; } } } // Update keyboard event listeners to handle note hits window.addEventListener('keydown', (event) => { if (!backgroundMusic.isPlaying) return; switch (event.code) { case 'ArrowLeft': checkNoteHit('left'); break; case 'ArrowRight': checkNoteHit('right'); break; case 'ArrowUp': checkNoteHit('up'); break; case 'ArrowDown': checkNoteHit('down'); break; } }); // Function for dynamic camera movement function applyControls() { if (!character) return; const time = clock.getElapsedTime(); // Get character position const characterPosition = new THREE.Vector3(); character.getWorldPosition(characterPosition); // Dynamic camera settings const baseRotationSpeed = 0.12; // Slower rotation for more stable shots const maxRadius = 200; const minRadius = 100; // Increased minimum distance for better framing // Create dramatic camera movements const dramaticMoment = Math.sin(time * 0.1) > 0.95; const rotationSpeed = baseRotationSpeed * (dramaticMoment ? 1.5 : 1); // Limit camera movement to mostly front-facing angles const baseAngle = time * rotationSpeed; const limitedAngle = Math.sin(baseAngle) * 0.6 * Math.PI; // Limit to roughly ±108 degrees // Enhanced zoom with dramatic moments const zoomDuration = 12; // Faster initial zoom const zoomProgress = Math.min(time / zoomDuration, 1); const easedProgress = 1 - Math.pow(1 - zoomProgress, 2); // Smoother easing // Dynamic radius with dramatic variations and subtle variations const radiusVariation = dramaticMoment ? Math.sin(time * 0.8) * 30 + (zoomProgress === 1 ? Math.sin(time * 0.4) * 5 : 0) : // Dramatic swooping + subtle variation Math.sin(time * 0.3) * 15 + (zoomProgress === 1 ? Math.sin(time * 0.4) * 5 : 0); // Normal variation + subtle variation const currentRadius = maxRadius - (maxRadius - minRadius) * easedProgress + radiusVariation; const angle = time * rotationSpeed; // Enhanced camera angle variations const cameraAngleState = Math.floor(time * 0.2) % 4; // Cycle through different states // Camera height settings with more dynamic range const maxHeight = 150; const normalHeight = 90; // Higher normal view const lowViewHeight = 35; // Higher minimum height // Calculate dynamic height based on camera state let targetHeight; switch (cameraAngleState) { case 0: // High angle shot targetHeight = normalHeight + Math.sin(time * 0.4) * 15; break; case 1: // Dynamic swooping shot targetHeight = normalHeight + Math.sin(time * 0.8) * 40; break; case 2: // Low angle shot (brief) targetHeight = lowViewHeight + Math.abs(Math.sin(time * 1.2)) * 20; break; case 3: // Return to normal height targetHeight = normalHeight + Math.sin(time * 0.3) * 10; break; } // Enhanced camera positioning with dynamic movement const radius = currentRadius; // Use currentRadius directly since variations are already included // Enhanced camera positioning with dynamic movement const angleOffset = dramaticMoment ? Math.sin(time * 2) * 0.2 : 0; const finalAngle = limitedAngle + angleOffset; // Position camera with front bias camera.position.x = Math.sin(finalAngle) * currentRadius; camera.position.z = Math.cos(finalAngle) * currentRadius + currentRadius * 0.3; // Bias towards front camera.position.y = targetHeight; // Dynamic look-at point based on camera state const lookAtPoint = characterPosition.clone(); // Adjust look-at height based on camera state for better framing const lookAtHeight = cameraAngleState === 2 ? 35 : 30; // Higher default look-at point lookAtPoint.y += lookAtHeight + Math.sin(time * 0.6) * 3; // Slightly offset look-at point to maintain character's face in frame lookAtPoint.z -= 5; // Slight forward bias in look-at point // Add dynamic offset to look-at point for more interesting framing lookAtPoint.x += Math.sin(time * 0.5) * 3; lookAtPoint.z += Math.cos(time * 0.5) * 3; // Enhanced camera dynamics camera.lookAt(lookAtPoint); // Controlled camera roll (prevents excessive rotation) const maxTilt = 0.08; // Limit the maximum tilt const tiltAngle = Math.sin(time * 0.3) * maxTilt; camera.rotation.z = dramaticMoment ? tiltAngle * 1.5 : // More dramatic during special moments tiltAngle; // Normal tilt // Dynamic FOV adjustments const baseFOV = 75; const fovVariation = dramaticMoment ? Math.sin(time * 1.5) * 15 : // Dramatic FOV changes Math.sin(time * 0.4) * 5; // Subtle FOV changes camera.fov = baseFOV + fovVariation; camera.updateProjectionMatrix(); }