import * as THREE from 'three'; import * as TWEEN from 'three/addons/libs/tween.module.js'; // Rain system configuration const RAIN_COUNT = 15000; const RAIN_COLOR = 0xaaaaaa; const RAIN_SIZE = 0.2; // Increased base size const RAIN_SPEED = 20; import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import * as CANNON from 'https://cdn.jsdelivr.net/npm/cannon-es@0.20.0/+esm'; import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'; import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'; import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js'; import { SMAAPass } from 'three/addons/postprocessing/SMAAPass.js'; // Initialize game state variables let gamepads = {}; let raceStarted = false; let goatEliminationStarted = false; let laserActive = false; let playerLives = 6; let eliminatedThisRedLight = false; let lifeWarningDisplay = null; let currentRedLightMistakes = 0; let maxMistakesPerRedLight = 2; let gameTimer = 180; // 3 minutes in seconds let gameTimerInterval = null; let timerDisplay = null; const playerVelocity = new THREE.Vector3(0, 0, 0); const keysPressed = { up: false, down: false, left: false, right: false, jump: false, ArrowUp: false, ArrowDown: false, ArrowLeft: false, ArrowRight: false, KeyW: false, KeyS: false, KeyA: false, KeyD: false, Space: false }; let isGrounded = true; let eliminationQueue = []; let isProcessingElimination = false; const ELIMINATION_DELAY = 2000; // 2 seconds between eliminations const MAX_ELIMINATIONS_PER_RED_LIGHT = 999; // No limit on eliminations per red light let currentRedLightEliminations = 0; let isBeingEliminated = false; let eliminationTimer = 0; let lastPlayerPosition = null; let eliminationsThisRedLight = 0; let isSignFullyVisible = false; let hasWon = false; let gameRunning = true; let redLightSign = null; let greenLightSign = null; const ELIMINATION_DURATION = 2000; // 2 seconds for elimination effect // Initialize loading manager const loadingManager = new THREE.LoadingManager(); const textureLoader = new THREE.TextureLoader(loadingManager); const gltfLoader = new GLTFLoader(loadingManager); let assetsLoaded = false; // Preload title menu background GIF const titleGif = new Image(); titleGif.src = 'https://play.rosebud.ai/assets/titlemenubackgroundimage.gif?eHwc'; loadingManager.itemStart('titleGif'); // Register GIF with loading manager titleGif.onload = () => loadingManager.itemEnd('titleGif'); titleGif.onerror = () => loadingManager.itemError('titleGif'); let creepyGoat; let goatHead; let npcs = []; let npcMixers = []; let particleSystems = []; // NPC AI Configuration const NPC_BEHAVIORS = { CAUTIOUS: { moveSpeed: 3, reactionTime: 0.2, mistakeChance: 0.001, // More cautious stopDistance: 2, eliminationChance: 0.2, mistakeSpeed: 0.15 }, NORMAL: { moveSpeed: 5, reactionTime: 0.4, mistakeChance: 0.008, // More mistakes than before stopDistance: 1, eliminationChance: 0.4, mistakeSpeed: 0.3 }, RISKY: { moveSpeed: 7, reactionTime: 0.6, mistakeChance: 0.02, // Significantly more risky stopDistance: 0.5, eliminationChance: 0.6, mistakeSpeed: 0.5 } }; let finishLineFog; // Create finish line fog function createFinishLineFog() { const particleCount = 1000; const geometry = new THREE.BufferGeometry(); const positions = new Float32Array(particleCount * 3); // Create particles in a line formation at finish line for (let i = 0; i < particleCount; i++) { positions[i * 3] = (Math.random() - 0.5) * 100; // Width of finish line positions[i * 3 + 1] = Math.random() * 10; // Height up to 10 units positions[i * 3 + 2] = FINISH_LINE_Z + (Math.random() - 0.5) * 5; // Z position using finish line constant } geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); const material = new THREE.PointsMaterial({ color: 0xff0000, size: 2, transparent: true, opacity: 0.3, blending: THREE.AdditiveBlending, depthWrite: false }); finishLineFog = new THREE.Points(geometry, material); scene.add(finishLineFog); } // Create particle effect function function createVanishEffect(position) { const particleCount = 100; const geometry = new THREE.BufferGeometry(); const positions = new Float32Array(particleCount * 3); const velocities = []; for (let i = 0; i < particleCount; i++) { positions[i * 3] = position.x; positions[i * 3 + 1] = position.y + 2.5; // Start at middle of NPC height positions[i * 3 + 2] = position.z; // Random velocity for each particle velocities.push({ x: (Math.random() - 0.5) * 0.5, y: Math.random() * 0.5, z: (Math.random() - 0.5) * 0.5 }); } geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); const material = new THREE.PointsMaterial({ color: 0xff0000, size: 0.2, transparent: true, opacity: 1 }); const particles = new THREE.Points(geometry, material); scene.add(particles); particleSystems.push({ mesh: particles, velocities: velocities, life: 1.0 // Life time of particle effect }); } const NPC_MODELS = [ 'https://play.rosebud.ai/assets/Animation_Walking_withSkin.glb?cpOM', 'https://play.rosebud.ai/assets/Animation_Walking_Woman_withSkin.glb?2F8J', 'https://play.rosebud.ai/assets/Animation_RunFast_withSkin.glb?2PdW' ]; // Create title menu function function showTitleMenu() { const titleMenu = document.createElement('div'); titleMenu.style.position = 'fixed'; titleMenu.style.top = '0'; titleMenu.style.left = '0'; titleMenu.style.width = '100%'; titleMenu.style.height = '100%'; titleMenu.style.backgroundImage = "url('https://play.rosebud.ai/assets/titlemenubackgroundimage.gif?eHwc')"; titleMenu.style.backgroundSize = 'cover'; titleMenu.style.backgroundPosition = 'center'; titleMenu.style.backgroundColor = 'rgba(0, 0, 0, 0.7)'; titleMenu.style.display = 'flex'; titleMenu.style.flexDirection = 'column'; titleMenu.style.justifyContent = 'center'; titleMenu.style.alignItems = 'center'; titleMenu.style.zIndex = '1000'; // Create title // Create game jam text const jamText = document.createElement('h2'); jamText.textContent = 'BCART HORROR GAME JAM 2025!'; jamText.style.color = '#ff0000'; jamText.style.fontSize = '32px'; jamText.style.marginBottom = '60px'; jamText.style.fontWeight = 'bold'; jamText.style.textShadow = '0 0 8px #ff0000'; // Create main title const title = document.createElement('h1'); title.textContent = 'COME TO HELL'; title.style.color = '#ff4444'; title.style.fontSize = '72px'; title.style.marginBottom = '20px'; title.style.fontWeight = 'bold'; title.style.textShadow = '0 0 15px #ff0000'; title.style.animation = 'titlePulse 2s infinite'; // Create credit text const creditText = document.createElement('p'); creditText.textContent = 'CREATED BY BRAIN JOOSE'; creditText.style.color = '#ff9999'; creditText.style.fontSize = '24px'; creditText.style.marginBottom = '60px'; creditText.style.fontWeight = 'bold'; creditText.style.textShadow = '0 0 5px #ff0000'; // Create start button const startButton = document.createElement('button'); startButton.textContent = 'Start Game'; startButton.style.padding = '20px 40px'; startButton.style.fontSize = '24px'; startButton.style.backgroundColor = '#4CAF50'; startButton.style.color = 'white'; startButton.style.border = 'none'; startButton.style.borderRadius = '5px'; startButton.style.cursor = 'pointer'; startButton.style.marginBottom = '20px'; startButton.style.transition = 'all 0.3s ease'; // Create how to play button const howToPlayButton = document.createElement('button'); howToPlayButton.textContent = 'How to Play'; howToPlayButton.style.padding = '15px 30px'; howToPlayButton.style.fontSize = '20px'; howToPlayButton.style.backgroundColor = '#2196F3'; howToPlayButton.style.color = 'white'; howToPlayButton.style.border = 'none'; howToPlayButton.style.borderRadius = '5px'; howToPlayButton.style.cursor = 'pointer'; howToPlayButton.style.transition = 'all 0.3s ease'; // Add hover effects startButton.addEventListener('mouseenter', () => { startButton.style.transform = 'scale(1.1)'; startButton.style.backgroundColor = '#45a049'; }); startButton.addEventListener('mouseleave', () => { startButton.style.transform = 'scale(1)'; startButton.style.backgroundColor = '#4CAF50'; }); howToPlayButton.addEventListener('mouseenter', () => { howToPlayButton.style.transform = 'scale(1.1)'; howToPlayButton.style.backgroundColor = '#1976D2'; }); howToPlayButton.addEventListener('mouseleave', () => { howToPlayButton.style.transform = 'scale(1)'; howToPlayButton.style.backgroundColor = '#2196F3'; }); // Add button functionality startButton.addEventListener('click', () => { // Play start sound first if (startSound) { startSound.currentTime = 0; try { startSound.play().catch(console.error); } catch (error) { console.error("Start sound playback error:", error); } } // Start background music immediately if (backgroundMusic) { backgroundMusic.currentTime = 0; backgroundMusic.loop = true; try { const playPromise = backgroundMusic.play(); if (playPromise !== undefined) { playPromise.catch(error => { console.error("Playback failed:", error); // Retry playback once setTimeout(() => { backgroundMusic.play().catch(console.error); }, 100); }); } } catch (error) { console.error("Audio playback error:", error); } } // Fade out title menu titleMenu.style.opacity = '1'; let opacity = 1; const fadeInterval = setInterval(() => { opacity -= 0.05; titleMenu.style.opacity = opacity; if (opacity <= 0) { clearInterval(fadeInterval); document.body.removeChild(titleMenu); startGame(); } }, 20); }); howToPlayButton.addEventListener('click', () => { showHowToPlay(); }); // Add elements to menu titleMenu.appendChild(jamText); titleMenu.appendChild(title); titleMenu.appendChild(creditText); titleMenu.appendChild(startButton); titleMenu.appendChild(howToPlayButton); // Create copyright text const copyrightText = document.createElement('div'); copyrightText.textContent = 'All assets owned and created by Brain Joose'; copyrightText.style.position = 'absolute'; copyrightText.style.bottom = '10px'; copyrightText.style.right = '10px'; copyrightText.style.color = '#ffff00'; copyrightText.style.fontSize = '12px'; copyrightText.style.fontStyle = 'italic'; copyrightText.style.textShadow = '1px 1px 2px rgba(0, 0, 0, 0.8)'; titleMenu.appendChild(copyrightText); // Add animation styles const style = document.createElement('style'); style.textContent = ` @keyframes titlePulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } `; document.head.appendChild(style); // Add menu to document document.body.appendChild(titleMenu); } // Create how to play screen function showHowToPlay() { const howToPlay = document.createElement('div'); howToPlay.style.position = 'fixed'; howToPlay.style.top = '0'; howToPlay.style.left = '0'; howToPlay.style.width = '100%'; howToPlay.style.height = '100%'; howToPlay.style.backgroundColor = 'rgba(0, 0, 0, 0.95)'; howToPlay.style.display = 'flex'; howToPlay.style.flexDirection = 'column'; howToPlay.style.justifyContent = 'center'; howToPlay.style.alignItems = 'center'; howToPlay.style.zIndex = '1001'; // Add click handler to close on background click howToPlay.addEventListener('click', (event) => { if (event.target === howToPlay) { document.body.removeChild(howToPlay); } }); const content = document.createElement('div'); content.style.color = 'white'; content.style.textAlign = 'center'; content.style.maxWidth = '600px'; content.style.padding = '20px'; content.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; content.style.borderRadius = '10px'; content.style.boxShadow = '0 0 20px rgba(255, 255, 255, 0.1)'; const title = document.createElement('h2'); title.textContent = 'How to Play'; title.style.color = '#4CAF50'; title.style.fontSize = '36px'; title.style.marginBottom = '20px'; const instructions = document.createElement('div'); instructions.innerHTML = `

