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'; import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js'; // Create custom blur shader const BlurShader = { uniforms: { 'tDiffuse': { value: null }, 'blurAmount': { value: 0.0 } }, vertexShader: ` varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `, fragmentShader: ` uniform sampler2D tDiffuse; uniform float blurAmount; varying vec2 vUv; void main() { vec4 color = vec4(0.0); float total = 0.0; vec2 texSize = vec2(1024.0, 1024.0); for(float x = -4.0; x <= 4.0; x++) { for(float y = -4.0; y <= 4.0; y++) { vec2 offset = vec2(x, y) * blurAmount / texSize; color += texture2D(tDiffuse, vUv + offset); total += 1.0; } } gl_FragColor = color / total; } ` }; // 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; let backgroundMusic = null; let musicGain = null; let isBackgroundMusicPlaying = false; let flashlightSwitchBuffer = null; // Audio setup for key collection sound and jumpscare const audioContext = new(window.AudioContext || window.webkitAudioContext)(); let screamBuffer = null; // Initialize scream buffer let femaleScreamBuffer = null; // Initialize female scream buffer let zombieBreathBuffer = null; // Initialize zombie breath sound buffer let ratScreamBuffer = null; // Initialize rat scream sound buffer let drinkBuffer = null; // Initialize drink sound buffer let footstepsBuffer = null; // Initialize footsteps sound buffer let lastFootstepTime = 0; // Track last footstep sound time let footstepInterval = 400; // Minimum time between footsteps in milliseconds // Reverb setup let reverbNode = null; // Will hold our ConvolverNode for reverb let dryGainNode = null; // For non-reverb signal let wetGainNode = null; // For reverb signal let masterGainNode = null; // Master volume control let blurPass = null; // Store blur pass let isBlurred = false; // Track blur state let blurEndTime = 0; // Track when blur should end let lastGhost3ScreamTime = 0; // Track when ghost 3 last triggered a scream let ghost3ScreamCooldown = 10000; // 10 seconds cooldown between screams let lastGhost2BreathTime = 0; // Track when ghost 2 last triggered a breath sound let ghost2BreathCooldown = 8000; // 8 seconds cooldown between breaths let lastGhost1ScreamTime = 0; // Track when ghost 1 last triggered a rat scream let ghost1ScreamCooldown = 12000; // 12 seconds cooldown between rat screams let keys = []; // Array to store tube objects let torch = null; // Store torch object let hasTorch = false; // Track if player has collected torch let torchLight = null; // Store torch light let guidingBeam = null; // Store guiding beam to nearest tube let isInPortal = false; // Flag to track if player has entered portal let slenderman = null; let slendermanMixer = null; let slenderman2 = null; // Second ghost let slenderman3 = null; // Third ghost 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 = 'Tubes: 0/6'; document.body.appendChild(keyCounterDisplay); let keysCollected = 0; // Track number of keys collected // Create test tube object with glowing effect function createTestTubeGeometry() { const group = new THREE.Group(); // Create the main tube body const tubeGeometry = new THREE.CylinderGeometry(0.2, 0.2, 1.5, 16); const tubeMaterial = new THREE.MeshStandardMaterial({ color: 0x0044ff, metalness: 0.9, roughness: 0.1, transparent: true, opacity: 0.8, emissive: 0x0044ff, emissiveIntensity: 0.5 }); const tube = new THREE.Mesh(tubeGeometry, tubeMaterial); // Create the tube opening (rim) const rimGeometry = new THREE.CylinderGeometry(0.25, 0.25, 0.1, 16); const rimMaterial = new THREE.MeshStandardMaterial({ color: 0x0044ff, metalness: 0.9, roughness: 0.1, emissive: 0x0044ff, emissiveIntensity: 0.5 }); const rim = new THREE.Mesh(rimGeometry, rimMaterial); rim.position.y = 0.8; // Position at the top of the tube group.add(tube); group.add(rim); return group; } let testTubeModel = createTestTubeGeometry(); // Function to create torch function createTorch() { const torchGroup = new THREE.Group(); // Create flashlight handle (cylinder) const handleGeometry = new THREE.CylinderGeometry(0.15, 0.15, 1.2, 8); const handleMaterial = new THREE.MeshStandardMaterial({ color: 0x303030, // Dark gray roughness: 0.4, metalness: 0.8 }); const handle = new THREE.Mesh(handleGeometry, handleMaterial); // Create flashlight head (wider cylinder) const headGeometry = new THREE.CylinderGeometry(0.3, 0.25, 0.4, 8); const headMaterial = new THREE.MeshStandardMaterial({ color: 0x404040, // Slightly lighter gray roughness: 0.3, metalness: 0.9 }); const head = new THREE.Mesh(headGeometry, headMaterial); head.position.y = 0.8; // Create lens (glass effect) const lensGeometry = new THREE.CylinderGeometry(0.28, 0.28, 0.05, 16); const lensMaterial = new THREE.MeshStandardMaterial({ color: 0xaaaaff, // Light blue tint roughness: 0.1, metalness: 0.9, emissive: 0xaaaaff, emissiveIntensity: 1.0, transparent: true, opacity: 0.9 }); const lens = new THREE.Mesh(lensGeometry, lensMaterial); lens.position.y = 1.0; // Create flashlight light torchLight = new THREE.SpotLight(0xaaaaff, 2, 50, Math.PI / 6, 0.5, 1); torchLight.position.y = 1.0; torchGroup.add(handle); torchGroup.add(head); torchGroup.add(lens); torchGroup.add(torchLight); // Add a target for the spotlight const targetObject = new THREE.Object3D(); targetObject.position.set(0, 0, -1); torchGroup.add(targetObject); torchLight.target = targetObject; // Add animation data torchGroup.userData.initialY = 6; torchGroup.userData.rotationSpeed = 0.02; torchGroup.userData.collected = false; return torchGroup; } // Function to create guiding beam function createGuidingBeam() { const beamGeometry = new THREE.CylinderGeometry(0.05, 0.15, 1, 8); const beamMaterial = new THREE.MeshStandardMaterial({ color: 0xaaaaff, // Light blue color emissive: 0xaaaaff, emissiveIntensity: 1.5, transparent: true, opacity: 0.3 // More subtle beam }); const beam = new THREE.Mesh(beamGeometry, beamMaterial); beam.visible = false; scene.add(beam); return beam; } // Function to update guiding beam function updateGuidingBeam() { if (!hasTorch || !guidingBeam) return; // Find nearest uncollected tube let nearestTube = null; let minDistance = Infinity; keys.forEach(tube => { if (!tube.userData.collected) { const distance = tube.position.distanceTo(player.position); if (distance < minDistance) { minDistance = distance; nearestTube = tube; } } }); if (nearestTube) { guidingBeam.visible = true; // Position beam to point from player to nearest tube const direction = new THREE.Vector3().subVectors(nearestTube.position, player.position); const distance = direction.length(); direction.normalize(); guidingBeam.position.copy(player.position); guidingBeam.position.y += 2; // Raise beam slightly above player // Scale beam based on distance guidingBeam.scale.y = distance; // Orient beam towards tube guidingBeam.quaternion.setFromUnitVectors( new THREE.Vector3(0, 1, 0), direction ); // Move beam origin to player guidingBeam.position.add(direction.multiplyScalar(distance / 2)); } else { guidingBeam.visible = false; } } // Function to spawn torch function spawnTorch() { if (torch) scene.remove(torch); torch = createTorch(); let position; do { position = generateRandomKeyPosition(); } while (!isValidKeyPosition(position)); torch.position.copy(position); torch.position.y = 6; scene.add(torch); guidingBeam = createGuidingBeam(); } // Function to load scream sound effect async function loadScreamSound() { try { const response = await fetch('https://play.rosebud.ai/assets/Jumpscare Sound Effect.mp3?HPgw'); 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 female scream sound effect async function loadFemaleScreamSound() { try { const response = await fetch('https://play.rosebud.ai/assets/Female-Screaming-A1-www.fesliyanstudios.com.mp3?Gvf6'); const arrayBuffer = await response.arrayBuffer(); femaleScreamBuffer = await audioContext.decodeAudioData(arrayBuffer); } catch (error) { console.error('Error loading female scream sound:', error); } } // Load female scream sound loadFemaleScreamSound(); // Function to load rat scream sound effect async function loadRatScreamSound() { try { const response = await fetch('https://play.rosebud.ai/assets/Screaming-Rat-www.fesliyanstudios.com.mp3?Hle3'); const arrayBuffer = await response.arrayBuffer(); ratScreamBuffer = await audioContext.decodeAudioData(arrayBuffer); } catch (error) { console.error('Error loading rat scream sound:', error); } } // Load rat scream sound loadRatScreamSound(); // Function to load zombie breathing sound effect async function loadZombieBreathSound() { try { const response = await fetch('https://play.rosebud.ai/assets/Zombie-Breathing-E3-www.fesliyanstudios.com.mp3?WVOd'); const arrayBuffer = await response.arrayBuffer(); zombieBreathBuffer = await audioContext.decodeAudioData(arrayBuffer); } catch (error) { console.error('Error loading zombie breath sound:', error); } } // Load zombie breath sound loadZombieBreathSound(); // Function to load drink sound effect async function loadDrinkSound() { try { const duration = 0.3; // Shorter duration for gulp sound const offlineCtx = new OfflineAudioContext(1, audioContext.sampleRate * duration, audioContext.sampleRate); // Create main gulp oscillator const gulpOsc = offlineCtx.createOscillator(); const gulpGain = offlineCtx.createGain(); // Create bubble effect oscillator const bubbleOsc = offlineCtx.createOscillator(); const bubbleGain = offlineCtx.createGain(); // Configure gulp sound gulpOsc.type = 'sine'; gulpOsc.frequency.setValueAtTime(150, 0); gulpOsc.frequency.exponentialRampToValueAtTime(40, duration); gulpGain.gain.setValueAtTime(0, 0); gulpGain.gain.linearRampToValueAtTime(0.7, 0.05); gulpGain.gain.exponentialRampToValueAtTime(0.01, duration); // Configure bubble effect bubbleOsc.type = 'sine'; bubbleOsc.frequency.setValueAtTime(500, 0); bubbleOsc.frequency.exponentialRampToValueAtTime(200, duration); bubbleGain.gain.setValueAtTime(0, 0); bubbleGain.gain.linearRampToValueAtTime(0.3, 0.05); bubbleGain.gain.exponentialRampToValueAtTime(0.01, duration); // Connect nodes gulpOsc.connect(gulpGain); bubbleOsc.connect(bubbleGain); gulpGain.connect(offlineCtx.destination); bubbleGain.connect(offlineCtx.destination); // Start oscillators gulpOsc.start(0); bubbleOsc.start(0); gulpOsc.stop(duration); bubbleOsc.stop(duration); drinkBuffer = await offlineCtx.startRendering(); } catch (error) { console.error('Error creating drink sound:', error); } } // Function to create flashlight switch sound async function loadFlashlightSwitchSound() { try { const duration = 0.2; const offlineCtx = new OfflineAudioContext(1, audioContext.sampleRate * duration, audioContext.sampleRate); // Create click oscillator const clickOsc = offlineCtx.createOscillator(); const clickGain = offlineCtx.createGain(); // Configure click sound clickOsc.type = 'square'; clickOsc.frequency.setValueAtTime(2000, 0); clickOsc.frequency.exponentialRampToValueAtTime(1000, duration); clickGain.gain.setValueAtTime(0, 0); clickGain.gain.linearRampToValueAtTime(0.8, 0.01); clickGain.gain.exponentialRampToValueAtTime(0.01, duration); // Connect nodes clickOsc.connect(clickGain); clickGain.connect(offlineCtx.destination); // Start oscillator clickOsc.start(0); clickOsc.stop(duration); flashlightSwitchBuffer = await offlineCtx.startRendering(); } catch (error) { console.error('Error creating flashlight switch sound:', error); } } // Function to load footsteps sound async function loadFootstepsSound() { try { // Create oscillator-based footstep sound const duration = 0.15; // Short duration for each step const offlineCtx = new OfflineAudioContext(1, audioContext.sampleRate * duration, audioContext.sampleRate); // Create main thud oscillator const thudOsc = offlineCtx.createOscillator(); const thudGain = offlineCtx.createGain(); // Configure thud sound thudOsc.type = 'sine'; thudOsc.frequency.setValueAtTime(80, 0); thudOsc.frequency.exponentialRampToValueAtTime(30, duration); thudGain.gain.setValueAtTime(0, 0); thudGain.gain.linearRampToValueAtTime(0.8, 0.01); thudGain.gain.exponentialRampToValueAtTime(0.01, duration); // Connect nodes thudOsc.connect(thudGain); thudGain.connect(offlineCtx.destination); // Start oscillator thudOsc.start(0); thudOsc.stop(duration); footstepsBuffer = await offlineCtx.startRendering(); } catch (error) { console.error('Error creating footsteps sound:', error); } } // Create reverb impulse response async function createReverb() { // Create offline context for generating impulse response const reverbLength = 3.0; // 3 seconds of reverb const offlineCtx = new OfflineAudioContext(2, audioContext.sampleRate * reverbLength, audioContext.sampleRate); // Create noise source const noiseBuffer = offlineCtx.createBuffer(2, offlineCtx.length, offlineCtx.sampleRate); // Fill buffer with noise for (let channel = 0; channel < 2; channel++) { const channelData = noiseBuffer.getChannelData(channel); for (let i = 0; i < channelData.length; i++) { // Exponential decay to simulate reverb tail channelData[i] = (Math.random() * 2 - 1) * Math.pow(1 - i / channelData.length, 2); } } // Create a source from the noise buffer const noiseSource = offlineCtx.createBufferSource(); noiseSource.buffer = noiseBuffer; // Apply filters to shape the reverb const lowpass = offlineCtx.createBiquadFilter(); lowpass.type = 'lowpass'; lowpass.frequency.value = 500; lowpass.Q.value = 0.5; // Connect and start noiseSource.connect(lowpass); lowpass.connect(offlineCtx.destination); noiseSource.start(); // Render and return the impulse response const impulseResponse = await offlineCtx.startRendering(); // Setup convolver and gain nodes reverbNode = audioContext.createConvolver(); reverbNode.buffer = impulseResponse; // Create dry and wet gain nodes for mix control dryGainNode = audioContext.createGain(); wetGainNode = audioContext.createGain(); masterGainNode = audioContext.createGain(); // Set initial mix (60% dry, 40% wet) dryGainNode.gain.value = 0.6; wetGainNode.gain.value = 0.4; // Connect to master output dryGainNode.connect(masterGainNode); wetGainNode.connect(reverbNode); reverbNode.connect(masterGainNode); masterGainNode.connect(audioContext.destination); } // Function to play any sound with reverb function playSound(buffer, volume = 0.8, wetMix = 0.4) { if (!audioContext || !buffer || !reverbNode) return; try { // Create sound source const sound = audioContext.createBufferSource(); sound.buffer = buffer; // Create gain node for this sound's volume const soundGain = audioContext.createGain(); soundGain.gain.value = volume; // Connect sound through our reverb system sound.connect(soundGain); soundGain.connect(dryGainNode); // Also send to wet path with custom mix amount const individualWetGain = audioContext.createGain(); individualWetGain.gain.value = wetMix; soundGain.connect(individualWetGain); individualWetGain.connect(wetGainNode); // Ensure audio context is running if (audioContext.state === 'suspended') { audioContext.resume(); } // Start playback sound.start(); return sound; } catch (error) { console.error('Error playing sound with reverb:', error); return null; } } // Function to play footstep sound function playFootstepSound() { if (!audioContext || !footstepsBuffer) return; const currentTime = Date.now(); if (currentTime - lastFootstepTime < footstepInterval) return; try { playSound(footstepsBuffer, 0.8, 0.3); // Less reverb on footsteps lastFootstepTime = currentTime; } catch (error) { console.error('Error playing footstep sound:', error); } } // Load all sound effects loadDrinkSound(); loadFootstepsSound(); loadFlashlightSwitchSound(); // Initialize reverb createReverb(); // Function to load and setup background music async function loadBackgroundMusic() { try { const response = await fetch('https://play.rosebud.ai/assets/(Free) Horror Ambiance - Ominous Background Music 4.mp3?i6gI'); const arrayBuffer = await response.arrayBuffer(); const audioBuffer = await audioContext.decodeAudioData(arrayBuffer); backgroundMusic = audioContext.createBufferSource(); backgroundMusic.buffer = audioBuffer; backgroundMusic.loop = true; isBackgroundMusicPlaying = false; // Ensure it's reset when new music is loaded // Create gain node for volume control musicGain = audioContext.createGain(); musicGain.gain.value = 0.2; // Set initial volume to 20% // Connect nodes backgroundMusic.connect(musicGain); musicGain.connect(audioContext.destination); } catch (error) { console.error('Error loading background music:', error); } } // Load background music loadBackgroundMusic(); // No need for loadKeyModel function anymore as we create the test tube geometry directly // 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?oHjZ'); 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 portal model loadPortalModel(); // Function to create and setup the ghost async function loadGhostModel() { try { // Load ghost texture const ghostTexture = await textureLoader.loadAsync('https://play.rosebud.ai/assets/new ghost 2.png?49Yh'); // Create ghost material with neutral properties const ghostMaterial = new THREE.MeshStandardMaterial({ map: ghostTexture, transparent: true, side: THREE.DoubleSide, alphaTest: 0.1 }); // Create a plane geometry for the ghost - significantly larger size const ghostGeometry = new THREE.PlaneGeometry(12, 12); // Increased from 7x7 to 12x12 for a much larger ghost slenderman = new THREE.Mesh(ghostGeometry, ghostMaterial); // Make the ghost material more translucent ghostMaterial.opacity = 0.4; // Further reduced opacity for higher translucency // Set up ghost properties slenderman.userData.isGhost = true; slenderman.userData.floatOffset = Math.random() * Math.PI * 2; // Random starting phase for basic float animation // No particle effects // 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 = 6; // Lowered ghost position to be closer to the ground // Add to scene scene.add(slenderman); } catch (error) { console.error('Error creating ghost:', error); } } // Function to create and setup the second ghost (slower) async function loadSecondGhostModel() { try { // Load ghost texture const ghostTexture = await textureLoader.loadAsync('https://play.rosebud.ai/assets/new ghost 1.png?P5Hd'); // Create ghost material with neutral properties const ghostMaterial = new THREE.MeshStandardMaterial({ map: ghostTexture, transparent: true, side: THREE.DoubleSide, alphaTest: 0.1 }); // Create a plane geometry for the ghost const ghostGeometry = new THREE.PlaneGeometry(14, 14); // Increased from 9x9 to 14x14 for a massive ghost slenderman2 = new THREE.Mesh(ghostGeometry, ghostMaterial); // Make the ghost material more translucent ghostMaterial.opacity = 0.4; // Further reduced opacity for higher translucency // Set up ghost properties slenderman2.userData.isGhost = true; slenderman2.userData.floatOffset = Math.random() * Math.PI * 2; // Random starting phase slenderman2.userData.isSecondGhost = true; // Flag to identify the second ghost // No particle effects // Find valid spawn position far from player and first ghost let position; do { position = generateRandomKeyPosition(); } while (position.distanceTo(new THREE.Vector3(0, 0, 0)) < 100 || (slenderman && position.distanceTo(slenderman.position) < 50)); slenderman2.position.copy(position); slenderman2.position.y = 6; // Lowered ghost position to be closer to the ground // Add to scene scene.add(slenderman2); } catch (error) { console.error('Error creating second ghost:', error); } } // Function to create and setup the third ghost (even slower) async function loadThirdGhostModel() { try { // Load ghost texture const ghostTexture = await textureLoader.loadAsync('https://play.rosebud.ai/assets/game ghost 5.png?XqEz'); // Create ghost material with neutral properties const ghostMaterial = new THREE.MeshStandardMaterial({ map: ghostTexture, transparent: true, side: THREE.DoubleSide, alphaTest: 0.1 }); // Create a plane geometry for the ghost const ghostGeometry = new THREE.PlaneGeometry(14, 14); // Same size as ghost 2 slenderman3 = new THREE.Mesh(ghostGeometry, ghostMaterial); // Make the ghost material more translucent ghostMaterial.opacity = 0.4; // Same opacity as other ghosts // Set up ghost properties slenderman3.userData.isGhost = true; slenderman3.userData.floatOffset = Math.random() * Math.PI * 2; // Random starting phase slenderman3.userData.isThirdGhost = true; // Flag to identify the third ghost // Find valid spawn position far from player and other ghosts let position; do { position = generateRandomKeyPosition(); } while (position.distanceTo(new THREE.Vector3(0, 0, 0)) < 100 || (slenderman && position.distanceTo(slenderman.position) < 50) || (slenderman2 && position.distanceTo(slenderman2.position) < 50)); slenderman3.position.copy(position); slenderman3.position.y = 6; // Same height as other ghosts // Add to scene scene.add(slenderman3); } catch (error) { console.error('Error creating third ghost:', 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?fpK0')`; 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/tv-static-noise-glitch-effect-original-photo-from-a-vintage-television-2E7T4C9.jpg?jKBm'; 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'; gameOverImage.style.opacity = '0.8'; gameOverImage.style.filter = 'brightness(0.7) contrast(1.2)'; 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 (!testTubeModel) { console.error('Test tube model not created'); return null; } const testTube = testTubeModel.clone(); testTube.position.copy(position); testTube.scale.set(2, 2, 2); testTube.position.y = 6; // Add animation properties testTube.userData.initialY = testTube.position.y; testTube.userData.rotationSpeed = 0.02; testTube.userData.collected = false; scene.add(testTube); return testTube; } // 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 tubes function spawnKeys() { // Clear existing tubes and torch keys.forEach(key => scene.remove(key)); keys = []; hasTorch = false; spawnTorch(); // Spawn new torch keysCollected = 0; // Spawn six tubes for (let i = 0; i < 6; i++) { const position = generateRandomKeyPosition(); const key = createKey(position); keys.push(key); } } // Function to check tube collection function checkKeyCollection() { const playerPosition = new THREE.Vector3( player.position.x, player.position.y, player.position.z ); // Check torch collection if (torch && !hasTorch) { const torchDistance = playerPosition.distanceTo(torch.position); if (torchDistance < 2) { hasTorch = true; scene.remove(torch); torch = null; // Play flashlight switch sound if (audioContext && flashlightSwitchBuffer && reverbNode) { playSound(flashlightSwitchBuffer, 0.7, 0.35); } } } keys.forEach(key => { if (!key.userData.collected) { const distance = playerPosition.distanceTo(key.position); if (distance < 2) { // Collection radius // Play drink sound effect if (audioContext && drinkBuffer) { playSound(drinkBuffer, 0.8, 0.5); // 50% reverb on drink sound } key.userData.collected = true; key.visible = false; keysCollected++; keyCounterDisplay.textContent = `Tubes: ${keysCollected}/6`; // Trigger blur effect blurPass.enabled = true; isBlurred = true; blurEndTime = Date.now() + 20000; // 20 seconds from now // Start with strong blur that gradually decreases blurPass.uniforms.blurAmount.value = 2.0; // Show win screen when all tubes are collected if (keysCollected === 6) { // Release pointer lock if (document.pointerLockElement) { document.exitPointerLock(); } // Stop background music if (backgroundMusic && isBackgroundMusicPlaying) { backgroundMusic.stop(); isBackgroundMusicPlaying = false; } // Generate random 6-digit code const randomCode = Math.floor(100000 + Math.random() * 900000); const winScreen = document.createElement('div'); winScreen.style.position = 'fixed'; winScreen.style.top = '0'; winScreen.style.left = '0'; winScreen.style.width = '100%'; winScreen.style.height = '100%'; winScreen.style.backgroundColor = 'rgba(0, 0, 0, 0.9)'; winScreen.style.display = 'flex'; winScreen.style.flexDirection = 'column'; winScreen.style.justifyContent = 'center'; winScreen.style.alignItems = 'center'; winScreen.style.zIndex = '3000'; // Create glowing text effect const title = document.createElement('h1'); title.textContent = 'MISSION COMPLETE!'; title.style.color = '#00ff00'; title.style.fontSize = '64px'; title.style.marginBottom = '30px'; title.style.textShadow = '0 0 20px #00ff00'; title.style.animation = 'glow 2s ease-in-out infinite alternate'; const subtitle = document.createElement('h2'); subtitle.textContent = 'You collected all six test tubes!'; subtitle.style.color = '#ffffff'; subtitle.style.fontSize = '32px'; subtitle.style.marginBottom = '20px'; // Add code display const codeContainer = document.createElement('div'); codeContainer.style.backgroundColor = '#111111'; codeContainer.style.padding = '20px 40px'; codeContainer.style.borderRadius = '10px'; codeContainer.style.border = '2px solid #00ff00'; codeContainer.style.marginBottom = '40px'; const codeTitle = document.createElement('div'); codeTitle.textContent = 'Your completion code:'; codeTitle.style.color = '#ffffff'; codeTitle.style.fontSize = '24px'; codeTitle.style.marginBottom = '10px'; const code = document.createElement('div'); code.textContent = randomCode; code.style.color = '#00ff00'; code.style.fontSize = '48px'; code.style.fontFamily = 'monospace'; code.style.letterSpacing = '5px'; code.style.textShadow = '0 0 10px #00ff00'; codeContainer.appendChild(codeTitle); codeContainer.appendChild(code); // Add animation keyframes const style = document.createElement('style'); style.textContent = ` @keyframes glow { from { text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00; } to { text-shadow: 0 0 20px #00ff00, 0 0 30px #00ff00, 0 0 40px #00ff00; } } `; document.head.appendChild(style); // Add elements to win screen winScreen.appendChild(title); winScreen.appendChild(subtitle); winScreen.appendChild(codeContainer); // Add to document document.body.appendChild(winScreen); // End game after 5 seconds setTimeout(() => { document.body.removeChild(winScreen); resetGame(); launchScreen.style.display = 'flex'; }, 5000); // Set game over state isGameOver = true; } } } }); } // Function to show win screen function showWinScreen() { // Generate random 6-digit code const randomCode = Math.floor(100000 + Math.random() * 900000); 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.9)'; 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 = 'CONGRATULATIONS!'; title.style.color = '#00ff00'; title.style.fontSize = '64px'; title.style.marginBottom = '30px'; title.style.textShadow = '0 0 10px #00ff00'; const subtitle = document.createElement('h2'); subtitle.textContent = 'You collected all test tubes!'; subtitle.style.color = '#ffffff'; subtitle.style.fontSize = '32px'; subtitle.style.marginBottom = '40px'; const codeContainer = document.createElement('div'); codeContainer.style.backgroundColor = '#111111'; codeContainer.style.padding = '20px 40px'; codeContainer.style.borderRadius = '10px'; codeContainer.style.border = '2px solid #00ff00'; codeContainer.style.marginBottom = '40px'; const codeTitle = document.createElement('div'); codeTitle.textContent = 'Your completion code:'; codeTitle.style.color = '#ffffff'; codeTitle.style.fontSize = '24px'; codeTitle.style.marginBottom = '10px'; const code = document.createElement('div'); code.textContent = randomCode; code.style.color = '#00ff00'; code.style.fontSize = '48px'; code.style.fontFamily = 'monospace'; code.style.letterSpacing = '5px'; code.style.textShadow = '0 0 10px #00ff00'; const playAgainButton = document.createElement('button'); playAgainButton.textContent = 'PLAY AGAIN'; playAgainButton.style.padding = '15px 30px'; playAgainButton.style.fontSize = '24px'; playAgainButton.style.backgroundColor = '#003300'; playAgainButton.style.color = '#ffffff'; playAgainButton.style.border = '2px solid #00ff00'; playAgainButton.style.cursor = 'pointer'; playAgainButton.style.borderRadius = '5px'; playAgainButton.style.transition = 'all 0.3s ease'; playAgainButton.onmouseover = () => { playAgainButton.style.backgroundColor = '#004400'; playAgainButton.style.transform = 'scale(1.1)'; }; playAgainButton.onmouseout = () => { playAgainButton.style.backgroundColor = '#003300'; playAgainButton.style.transform = 'scale(1.0)'; }; playAgainButton.onclick = () => { document.body.removeChild(winScreen); generateMazeWalls(); spawnKeys(); player.position.set(0, playerHeight, 0); player.rotation.set(0, 0, 0, 'YXZ'); }; codeContainer.appendChild(codeTitle); codeContainer.appendChild(code); winScreen.appendChild(title); winScreen.appendChild(subtitle); winScreen.appendChild(codeContainer); 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 // Stop current background music if (backgroundMusic && isBackgroundMusicPlaying) { backgroundMusic.stop(); isBackgroundMusicPlaying = false; } // Create and start new background music loadBackgroundMusic().then(() => { if (backgroundMusic && gameStarted) { backgroundMusic.start(0); isBackgroundMusicPlaying = true; } }); // Reset ghost positions if (slenderman) { let position; do { position = generateRandomKeyPosition(); } while (position.distanceTo(new THREE.Vector3(0, 0, 0)) < 100); slenderman.position.copy(position); slenderman.position.y = 6; // Keep ghost floating lower to the ground } // Reset second ghost position if (slenderman2) { let position; do { position = generateRandomKeyPosition(); } while (position.distanceTo(new THREE.Vector3(0, 0, 0)) < 100 || (slenderman && position.distanceTo(slenderman.position) < 50)); slenderman2.position.copy(position); slenderman2.position.y = 6; // Keep ghost floating lower to the ground } // Reset third ghost position if (slenderman3) { let position; do { position = generateRandomKeyPosition(); } while (position.distanceTo(new THREE.Vector3(0, 0, 0)) < 100 || (slenderman && position.distanceTo(slenderman.position) < 50) || (slenderman2 && position.distanceTo(slenderman2.position) < 50)); slenderman3.position.copy(position); slenderman3.position.y = 6; // Keep ghost floating lower to the ground } keyCounterDisplay.textContent = 'Tubes: 0/6'; 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/Create scary music to play in the background.png?ZtG0')`; launchScreen.style.backgroundSize = 'cover'; launchScreen.style.backgroundPosition = 'center center'; launchScreen.style.backgroundColor = 'rgba(0, 0, 0, 0.75)'; // Slightly lighter overlay to show more of the castle launchScreen.style.backdropFilter = 'brightness(0.7) contrast(1.2)'; // Adjusted for better castle visibility 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 = 'GHOST SHOT'; gameTitle.style.color = '#0044ff'; gameTitle.style.fontSize = '64px'; gameTitle.style.marginBottom = '30px'; gameTitle.style.fontFamily = 'Arial, sans-serif'; gameTitle.style.textShadow = '2px 2px 8px rgba(0, 0, 255, 0.8)'; launchScreen.appendChild(gameTitle); // Add mission text const missionText = document.createElement('p'); missionText.textContent = 'FIND SIX TEST TUBES... 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(); } // Start background music if (backgroundMusic && !isBackgroundMusicPlaying) { backgroundMusic.start(0); isBackgroundMusicPlaying = true; } // Load ghosts if not already loaded if (!slenderman) { await loadGhostModel(); } if (!slenderman2) { await loadSecondGhostModel(); } if (!slenderman3) { await loadThirdGhostModel(); } // 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, 1.2, 50); // Further reduced intensity for a much darker atmosphere 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 = 0.6; // Significantly reduced exposure for a very dark scene // 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, // slightly increased bloom strength to make light sources stand out in darkness 0.6, // maintain radius 0.6 // higher threshold to only make brightest objects glow in the darkness ); composer.addPass(bloomPass); // Add blur pass blurPass = new ShaderPass(BlurShader); blurPass.enabled = false; composer.addPass(blurPass); // 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?wQ5t'); const normalMap = textureLoader.load('https://play.rosebud.ai/assets/3D_playground_grass_normal.png?EdJW'); 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 wood texture procedurally const woodCanvas = document.createElement('canvas'); woodCanvas.width = 512; woodCanvas.height = 512; const woodCtx = woodCanvas.getContext('2d'); // Dark wood base color woodCtx.fillStyle = '#1a0f00'; woodCtx.fillRect(0, 0, 512, 512); // Add wood grain for (let i = 0; i < 50; i++) { woodCtx.beginPath(); woodCtx.strokeStyle = `rgba(26, 15, 0, ${Math.random() * 0.5 + 0.5})`; woodCtx.lineWidth = Math.random() * 8 + 2; // Create curved wood grain lines const startX = Math.random() * 512; const startY = 0; const endX = startX + (Math.random() * 100 - 50); const endY = 512; const cp1x = startX + Math.random() * 100 - 50; const cp1y = 256; woodCtx.moveTo(startX, startY); woodCtx.quadraticCurveTo(cp1x, cp1y, endX, endY); woodCtx.stroke(); } // Create darker knots for (let i = 0; i < 10; i++) { woodCtx.beginPath(); const x = Math.random() * 512; const y = Math.random() * 512; const radius = Math.random() * 20 + 10; const gradient = woodCtx.createRadialGradient(x, y, 0, x, y, radius); gradient.addColorStop(0, 'rgba(13, 7, 0, 0.9)'); gradient.addColorStop(1, 'rgba(26, 15, 0, 0)'); woodCtx.fillStyle = gradient; woodCtx.arc(x, y, radius, 0, Math.PI * 2); woodCtx.fill(); } const woodTexture = new THREE.CanvasTexture(woodCanvas); woodTexture.wrapS = woodTexture.wrapT = THREE.RepeatWrapping; woodTexture.repeat.set(8, 8); // Create cobblestone texture procedurally const cobblestoneCanvas = document.createElement('canvas'); cobblestoneCanvas.width = 512; cobblestoneCanvas.height = 512; const stoneCtx = cobblestoneCanvas.getContext('2d'); // Fill with dark gray background stoneCtx.fillStyle = '#444444'; stoneCtx.fillRect(0, 0, 512, 512); // Create cobblestone pattern for (let row = 0; row < 8; row++) { for (let col = 0; col < 8; col++) { // Randomize stone size slightly const width = 64 + Math.random() * 10 - 5; const height = 64 + Math.random() * 10 - 5; // Calculate position with slight randomization const x = col * 64 + Math.random() * 6 - 3; const y = row * 64 + Math.random() * 6 - 3; // Random gray shade for each stone const grayValue = Math.floor(Math.random() * 30 + 50); // 50-80 range for dark grays const stoneColor = `rgb(${grayValue}, ${grayValue}, ${grayValue})`; // Draw the cobblestone stoneCtx.fillStyle = stoneColor; stoneCtx.beginPath(); // Create slightly irregular stone shapes stoneCtx.moveTo(x + Math.random() * 5, y + Math.random() * 5); stoneCtx.lineTo(x + width - Math.random() * 5, y + Math.random() * 5); stoneCtx.lineTo(x + width - Math.random() * 5, y + height - Math.random() * 5); stoneCtx.lineTo(x + Math.random() * 5, y + height - Math.random() * 5); stoneCtx.closePath(); stoneCtx.fill(); // Add cracks and texture details stoneCtx.strokeStyle = '#333333'; stoneCtx.lineWidth = 1; // Draw 1-3 random cracks per stone const cracks = Math.floor(Math.random() * 3) + 1; for (let c = 0; c < cracks; c++) { stoneCtx.beginPath(); const startX = x + Math.random() * width; const startY = y + Math.random() * height; stoneCtx.moveTo(startX, startY); // Create a jagged crack line let currentX = startX; let currentY = startY; for (let i = 0; i < 3; i++) { currentX += (Math.random() * 20 - 10); currentY += (Math.random() * 20 - 10); stoneCtx.lineTo(currentX, currentY); } stoneCtx.stroke(); } // Add grout/mortar between stones stoneCtx.strokeStyle = '#222222'; stoneCtx.lineWidth = 2; stoneCtx.strokeRect(x, y, width, height); } } // Add weathering and moss effects for (let i = 0; i < 100; i++) { const x = Math.random() * 512; const y = Math.random() * 512; const radius = Math.random() * 10 + 2; // Random between moss green and weathered gray patches const isGreen = Math.random() > 0.7; if (isGreen) { // Moss effect stoneCtx.fillStyle = `rgba(40, 80, 40, ${Math.random() * 0.2 + 0.1})`; } else { // Weathered patches stoneCtx.fillStyle = `rgba(160, 160, 160, ${Math.random() * 0.15 + 0.05})`; } stoneCtx.beginPath(); stoneCtx.arc(x, y, radius, 0, Math.PI * 2); stoneCtx.fill(); } const cobblestoneTexture = new THREE.CanvasTexture(cobblestoneCanvas); cobblestoneTexture.wrapS = cobblestoneTexture.wrapT = THREE.RepeatWrapping; cobblestoneTexture.repeat.set(8, 8); const material = new THREE.MeshStandardMaterial({ map: cobblestoneTexture, roughness: 0.9, metalness: 0.1, bumpMap: cobblestoneTexture, bumpScale: 0.05, envMapIntensity: 0.3 }); 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); // Removed mist effect code // Create black ceiling // 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(0xffffff, 0.00001); // Further reduced intensity for darker atmosphere 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.00005, 250); // Further reduced intensity for deeper darkness ceilingLight.position.set(0, 28, 0); ceilingLight.castShadow = true; scene.add(ceilingLight); const hemiLight = new THREE.HemisphereLight(0x444444, 0x222222, 0.0000125); // Further halved ambient light scene.add(hemiLight); // Removed candle-related code // 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 = []; // Create detailed old stone wall texture const textureSize = 1024; // Larger texture for more detail const canvas = document.createElement('canvas'); canvas.width = textureSize; canvas.height = textureSize; const ctx = canvas.getContext('2d'); // Base background color - aged gray ctx.fillStyle = '#424242'; ctx.fillRect(0, 0, textureSize, textureSize); // Create stone block pattern with varied sizes const blockSizes = [{ width: 96, height: 64 }, // Large blocks { width: 64, height: 48 }, // Medium blocks { width: 48, height: 32 } // Small blocks ]; // Draw stone blocks with varied colors and textures for (let y = 0; y < textureSize; y += Math.floor(Math.random() * 16) + 48) { for (let x = 0; x < textureSize; x += Math.floor(Math.random() * 20) + 76) { // Select random block size const blockSize = blockSizes[Math.floor(Math.random() * blockSizes.length)]; const width = blockSize.width + Math.floor(Math.random() * 16) - 8; const height = blockSize.height + Math.floor(Math.random() * 12) - 6; // Create slightly varied position to make edges irregular const blockX = x + Math.floor(Math.random() * 6) - 3; const blockY = y + Math.floor(Math.random() * 6) - 3; // Random stone color variations const grayBase = Math.floor(Math.random() * 30) + 55; // 55-85 range const redTint = grayBase + Math.floor(Math.random() * 15) - 7; const greenTint = grayBase + Math.floor(Math.random() * 10) - 5; const blueTint = grayBase + Math.floor(Math.random() * 10) - 10; const stoneColor = `rgb(${redTint}, ${greenTint}, ${blueTint})`; // Draw the stone block ctx.fillStyle = stoneColor; ctx.fillRect(blockX, blockY, width, height); // Add texture to each stone for (let i = 0; i < 15; i++) { const speckX = blockX + Math.random() * width; const speckY = blockY + Math.random() * height; const speckSize = Math.random() * 3 + 1; const speckOpacity = Math.random() * 0.15 + 0.05; ctx.fillStyle = `rgba(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${speckOpacity})`; ctx.beginPath(); ctx.arc(speckX, speckY, speckSize, 0, Math.PI * 2); ctx.fill(); } // Add cracks to some stones (30% chance) if (Math.random() < 0.3) { ctx.strokeStyle = `rgba(30, 30, 30, 0.7)`; ctx.lineWidth = 1; ctx.beginPath(); const startX = blockX + Math.random() * (width / 4); const startY = blockY + Math.random() * height; ctx.moveTo(startX, startY); // Create jagged crack let currentX = startX; let currentY = startY; const crackSegments = Math.floor(Math.random() * 3) + 2; for (let c = 0; c < crackSegments; c++) { currentX += Math.random() * (width / 3) + (width / 6); currentY += (Math.random() * height / 2) - (height / 4); ctx.lineTo(currentX, currentY); } ctx.stroke(); } } } // Add mortar between stones ctx.strokeStyle = '#313131'; ctx.lineWidth = 3; // Horizontal mortar lines with slight variations for (let y = 0; y < textureSize; y += 48 + Math.floor(Math.random() * 16)) { ctx.beginPath(); ctx.moveTo(0, y); // Create wavy mortar line for (let x = 0; x < textureSize; x += 20) { const waviness = Math.random() * 4 - 2; ctx.lineTo(x, y + waviness); } ctx.stroke(); } // Vertical mortar lines with variations for (let x = 0; x < textureSize; x += 80 + Math.floor(Math.random() * 20)) { ctx.beginPath(); ctx.moveTo(x, 0); // Create wavy mortar line for (let y = 0; y < textureSize; y += 20) { const waviness = Math.random() * 4 - 2; ctx.lineTo(x + waviness, y); } ctx.stroke(); } // Add weathering and moss effects for (let i = 0; i < 300; i++) { const x = Math.random() * textureSize; const y = Math.random() * textureSize; const radius = Math.random() * 8 + 2; const isGreen = Math.random() > 0.7; if (isGreen) { // Moss effect ctx.fillStyle = `rgba(40, 80, 40, ${Math.random() * 0.2 + 0.1})`; } else { // Weathered patches ctx.fillStyle = `rgba(200, 200, 200, ${Math.random() * 0.15 + 0.05})`; } ctx.beginPath(); ctx.arc(x, y, radius, 0, Math.PI * 2); ctx.fill(); } // Create texture from canvas const stoneTexture = new THREE.CanvasTexture(canvas); stoneTexture.wrapS = THREE.RepeatWrapping; stoneTexture.wrapT = THREE.RepeatWrapping; stoneTexture.repeat.set(2, 4); // Adjust for wall height // Create bump map for 3D texture effect const bumpCanvas = document.createElement('canvas'); bumpCanvas.width = textureSize; bumpCanvas.height = textureSize; const bumpCtx = bumpCanvas.getContext('2d'); // Copy main texture to bump map and adjust contrast bumpCtx.drawImage(canvas, 0, 0); bumpCtx.fillStyle = 'rgba(0, 0, 0, 0.4)'; bumpCtx.fillRect(0, 0, textureSize, textureSize); // Create the bump texture const bumpTexture = new THREE.CanvasTexture(bumpCanvas); bumpTexture.wrapS = THREE.RepeatWrapping; bumpTexture.wrapT = THREE.RepeatWrapping; bumpTexture.repeat.set(2, 4); const wallMaterial = new THREE.MeshStandardMaterial({ map: stoneTexture, bumpMap: bumpTexture, bumpScale: 0.15, roughness: 0.9, metalness: 0.1, envMapIntensity: 0.7 }); // Delete these lines as they are now handled above 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; // Create detailed old stone wall texture const textureSize = 1024; // Larger texture for more detail const canvas = document.createElement('canvas'); canvas.width = textureSize; canvas.height = textureSize; const ctx = canvas.getContext('2d'); // Base background color - aged gray ctx.fillStyle = '#424242'; ctx.fillRect(0, 0, textureSize, textureSize); // Create stone block pattern with varied sizes const blockSizes = [{ width: 96, height: 64 }, // Large blocks { width: 64, height: 48 }, // Medium blocks { width: 48, height: 32 } // Small blocks ]; // Draw stone blocks with varied colors and textures for (let y = 0; y < textureSize; y += Math.floor(Math.random() * 16) + 48) { for (let x = 0; x < textureSize; x += Math.floor(Math.random() * 20) + 76) { // Select random block size const blockSize = blockSizes[Math.floor(Math.random() * blockSizes.length)]; const width = blockSize.width + Math.floor(Math.random() * 16) - 8; const height = blockSize.height + Math.floor(Math.random() * 12) - 6; // Create slightly varied position to make edges irregular const blockX = x + Math.floor(Math.random() * 6) - 3; const blockY = y + Math.floor(Math.random() * 6) - 3; // Random stone color variations const grayBase = Math.floor(Math.random() * 30) + 55; // 55-85 range const redTint = grayBase + Math.floor(Math.random() * 15) - 7; const greenTint = grayBase + Math.floor(Math.random() * 10) - 5; const blueTint = grayBase + Math.floor(Math.random() * 10) - 10; const stoneColor = `rgb(${redTint}, ${greenTint}, ${blueTint})`; // Draw the stone block ctx.fillStyle = stoneColor; ctx.fillRect(blockX, blockY, width, height); // Add texture to each stone for (let i = 0; i < 15; i++) { const speckX = blockX + Math.random() * width; const speckY = blockY + Math.random() * height; const speckSize = Math.random() * 3 + 1; const speckOpacity = Math.random() * 0.15 + 0.05; ctx.fillStyle = `rgba(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${speckOpacity})`; ctx.beginPath(); ctx.arc(speckX, speckY, speckSize, 0, Math.PI * 2); ctx.fill(); } // Add cracks to some stones (30% chance) if (Math.random() < 0.3) { ctx.strokeStyle = `rgba(30, 30, 30, 0.7)`; ctx.lineWidth = 1; ctx.beginPath(); const startX = blockX + Math.random() * (width / 4); const startY = blockY + Math.random() * height; ctx.moveTo(startX, startY); // Create jagged crack let currentX = startX; let currentY = startY; const crackSegments = Math.floor(Math.random() * 3) + 2; for (let c = 0; c < crackSegments; c++) { currentX += Math.random() * (width / 3) + (width / 6); currentY += (Math.random() * height / 2) - (height / 4); ctx.lineTo(currentX, currentY); } ctx.stroke(); } } } // Add mortar between stones ctx.strokeStyle = '#313131'; ctx.lineWidth = 3; // Horizontal mortar lines with slight variations for (let y = 0; y < textureSize; y += 48 + Math.floor(Math.random() * 16)) { ctx.beginPath(); ctx.moveTo(0, y); // Create wavy mortar line for (let x = 0; x < textureSize; x += 20) { const waviness = Math.random() * 4 - 2; ctx.lineTo(x, y + waviness); } ctx.stroke(); } // Vertical mortar lines with variations for (let x = 0; x < textureSize; x += 80 + Math.floor(Math.random() * 20)) { ctx.beginPath(); ctx.moveTo(x, 0); // Create wavy mortar line for (let y = 0; y < textureSize; y += 20) { const waviness = Math.random() * 4 - 2; ctx.lineTo(x + waviness, y); } ctx.stroke(); } // Add weathering and moss effects for (let i = 0; i < 300; i++) { const x = Math.random() * textureSize; const y = Math.random() * textureSize; const radius = Math.random() * 8 + 2; const isGreen = Math.random() > 0.7; if (isGreen) { // Moss effect ctx.fillStyle = `rgba(40, 80, 40, ${Math.random() * 0.2 + 0.1})`; } else { // Weathered patches ctx.fillStyle = `rgba(200, 200, 200, ${Math.random() * 0.15 + 0.05})`; } ctx.beginPath(); ctx.arc(x, y, radius, 0, Math.PI * 2); ctx.fill(); } // Create texture from canvas const stoneTexture = new THREE.CanvasTexture(canvas); stoneTexture.wrapS = THREE.RepeatWrapping; stoneTexture.wrapT = THREE.RepeatWrapping; stoneTexture.repeat.set(2, 4); // Create bump map for 3D texture effect const bumpCanvas = document.createElement('canvas'); bumpCanvas.width = textureSize; bumpCanvas.height = textureSize; const bumpCtx = bumpCanvas.getContext('2d'); // Copy main texture to bump map and adjust contrast bumpCtx.drawImage(canvas, 0, 0); bumpCtx.fillStyle = 'rgba(0, 0, 0, 0.4)'; bumpCtx.fillRect(0, 0, textureSize, textureSize); // Create the bump texture const bumpTexture = new THREE.CanvasTexture(bumpCanvas); bumpTexture.wrapS = THREE.RepeatWrapping; bumpTexture.wrapT = THREE.RepeatWrapping; bumpTexture.repeat.set(2, 4); // Create wall material with improved properties const perimeterWallMaterial = new THREE.MeshStandardMaterial({ map: stoneTexture, bumpMap: bumpTexture, bumpScale: 0.15, roughness: 0.9, metalness: 0.1, envMapIntensity: 0.7 }); // 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, perimeterWallMaterial); 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, perimeterWallMaterial); 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, perimeterWallMaterial); 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, perimeterWallMaterial); 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(); const time = Date.now() * 0.001; // Current time in seconds // Update blur effect if (isBlurred) { const currentTime = Date.now(); if (currentTime >= blurEndTime) { // End blur effect blurPass.enabled = false; isBlurred = false; } else { // Calculate remaining blur time percentage const timeLeft = (blurEndTime - currentTime) / 20000; // Gradually reduce blur amount blurPass.uniforms.blurAmount.value = timeLeft * 2.0; } } // Animate torch if it exists if (torch) { torch.position.y = torch.userData.initialY + Math.sin(time * 2) * 0.3; torch.rotation.y += torch.userData.rotationSpeed; } // Update guiding beam if torch is collected if (hasTorch) { updateGuidingBeam(); } // Removed candle animation code // Removed mist animation update code if (assetsLoaded && gameStarted && !isGameOver) { // Update ghost animations - simple floating only if (slenderman && slenderman.userData.isGhost) { // Simple gentle floating animation const floatY = Math.sin(time * 0.5 + slenderman.userData.floatOffset) * 0.5; slenderman.position.y = 6 + floatY; // Gentle floating up and down // Maintain higher translucency slenderman.material.opacity = 0.4; // Always face the camera (billboarding) slenderman.lookAt(camera.position); } // Second ghost animation - simple floating only if (slenderman2 && slenderman2.userData.isGhost) { // Simple gentle floating animation const floatY = Math.sin(time * 0.4 + slenderman2.userData.floatOffset) * 0.5; slenderman2.position.y = 6 + floatY; // Maintain higher translucency slenderman2.material.opacity = 0.4; // Always face the camera (billboarding) slenderman2.lookAt(camera.position); } // Third ghost animation - simple floating only if (slenderman3 && slenderman3.userData.isGhost) { // Simple gentle floating animation const floatY = Math.sin(time * 0.3 + slenderman3.userData.floatOffset) * 0.5; slenderman3.position.y = 6 + floatY; // Maintain higher translucency slenderman3.material.opacity = 0.4; // Always face the camera (billboarding) slenderman3.lookAt(camera.position); } // Move ghosts towards player with wall avoidance if (slenderman && !isInPortal) { // Only move if player hasn't entered portal const ghostSpeed = moveSpeed * 0.7; // Increased ghost speed const directionToPlayer = new THREE.Vector3( player.position.x - slenderman.position.x, 0, player.position.z - slenderman.position.z ).normalize(); // Calculate distance to player for Ghost 1 const distanceToPlayer1 = slenderman.position.distanceTo(player.position); // Check if Ghost 1 is within 20 feet to play rat scream sound if (distanceToPlayer1 <= 20 && ratScreamBuffer && audioContext) { const currentTime = Date.now(); // Only play the rat scream if cooldown has passed if (currentTime - lastGhost1ScreamTime > ghost1ScreamCooldown) { playSound(ratScreamBuffer, 0.9, 0.6); // 60% reverb for haunting effect lastGhost1ScreamTime = currentTime; } } // Calculate next position const nextPosition = new THREE.Vector3( slenderman.position.x + directionToPlayer.x * ghostSpeed, slenderman.position.y, // Maintain current Y with floating animation slenderman.position.z + directionToPlayer.z * ghostSpeed ); // Only check distance to player, ignore walls const distanceToPlayer = nextPosition.distanceTo(player.position); // Check if Slenderman is close enough to trigger game over (3 feet distance) if (distanceToPlayer <= 3) { // Create and play scream sound if (audioContext && screamBuffer && reverbNode) { try { playSound(screamBuffer, 1.0, 0.7); // Heavy reverb on jump scare 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 ); // Ghost doesn't need Y-axis rotation as it always faces camera } // Move second ghost (15% slower than first) if (slenderman2 && !isInPortal) { const ghostSpeed = moveSpeed * 0.6 * 0.7; // 15% slower than first ghost const directionToPlayer = new THREE.Vector3( player.position.x - slenderman2.position.x, 0, player.position.z - slenderman2.position.z ).normalize(); // Calculate next position const nextPosition = new THREE.Vector3( slenderman2.position.x + directionToPlayer.x * ghostSpeed, slenderman2.position.y, // Maintain current Y with floating animation slenderman2.position.z + directionToPlayer.z * ghostSpeed ); // Only check distance to player, ignore walls const distanceToPlayer = nextPosition.distanceTo(player.position); // Check if Ghost 2 is within 10 feet to play zombie breathing sound if (distanceToPlayer <= 10 && zombieBreathBuffer && audioContext) { const currentTime = Date.now(); // Only play the breathing if cooldown has passed if (currentTime - lastGhost2BreathTime > ghost2BreathCooldown) { playSound(zombieBreathBuffer, 0.8, 0.75); // Extra reverb for zombie breath lastGhost2BreathTime = currentTime; } } // Check if second ghost is close enough to trigger game over (3 feet distance) if (distanceToPlayer <= 3) { // 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); } catch (error) { console.error('Error playing scream sound:', error); } } showJumpScare(); } else { // Keep second ghost 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)); slenderman2.position.copy(nextPosition); } } // Move third ghost (25% slower than second ghost) if (slenderman3 && !isInPortal) { const ghostSpeed = moveSpeed * 0.6 * 0.85 * 0.7; // 25% slower than second ghost const directionToPlayer = new THREE.Vector3( player.position.x - slenderman3.position.x, 0, player.position.z - slenderman3.position.z ).normalize(); // Calculate next position const nextPosition = new THREE.Vector3( slenderman3.position.x + directionToPlayer.x * ghostSpeed, slenderman3.position.y, // Maintain current Y with floating animation slenderman3.position.z + directionToPlayer.z * ghostSpeed ); // Only check distance to player, ignore walls const distanceToPlayer = nextPosition.distanceTo(player.position); // Check if Ghost 3 is within 10 feet to play female scream if (distanceToPlayer <= 10 && femaleScreamBuffer && audioContext) { const currentTime = Date.now(); // Only play the scream if cooldown has passed if (currentTime - lastGhost3ScreamTime > ghost3ScreamCooldown) { playSound(femaleScreamBuffer, 0.7, 0.8); // Maximum reverb for distant female scream lastGhost3ScreamTime = currentTime; } } // Check if third ghost is close enough to trigger game over (3 feet distance) if (distanceToPlayer <= 3) { // 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); } catch (error) { console.error('Error playing scream sound:', error); } } showJumpScare(); } else { // Keep third ghost 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)); slenderman3.position.copy(nextPosition); } } // No ghost effects animation 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?kO9B'; break; case 'down': iconUrl = 'https://play.rosebud.ai/assets/down_chevron.png?pUxU'; break; case 'left': iconUrl = 'https://play.rosebud.ai/assets/left_chevron.png?OSxc'; break; case 'right': iconUrl = 'https://play.rosebud.ai/assets/right_chevron.png?NkCl'; 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?2UL6')`; 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?2UL6'); /* 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 (!player.isJumping) playFootstepSound(); } if (keysPressed.down) { player.velocity.add(forward.multiplyScalar(moveSpeed)); if (!player.isJumping) playFootstepSound(); } // Left/Right if (keysPressed.left) { player.velocity.add(right.multiplyScalar(-moveSpeed)); if (!player.isJumping) playFootstepSound(); } if (keysPressed.right) { player.velocity.add(right.multiplyScalar(moveSpeed)); if (!player.isJumping) playFootstepSound(); } } // 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 ); }