import * as THREE from 'three'; import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; import { FBXLoader } from 'three/addons/loaders/FBXLoader.js'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'; import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'; import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js'; import { SMAAPass } from 'three/addons/postprocessing/SMAAPass.js'; // Get parent div first const parentDiv = document.getElementById('renderDiv'); let canvas = document.getElementById('threeRenderCanvas'); if (!canvas) { canvas = document.createElement('canvas'); canvas.id = 'threeRenderCanvas'; parentDiv.appendChild(canvas); } // Initialize loading manager const loadingManager = new THREE.LoadingManager(); const textureLoader = new THREE.TextureLoader(loadingManager); let assetsLoaded = false; let gameStarted = false; // Audio setup for key collection sound and jumpscare const audioContext = new(window.AudioContext || window.webkitAudioContext)(); let screamBuffer = null; // Initialize scream buffer let keys = []; // Array to store key objects let isInPortal = false; // Flag to track if player has entered portal let slenderman = null; let slendermanMixer = null; let portal = null; let isGameOver = false; let portalModel = null; let isPortalSpawned = false; // Portal notification display const portalNotification = document.createElement('div'); portalNotification.style.position = 'fixed'; portalNotification.style.top = '60px'; // Below the key counter portalNotification.style.right = '20px'; portalNotification.style.padding = '10px 20px'; portalNotification.style.backgroundColor = 'rgba(0, 0, 0, 0.7)'; portalNotification.style.color = '#00ff00'; portalNotification.style.border = '2px solid #00ff00'; portalNotification.style.borderRadius = '10px'; portalNotification.style.fontSize = '24px'; portalNotification.style.fontFamily = 'Arial, sans-serif'; portalNotification.style.zIndex = '1000'; portalNotification.style.display = 'none'; portalNotification.textContent = 'ESCAPE PORTAL SPAWNED!'; document.body.appendChild(portalNotification); // Create key counter display const keyCounterDisplay = document.createElement('div'); keyCounterDisplay.style.position = 'fixed'; keyCounterDisplay.style.top = '20px'; keyCounterDisplay.style.right = '20px'; keyCounterDisplay.style.padding = '10px 20px'; keyCounterDisplay.style.backgroundColor = 'rgba(0, 0, 0, 0.7)'; keyCounterDisplay.style.color = '#ff0000'; keyCounterDisplay.style.border = '2px solid #ff0000'; keyCounterDisplay.style.borderRadius = '10px'; keyCounterDisplay.style.fontSize = '24px'; keyCounterDisplay.style.fontFamily = 'Arial, sans-serif'; keyCounterDisplay.style.zIndex = '1000'; keyCounterDisplay.textContent = 'Keys: 0/3'; document.body.appendChild(keyCounterDisplay); let keysCollected = 0; // Track number of keys collected // Create key object with glowing effect // Load GLB model once and reuse const gltfLoader = new GLTFLoader(loadingManager); let keyModel = null; // Function to load scream sound effect async function loadScreamSound() { try { const response = await fetch('https://play.rosebud.ai/assets/Jumpscare Sound Effect.mp3?uEQ0'); const arrayBuffer = await response.arrayBuffer(); screamBuffer = await audioContext.decodeAudioData(arrayBuffer); } catch (error) { console.error('Error loading scream sound:', error); } } // Load scream sound loadScreamSound(); // Function to load key model async function loadKeyModel() { try { const gltf = await gltfLoader.loadAsync('https://play.rosebud.ai/assets/Make a gold key.glb?dJaS'); keyModel = gltf.scene; // Add glow material to the key keyModel.traverse((child) => { if (child.isMesh) { child.material.emissive = new THREE.Color(0xffdd00); child.material.emissiveIntensity = 0.5; } }); } catch (error) { console.error('Error loading key model:', error); } } // Function to load portal model async function loadPortalModel() { try { const gltf = await gltfLoader.loadAsync('https://play.rosebud.ai/assets/Make a virtical green teleportation oval withs lots of textures.glb?N0AZ'); portalModel = gltf.scene; // Add glow material to the portal portalModel.traverse((child) => { if (child.isMesh) { child.material.emissive = new THREE.Color(0x00ff00); child.material.emissiveIntensity = 1.0; } }); } catch (error) { console.error('Error loading portal model:', error); } } // Function to spawn portal function spawnPortal() { if (!portalModel || isPortalSpawned) return; portal = portalModel.clone(); portal.scale.set(3, 3, 3); // Find a valid position for the portal let position; do { position = generateRandomKeyPosition(); } while (!isValidKeyPosition(position)); portal.position.copy(position); portal.position.y = 14; // Adjust portal height for new floor level portal.rotation.y = Math.random() * Math.PI * 2; // Random rotation scene.add(portal); isPortalSpawned = true; portalNotification.style.display = 'block'; } // Load both models immediately loadKeyModel(); loadPortalModel(); // Function to load and setup Slenderman async function loadSlendermanModel() { try { const fbxLoader = new FBXLoader(loadingManager); slenderman = await fbxLoader.loadAsync('https://play.rosebud.ai/assets/make_a_slenderman_mod_0115025917_texture.fbx?ykw3'); // Setup animations slendermanMixer = new THREE.AnimationMixer(slenderman); if (slenderman.animations.length > 0) { const walkAnimation = slendermanMixer.clipAction(slenderman.animations[0]); walkAnimation.play(); } // Scale and position Slenderman slenderman.scale.set(0.08, 0.095, 0.08); // Reduced scale by approximately 5 feet (about 20% smaller) // Apply better materials slenderman.traverse((child) => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; const material = new THREE.MeshStandardMaterial({ color: 0x000000, roughness: 0.2, metalness: 0.1, emissive: 0x000000, emissiveIntensity: 0.1 }); child.material = material; } }); // Find valid spawn position far from player let position; do { position = generateRandomKeyPosition(); } while (position.distanceTo(new THREE.Vector3(0, 0, 0)) < 100); slenderman.position.copy(position); slenderman.position.y = 5; // Lower initial position to 5 units scene.add(slenderman); } catch (error) { console.error('Error loading Slenderman model:', error); } } // Keep the next function // Function to show jump scare and game over screen function showJumpScare() { if (isGameOver) return; isGameOver = true; // No sound effects on game over // Create static overlay const staticOverlay = document.createElement('div'); staticOverlay.style.position = 'fixed'; staticOverlay.style.top = '0'; staticOverlay.style.left = '0'; staticOverlay.style.width = '100%'; staticOverlay.style.height = '100%'; staticOverlay.style.backgroundImage = `url('https://play.rosebud.ai/assets/pngtree-static-tv-noise-2d-90s-png-image_8368282.png?qa4Z')`; staticOverlay.style.backgroundSize = 'cover'; staticOverlay.style.zIndex = '3001'; staticOverlay.style.display = 'none'; document.body.appendChild(staticOverlay); // Function to flash static let flashCount = 0; function flashStatic() { if (flashCount < 5) { staticOverlay.style.display = 'block'; setTimeout(() => { staticOverlay.style.display = 'none'; flashCount++; setTimeout(flashStatic, 200); // Wait 200ms between flashes }, 200); // Show for 200ms } else { document.body.removeChild(staticOverlay); } } // Start static flashing effect flashStatic(); // Release pointer lock to disable controls if (document.pointerLockElement) { document.exitPointerLock(); } // Create full-screen container const gameOverScreen = document.createElement('div'); gameOverScreen.style.position = 'fixed'; gameOverScreen.style.top = '0'; gameOverScreen.style.left = '0'; gameOverScreen.style.width = '100%'; gameOverScreen.style.height = '100%'; gameOverScreen.style.backgroundColor = 'black'; gameOverScreen.style.display = 'flex'; gameOverScreen.style.flexDirection = 'column'; gameOverScreen.style.justifyContent = 'center'; gameOverScreen.style.alignItems = 'center'; gameOverScreen.style.zIndex = '3000'; // Add the new image const gameOverImage = document.createElement('img'); gameOverImage.src = 'https://play.rosebud.ai/assets/dbeec1b0-65f3-4932-b22c-77d1690f2f9b.webp?aXUi'; gameOverImage.style.width = '100%'; gameOverImage.style.height = '100%'; gameOverImage.style.objectFit = 'cover'; gameOverImage.style.position = 'absolute'; gameOverImage.style.top = '50%'; gameOverImage.style.left = '50%'; gameOverImage.style.transform = 'translate(-50%, -50%)'; gameOverImage.style.animation = 'shake 0.1s infinite'; gameOverScreen.appendChild(gameOverImage); // Add "You Died" text const deathText = document.createElement('div'); deathText.textContent = 'YOU DIED'; deathText.style.position = 'absolute'; deathText.style.top = '50%'; deathText.style.left = '50%'; deathText.style.transform = 'translate(-50%, -50%)'; deathText.style.color = '#ff0000'; deathText.style.fontSize = '72px'; deathText.style.fontFamily = 'Arial, sans-serif'; deathText.style.textShadow = '2px 2px 4px #000000'; gameOverScreen.appendChild(deathText); document.body.appendChild(gameOverScreen); // After 5 seconds, return to start menu setTimeout(() => { // Remove the game over screen document.body.removeChild(gameOverScreen); // Add CSS shake animation keyframes const shakeAnimation = document.createElement('style'); shakeAnimation.textContent = ` @keyframes shake { 0% { transform: translate(-50%, -50%) translate(1px, 0.5px) rotate(0deg); } 20% { transform: translate(-50%, -50%) translate(-0.5px, -1px) rotate(-0.5deg); } 40% { transform: translate(-50%, -50%) translate(-1.5px, 0px) rotate(0.5deg); } 60% { transform: translate(-50%, -50%) translate(1.5px, 0.5px) rotate(0deg); } 80% { transform: translate(-50%, -50%) translate(-0.5px, -0.5px) rotate(0.5deg); } 100% { transform: translate(-50%, -50%) translate(0.5px, -1px) rotate(-0.5deg); } }`; document.head.appendChild(shakeAnimation); // Reset the game state resetGame(); // Reset player position and rotation player.position.set(0, playerHeight, 0); player.rotation.set(0, 0, 0, 'YXZ'); // Reset game flags isGameOver = false; gameStarted = false; // Show launch screen launchScreen.style.display = 'flex'; }, 5000); // Return to start menu after 5 seconds } function createKey(position) { if (!keyModel) { console.error('Key model not loaded yet'); return null; } const key = keyModel.clone(); key.position.copy(position); key.scale.set(0.8, 0.8, 0.8); // Reduced scale from 2 to 0.8 key.position.y = 6; // Adjust key height for new floor level // Add animation properties key.userData.initialY = key.position.y; key.userData.rotationSpeed = 0.02; key.userData.collected = false; scene.add(key); return key; } // Check if position is valid (not inside walls) function isValidKeyPosition(position) { const keyRadius = 1; const testBox = new THREE.Box3(); testBox.min.set( position.x - keyRadius, position.y - keyRadius, position.z - keyRadius ); testBox.max.set( position.x + keyRadius, position.y + keyRadius, position.z + keyRadius ); // Check collision with maze walls for (const wall of mazeWalls) { const wallBox = new THREE.Box3().setFromObject(wall); if (testBox.intersectsBox(wallBox)) { return false; } } // Check if too close to spawn point if (Math.abs(position.x) < 15 && Math.abs(position.z) < 15) { return false; } return true; } // Generate random position for keys function generateRandomKeyPosition() { const terrainSize = 180; // Slightly smaller than actual terrain let position = new THREE.Vector3(); let attempts = 0; const maxAttempts = 100; do { position.set( (Math.random() - 0.5) * terrainSize, 1.5, (Math.random() - 0.5) * terrainSize ); attempts++; } while (!isValidKeyPosition(position) && attempts < maxAttempts); return position; } // Function to spawn keys function spawnKeys() { // Clear existing keys keys.forEach(key => scene.remove(key)); keys = []; keysCollected = 0; // Spawn three keys for (let i = 0; i < 3; i++) { const position = generateRandomKeyPosition(); const key = createKey(position); keys.push(key); } } // Function to check key collection function checkKeyCollection() { const playerPosition = new THREE.Vector3( player.position.x, player.position.y, player.position.z ); keys.forEach(key => { if (!key.userData.collected) { const distance = playerPosition.distanceTo(key.position); if (distance < 2) { // Collection radius // Play key collection sound const keySound = audioContext.createOscillator(); const keyGain = audioContext.createGain(); keySound.type = 'sine'; keySound.frequency.setValueAtTime(880, audioContext.currentTime); // A5 note keyGain.gain.setValueAtTime(0.2, audioContext.currentTime); keyGain.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.5); keySound.connect(keyGain); keyGain.connect(audioContext.destination); keySound.start(); keySound.stop(audioContext.currentTime + 0.5); key.userData.collected = true; key.visible = false; keysCollected++; keyCounterDisplay.textContent = `Keys: ${keysCollected}/3`; // Spawn portal when all keys are collected if (keysCollected === 3) { spawnPortal(); } } } }); } // Function to show win screen function showWinScreen() { const winScreen = document.createElement('div'); winScreen.style.position = 'absolute'; winScreen.style.top = '0'; winScreen.style.left = '0'; winScreen.style.width = '100%'; winScreen.style.height = '100%'; winScreen.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; winScreen.style.display = 'flex'; winScreen.style.flexDirection = 'column'; winScreen.style.justifyContent = 'center'; winScreen.style.alignItems = 'center'; winScreen.style.zIndex = '1000'; const title = document.createElement('h1'); title.textContent = 'YOU ESCAPED!'; title.style.color = '#ff0000'; title.style.fontSize = '64px'; title.style.marginBottom = '30px'; const playAgainButton = document.createElement('button'); playAgainButton.textContent = 'PLAY AGAIN'; playAgainButton.style.padding = '15px 30px'; playAgainButton.style.fontSize = '24px'; playAgainButton.style.backgroundColor = '#660000'; playAgainButton.style.color = '#ffffff'; playAgainButton.style.border = '2px solid #ff0000'; playAgainButton.style.cursor = 'pointer'; playAgainButton.onclick = () => { document.body.removeChild(winScreen); generateMazeWalls(); spawnKeys(); player.position.set(0, playerHeight, 0); player.rotation.set(0, 0, 0, 'YXZ'); }; winScreen.appendChild(title); winScreen.appendChild(playAgainButton); document.body.appendChild(winScreen); } // Function to show final win screen with delayed text function showFinalWinScreen() { const finalScreen = document.createElement('div'); finalScreen.style.position = 'fixed'; finalScreen.style.top = '0'; finalScreen.style.left = '0'; finalScreen.style.width = '100%'; finalScreen.style.height = '100%'; finalScreen.style.backgroundColor = 'black'; finalScreen.style.color = '#00ff00'; finalScreen.style.display = 'flex'; finalScreen.style.justifyContent = 'center'; finalScreen.style.alignItems = 'center'; finalScreen.style.fontSize = '48px'; finalScreen.style.fontFamily = 'Arial, sans-serif'; finalScreen.style.zIndex = '2000'; const messageContainer = document.createElement('div'); messageContainer.textContent = 'You won...'; finalScreen.appendChild(messageContainer); document.body.appendChild(finalScreen); // Add "this time" after 3 seconds setTimeout(() => { messageContainer.textContent += ' this time.'; // Reset game after 2 more seconds setTimeout(() => { document.body.removeChild(finalScreen); resetGame(); }, 2000); }, 3000); } // Function to reset the game function resetGame() { // Reset all game state keysCollected = 0; isPortalSpawned = false; isInPortal = false; // Reset portal entry state // Reset Slenderman position if (slenderman) { let position; do { position = generateRandomKeyPosition(); } while (position.distanceTo(new THREE.Vector3(0, 0, 0)) < 100); slenderman.position.copy(position); slenderman.position.y = 10; // Keep consistent height when resetting } keyCounterDisplay.textContent = 'Keys: 0/3'; portalNotification.style.display = 'none'; // Remove portal if it exists if (portal) { scene.remove(portal); portal = null; } // Reset player position player.position.set(0, playerHeight, 0); player.rotation.set(0, 0, 0, 'YXZ'); // Show start screen launchScreen.style.display = 'flex'; gameStarted = false; } // Remove unused audio setup function // Create launch screen const launchScreen = document.createElement('div'); launchScreen.style.position = 'absolute'; launchScreen.style.top = '0'; launchScreen.style.left = '0'; launchScreen.style.width = '100%'; launchScreen.style.height = '100%'; launchScreen.style.backgroundImage = `url('https://play.rosebud.ai/assets/MAKE A SCARY SLENDERMAN BACKGROUND.png?3ztX')`; launchScreen.style.backgroundSize = 'cover'; launchScreen.style.backgroundPosition = 'center center'; launchScreen.style.backgroundColor = 'rgba(0, 0, 0, 0.85)'; // Even darker overlay launchScreen.style.backdropFilter = 'brightness(0.6) contrast(1.1)'; // Enhanced darkness and contrast launchScreen.style.display = 'flex'; launchScreen.style.flexDirection = 'column'; launchScreen.style.justifyContent = 'center'; launchScreen.style.alignItems = 'center'; launchScreen.style.zIndex = '1001'; // Add title const gameTitle = document.createElement('h1'); gameTitle.textContent = 'SLENDER KEYS'; gameTitle.style.color = '#ff0000'; gameTitle.style.fontSize = '64px'; gameTitle.style.marginBottom = '30px'; gameTitle.style.fontFamily = 'Arial, sans-serif'; gameTitle.style.textShadow = '2px 2px 8px rgba(0, 0, 0, 0.8)'; launchScreen.appendChild(gameTitle); // Add mission text const missionText = document.createElement('p'); missionText.textContent = 'FIND THREE KEYS... IF YOU DARE'; missionText.style.color = '#ffffff'; missionText.style.fontSize = '28px'; missionText.style.marginBottom = '40px'; missionText.style.fontFamily = 'Arial, sans-serif'; missionText.style.textShadow = '2px 2px 8px rgba(255, 0, 0, 0.6)'; launchScreen.appendChild(missionText); // Add start button const startButton = document.createElement('button'); startButton.textContent = 'START GAME'; startButton.style.padding = '15px 30px'; startButton.style.fontSize = '24px'; startButton.style.backgroundColor = '#660000'; startButton.style.color = '#ffffff'; startButton.style.border = '2px solid #ff0000'; startButton.style.borderRadius = '8px'; startButton.style.cursor = 'pointer'; startButton.style.transition = 'background-color 0.3s'; startButton.onmouseover = () => { startButton.style.backgroundColor = '#45a049'; }; startButton.onmouseout = () => { startButton.style.backgroundColor = '#4CAF50'; }; startButton.onclick = async () => { try { // Resume audio context if needed if (audioContext.state === 'suspended') { await audioContext.resume(); } // Load Slenderman if not already loaded if (!slenderman) { await loadSlendermanModel(); } // Show loading screen loadingScreen.innerHTML = 'Generating Maze...'; loadingScreen.style.display = 'flex'; // Resume audio context if it's suspended if (audioContext.state === 'suspended') { await audioContext.resume(); } // Add artificial delay for dramatic effect await new Promise(resolve => setTimeout(resolve, 2000)); // Generate new maze generateMazeWalls(); // Spawn new keys spawnKeys(); // Reset player position player.position.set(0, playerHeight, 0); player.rotation.set(0, 0, 0, 'YXZ'); // No background music needed // Remove duplicate background music initialization // Hide loading and launch screens loadingScreen.style.display = 'none'; launchScreen.style.display = 'none'; gameStarted = true; canvas.requestPointerLock(); } catch (error) { console.error('Error starting game:', error); } }; launchScreen.appendChild(startButton); parentDiv.appendChild(launchScreen); // 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); // 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'; }; // Initialize the scene // Initialize constants const playerHeight = 7; // Adjust player height to account for raised floor // Initialize the scene const scene = new THREE.Scene(); // Create player light with a larger range for vertical illumination const playerLight = new THREE.PointLight(0xffffff, 2.0, 40); // Increased intensity and range playerLight.position.set(0, playerHeight + 5, 0); // Position higher above player playerLight.castShadow = true; playerLight.decay = 1.5; // Slower light falloff playerLight.shadow.mapSize.width = 512; playerLight.shadow.mapSize.height = 512; scene.add(playerLight); // Clock for animation const clock = new THREE.Clock(); // Player movement settings const moveSpeed = 0.15; // Reduce movement speed for better control const jumpForce = 0.5; // Initial jump velocity const gravity = -0.02; // Gravity force const jumpCooldown = 2000; // Jump cooldown in milliseconds const player = { position: new THREE.Vector3(0, playerHeight, 0), rotation: new THREE.Euler(0, 0, 0, 'YXZ'), velocity: new THREE.Vector3(), isJumping: false, verticalVelocity: 0, lastJumpTime: 0 // Track the time of the last jump }; // 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); // 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.4, // bloom strength increased 0.6, // radius increased 0.4 // threshold decreased for more bloom effect ); 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; 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); // Modify OrbitControls setup // Remove OrbitControls as we'll implement our own camera control let isPointerLocked = false; // Setup pointer lock canvas.addEventListener('click', () => { if (gameStarted) { canvas.requestPointerLock(); } }); document.addEventListener('pointerlockchange', () => { isPointerLocked = document.pointerLockElement === canvas; }); // Mouse movement handler const mouseSensitivity = 0.002; document.addEventListener('mousemove', (event) => { if (isPointerLocked) { player.rotation.y -= event.movementX * mouseSensitivity; player.rotation.x -= event.movementY * mouseSensitivity; // Clamp vertical rotation to prevent over-rotation player.rotation.x = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, player.rotation.x)); player.rotation.z = 0; // Keep z-axis locked // Update camera rotation camera.quaternion.setFromEuler(player.rotation); } }); // Create flat terrain function createTerrain() { const size = 200; // Create simple flat plane for visuals const geometry = new THREE.PlaneGeometry(size, size); const texture = textureLoader.load('https://play.rosebud.ai/assets/3D_playground_grass_diffuse.png?2WJ9'); const normalMap = textureLoader.load('https://play.rosebud.ai/assets/3D_playground_grass_normal.png?bml6'); 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); const material = new THREE.MeshStandardMaterial({ color: 0x000000, // Pure black roughness: 1.0, metalness: 0.0, envMapIntensity: 0.2 }); const terrain = new THREE.Mesh(geometry, material); terrain.rotation.x = -Math.PI / 2; terrain.position.y = 4; // Raise floor by 4 feet terrain.receiveShadow = true; scene.add(terrain); // Create black ceiling const ceilingGeometry = new THREE.PlaneGeometry(size, size); const ceilingMaterial = new THREE.MeshStandardMaterial({ color: 0x000000, // Pure black side: THREE.DoubleSide, roughness: 1.0, metalness: 0.0, }); const ceiling = new THREE.Mesh(ceilingGeometry, ceilingMaterial); ceiling.rotation.x = Math.PI / 2; // Rotate to be horizontal ceiling.position.y = 39; // Adjust ceiling height to match new floor height ceiling.receiveShadow = true; scene.add(ceiling); return terrain; } // Setup improved lighting system const sunLight = new THREE.DirectionalLight(0x1a1a1a, 0.3); // Much dimmer, darker light sunLight.position.set(-50, 150, -50); // Higher position for more shadows 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 // Add ceiling light const ceilingLight = new THREE.PointLight(0xffffff, 0.3, 200); // Soft white light ceilingLight.position.set(0, 28, 0); // Position just below ceiling ceilingLight.castShadow = true; scene.add(ceilingLight); const hemiLight = new THREE.HemisphereLight(0x000000, 0x000000, 0.15); // Reduced ambient light scene.add(hemiLight); // Create initial scene const terrain = createTerrain(); let mazeWalls = []; // Store maze walls // Maze generation configuration const mazeConfig = { gridSize: 15, // Increased grid size for more walls wallHeight: 55, // Increased by 25 more feet wallThickness: 2, spacing: 12, // Reduced spacing between walls wallChance: 0.5 // 50% chance of wall placement (increased from 30%) }; // Function to generate random maze walls function generateMazeWalls() { // Remove existing maze walls mazeWalls.forEach(wall => scene.remove(wall)); mazeWalls = []; const wallTexture = textureLoader.load('https://play.rosebud.ai/assets/make a tall wall.png?IDAA'); wallTexture.wrapS = wallTexture.wrapT = THREE.RepeatWrapping; wallTexture.repeat.set(4, 1); // Create two materials - one with texture and one white // Create single white material for all walls const wallMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff, // Pure white roughness: 0.9, metalness: 0.1, envMapIntensity: 0.3 }); const terrainSize = 200; const startOffset = -terrainSize / 2 + 20; // Start offset from edge // Create walls with random placement for (let i = 0; i < mazeConfig.gridSize; i++) { for (let j = 0; j < mazeConfig.gridSize; j++) { if (Math.random() < mazeConfig.wallChance) { // 50% chance of wall placement // Skip wall placement near player spawn const x = startOffset + i * mazeConfig.spacing; const z = startOffset + j * mazeConfig.spacing; // Don't place walls too close to spawn point if (Math.abs(x) < 10 && Math.abs(z) < 10) continue; // Randomly choose wall orientation const isHorizontal = Math.random() < 0.5; const wallGeometry = isHorizontal ? new THREE.BoxGeometry(mazeConfig.spacing, mazeConfig.wallHeight, mazeConfig.wallThickness) : new THREE.BoxGeometry(mazeConfig.wallThickness, mazeConfig.wallHeight, mazeConfig.spacing); // Use the same white material for all walls const wall = new THREE.Mesh(wallGeometry, wallMaterial); wall.position.set( x, (mazeConfig.wallHeight / 2) + 4, // Position relative to floor height (4) z ); wall.castShadow = true; wall.receiveShadow = true; scene.add(wall); mazeWalls.push(wall); } } } } // Create perimeter walls function createPerimeterWalls() { const terrainSize = 200; // Match terrain size const wallHeight = 50; // Increased by another 10 feet const wallThickness = 2; const wallTexture = textureLoader.load('https://play.rosebud.ai/assets/make a tall wall.png?IDAA'); wallTexture.wrapS = wallTexture.wrapT = THREE.RepeatWrapping; wallTexture.repeat.set(4, 1); // Use the same white material for perimeter walls const wallMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff, roughness: 0.9, metalness: 0.1, envMapIntensity: 0.3 }); // Create walls array to store references const walls = []; // Create the four walls const wallGeometryLong = new THREE.BoxGeometry(terrainSize + wallThickness, wallHeight, wallThickness); const wallGeometryWide = new THREE.BoxGeometry(wallThickness, wallHeight, terrainSize + wallThickness); // North wall const northWall = new THREE.Mesh(wallGeometryLong, wallMaterial); northWall.position.set(0, wallHeight / 2 + 4, -terrainSize / 2); northWall.castShadow = true; northWall.receiveShadow = true; scene.add(northWall); walls.push(northWall); // South wall const southWall = new THREE.Mesh(wallGeometryLong, wallMaterial); southWall.position.set(0, wallHeight / 2 + 4, terrainSize / 2); southWall.castShadow = true; southWall.receiveShadow = true; scene.add(southWall); walls.push(southWall); // East wall const eastWall = new THREE.Mesh(wallGeometryWide, wallMaterial); eastWall.position.set(terrainSize / 2, wallHeight / 2 + 4, 0); eastWall.castShadow = true; eastWall.receiveShadow = true; scene.add(eastWall); walls.push(eastWall); // West wall const westWall = new THREE.Mesh(wallGeometryWide, wallMaterial); westWall.position.set(-terrainSize / 2, wallHeight / 2 + 4, 0); westWall.castShadow = true; westWall.receiveShadow = true; scene.add(westWall); walls.push(westWall); return walls; } // Add perimeter walls to scene const perimeterWalls = createPerimeterWalls(); // Animation loop function animate() { requestAnimationFrame(animate); const deltaTime = clock.getDelta(); if (assetsLoaded && gameStarted && !isGameOver) { // Update Slenderman animation if (slendermanMixer) { slendermanMixer.update(deltaTime); } // Move Slenderman towards player with wall avoidance if (slenderman && !isInPortal) { // Only move if player hasn't entered portal const slendermanSpeed = moveSpeed * 0.495; // Reduced to 75% of previous speed (0.66 * 0.75 = 0.495) const directionToPlayer = new THREE.Vector3( player.position.x - slenderman.position.x, 0, player.position.z - slenderman.position.z ).normalize(); // Calculate next position const nextPosition = new THREE.Vector3( slenderman.position.x + directionToPlayer.x * slendermanSpeed, 5, // Lower to 5 units from ground slenderman.position.z + directionToPlayer.z * slendermanSpeed ); // Only check distance to player, ignore walls const distanceToPlayer = nextPosition.distanceTo(player.position); // Check if Slenderman is close enough to trigger game over (9 feet distance) if (distanceToPlayer <= 9) { // Create and play scream sound if (audioContext && screamBuffer) { try { const screamSound = audioContext.createBufferSource(); screamSound.buffer = screamBuffer; const screamGain = audioContext.createGain(); screamGain.gain.value = 1.0; // Full volume for scream screamSound.connect(screamGain); screamGain.connect(audioContext.destination); // Ensure audio context is running if (audioContext.state === 'suspended') { audioContext.resume(); } screamSound.start(0); console.log('Scream sound played'); } catch (error) { console.error('Error playing scream sound:', error); } } else { console.error('Audio context or scream buffer not available'); } showJumpScare(); } else { // Keep Slenderman within the terrain bounds const terrainSize = 200; const halfSize = terrainSize / 2; nextPosition.x = Math.max(-halfSize, Math.min(halfSize, nextPosition.x)); nextPosition.z = Math.max(-halfSize, Math.min(halfSize, nextPosition.z)); slenderman.position.copy(nextPosition); } // Calculate direction and rotation to face player (Y-axis only) const angle = Math.atan2( player.position.x - slenderman.position.x, player.position.z - slenderman.position.z ); // Lock rotation to Y-axis only slenderman.rotation.set(0, angle, 0); } applyControls(); // Apply camera controls // Animate keys keys.forEach(key => { if (!key.userData.collected) { // Floating animation key.position.y = key.userData.initialY + Math.sin(Date.now() * 0.003) * 0.3; // Rotation animation key.rotateY(key.userData.rotationSpeed); } }); // Check key collection checkKeyCollection(); // Animate and check portal collision if (portal && isPortalSpawned) { portal.rotation.y += 0.01; const playerPosition = new THREE.Vector3( player.position.x, player.position.y, player.position.z ); const portalPosition = portal.position; const distance = playerPosition.distanceTo(portalPosition); if (distance < 5) { // Portal collision radius isInPortal = true; // Set the flag when player enters portal showFinalWinScreen(); } } } 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 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 // ========================= // 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?Cxe3'; break; case 'down': iconUrl = 'https://play.rosebud.ai/assets/down_chevron.png?OlBE'; break; case 'left': iconUrl = 'https://play.rosebud.ai/assets/left_chevron.png?ySWf'; break; case 'right': iconUrl = 'https://play.rosebud.ai/assets/right_chevron.png?HeOl'; 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?I8By')`; jumpContainer.appendChild(jumpButton); // Inject CSS styles dynamically const styles = ` /* 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?I8By'); /* 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 const styleSheet = document.createElement("style"); styleSheet.type = "text/css"; styleSheet.innerText = 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() { // Calculate forward direction and next position const forward = new THREE.Vector3( Math.sin(player.rotation.y), 0, Math.cos(player.rotation.y) ); // Function to check wall collisions function checkWallCollision(nextPosition) { const playerRadius = 1; // Player collision radius const wallMargin = 2; // Distance to keep from walls const terrainSize = 200; const halfSize = terrainSize / 2; // Check perimeter walls first const boundaryPosition = { x: Math.max(-halfSize + wallMargin, Math.min(halfSize - wallMargin, nextPosition.x)), y: nextPosition.y, z: Math.max(-halfSize + wallMargin, Math.min(halfSize - wallMargin, nextPosition.z)) }; // Check maze wall collisions let canMove = true; const playerPosition = new THREE.Vector3(nextPosition.x, nextPosition.y, nextPosition.z); for (const wall of mazeWalls) { const wallBox = new THREE.Box3().setFromObject(wall); const playerBox = new THREE.Box3(); playerBox.min.set( playerPosition.x - playerRadius, playerPosition.y - playerHeight / 2, playerPosition.z - playerRadius ); playerBox.max.set( playerPosition.x + playerRadius, playerPosition.y + playerHeight / 2, playerPosition.z + playerRadius ); if (playerBox.intersectsBox(wallBox)) { canMove = false; break; } } return canMove ? boundaryPosition : player.position.clone(); } // Calculate right direction const right = new THREE.Vector3( Math.sin(player.rotation.y + Math.PI / 2), 0, Math.cos(player.rotation.y + Math.PI / 2) ); // Reset velocity player.velocity.set(0, 0, 0); // Apply movement based on keys pressed if (keysPressed.up || keysPressed.down || keysPressed.left || keysPressed.right) { // Forward/Backward if (keysPressed.up) { player.velocity.add(forward.multiplyScalar(-moveSpeed)); } if (keysPressed.down) { player.velocity.add(forward.multiplyScalar(moveSpeed)); } // Left/Right if (keysPressed.left) { player.velocity.add(right.multiplyScalar(-moveSpeed)); } if (keysPressed.right) { player.velocity.add(right.multiplyScalar(moveSpeed)); } } // Handle jumping with cooldown const currentTime = Date.now(); if (keysPressed.jump && !player.isJumping && currentTime - player.lastJumpTime >= jumpCooldown) { player.verticalVelocity = jumpForce; player.isJumping = true; player.lastJumpTime = currentTime; } // Apply gravity player.verticalVelocity += gravity; // Update vertical position player.position.y += player.verticalVelocity; // Ground collision check if (player.position.y <= playerHeight) { player.position.y = playerHeight; player.verticalVelocity = 0; player.isJumping = false; } // Calculate next position const nextPosition = new THREE.Vector3().copy(player.position).add(player.velocity); // Check and apply wall collisions const correctedPosition = checkWallCollision(nextPosition); player.position.set(correctedPosition.x, correctedPosition.y, correctedPosition.z); // Update camera position camera.position.copy(player.position); // Update player light position playerLight.position.set( player.position.x, player.position.y + 5, // Keep light higher above player for better vertical illumination player.position.z ); }