🚦 Move forward when the light is GREEN, but FREEZE when it turns RED!

🎮 Controls:
Keyboard: W or ↑ - Move Forward, SPACE - Jump
Controller: D-pad/Left Stick Up - Move Forward, A/X/LB - Jump

⚠️ Warning: Any movement during RED light will result in elimination!

❌ You will lose after being eliminated 6 times or if the timer runs out!

🎯 Goal: Reach the finish line within the time limit without getting caught moving on red light.

`; const backButton = document.createElement('button'); backButton.textContent = 'Back to Menu'; backButton.style.padding = '15px 30px'; backButton.style.fontSize = '20px'; backButton.style.backgroundColor = '#2196F3'; backButton.style.color = 'white'; backButton.style.border = 'none'; backButton.style.borderRadius = '5px'; backButton.style.cursor = 'pointer'; backButton.style.marginTop = '30px'; backButton.style.transition = 'all 0.3s ease'; backButton.addEventListener('mouseenter', () => { backButton.style.transform = 'scale(1.1)'; backButton.style.backgroundColor = '#1976D2'; }); backButton.addEventListener('mouseleave', () => { backButton.style.transform = 'scale(1)'; backButton.style.backgroundColor = '#2196F3'; }); backButton.addEventListener('click', () => { document.body.removeChild(howToPlay); }); content.appendChild(title); content.appendChild(instructions); content.appendChild(backButton); howToPlay.appendChild(content); document.body.appendChild(howToPlay); } // Initialize parent div with proper fallback const parentDiv = document.getElementById('renderDiv') || document.body; let canvas = document.getElementById('threeRenderCanvas'); if (!canvas) { canvas = document.createElement('canvas'); canvas.id = 'threeRenderCanvas'; parentDiv.appendChild(canvas); } // Create loading screen const loadingScreen = document.createElement('div'); loadingScreen.style.position = 'absolute'; loadingScreen.style.top = '0'; loadingScreen.style.left = '0'; loadingScreen.style.width = '100%'; loadingScreen.style.height = '100%'; loadingScreen.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; loadingScreen.style.color = 'white'; loadingScreen.style.display = 'flex'; loadingScreen.style.flexDirection = 'column'; loadingScreen.style.justifyContent = 'center'; loadingScreen.style.alignItems = 'center'; loadingScreen.style.fontSize = '24px'; // Create loading text const loadingText = document.createElement('div'); loadingText.style.marginBottom = '20px'; loadingText.innerHTML = 'Loading Game Assets... 0%'; loadingScreen.appendChild(loadingText); // Create progress bar container const progressContainer = document.createElement('div'); progressContainer.style.width = '200px'; progressContainer.style.height = '20px'; progressContainer.style.backgroundColor = 'rgba(255, 255, 255, 0.2)'; progressContainer.style.borderRadius = '10px'; progressContainer.style.overflow = 'hidden'; // Create progress bar const progressBar = document.createElement('div'); progressBar.style.width = '0%'; progressBar.style.height = '100%'; progressBar.style.backgroundColor = '#4CAF50'; progressBar.style.transition = 'width 0.3s ease-in-out'; progressContainer.appendChild(progressBar); loadingScreen.appendChild(progressContainer); // Ensure parent div exists before appending if (parentDiv) { parentDiv.appendChild(loadingScreen); } // Initialize sound variables let backgroundMusic, redLightSound, greenLightSound, killSound, startSound, winSound, loseSound, demonicScream; // Loading manager events // Loading manager configuration loadingManager.onStart = function(url, itemsLoaded, itemsTotal) { console.log('Started loading assets'); }; loadingManager.onProgress = function(url, itemsLoaded, itemsTotal) { const progress = ((itemsLoaded / itemsTotal) * 100).toFixed(0); const assetName = url.split('/').pop().split('?')[0]; loadingText.innerHTML = `Loading Game Assets... ${progress}%
Loading: ${assetName}`; progressBar.style.width = `${progress}%`; }; loadingManager.onError = function(url) { console.error('Error loading asset:', url); loadingText.innerHTML = 'Error loading game assets. Please refresh the page.'; loadingText.style.color = '#ff4444'; }; loadingManager.onLoad = function() { console.log('All assets loaded'); // Initialize sounds first initializeSounds().then(() => { assetsLoaded = true; // Fade out loading screen only after sounds are loaded loadingScreen.style.opacity = '1'; let opacity = 1; const fadeInterval = setInterval(() => { opacity -= 0.05; loadingScreen.style.opacity = opacity; if (opacity <= 0) { clearInterval(fadeInterval); loadingScreen.style.display = 'none'; // Show title menu directly showTitleMenu(); } }, 20); }); // Define sound initialization function async function initializeSounds() { return new Promise((resolve) => { let loadedSounds = 0; const totalSounds = 7; function checkAllSoundsLoaded() { loadedSounds++; if (loadedSounds === totalSounds) { resolve(); } } if (!backgroundMusic) { backgroundMusic = new Audio('https://play.rosebud.ai/assets/Come to Hell.mp3?LBl6'); backgroundMusic.preload = 'auto'; backgroundMusic.volume = 0.15; backgroundMusic.addEventListener('canplaythrough', checkAllSoundsLoaded); backgroundMusic.load(); } if (!killSound) { killSound = new Audio('https://play.rosebud.ai/assets/kill sound.mp3?irqz'); killSound.preload = 'auto'; killSound.addEventListener('canplaythrough', checkAllSoundsLoaded); killSound.load(); } if (!redLightSound) { redLightSound = new Audio('https://play.rosebud.ai/assets/red light sound.mp3?rvmd'); redLightSound.preload = 'auto'; redLightSound.volume = 0.3; redLightSound.addEventListener('canplaythrough', checkAllSoundsLoaded); redLightSound.load(); } if (!greenLightSound) { greenLightSound = new Audio('https://play.rosebud.ai/assets/green light sound.mp3?3IKc'); greenLightSound.preload = 'auto'; greenLightSound.volume = 0.3; greenLightSound.addEventListener('canplaythrough', checkAllSoundsLoaded); greenLightSound.load(); } if (!startSound) { startSound = new Audio('https://play.rosebud.ai/assets/COMBINED-custom-corpse-husband-storytime-Sz5bNIdr.mp3?O3MF'); startSound.preload = 'auto'; startSound.volume = 0.6; startSound.addEventListener('canplaythrough', checkAllSoundsLoaded); startSound.load(); } if (!winSound) { winSound = new Audio('https://play.rosebud.ai/assets/sent to heaven.mp3?phhe'); winSound.preload = 'auto'; winSound.volume = 0.4; winSound.addEventListener('canplaythrough', checkAllSoundsLoaded); winSound.load(); } if (!loseSound) { loseSound = new Audio('https://play.rosebud.ai/assets/you lose.mp3?GoKe'); loseSound.preload = 'auto'; loseSound.volume = 0.4; loseSound.addEventListener('canplaythrough', checkAllSoundsLoaded); loseSound.load(); } if (!demonicScream) { demonicScream = new Audio('https://play.rosebud.ai/assets/demonic-woman-scream-6333.mp3?Gt6c'); demonicScream.preload = 'auto'; demonicScream.volume = 0.5; demonicScream.addEventListener('canplaythrough', checkAllSoundsLoaded); demonicScream.load(); } }); } }; // Initialize the scene const scene = new THREE.Scene(); // Initialize rain let rainGeometry = new THREE.BufferGeometry(); let rainVertices = []; let rainVelocities = []; for (let i = 0; i < RAIN_COUNT; i++) { const x = Math.random() * 400 - 200; const y = Math.random() * 500; const z = Math.random() * 400 - 200; rainVertices.push(x, y, z); rainVelocities.push({ x: (Math.random() - 0.5) * 0.1, // Slight horizontal movement y: -RAIN_SPEED - Math.random() * 5, // Downward speed with variation z: (Math.random() - 0.5) * 0.1 // Slight depth movement }); } // Add size attribute for individual rain drops const sizes = new Float32Array(RAIN_COUNT); for (let i = 0; i < RAIN_COUNT; i++) { sizes[i] = RAIN_SIZE * (0.5 + Math.random() * 0.5); // Varied sizes } rainGeometry.setAttribute('position', new THREE.Float32BufferAttribute(rainVertices, 3)); rainGeometry.setAttribute('size', new THREE.Float32BufferAttribute(sizes, 1)); let rainMaterial = new THREE.PointsMaterial({ color: RAIN_COLOR, size: RAIN_SIZE, transparent: true, opacity: 0.6, fog: true, sizeAttenuation: true // Enable size based on distance }); const rain = new THREE.Points(rainGeometry, rainMaterial); scene.add(rain); // Create finish line const finishLineWidth = 100; const finishLineHeight = 0.5; const finishLineDepth = 15; const finishLineGeometry = new THREE.BoxGeometry(finishLineWidth, finishLineHeight, finishLineDepth); const FINISH_LINE_Z = -180; // Move finish line further back // Create striped pattern for finish line const finishLineCanvas = document.createElement('canvas'); const ctx = finishLineCanvas.getContext('2d'); finishLineCanvas.width = 128; finishLineCanvas.height = 128; ctx.fillStyle = '#ffffff'; ctx.fillRect(0, 0, 128, 128); ctx.fillStyle = '#000000'; for (let i = 0; i < 8; i++) { if (i % 2 === 0) { ctx.fillRect(0, i * 16, 128, 16); } } const finishLineTexture = new THREE.CanvasTexture(finishLineCanvas); finishLineTexture.wrapS = THREE.RepeatWrapping; finishLineTexture.wrapT = THREE.RepeatWrapping; finishLineTexture.repeat.set(10, 1); const finishLineMaterial = new THREE.MeshStandardMaterial({ map: finishLineTexture, roughness: 0.4, metalness: 0.6, emissive: 0xffffff, emissiveIntensity: 0.2, }); const finishLine = new THREE.Mesh(finishLineGeometry, finishLineMaterial); finishLine.position.set(0, 0.25, FINISH_LINE_Z); // Use new finish line position finishLine.receiveShadow = true; finishLine.castShadow = true; scene.add(finishLine); // Create stone wall material const stoneWallMaterial = new THREE.MeshStandardMaterial({ color: 0x808080, roughness: 0.8, metalness: 0.2, }); // Create stone walls (left and right) const wallHeight = 15; const wallLength = 500; // Increase wall length const wallThickness = 5; const wallGeometry = new THREE.BoxGeometry(wallThickness, wallHeight, wallLength); // Left wall const leftWall = new THREE.Mesh(wallGeometry, stoneWallMaterial); leftWall.position.set(-100, wallHeight / 2, 0); leftWall.castShadow = true; leftWall.receiveShadow = true; scene.add(leftWall); // Right wall const rightWall = new THREE.Mesh(wallGeometry, stoneWallMaterial); rightWall.position.set(100, wallHeight / 2, 0); rightWall.castShadow = true; rightWall.receiveShadow = true; scene.add(rightWall); // Back wall to prevent falling off the edge const backWallGeometry = new THREE.BoxGeometry(200, wallHeight, wallThickness); const backWall = new THREE.Mesh(backWallGeometry, stoneWallMaterial); backWall.position.set(0, wallHeight / 2, 250); // Position just behind starting point backWall.castShadow = true; backWall.receiveShadow = true; scene.add(backWall); // Create demon monster background const demonGeometry = new THREE.PlaneGeometry(400, 400); const demonTexture = textureLoader.load('https://play.rosebud.ai/assets/demonmonster.gif?aocP'); demonTexture.encoding = THREE.sRGBEncoding; const demonMaterial = new THREE.MeshBasicMaterial({ map: demonTexture, transparent: false, side: THREE.FrontSide, depthTest: true, depthWrite: true }); const demonMonster = new THREE.Mesh(demonGeometry, demonMaterial); demonMonster.position.set(0, 150, -500); // Position further back from backdrop (-250) demonMonster.rotation.y = 0; // Keep facing forward demonMonster.initialY = 150; // Store initial Y position demonMonster.animationPhase = 0; // Track animation phase demonMonster.isScreaming = false; // Track screaming state demonMonster.lastScreamTime = 0; // Track last scream time demonMonster.screamCooldown = 15000 + Math.random() * 20000; // Random cooldown between screams (15-35 seconds) scene.add(demonMonster); // Create backdrop const backdropGeometry = new THREE.CylinderGeometry(300, 300, 200, 32, 1, true, Math.PI * 0.5, Math.PI); const backdropTexture = textureLoader.load('https://play.rosebud.ai/assets/backdrop.jpg?0nE5'); backdropTexture.encoding = THREE.sRGBEncoding; const backdropMaterial = new THREE.MeshBasicMaterial({ map: backdropTexture, side: THREE.BackSide, transparent: true, opacity: 0.7 // Make backdrop more transparent }); const backdrop = new THREE.Mesh(backdropGeometry, backdropMaterial); backdrop.position.set(0, 50, -250); // Move backdrop further back backdrop.rotation.y = 0; // Rotate to face the players scene.add(backdrop); // Clock for animation const clock = new THREE.Clock(); // Initialize the camera const camera = new THREE.PerspectiveCamera( 75, canvas.offsetWidth / canvas.offsetHeight, 0.1, 1000 ); camera.position.set(0, 7, 240); // Move camera closer to actual terrain edge 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.2, // bloom strength 0.4, // radius 0.9 // threshold ); composer.addPass(bloomPass); // Add anti-aliasing const smaaPass = new SMAAPass( window.innerWidth * renderer.getPixelRatio(), window.innerHeight * renderer.getPixelRatio() ); composer.addPass(smaaPass); // Initialize composer size composer.setSize(parentDiv.clientWidth, parentDiv.clientHeight); // Define sky colors for environmental lighting const skyColor = new THREE.Color(0xff0000); // Bright red sky const groundColor = new THREE.Color(0x990000); // Darker red for 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: new THREE.Color(0xff0000) // Bright red for top of sky }, bottomColor: { value: new THREE.Color(0x990000) // Darker red for horizon }, offset: { value: 33 }, exponent: { value: 0.8 // Increased exponent for more dramatic color gradient }, }; const skyGeo = new THREE.SphereGeometry(600, 32, 15); // Add lightning uniforms const lightningUniforms = { topColor: { value: new THREE.Color(0xff0000) }, bottomColor: { value: new THREE.Color(0x990000) }, offset: { value: 33 }, exponent: { value: 0.8 }, flashIntensity: { value: 0.0 }, time: { value: 0 } }; const skyMat = new THREE.ShaderMaterial({ uniforms: lightningUniforms, vertexShader: vertexShader, fragmentShader: ` uniform vec3 topColor; uniform vec3 bottomColor; uniform float offset; uniform float exponent; uniform float flashIntensity; uniform float time; varying vec3 vWorldPosition; void main() { float h = normalize( vWorldPosition + offset ).y; vec3 baseColor = mix( bottomColor, topColor, max( pow( max( h, 0.0 ), exponent ), 0.0 ) ); // Add lightning effect vec3 lightningColor = vec3(1.0, 1.0, 1.0) * flashIntensity; vec3 finalColor = mix(baseColor, lightningColor, flashIntensity); gl_FragColor = vec4( finalColor, 1.0 ); }`, side: THREE.BackSide, }); const sky = new THREE.Mesh(skyGeo, skyMat); scene.add(sky); // Remove OrbitControls - we don't want the player to rotate the world // Create flat terrain function createTerrain() { const size = 500; // Increase terrain size const geometry = new THREE.PlaneGeometry(size, size); // Load textures const diffuseMap = textureLoader.load('https://play.rosebud.ai/assets/3D_playground_grass_diffuse.png?Gefb'); const normalMap = textureLoader.load('https://play.rosebud.ai/assets/3D_playground_grass_normal.png?XGKY'); // Configure texture repetition diffuseMap.wrapS = diffuseMap.wrapT = THREE.RepeatWrapping; normalMap.wrapS = normalMap.wrapT = THREE.RepeatWrapping; diffuseMap.repeat.set(4, 4); normalMap.repeat.set(4, 4); // Create material with maps const material = new THREE.MeshStandardMaterial({ map: diffuseMap, normalMap: normalMap, normalScale: new THREE.Vector2(1, 1), roughness: 0.8, metalness: 0.2, side: THREE.DoubleSide }); const terrain = new THREE.Mesh(geometry, material); terrain.rotation.x = -Math.PI / 2; terrain.receiveShadow = true; scene.add(terrain); return terrain; } // Setup improved lighting system const sunLight = new THREE.DirectionalLight(0xff3333, 2.0); // Reddish tinted light sunLight.position.set(-50, 100, -50); sunLight.castShadow = true; sunLight.shadow.mapSize.width = 2048; sunLight.shadow.mapSize.height = 2048; sunLight.shadow.camera.near = 10; sunLight.shadow.camera.far = 400; sunLight.shadow.camera.left = -100; sunLight.shadow.camera.right = 100; sunLight.shadow.camera.top = 100; sunLight.shadow.camera.bottom = -100; sunLight.shadow.bias = -0.001; scene.add(sunLight); // Add hemisphere light to simulate sky and ground bounce light const hemiLight = new THREE.HemisphereLight(skyColor, groundColor, 0.6); scene.add(hemiLight); // Lightning manager const lightningManager = { flashIntensity: 0, isFlashing: false, timeSinceLastFlash: 0, minFlashInterval: 2000, maxFlashInterval: 8000, nextFlashTime: 0, update: function(deltaTime) { this.timeSinceLastFlash += deltaTime * 1000; // Check if it's time for a new flash if (!this.isFlashing && this.timeSinceLastFlash >= this.nextFlashTime) { this.startFlash(); } // Update current flash if (this.isFlashing) { // Quick bright flash followed by slower fade if (this.flashIntensity > 0) { this.flashIntensity *= 0.7; if (this.flashIntensity < 0.01) { this.flashIntensity = 0; this.isFlashing = false; this.setNextFlashTime(); } } // Update shader uniforms lightningUniforms.flashIntensity.value = this.flashIntensity; // Affect hemisphere light intensity hemiLight.intensity = 0.6 + this.flashIntensity * 0.4; } }, startFlash: function() { this.isFlashing = true; this.flashIntensity = 0.8 + Math.random() * 0.2; // Random intensity this.timeSinceLastFlash = 0; }, setNextFlashTime: function() { this.nextFlashTime = this.minFlashInterval + Math.random() * (this.maxFlashInterval - this.minFlashInterval); } }; // Initialize first flash time lightningManager.setNextFlashTime(); // Create initial scene const terrain = createTerrain(); createFinishLineFog(); // Create light signs function createLightSigns() { const signGeometry = new THREE.PlaneGeometry(20, 20); // Doubled size // Create red light sign with glow effect const redLightTexture = textureLoader.load('https://play.rosebud.ai/assets/red light.png?BAX9'); const redLightMaterial = new THREE.MeshStandardMaterial({ map: redLightTexture, transparent: true, opacity: 0, emissive: new THREE.Color(0xff0000), // Red glow emissiveIntensity: 0.8, emissiveMap: redLightTexture // Use same texture for glow }); redLightSign = new THREE.Mesh(signGeometry, redLightMaterial); redLightSign.position.set(0, 20, FINISH_LINE_Z - 20); // Higher position scene.add(redLightSign); // Create green light sign with glow effect const greenLightTexture = textureLoader.load('https://play.rosebud.ai/assets/green light.png?FLbt'); const greenLightMaterial = new THREE.MeshStandardMaterial({ map: greenLightTexture, transparent: true, opacity: 0, emissive: new THREE.Color(0x00ff00), // Green glow emissiveIntensity: 0.8, emissiveMap: greenLightTexture // Use same texture for glow }); greenLightSign = new THREE.Mesh(signGeometry, greenLightMaterial); greenLightSign.position.set(0, 20, FINISH_LINE_Z - 20); // Higher position scene.add(greenLightSign); } // Call createLightSigns after scene initialization createLightSigns(); // Initialize green light to be visible first (since game starts with green light) if (greenLightSign) { greenLightSign.material.opacity = 1; } // Load and setup creepy goat gltfLoader.load('https://play.rosebud.ai/assets/Creepy Goat.glb?3W9X', (gltf) => { creepyGoat = gltf.scene; creepyGoat.scale.set(8, 8, 8); creepyGoat.position.set(0, 2, FINISH_LINE_Z - 10); // Position goat closer to finish line creepyGoat.rotation.y = Math.PI; // Initially facing towards backdrop (away from players) // Find the head bone/mesh creepyGoat.traverse((object) => { if (object.isMesh && object.name.toLowerCase().includes('head')) { goatHead = object; } }); scene.add(creepyGoat); }); // Setup NPCs in 3x3 grid formation function setupNPCs() { const startZ = 230; // Starting Z position const spacing = 15; // Base spacing const rows = 3; const cols = 6; // More NPCs for denser side placement for (let row = 0; row < rows; row++) { for (let col = 0; col < cols; col++) { const modelIndex = Math.floor(Math.random() * NPC_MODELS.length); const modelUrl = NPC_MODELS[modelIndex]; gltfLoader.load(modelUrl, (gltf) => { const npc = gltf.scene; // Make running animation NPCs slightly faster if (modelUrl.includes('RunFast') || modelUrl.includes('Running')) { npc.speedMultiplier = 1.3; // 30% faster } else { npc.speedMultiplier = 1.0; } // Position NPCs with varied side distances const side = col < cols / 2 ? -1 : 1; let x; if (col % 3 === 0) { // Place close to player x = side * (15 + Math.random() * 10); } else if (col % 3 === 1) { // Place at medium distance x = side * (30 + Math.random() * 15); } else { // Place far from player x = side * (50 + Math.random() * 20); } const z = startZ - (row * spacing) + (Math.random() * 5 - 2.5); // Store initial position npc.startPosition = { x: x, y: 0, z: z }; npc.position.set(x, 0, z); npc.scale.set(5, 5, 5); npc.rotation.y = Math.PI; // Assign random behavior type to NPC const behaviors = Object.keys(NPC_BEHAVIORS); const randomBehavior = behaviors[Math.floor(Math.random() * behaviors.length)]; npc.behavior = { ...NPC_BEHAVIORS[randomBehavior] }; // Increase mistake chance for all NPCs to ensure more consistent eliminations npc.behavior.mistakeChance *= 2; // Increase mistake chance for some NPCs if (Math.random() < 0.4) { // 40% of NPCs will be more prone to mistakes npc.behavior = { ...npc.behavior, mistakeChance: npc.behavior.mistakeChance * 1.5, mistakeSpeed: npc.behavior.mistakeSpeed * 1.2 }; } // Add AI properties npc.reactionTimer = 0; npc.isReacting = false; npc.lastRedLight = false; npc.movementSpeed = npc.behavior.moveSpeed * (0.8 + Math.random() * 0.4) * npc.speedMultiplier; // Apply speed multiplier // Setup animation const mixer = new THREE.AnimationMixer(npc); const action = mixer.clipAction(gltf.animations[0]); action.play(); // Store references npcs.push(npc); npcMixers.push(mixer); scene.add(npc); }); } } } // Create laser beam effect with improved accuracy function createLaserBeam(startPoint, endPoint) { const direction = new THREE.Vector3().subVectors(endPoint, startPoint); const distance = direction.length(); // Create more dramatic laser beam const geometry = new THREE.CylinderGeometry(0.4, 0.1, distance, 32); // Add glow effect geometry const glowGeometry = new THREE.CylinderGeometry(0.6, 0.3, distance, 32); // Rotate geometries to align with direction geometry.rotateX(Math.PI / 2); geometry.translate(0, distance / 2, 0); glowGeometry.rotateX(Math.PI / 2); glowGeometry.translate(0, distance / 2, 0); // Create core laser material const coreMaterial = new THREE.MeshBasicMaterial({ color: 0x800080, // Bright purple transparent: true, opacity: 1, emissive: 0x800080, emissiveIntensity: 3 }); // Create outer glow material const glowMaterial = new THREE.MeshBasicMaterial({ color: 0xff00ff, // Lighter purple transparent: true, opacity: 0.4, blending: THREE.AdditiveBlending }); // Create laser mesh with glow effect const laserCore = new THREE.Mesh(geometry, coreMaterial); const laserGlow = new THREE.Mesh(glowGeometry, glowMaterial); // Create group to hold both meshes const laser = new THREE.Group(); laser.add(laserCore); laser.add(laserGlow); laser.position.copy(startPoint); laser.position.addScaledVector(direction, 0.5); laser.lookAt(endPoint); laser.rotateX(Math.PI / 2); return laser; } // Create explosion effect function createGoatExplosion(position) { const particleCount = 200; const geometry = new THREE.BufferGeometry(); const positions = new Float32Array(particleCount * 3); const colors = new Float32Array(particleCount * 3); const velocities = []; for (let i = 0; i < particleCount; i++) { positions[i * 3] = position.x; positions[i * 3 + 1] = position.y; positions[i * 3 + 2] = position.z; // Random purple-ish colors colors[i * 3] = 0.5 + Math.random() * 0.5; // R colors[i * 3 + 1] = 0; // G colors[i * 3 + 2] = 0.5 + Math.random() * 0.5; // B // Explosion velocities velocities.push({ x: (Math.random() - 0.5) * 2, y: (Math.random() - 0.5) * 2, z: (Math.random() - 0.5) * 2 }); } geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3)); const material = new THREE.PointsMaterial({ size: 0.5, transparent: true, opacity: 1, vertexColors: true, blending: THREE.AdditiveBlending }); const particles = new THREE.Points(geometry, material); scene.add(particles); return { mesh: particles, velocities: velocities, life: 2.0 }; } // Call setupNPCs after scene initialization setupNPCs(); // Animation loop // Game state let isRedLight = false; let rotationTimer = 0; let preRaceText = "Move to start the race!"; let preRaceTextOpacity = 1; let isGoatTurning = false; const BASE_RED_LIGHT_DURATION = 2500 + Math.random() * 1000; // Random base duration for red light (2.5-3.5s) const BASE_GREEN_LIGHT_DURATION = 3000 + Math.random() * 2000; // Random base duration for green light (3-5s) const LIGHT_TRANSITION_TIME = 600 + Math.random() * 400; // Random transition time (0.6-1s) let currentLightDuration = BASE_GREEN_LIGHT_DURATION; // Variable duration const MOVEMENT_DETECTION_DELAY = 250; // 250ms delay before movement detection starts function animate() { if (!gameRunning) return; requestAnimationFrame(animate); const deltaTime = clock.getDelta(); // Update rain if (rain && rain.geometry) { const positions = rain.geometry.attributes.position.array; const sizes = rain.geometry.attributes.size.array; for (let i = 0; i < RAIN_COUNT; i++) { const i3 = i * 3; // Update positions based on velocities positions[i3] += rainVelocities[i].x; positions[i3 + 1] += rainVelocities[i].y * deltaTime; positions[i3 + 2] += rainVelocities[i].z; // Reset rain drops that go below ground if (positions[i3 + 1] < 0) { positions[i3] = Math.random() * 400 - 200; positions[i3 + 1] = 500; positions[i3 + 2] = Math.random() * 400 - 200; } // Wrap around horizontally and in depth if (positions[i3] < -200) positions[i3] = 200; if (positions[i3] > 200) positions[i3] = -200; if (positions[i3 + 2] < -200) positions[i3 + 2] = 200; if (positions[i3 + 2] > 200) positions[i3 + 2] = -200; } rain.geometry.attributes.position.needsUpdate = true; // Update sizes and opacity based on distance to camera for (let i = 0; i < RAIN_COUNT; i++) { const i3 = i * 3; const dropPosition = new THREE.Vector3( positions[i3], positions[i3 + 1], positions[i3 + 2] ); // Calculate distance to camera const distanceToCamera = camera.position.distanceTo(dropPosition); // Adjust size based on distance (closer = bigger) if (distanceToCamera < 20) { sizes[i] = RAIN_SIZE * 2; // Double size for very close drops rain.material.opacity = 0.8; // More visible when close } else if (distanceToCamera < 50) { sizes[i] = RAIN_SIZE * 1.5; // 1.5x size for medium distance rain.material.opacity = 0.6; } else { sizes[i] = RAIN_SIZE; // Normal size for far drops rain.material.opacity = 0.4; } } rain.geometry.attributes.size.needsUpdate = true; } // Update NPC animations based on movement // Update NPC animations and movement if (raceStarted) npcs.forEach((npc, index) => { if (!npc.eliminated) { const mixer = npcMixers[index]; const action = mixer._actions[0]; // Reset animation state at start action.timeScale = 1.0; // Handle NPC AI behavior if (isRedLight !== npc.lastRedLight) { npc.isReacting = true; npc.reactionTimer = npc.behavior.reactionTime * (0.8 + Math.random() * 0.4); // Add variation to reaction time npc.lastRedLight = isRedLight; } // Update reaction timer if (npc.isReacting) { npc.reactionTimer -= deltaTime; if (npc.reactionTimer <= 0) { npc.isReacting = false; } } if (!isRedLight) { // Store safe position at the start of green light npc.lastSafePosition = npc.position.clone(); // Calculate distance to next NPC or finish line first let distanceToNext = 1000; const nextNPCs = npcs.filter(other => !other.eliminated && other !== npc && other.position.z < npc.position.z && Math.abs(other.position.x - npc.position.x) < 2 ); if (nextNPCs.length > 0) { const closestNPC = nextNPCs.reduce((closest, current) => current.position.z > closest.position.z ? current : closest ); distanceToNext = npc.position.z - closestNPC.position.z; } // Green light behavior const isMoving = distanceToNext > npc.behavior.stopDistance; // Only play animation if actually moving if (isMoving) { if (action.paused) { action.paused = false; action.timeScale = 1.0; } mixer.update(deltaTime); npc.position.z -= deltaTime * npc.movementSpeed; } else { action.paused = true; } // Check finish line if (npc.position.z <= FINISH_LINE_Z) { createVanishEffect(npc.position.clone()); // Reset NPC position after reaching finish line setTimeout(() => { npc.position.set( npc.startPosition.x, npc.startPosition.y, npc.startPosition.z ); npc.eliminated = false; npc.makingMistake = false; npc.mistakeTimer = 0; npc.lastPosition = null; npc.accumulatedMovement = 0; npc.movementSamples = []; npc.isBeingEliminated = false; npc.eliminationStarted = false; if (!scene.children.includes(npc)) { scene.add(npc); } }, 1000); } } else { // Red light behavior if (!npc.isReacting) { const mixer = npcMixers[index]; const action = mixer._actions[0]; if (!npc.makingMistake) { action.paused = true; } // Store the exact position when stopping npc.stoppedPosition = npc.position.clone(); // Reset position to last known safe position if any movement occurred if (npc.lastSafePosition) { npc.position.copy(npc.lastSafePosition); } // Initialize mistake state if not exists if (npc.makingMistake === undefined) { npc.makingMistake = false; npc.mistakeTimer = 0; } // Calculate distance to finish line const distanceToFinish = Math.abs(npc.position.z - (-40)); // Increase mistake chance near finish line (within 20 units) const finishLineMistakeMultiplier = distanceToFinish < 20 ? 5 : 1; // Determine if NPC should start making a mistake if (!npc.makingMistake && currentRedLightMistakes < maxMistakesPerRedLight) { const adjustedMistakeChance = npc.behavior.mistakeChance * finishLineMistakeMultiplier * (1 - (currentRedLightMistakes / maxMistakesPerRedLight)); if (Math.random() < adjustedMistakeChance) { npc.makingMistake = true; currentRedLightMistakes++; // Longer mistake duration near finish line const baseMistakeTime = 0.5 + Math.random() * 0.5; npc.mistakeTimer = distanceToFinish < 20 ? baseMistakeTime * 1.5 : baseMistakeTime; } } // Handle mistake movement if (npc.makingMistake) { const mixer = npcMixers[index]; const action = mixer._actions[0]; // Always play animation during mistake movement if (npc.mistakeTimer > 0) { if (action.paused) { action.paused = false; action.timeScale = 0.3; // Slow animation for sneaking effect } mixer.update(deltaTime); } else { action.paused = true; action.timeScale = 1.0; // Reset timescale } // Store the position before moving const beforeMovePosition = npc.position.clone(); const beforeMovePositionZ = npc.position.z; // Apply movement // Move forward more noticeably during mistake const mistakeMovementSpeed = npc.movementSpeed * npc.behavior.mistakeSpeed * 2; npc.position.z -= deltaTime * mistakeMovementSpeed; npc.mistakeTimer -= deltaTime; // Check for any movement during red light const movementAmount = Math.abs(beforeMovePositionZ - npc.position.z); const totalMovement = beforeMovePosition.distanceTo(npc.position); // If any movement is detected during red light, eliminate // Only eliminate if there's actual movement, not just standing if (movementAmount > 0.01 && Math.abs(npc.position.z - beforeMovePosition.z) > 0.01 && !npc.isBeingEliminated) { // Only eliminate if significant movement is detected if (movementAmount > 0.1 && !npc.isBeingEliminated && npc.totalForwardMovement > 0.5) { npc.isBeingEliminated = true; // Don't reset position - let them stay at their mistake position // Create and fire laser immediately const laserStartPoint = creepyGoat.position.clone(); laserStartPoint.y += 5; const laser = createLaserBeam(laserStartPoint, npc.position); scene.add(laser); // Create warning effect before elimination const warningLight = new THREE.PointLight(0xff0000, 2, 10); warningLight.position.copy(npc.position); warningLight.position.y += 2; scene.add(warningLight); // Add glowing outline to moving NPC npc.traverse((child) => { if (child.isMesh) { child.material.emissive = new THREE.Color(0xff0000); child.material.emissiveIntensity = 1; } }); // Play elimination sound with more impact if (killSound && !killSound.playing) { killSound.currentTime = 0; killSound.volume = 0.5; killSound.play().catch(console.error); } // Enhanced explosion and vanish effects const npcExplosion = createGoatExplosion(npc.position.clone()); npcExplosion.mesh.material.size *= 2; // Larger particles particleSystems.push(npcExplosion); const vanishEffect = createVanishEffect(npc.position); particleSystems.push(vanishEffect); // Remove warning light after short delay setTimeout(() => { scene.remove(warningLight); }, 300); // Remove laser after a very short delay setTimeout(() => { scene.remove(laser); }, 300); // Reset NPC position immediately after explosion scene.remove(npc); // Reset position and state after a short delay setTimeout(() => { // Reset position to starting point npc.position.set( npc.startPosition.x, npc.startPosition.y, npc.startPosition.z ); // Reset all state flags npc.eliminated = false; npc.makingMistake = false; npc.mistakeTimer = 0; npc.lastPosition = null; npc.accumulatedMovement = 0; npc.movementSamples = []; npc.isBeingEliminated = false; npc.eliminationStarted = false; npc.lastSafePosition = npc.position.clone(); npc.totalForwardMovement = 0; npc.hasMovedBeforeCheck = false; // Add back to scene scene.add(npc); // Reset animation state const mixer = npcMixers[npcs.indexOf(npc)]; if (mixer && mixer._actions[0]) { mixer._actions[0].reset().play(); } }, 300); // Reduced delay for quicker reset } } } else { // Reset animation speed when not making mistake const mixer = npcMixers[index]; const action = mixer._actions[0]; action.timeScale = 1.0; } } } } }); // Update particle systems with safety checks for (let i = particleSystems.length - 1; i >= 0; i--) { const system = particleSystems[i]; // Skip invalid systems if (!system || !system.mesh) { particleSystems.splice(i, 1); continue; } // Skip if geometry or attributes are missing if (!system.mesh.geometry || !system.mesh.geometry.attributes || !system.mesh.geometry.attributes.position) { scene.remove(system.mesh); particleSystems.splice(i, 1); continue; } const positions = system.mesh.geometry.attributes.position.array; // Skip if velocities are missing or malformed if (!system.velocities || system.velocities.length * 3 !== positions.length) { scene.remove(system.mesh); particleSystems.splice(i, 1); continue; } // Update particle positions for (let j = 0; j < positions.length; j += 3) { if (system.velocities[j / 3]) { positions[j] += system.velocities[j / 3].x; positions[j + 1] += system.velocities[j / 3].y; positions[j + 2] += system.velocities[j / 3].z; } } // Update geometry and material with safety checks system.mesh.geometry.attributes.position.needsUpdate = true; if (system.mesh.material) { system.mesh.material.opacity = system.life; } // Update life system.life -= deltaTime; // Remove dead particle systems if (system.life <= 0) { scene.remove(system.mesh); particleSystems.splice(i, 1); } } // Animate finish line fog if (finishLineFog) { const positions = finishLineFog.geometry.attributes.position.array; for (let i = 0; i < positions.length; i += 3) { // Slowly move particles up and down positions[i + 1] += Math.sin(clock.elapsedTime + positions[i]) * 0.01; // Reset height if too high or too low if (positions[i + 1] > 10) positions[i + 1] = 0; if (positions[i + 1] < 0) positions[i + 1] = 10; // Add slight horizontal movement positions[i] += Math.sin(clock.elapsedTime + positions[i + 1]) * 0.01; // Keep particles within bounds if (positions[i] > 50) positions[i] = -50; if (positions[i] < -50) positions[i] = 50; } finishLineFog.geometry.attributes.position.needsUpdate = true; // Slowly pulse the opacity finishLineFog.material.opacity = 0.3 + Math.sin(clock.elapsedTime) * 0.1; } // Update lightning effect if (assetsLoaded) { lightningManager.update(deltaTime); // Animate demon monster if (demonMonster) { // Update animation phase demonMonster.animationPhase += deltaTime * 0.5; // Calculate new Y position with smooth oscillation const oscillation = Math.sin(demonMonster.animationPhase) * 5; demonMonster.position.y = demonMonster.initialY + oscillation; // Add subtle rotation demonMonster.rotation.z = Math.sin(demonMonster.animationPhase * 0.5) * 0.02; } // Handle demon monster screaming if (demonMonster && !demonMonster.isScreaming && raceStarted) { const currentTime = Date.now(); if (currentTime - demonMonster.lastScreamTime > demonMonster.screamCooldown) { // Start screaming sequence demonMonster.isScreaming = true; demonMonster.lastScreamTime = currentTime; demonMonster.screamCooldown = 15000 + Math.random() * 20000; // Set new random cooldown // Play demonic scream if (demonicScream) { demonicScream.currentTime = 0; demonicScream.play().catch(console.error); } // Store original position const originalY = demonMonster.position.y; // Shake and fly up animation const shakeIntensity = 5; const flyHeight = 50; const animationDuration = 2000; // 2 seconds // Fly up with shake new TWEEN.Tween(demonMonster.position) .to({ y: originalY + flyHeight }, animationDuration / 2) .easing(TWEEN.Easing.Cubic.Out) .onUpdate(() => { // Add shaking effect demonMonster.position.x = Math.sin(Date.now() * 0.01) * shakeIntensity; demonMonster.rotation.z = Math.sin(Date.now() * 0.01) * 0.1; }) .onComplete(() => { // Fly back down new TWEEN.Tween(demonMonster.position) .to({ y: originalY, x: 0 }, animationDuration / 2) .easing(TWEEN.Easing.Cubic.In) .onUpdate(() => { // Continue shaking while descending demonMonster.position.x = Math.sin(Date.now() * 0.01) * (shakeIntensity * 0.5); demonMonster.rotation.z = Math.sin(Date.now() * 0.01) * 0.05; }) .onComplete(() => { // Reset position and state demonMonster.position.x = 0; demonMonster.rotation.z = 0; demonMonster.isScreaming = false; }) .start(); }) .start(); } } lightningUniforms.time.value += deltaTime; applyControls(); // Apply camera controls // Check if player has moved to start the race if (!raceStarted && Math.abs(playerVelocity.z) > 0.01) { raceStarted = true; isRedLight = false; rotationTimer = 0; // Play green light sound at start if (greenLightSound) { greenLightSound.currentTime = 0; greenLightSound.play().catch(console.error); } // Start the game timer startGameTimer(); if (creepyGoat) { creepyGoat.rotation.y = Math.PI; // Face away initially } } // Display pre-race text if (!raceStarted) { // Fade the text in and out preRaceTextOpacity = 0.5 + Math.sin(clock.elapsedTime * 2) * 0.5; const textElement = document.getElementById('preRaceText'); if (!textElement) { const text = document.createElement('div'); text.id = 'preRaceText'; text.style.position = 'fixed'; text.style.top = '50%'; text.style.left = '50%'; text.style.transform = 'translate(-50%, -50%)'; text.style.color = 'white'; text.style.fontSize = '24px'; text.style.fontWeight = 'bold'; text.style.textAlign = 'center'; text.style.textShadow = '2px 2px 4px rgba(0,0,0,0.5)'; text.style.pointerEvents = 'none'; document.body.appendChild(text); } document.getElementById('preRaceText').style.opacity = preRaceTextOpacity; document.getElementById('preRaceText').textContent = preRaceText; } else if (document.getElementById('preRaceText')) { document.getElementById('preRaceText').remove(); } // Only update game logic if race has started if (raceStarted) { // Update rotation timer rotationTimer += deltaTime * 1000; // Handle red light/green light timing const warningTime = LIGHT_TRANSITION_TIME; if (rotationTimer >= currentLightDuration) { // Set new random duration for next light phase if (!isRedLight) { // Switching to red light - highly unpredictable currentLightDuration = BASE_RED_LIGHT_DURATION + (Math.random() * 4000 - 2000); } else { // Switching to green light - more variation but still fair currentLightDuration = BASE_GREEN_LIGHT_DURATION + (Math.random() * 3000 - 1000); } // Play appropriate sound based on the new state if (!isRedLight) { // Switching to red light if (redLightSound) { redLightSound.currentTime = 0; redLightSound.play().catch(console.error); } if (greenLightSound) { greenLightSound.pause(); greenLightSound.currentTime = 0; } } else { // Switching to green light if (redLightSound) { redLightSound.pause(); redLightSound.currentTime = 0; } if (greenLightSound) { greenLightSound.currentTime = 0; greenLightSound.play().catch(console.error); } } // Reset movement tracking for all NPCs and player currentRedLightMistakes = 0; // Reset mistake counter eliminatedThisRedLight = false; // Reset elimination flag for new light phase npcs.forEach(npc => { npc.lastPosition = null; npc.movementSamples = []; npc.makingMistake = false; // Reset mistake state }); lastPlayerPosition = null; isRedLight = !isRedLight; rotationTimer = 0; eliminationsThisRedLight = 0; // Reset elimination counter for new light phase currentRedLightEliminations = 0; // Reset the elimination count for new red light eliminationQueue = []; // Clear any pending eliminations isProcessingElimination = false; isSignFullyVisible = false; // Reset sign visibility state if (creepyGoat) { // Set initial opacity of signs before transition redLightSign.material.opacity = isRedLight ? 0 : 1; greenLightSign.material.opacity = isRedLight ? 1 : 0; // Fade out current sign and fade in new sign const fadeOutSign = isRedLight ? greenLightSign : redLightSign; const fadeInSign = isRedLight ? redLightSign : greenLightSign; // Fade out animation new TWEEN.Tween(fadeOutSign.material) .to({ opacity: 0 }, 500) .start(); // Fade in animation new TWEEN.Tween(fadeInSign.material) .to({ opacity: 1 }, 500) .onComplete(() => { isSignFullyVisible = true; }) .start(); // Reset movement tracking when light changes lastPlayerPosition = null; npcs.forEach(npc => { npc.lastPosition = null; npc.movementSamples = []; }); if (isRedLight) { // Turn around to face players immediately for red light isGoatTurning = true; new TWEEN.Tween(creepyGoat.rotation) .to({ y: 0 }) // Rotate to face players .duration(500) .easing(TWEEN.Easing.Back.Out) .onComplete(() => { isGoatTurning = false; }) .start(); } else { // Turn back to face backdrop for green light new TWEEN.Tween(creepyGoat.rotation) .to({ y: Math.PI }) // Rotate to face backdrop .duration(500) .easing(TWEEN.Easing.Back.In) .start(); } } } else if (!isRedLight && rotationTimer >= BASE_GREEN_LIGHT_DURATION - warningTime && creepyGoat) { // Start turning around just before red light isGoatTurning = true; new TWEEN.Tween(creepyGoat.rotation) .to({ y: 0 }) // Rotate to face players .duration(warningTime) .easing(TWEEN.Easing.Quadratic.InOut) .onComplete(() => { isGoatTurning = false; }) .start(); } // Update tweens TWEEN.update(); } } // Check if player has reached finish line if (camera.position.z <= FINISH_LINE_Z && !hasWon) { hasWon = true; gameRunning = false; clearInterval(gameTimerInterval); // Stop all animations and sounds if (backgroundMusic) { backgroundMusic.pause(); backgroundMusic.currentTime = 0; } if (redLightSound) { redLightSound.pause(); redLightSound.currentTime = 0; } // Remove all NPCs npcs.forEach(npc => { if (scene.children.includes(npc)) { scene.remove(npc); } }); // Clear particle systems particleSystems.forEach(system => { scene.remove(system.mesh); }); particleSystems = []; // Remove game objects if (creepyGoat) scene.remove(creepyGoat); if (redLightSign) scene.remove(redLightSign); if (greenLightSign) scene.remove(greenLightSign); if (finishLineFog) scene.remove(finishLineFog); showWinScreen(); return; } // Check if timer has run out if (gameTimer <= 0) { gameRunning = false; clearInterval(gameTimerInterval); // Stop all animations and sounds if (backgroundMusic) { backgroundMusic.pause(); backgroundMusic.currentTime = 0; } if (redLightSound) { redLightSound.pause(); redLightSound.currentTime = 0; } // Remove all NPCs npcs.forEach(npc => { if (scene.children.includes(npc)) { scene.remove(npc); } }); // Clear particle systems particleSystems.forEach(system => { scene.remove(system.mesh); }); particleSystems = []; // Remove game objects if (creepyGoat) scene.remove(creepyGoat); if (redLightSign) scene.remove(redLightSign); if (greenLightSign) scene.remove(greenLightSign); if (finishLineFog) scene.remove(finishLineFog); showTimeUpScreen(); return; } // Check for player movement during ANY red light period if (!goatEliminationStarted && !eliminatedThisRedLight && isRedLight && camera.position.z > -40) { // Store the player's position for movement check if (!lastPlayerPosition) { lastPlayerPosition = camera.position.clone(); } // Check for any movement during red light const playerMovement = camera.position.distanceTo(lastPlayerPosition); const timeSinceRedLight = Date.now() - rotationTimer; const forwardMovement = Math.abs(camera.position.z - lastPlayerPosition.z); // Eliminate on ANY detected movement during red light if (!isBeingEliminated && isSignFullyVisible && !isGoatTurning && timeSinceRedLight > MOVEMENT_DETECTION_DELAY + LIGHT_TRANSITION_TIME && (playerMovement > 0.01 || forwardMovement > 0.01)) { playerLives--; isBeingEliminated = true; eliminationTimer = ELIMINATION_DURATION; goatEliminationStarted = true; eliminatedThisRedLight = true; // Set flag to prevent multiple eliminations // Display life warning message if (!lifeWarningDisplay) { lifeWarningDisplay = document.createElement('div'); lifeWarningDisplay.style.position = 'fixed'; lifeWarningDisplay.style.top = '50%'; lifeWarningDisplay.style.left = '50%'; lifeWarningDisplay.style.transform = 'translate(-50%, -50%)'; lifeWarningDisplay.style.color = '#ffff00'; lifeWarningDisplay.style.fontSize = '36px'; lifeWarningDisplay.style.fontWeight = 'bold'; lifeWarningDisplay.style.textShadow = '2px 2px 4px rgba(0,0,0,0.5)'; lifeWarningDisplay.style.zIndex = '1001'; document.body.appendChild(lifeWarningDisplay); } lifeWarningDisplay.textContent = playerLives > 0 ? `Warning! ${playerLives} ${playerLives === 1 ? 'life' : 'lives'} remaining!` : 'Game Over - No lives remaining!'; // Fade out warning message lifeWarningDisplay.style.opacity = '1'; setTimeout(() => { let opacity = 1; const fadeInterval = setInterval(() => { opacity -= 0.05; if (lifeWarningDisplay && lifeWarningDisplay.style) { lifeWarningDisplay.style.opacity = opacity; if (opacity <= 0) { clearInterval(fadeInterval); if (lifeWarningDisplay && lifeWarningDisplay.parentNode) { lifeWarningDisplay.parentNode.removeChild(lifeWarningDisplay); } lifeWarningDisplay = null; } } else { clearInterval(fadeInterval); lifeWarningDisplay = null; } }, 50); }, 2000); // Create laser immediately at player's position const playerPosition = camera.position.clone(); playerPosition.y += 2; // Target center of player model const laserStartPoint = creepyGoat.position.clone(); laserStartPoint.y += 5; // Adjust to match goat's head height // Calculate precise direction to player const directionToPlayer = playerPosition.clone().sub(laserStartPoint).normalize(); // Make goat look at player if (goatHead) { goatHead.lookAt(playerPosition); } // Create and add laser const laser = createLaserBeam(laserStartPoint, playerPosition); scene.add(laser); // Play kill sound immediately if (killSound) { killSound.currentTime = 0; killSound.play().catch(console.error); } // Only game over if no lives remaining if (playerLives <= 0) { gameRunning = false; clearInterval(gameTimerInterval); setTimeout(() => { showGameOverScreen(); }, 1000); return; } // Create elimination effects setTimeout(() => { scene.remove(laser); const playerExplosion = createGoatExplosion(camera.position.clone()); particleSystems.push(playerExplosion); createVanishEffect(camera.position.clone()); // Reset player position camera.position.set(0, 7, 230); playerVelocity.set(0, 0, 0); // Reset elimination states isBeingEliminated = false; goatEliminationStarted = false; eliminationTimer = 0; bloomPass.strength = 0.2; // Reset bloom }, 1000); } // Update last position lastPlayerPosition.copy(camera.position); // Check if any NPCs are moving (not paused) npcs.forEach((npc) => { if (!npc.eliminated && !npc.isBeingEliminated && npc.position.z > -40) { const currentPosition = npc.position.clone(); const currentTime = Date.now(); // Initialize tracking properties if not exists if (!npc.lastPosition) { npc.lastPosition = currentPosition.clone(); npc.movementTimer = 0; npc.accumulatedMovement = 0; npc.lastMovementTime = currentTime; npc.movementSamples = []; npc.hasMovedBeforeCheck = false; // New flag to track initial movement return; } const timeDelta = currentTime - npc.lastMovementTime; const movementDistance = currentPosition.distanceTo(npc.lastPosition); const forwardMovement = npc.lastPosition.z - currentPosition.z; // Store movement samples for more accurate detection npc.movementSamples.push({ distance: movementDistance, time: currentTime, forward: forwardMovement }); // Keep only last 5 samples if (npc.movementSamples.length > 5) { npc.movementSamples.shift(); } // Calculate average movement over samples const averageMovement = npc.movementSamples.reduce((acc, sample) => acc + sample.distance, 0) / npc.movementSamples.length; // Track accumulated forward movement during red light with decay if (forwardMovement > 0) { npc.accumulatedMovement = (npc.accumulatedMovement || 0) + forwardMovement; } else { // Gradual decay of accumulated movement npc.accumulatedMovement *= 0.95; } // Reset accumulated movement when light changes to green if (!isRedLight) { npc.accumulatedMovement = 0; npc.movementSamples = []; } // More accurate movement tracking if (!npc.hasMovedBeforeCheck) { const significantMovement = npc.movementSamples.filter(sample => sample.distance > 0.01 || Math.abs(sample.forward) > 0.01 ).length >= 2; if (significantMovement) { npc.hasMovedBeforeCheck = true; } } // Track total forward movement during mistake if (!npc.totalForwardMovement) { npc.totalForwardMovement = 0; } if (forwardMovement > 0) { npc.totalForwardMovement += forwardMovement; } // Eliminate on ANY movement during red light const isMoving = ( (movementDistance > 0.01 || // Any movement detected Math.abs(forwardMovement) > 0.01 || // Any forward movement averageMovement > 0.01) && // Consistent movement isSignFullyVisible && !isGoatTurning && !npc.eliminationStarted && (currentTime - npc.lastMovementTime > MOVEMENT_DETECTION_DELAY + LIGHT_TRANSITION_TIME) ); if (isMoving) { // Immediate elimination when movement is detected npc.eliminationStarted = true; const laserStartPoint = creepyGoat.position.clone(); laserStartPoint.y += 5; const laser = createLaserBeam(laserStartPoint, currentPosition); scene.add(laser); // Quick elimination setTimeout(() => { scene.remove(laser); const npcExplosion = createGoatExplosion(currentPosition); particleSystems.push(npcExplosion); createVanishEffect(currentPosition); // Immediate state update npc.eliminated = true; npc.isBeingEliminated = true; scene.remove(npc); // Reset position and state setTimeout(() => { npc.position.set( npc.startPosition.x, npc.startPosition.y, npc.startPosition.z ); npc.eliminated = false; npc.isBeingEliminated = false; npc.makingMistake = false; npc.lastSafePosition = npc.position.clone(); scene.add(npc); }, 500); if (killSound) { killSound.currentTime = 0; killSound.play().catch(console.error); } }, 500); // Reduced delay to 500ms } // Store position for next frame comparison npc.lastPosition.copy(currentPosition); } }); } else { // Enhanced reset logic during green light npcs.forEach(npc => { if (!npc.eliminated) { npc.lastPosition = null; npc.accumulatedMovement = 0; npc.movementSamples = []; npc.lastMovementTime = Date.now(); npc.hasMovedBeforeCheck = false; // Reset movement check flag npc.totalForwardMovement = 0; // Reset total forward movement // Don't reset eliminationStarted flag here } }); } // Process elimination queue function processNextElimination() { if (eliminationQueue.length === 0) { isProcessingElimination = false; return; } isProcessingElimination = true; const elimination = eliminationQueue.shift(); const { npc, position } = elimination; // Create laser for NPC const laserStartPoint = creepyGoat.position.clone(); laserStartPoint.y += 5; const laser = createLaserBeam(laserStartPoint, position); scene.add(laser); // Remove laser and eliminate NPC after delay setTimeout(() => { scene.remove(laser); const npcExplosion = createGoatExplosion(position); particleSystems.push(npcExplosion); createVanishEffect(position); npc.eliminated = true; scene.remove(npc); eliminationsThisRedLight++; if (eliminationsThisRedLight === 1) { killSound.currentTime = 0; killSound.play().catch(console.error); } // Process next elimination after delay setTimeout(() => { processNextElimination(); }, ELIMINATION_DELAY); }, 1000); } // Handle elimination animation if (isBeingEliminated) { eliminationTimer -= deltaTime * 1000; // Intensify the vignette effect during elimination const intensity = (Math.sin(eliminationTimer * 0.01) + 1) * 0.5; bloomPass.strength = 0.5 + intensity * 1.2; // Increased bloom effect // Freeze player movement during elimination playerVelocity.set(0, 0, 0); // Keep player in place during elimination animation const currentPos = camera.position.clone(); camera.position.copy(currentPos); } composer.render(); // Update control indicator when input type changes updateControlIndicator(); } // Add gamepad event listeners window.addEventListener("gamepadconnected", (e) => { console.log("Gamepad connected:", e.gamepad); gamepads[e.gamepad.index] = e.gamepad; }); window.addEventListener("gamepaddisconnected", (e) => { console.log("Gamepad disconnected:", e.gamepad); delete gamepads[e.gamepad.index]; }); // 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); // Function to show win screen function showWinScreen() { if (timerDisplay) { timerDisplay.remove(); } 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.8)'; winScreen.style.display = 'flex'; winScreen.style.flexDirection = 'column'; winScreen.style.justifyContent = 'center'; winScreen.style.alignItems = 'center'; winScreen.style.zIndex = '1000'; const winText = document.createElement('h1'); winText.textContent = 'Congratulations - You Successfully Reached The Finish Line!'; winText.style.color = 'white'; winText.style.marginBottom = '20px'; // Play win sound if (winSound) { winSound.currentTime = 0; winSound.play().catch(console.error); } winText.style.fontSize = '48px'; const refreshText = document.createElement('p'); refreshText.textContent = 'Refresh your browser to play again'; refreshText.style.color = '#4CAF50'; refreshText.style.fontSize = '24px'; refreshText.style.marginTop = '20px'; winScreen.appendChild(winText); winScreen.appendChild(refreshText); document.body.appendChild(winScreen); } // Create function to start the game function startGame() { // Initialize game state resetGame(true); // Ensure green light is visible at start if (greenLightSign) { greenLightSign.material.opacity = 1; redLightSign.material.opacity = 0; } // Reset light state isRedLight = false; rotationTimer = 0; // Start animation loop animate(); } // ========================= // Mobile Controls Integration // ========================= // Inject CSS styles dynamically const styles = ``; // Reset function to re-add all game objects function reAddAllGameObjects() { // Re-add creepy goat if (creepyGoat && !scene.children.includes(creepyGoat)) { creepyGoat.position.set(0, 2, FINISH_LINE_Z - 10); creepyGoat.rotation.y = Math.PI; scene.add(creepyGoat); } // Re-add light signs if (redLightSign && !scene.children.includes(redLightSign)) { redLightSign.position.set(0, 20, FINISH_LINE_Z - 20); redLightSign.material.opacity = 0; scene.add(redLightSign); } if (greenLightSign && !scene.children.includes(greenLightSign)) { greenLightSign.position.set(0, 20, FINISH_LINE_Z - 20); greenLightSign.material.opacity = 1; scene.add(greenLightSign); } // Re-add finish line fog if (finishLineFog && !scene.children.includes(finishLineFog)) { scene.add(finishLineFog); } // Re-add all NPCs npcs.forEach((npc, index) => { if (!scene.children.includes(npc)) { const row = Math.floor(index / 6); const col = index % 6; const side = col < 3 ? -1 : 1; let x; if (col % 3 === 0) { x = side * (15 + Math.random() * 10); } else if (col % 3 === 1) { x = side * (30 + Math.random() * 15); } else { x = side * (50 + Math.random() * 20); } const z = 230 - (row * 15) + (Math.random() * 5 - 2.5); npc.position.set(x, 0, z); npc.rotation.y = Math.PI; npc.eliminated = false; npc.makingMistake = false; npc.mistakeTimer = 0; npc.isBeingEliminated = false; npc.eliminationStarted = false; scene.add(npc); } }); } // Append the styles to the head const styleSheet = document.createElement("style"); styleSheet.type = "text/css"; styleSheet.innerText = styles; document.head.appendChild(styleSheet); // Define control state const gameState = { controlType: 'keyboard', // 'keyboard' or 'gamepad' keysPressed: { up: false, down: false, left: false, right: false, jump: false, }, lastInputTime: { keyboard: Date.now(), gamepad: Date.now() } }; // No helper functions needed for mobile controls // ========================= // 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 to reset the game function resetGame(resetAll = false) { // Reset race state and effects goatEliminationStarted = false; isBeingEliminated = false; playerLives = 6; // Reset lives eliminationTimer = 0; hasWon = false; gameRunning = true; currentRedLightMistakes = 0; eliminationsThisRedLight = 0; currentRedLightEliminations = 0; // Always reset camera position to start line camera.position.set(0, 7, 230); camera.lookAt(0, 7, 0); // Ensure proper light state at game start if (resetAll && greenLightSign && redLightSign) { greenLightSign.material.opacity = 1; redLightSign.material.opacity = 0; isRedLight = false; rotationTimer = 0; } // Reset timer gameTimer = 180; clearInterval(gameTimerInterval); if (timerDisplay) { timerDisplay.remove(); timerDisplay = null; } laserActive = false; eliminationQueue = []; isProcessingElimination = false; // Only reset race state if it's a complete reset if (resetAll) { raceStarted = false; // Reset light signs only on complete reset if (redLightSign && greenLightSign) { redLightSign.material.opacity = 0; greenLightSign.material.opacity = 0; } } isRedLight = false; rotationTimer = 0; // Reset player velocity playerVelocity.x = 0; playerVelocity.y = 0; playerVelocity.z = 0; // Reset grounded state isGrounded = true; // Reset all movement states Object.keys(keysPressed).forEach(key => { keysPressed[key] = false; }); // Reset player position tracking lastPlayerPosition = null; // Only reset NPCs that need to be reset (e.g., for a new game) if (resetAll) { npcs.forEach((npc, index) => { const row = Math.floor(index / 6); // Match new column count const col = index % 6; const side = col < 3 ? -1 : 1; let x; if (col % 3 === 0) { // Close to player x = side * (15 + Math.random() * 10); } else if (col % 3 === 1) { // Medium distance x = side * (30 + Math.random() * 15); } else { // Far from player x = side * (50 + Math.random() * 20); } const z = 230 - (row * 15) + (Math.random() * 5 - 2.5); npc.position.set(x, 0, z); npc.eliminated = false; if (!scene.children.includes(npc)) { scene.add(npc); } }); } // Re-add and reset all game objects reAddAllGameObjects(); // Clear all particle systems particleSystems.forEach(system => { if (system.mesh && scene.children.includes(system.mesh)) { scene.remove(system.mesh); } }); particleSystems = []; // Reset NPC states npcs.forEach(npc => { if (!npc.eliminated) { npc.lastPosition = null; npc.accumulatedMovement = 0; npc.eliminationStarted = false; npc.isBeingEliminated = false; npc.makingMistake = false; npc.mistakeTimer = 0; } }); } function applyControls() { // Get gamepad input const gamepad = navigator.getGamepads ? navigator.getGamepads()[0] : null; // Reset keysPressed before checking inputs Object.keys(gameState.keysPressed).forEach(key => { gameState.keysPressed[key] = false; }); // Check for keyboard input const keyboardPressed = ( keysPressed['ArrowUp'] || keysPressed['KeyW'] || keysPressed['ArrowDown'] || keysPressed['KeyS'] || keysPressed['ArrowLeft'] || keysPressed['KeyA'] || keysPressed['ArrowRight'] || keysPressed['KeyD'] || keysPressed['Space'] ); // Update keyboard last input time if keys are pressed if (keyboardPressed) { gameState.lastInputTime.keyboard = Date.now(); gameState.controlType = 'keyboard'; } // Check for gamepad input and update last input time if (gamepad && ( gamepad.buttons.some(button => button.pressed) || gamepad.axes.some(axis => Math.abs(axis) > 0.1) )) { gameState.lastInputTime.gamepad = Date.now(); gameState.controlType = 'gamepad'; } // Update keysPressed based on current control type if (gameState.controlType === 'gamepad' && gamepad) { // Left stick or D-pad for movement const deadzone = 0.1; // Stick deadzone // D-pad if (gamepad.buttons[12]) keysPressed.up = gamepad.buttons[12].pressed; // D-pad up if (gamepad.buttons[13]) keysPressed.down = gamepad.buttons[13].pressed; // D-pad down if (gamepad.buttons[14]) keysPressed.left = gamepad.buttons[14].pressed; // D-pad left if (gamepad.buttons[15]) keysPressed.right = gamepad.buttons[15].pressed; // D-pad right // Left analog stick if (Math.abs(gamepad.axes[1]) > deadzone) { if (gamepad.axes[1] < -deadzone) keysPressed.up = true; if (gamepad.axes[1] > deadzone) keysPressed.down = true; } // Jump buttons (A button, X button, or LB) if (gamepad.buttons[0]) keysPressed.jump = gamepad.buttons[0].pressed; // A button if (gamepad.buttons[2]) keysPressed.jump = keysPressed.jump || gamepad.buttons[2].pressed; // X button if (gamepad.buttons[4]) keysPressed.jump = keysPressed.jump || gamepad.buttons[4].pressed; // LB } // Fixed movement speed that cannot be altered by rapid button presses const isTransitioning = rotationTimer < LIGHT_TRANSITION_TIME; const BASE_SPEED = 0.25; // Reduced base speed for slower movement const moveSpeed = isBeingEliminated ? 0.2 : (isTransitioning ? BASE_SPEED * 0.5 : BASE_SPEED); const ABSOLUTE_MAX_SPEED = BASE_SPEED; // Hard speed limit const gravity = isBeingEliminated ? 0.1 : 0.5; const groundLevel = 7.0; const friction = 0.8; const groundCheckThreshold = 0.1; const terrainSize = 500; // Match new terrain size // Check if player is within terrain bounds const onTerrain = Math.abs(camera.position.z) <= terrainSize / 2; // If player is not on terrain sides or has fallen below threshold, they should fall if ((!onTerrain && Math.abs(camera.position.x) > 50) || camera.position.y < -10) { // Apply increased gravity for dramatic effect playerVelocity.y -= gravity * 2; camera.position.y += playerVelocity.y; // Keep momentum in Z direction while falling camera.position.z += playerVelocity.z * 0.8; // Reduced control while falling // Reset when fallen far enough if (camera.position.y < -50) { resetGame(false); // Only reset the player return; } return; // Don't process other controls while falling } // Ground check with threshold (only when on terrain) isGrounded = camera.position.y <= groundLevel + groundCheckThreshold; // Apply normal physics when on terrain if (!isGrounded) { playerVelocity.y -= gravity; } else { camera.position.y = groundLevel; playerVelocity.y = 0; } // Only allow forward movement (z-axis) and jumping if (keysPressed.up) { // Set exact speed without any potential for increase playerVelocity.z = -ABSOLUTE_MAX_SPEED; } else { playerVelocity.z = 0; // Immediately stop any movement camera.position.z = Math.round(camera.position.z); } // Remove left/right movement playerVelocity.x = 0; // Handle jumping only when grounded if (keysPressed.jump && isGrounded) { playerVelocity.y = 2.0; // Reduced jump height to match slower movement isGrounded = false; } // Apply velocities to position with bounds checking // Lock X position to 0 to keep player centered camera.position.x = 0; camera.position.y = Math.max(groundLevel, camera.position.y + playerVelocity.y); // Apply fixed movement speed if (playerVelocity.z !== 0) { camera.position.z += -ABSOLUTE_MAX_SPEED; } // Keep camera looking forward camera.lookAt(0, camera.position.y, camera.position.z - 10); // Prevent micro-movements (only needed for z now) if (Math.abs(playerVelocity.z) < 0.001) playerVelocity.z = 0; } // Add control indicator function updateControlIndicator() { let indicator = document.getElementById('controlIndicator'); if (!indicator) { indicator = document.createElement('div'); indicator.id = 'controlIndicator'; indicator.style.position = 'fixed'; indicator.style.bottom = '20px'; indicator.style.right = '20px'; indicator.style.padding = '10px'; indicator.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; indicator.style.color = 'white'; indicator.style.borderRadius = '5px'; indicator.style.fontSize = '14px'; indicator.style.zIndex = '1000'; indicator.style.cursor = 'pointer'; // Add click handler to toggle controls indicator.addEventListener('click', () => { gameState.controlType = gameState.controlType === 'keyboard' ? 'gamepad' : 'keyboard'; // Reset all pressed keys when switching controls Object.keys(keysPressed).forEach(key => { keysPressed[key] = false; }); indicator.style.opacity = '1'; indicator.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; setTimeout(() => { indicator.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; indicator.style.opacity = '0.5'; }, 1000); }); document.body.appendChild(indicator); } indicator.textContent = `Click to Switch Controls (Current: ${gameState.controlType === 'keyboard' ? 'Keyboard' : 'Gamepad'})`; indicator.style.opacity = '1'; setTimeout(() => { indicator.style.opacity = '0.5'; }, 1000); } // Create and start the game timer function startGameTimer() { // Create timer display if it doesn't exist if (!timerDisplay) { timerDisplay = document.createElement('div'); timerDisplay.style.position = 'fixed'; timerDisplay.style.top = '20px'; timerDisplay.style.left = '50%'; timerDisplay.style.transform = 'translateX(-50%)'; timerDisplay.style.color = 'white'; timerDisplay.style.fontSize = '36px'; timerDisplay.style.fontWeight = 'bold'; timerDisplay.style.textShadow = '2px 2px 4px rgba(0,0,0,0.5)'; timerDisplay.style.zIndex = '1000'; document.body.appendChild(timerDisplay); } // Clear any existing interval if (gameTimerInterval) { clearInterval(gameTimerInterval); } // Update timer display function function updateTimerDisplay() { const minutes = Math.floor(gameTimer / 60); const seconds = gameTimer % 60; timerDisplay.textContent = `${minutes}:${seconds.toString().padStart(2, '0')}`; // Add warning colors if (gameTimer <= 30) { timerDisplay.style.color = '#ff4444'; timerDisplay.style.animation = 'pulse 1s infinite'; } else if (gameTimer <= 60) { timerDisplay.style.color = '#ffff44'; } } // Add pulse animation style const style = document.createElement('style'); style.textContent = ` @keyframes pulse { 0% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.1); } 100% { transform: translateX(-50%) scale(1); } } `; document.head.appendChild(style); // Start the timer updateTimerDisplay(); gameTimerInterval = setInterval(() => { if (gameTimer > 0 && gameRunning) { gameTimer--; updateTimerDisplay(); // Handle time running out if (gameTimer <= 0) { clearInterval(gameTimerInterval); showTimeUpScreen(); } } }, 1000); } // Show game over screen function showGameOverScreen() { if (timerDisplay) { timerDisplay.remove(); } 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 = 'rgba(0, 0, 0, 0.8)'; gameOverScreen.style.display = 'flex'; gameOverScreen.style.flexDirection = 'column'; gameOverScreen.style.justifyContent = 'center'; gameOverScreen.style.alignItems = 'center'; gameOverScreen.style.zIndex = '1000'; const gameOverText = document.createElement('h1'); gameOverText.textContent = 'Game Over - You Were Eliminated!'; gameOverText.style.color = '#ff4444'; gameOverText.style.marginBottom = '20px'; // Play lose sound if (loseSound) { loseSound.currentTime = 0; loseSound.play().catch(console.error); } gameOverText.style.fontSize = '48px'; const refreshText = document.createElement('p'); refreshText.textContent = 'Refresh your browser to play again'; refreshText.style.color = '#4CAF50'; refreshText.style.fontSize = '24px'; refreshText.style.marginTop = '20px'; gameOverScreen.appendChild(gameOverText); gameOverScreen.appendChild(refreshText); document.body.appendChild(gameOverScreen); } // Show time up screen function showTimeUpScreen() { const timeUpScreen = document.createElement('div'); timeUpScreen.style.position = 'fixed'; timeUpScreen.style.top = '0'; timeUpScreen.style.left = '0'; timeUpScreen.style.width = '100%'; timeUpScreen.style.height = '100%'; timeUpScreen.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; timeUpScreen.style.display = 'flex'; timeUpScreen.style.flexDirection = 'column'; timeUpScreen.style.justifyContent = 'center'; timeUpScreen.style.alignItems = 'center'; timeUpScreen.style.zIndex = '1000'; const timeUpText = document.createElement('h1'); timeUpText.textContent = 'Time\'s Up - You Failed To Reach The Finish Line!'; timeUpText.style.color = '#ff4444'; timeUpText.style.marginBottom = '20px'; // Play lose sound if (loseSound) { loseSound.currentTime = 0; loseSound.play().catch(console.error); } timeUpText.style.fontSize = '48px'; const refreshText = document.createElement('p'); refreshText.textContent = 'Refresh your browser to play again'; refreshText.style.color = '#4CAF50'; refreshText.style.fontSize = '24px'; refreshText.style.marginTop = '20px'; timeUpScreen.appendChild(timeUpText); timeUpScreen.appendChild(refreshText); document.body.appendChild(timeUpScreen); }