// Define showVictoryComic globally before any imports window.showVictoryComic = function() { // Create victory comic overlay const victoryComicOverlay = document.createElement('div'); victoryComicOverlay.style.position = 'fixed'; victoryComicOverlay.style.top = '0'; victoryComicOverlay.style.left = '0'; victoryComicOverlay.style.width = '100%'; victoryComicOverlay.style.height = '100%'; victoryComicOverlay.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; victoryComicOverlay.style.display = 'flex'; victoryComicOverlay.style.justifyContent = 'center'; victoryComicOverlay.style.alignItems = 'center'; victoryComicOverlay.style.zIndex = '10000'; victoryComicOverlay.innerHTML = `

`; document.body.appendChild(victoryComicOverlay); }; import * as THREE from 'three'; 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'; // Initialize the scene first const scene = new THREE.Scene(); // Create particle system for boost effect const particleCount = 1000; const particleGeometry = new THREE.BufferGeometry(); const positions = new Float32Array(particleCount * 3); const velocities = new Float32Array(particleCount * 3); const lifetimes = new Float32Array(particleCount); // Initialize particle attributes for (let i = 0; i < particleCount; i++) { positions[i * 3] = 0; positions[i * 3 + 1] = 0; positions[i * 3 + 2] = 0; velocities[i * 3] = (Math.random() - 0.5) * 0.5; velocities[i * 3 + 1] = Math.random() * 0.5; velocities[i * 3 + 2] = (Math.random() - 0.5) * 0.5; lifetimes[i] = 0; } particleGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); const particleMaterial = new THREE.PointsMaterial({ color: 0xff4400, size: 1.0, // Increased particle size transparent: true, opacity: 0.6, blending: THREE.AdditiveBlending, depthWrite: false, // Prevents particles from being occluded incorrectly depthTest: true }); const particles = new THREE.Points(particleGeometry, particleMaterial); scene.add(particles); // Create visible box collider const boxColliderGeometry = new THREE.BoxGeometry(2, 2, 2); const boxColliderMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000, transparent: true, opacity: 0, side: THREE.DoubleSide, visible: false }); const boxCollider = new THREE.Mesh(boxColliderGeometry, boxColliderMaterial); boxCollider.position.set(-530.08, 0, -367.89); boxCollider.rotation.y = Math.PI / 2.6; scene.add(boxCollider); // Create water dispenser collision boxes const waterDispenserCollider1 = new THREE.Mesh(boxColliderGeometry, boxColliderMaterial); waterDispenserCollider1.position.set(-406.74, 0, -212.74); scene.add(waterDispenserCollider1); const waterDispenserCollider2 = new THREE.Mesh(boxColliderGeometry, boxColliderMaterial); waterDispenserCollider2.position.set(-409.37, 0, -247.31); waterDispenserCollider2.rotation.y = Math.PI / -1; scene.add(waterDispenserCollider2); const waterDispenserCollider3 = new THREE.Mesh(boxColliderGeometry, boxColliderMaterial); waterDispenserCollider3.position.set(-428.57, 0, -263.67); scene.add(waterDispenserCollider3); const waterDispenserCollider4 = new THREE.Mesh(boxColliderGeometry, boxColliderMaterial); waterDispenserCollider4.position.set(-449.30, 0, -275.49); scene.add(waterDispenserCollider4); // Create whiteboard collision box const whiteboardCollider = new THREE.Mesh(boxColliderGeometry, boxColliderMaterial); whiteboardCollider.position.set(-208.09, 0, -241.12); whiteboardCollider.rotation.y = Math.PI / 2; // Match whiteboard rotation scene.add(whiteboardCollider); // Create duplicate collision boxes const boxCollider2 = new THREE.Mesh(boxColliderGeometry, boxColliderMaterial); boxCollider2.position.set(25.71, 0, 162.86); boxCollider2.rotation.y = Math.PI / 2; scene.add(boxCollider2); // Warehouse collision boxes const warehouseCollider1 = new THREE.Mesh(boxColliderGeometry, boxColliderMaterial); warehouseCollider1.position.set(-669.90, 0, -128.30); warehouseCollider1.rotation.y = Math.PI / 12; scene.add(warehouseCollider1); const warehouseCollider2 = new THREE.Mesh(boxColliderGeometry, boxColliderMaterial); warehouseCollider2.position.set(-543.14, 0, 18.80); warehouseCollider2.rotation.y = Math.PI / 12; scene.add(warehouseCollider2); const warehouseCollider3 = new THREE.Mesh(boxColliderGeometry, boxColliderMaterial); warehouseCollider3.position.set(-486.88, 0, -8.52); warehouseCollider3.rotation.y = Math.PI / 12; scene.add(warehouseCollider3); const warehouseCollider4 = new THREE.Mesh(boxColliderGeometry, boxColliderMaterial); warehouseCollider4.position.set(-435.69, 0, 14.76); warehouseCollider4.rotation.y = Math.PI / 12; scene.add(warehouseCollider4); const warehouseCollider5 = new THREE.Mesh(boxColliderGeometry, boxColliderMaterial); warehouseCollider5.position.set(-365.07, 0, 104.12); warehouseCollider5.rotation.y = Math.PI / 12; scene.add(warehouseCollider5); const warehouseCollider6 = new THREE.Mesh(boxColliderGeometry, boxColliderMaterial); warehouseCollider6.position.set(-203.65, 0, 243.05); warehouseCollider6.rotation.y = Math.PI / 12; scene.add(warehouseCollider6); const warehouseCollider7 = new THREE.Mesh(boxColliderGeometry, boxColliderMaterial); warehouseCollider7.position.set(-104.69, 0, 262.18); warehouseCollider7.rotation.y = Math.PI / 12; scene.add(warehouseCollider7); const warehouseCollider8 = new THREE.Mesh(boxColliderGeometry, boxColliderMaterial); warehouseCollider8.position.set(-73.66, 0, 291.31); warehouseCollider8.rotation.y = Math.PI / 12; scene.add(warehouseCollider8); // Initialize loading manager const loadingManager = new THREE.LoadingManager(); const textureLoader = new THREE.TextureLoader(loadingManager); let assetsLoaded = false; let gameStarted = false; // Create main menu const mainMenu = document.createElement('div'); mainMenu.id = 'mainMenu'; mainMenu.innerHTML = `

Car4D.com

`; document.body.appendChild(mainMenu); // Create and play main menu music const mainMenuMusic = new Audio('https://play.rosebud.ai/assets/mainmenu_final.mp3?56b6'); mainMenuMusic.loop = true; mainMenuMusic.play(); // Add event listener for start button document.getElementById('startButton').addEventListener('click', () => { // Stop main menu music and play comic music mainMenuMusic.pause(); mainMenuMusic.currentTime = 0; const comicMusic = new Audio('https://play.rosebud.ai/assets/comic_final.mp3?H7oe'); comicMusic.loop = true; comicMusic.play(); // Show comic overlay const comicOverlay = document.createElement('div'); comicOverlay.style.position = 'fixed'; comicOverlay.style.top = '0'; comicOverlay.style.left = '0'; comicOverlay.style.width = '100%'; comicOverlay.style.height = '100%'; comicOverlay.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; comicOverlay.style.display = 'flex'; comicOverlay.style.justifyContent = 'center'; comicOverlay.style.alignItems = 'center'; comicOverlay.style.zIndex = '10000'; comicOverlay.innerHTML = `

`; document.body.appendChild(comicOverlay); // Add click event to next button document.getElementById('nextButton').addEventListener('click', () => { // Replace comic with instructions const currentImg = comicOverlay.querySelector('img:first-child'); currentImg.src = 'https://play.rosebud.ai/assets/instructions_finalv2.png?BRgT'; currentImg.style.maxWidth = '90%'; currentImg.style.maxHeight = '90%'; currentImg.style.objectFit = 'contain'; // Update next button click handler document.getElementById('nextButton').addEventListener('click', () => { // Stop comic music comicMusic.pause(); comicMusic.currentTime = 0; let countdownInterval; // Define countdown interval variable // Fade out overlay comicOverlay.style.transition = 'opacity 1s'; comicOverlay.style.opacity = '0'; // Play game start sound // Add 2 second delay before playing game start sound setTimeout(() => { const gameStartSound = new Audio('https://play.rosebud.ai/assets/gamestart_final.mp3?9qI2'); gameStartSound.play(); // Store the sound in window object so it can be accessed later for stopping window.gameStartSound = gameStartSound; }, 2000); // Remove overlay and continue with game setup setTimeout(() => { // Stop comic music and clean up const comicMusic = document.querySelector('audio[src*="comic_final"]'); if (comicMusic) { comicMusic.pause(); comicMusic.currentTime = 0; comicMusic.remove(); // Remove the audio element completely } comicOverlay.remove(); // Fade out menu mainMenu.style.transition = 'opacity 1s'; mainMenu.style.opacity = '0'; // Remove menu and start game after fade setTimeout(() => { mainMenu.remove(); gameStarted = true; // Create countdown overlay const countdownOverlay = document.createElement('div'); countdownOverlay.style.position = 'fixed'; countdownOverlay.style.top = '50%'; countdownOverlay.style.left = '50%'; countdownOverlay.style.transform = 'translate(-50%, -50%)'; countdownOverlay.style.width = '400px'; countdownOverlay.style.height = '400px'; countdownOverlay.style.fontSize = '100px'; countdownOverlay.style.color = 'white'; countdownOverlay.style.textShadow = '2px 2px 4px rgba(0,0,0,0.5)'; countdownOverlay.style.zIndex = '1000'; document.body.appendChild(countdownOverlay); // Start countdown let count = 3; countdownInterval = setInterval(() => { if (count === 3) { countdownOverlay.innerHTML = '

'; } else if (count === 2) { countdownOverlay.innerHTML = '

'; } else if (count === 1) { countdownOverlay.innerHTML = '

'; } else if (count === 0) { countdownOverlay.innerHTML = '

'; } else { clearInterval(countdownInterval); countdownOverlay.remove(); assetsLoaded = true; enemyCanMove = true; mjEnemyStartMoveTime = Date.now(); gameStartTime = Date.now(); // Set game start time mjEnemyInitialDelay = false; } count--; }, 1000); }, 1000); }, 1000); }, { once: true }); // Ensure handler only fires once }); }); // Function to start countdown sequence function startCountdown() { // Create countdown overlay const countdownOverlay = document.createElement('div'); countdownOverlay.style.position = 'fixed'; countdownOverlay.style.top = '50%'; countdownOverlay.style.left = '50%'; countdownOverlay.style.transform = 'translate(-50%, -50%)'; countdownOverlay.style.width = '400px'; countdownOverlay.style.height = '400px'; countdownOverlay.style.fontSize = '100px'; countdownOverlay.style.color = 'white'; countdownOverlay.style.textShadow = '2px 2px 4px rgba(0,0,0,0.5)'; countdownOverlay.style.zIndex = '1000'; document.body.appendChild(countdownOverlay); let count = 3; const countdown = setInterval(() => { if (count === 3) { countdownOverlay.innerHTML = '

'; } else if (count === 2) { countdownOverlay.innerHTML = '

'; } else if (count === 1) { countdownOverlay.innerHTML = '

'; } else if (count === 0) { countdownOverlay.innerHTML = '

'; } else { clearInterval(countdown); countdownOverlay.remove(); assetsLoaded = true; enemyCanMove = true; mjEnemyStartMoveTime = Date.now(); mjEnemyInitialDelay = false; } count--; }, 1000); } let collisionCount = 0; // Track number of collisions let lastCollisionTime = 0; // Track when the last collision occurred const collisionCooldown = 3000; // 3 seconds in milliseconds let lapCount = 0; let mjEnemyLaps = 0; let loEnemyLaps = 0; let mjLastCrossTime = 0; let loLastCrossTime = 0; let mjEnemyInitialDelay = true; // Add flag for mj_enemy initial delay let lastCheckpointTime = 0; let enemyCanMove = false; // Track if enemy should move let mjEnemyStartMoveTime = 0; // Track when mj_enemy should start moving let isBackView = false; // Flag to track camera view state const checkpointCooldown = 20000; // 20 seconds cooldown between counts let firstLapPassed = false; // Flag to track first lap // Create lap counter UI const lapCounterDiv = document.createElement('div'); // Create boost message UI const boostMessageDiv = document.createElement('div'); boostMessageDiv.style.position = 'fixed'; boostMessageDiv.style.top = '20px'; boostMessageDiv.style.left = '50%'; boostMessageDiv.style.transform = 'translateX(-50%)'; boostMessageDiv.style.padding = '0'; boostMessageDiv.style.backgroundColor = 'transparent'; boostMessageDiv.style.color = 'white'; boostMessageDiv.style.borderRadius = '0'; boostMessageDiv.style.fontFamily = 'Arial, sans-serif'; boostMessageDiv.style.fontSize = '24px'; boostMessageDiv.style.zIndex = '1000'; boostMessageDiv.style.display = 'none'; boostMessageDiv.innerHTML = '

'; document.body.appendChild(boostMessageDiv); lapCounterDiv.style.position = 'fixed'; lapCounterDiv.style.top = '30px'; lapCounterDiv.style.left = '30px'; lapCounterDiv.style.padding = '15px'; lapCounterDiv.style.backgroundColor = 'transparent'; lapCounterDiv.style.color = 'white'; lapCounterDiv.style.borderRadius = '8px'; lapCounterDiv.style.fontFamily = 'Arial, sans-serif'; lapCounterDiv.style.fontSize = '36px'; lapCounterDiv.style.zIndex = '1000'; lapCounterDiv.innerHTML = 'Laps: 0/3'; document.body.appendChild(lapCounterDiv); // Create pressure bars UI const pressureBarsDiv = document.createElement('div'); pressureBarsDiv.style.position = 'fixed'; pressureBarsDiv.style.top = '60px'; pressureBarsDiv.style.right = '30px'; pressureBarsDiv.style.transform = 'none'; pressureBarsDiv.style.display = 'flex'; pressureBarsDiv.style.gap = '20px'; pressureBarsDiv.style.zIndex = '1000'; // Create A key pressure bar const leftPressureBar = document.createElement('div'); leftPressureBar.style.width = '100px'; leftPressureBar.style.height = '20px'; leftPressureBar.style.backgroundColor = '#333'; leftPressureBar.style.position = 'relative'; leftPressureBar.style.border = '2px solid white'; const leftPressureFill = document.createElement('div'); leftPressureFill.style.width = '0%'; leftPressureFill.style.height = '100%'; leftPressureFill.style.backgroundColor = '#4CAF50'; leftPressureFill.style.transition = 'width 0.1s linear'; leftPressureBar.appendChild(leftPressureFill); // Create D key pressure bar const rightPressureBar = document.createElement('div'); rightPressureBar.style.width = '100px'; rightPressureBar.style.height = '20px'; rightPressureBar.style.backgroundColor = '#333'; rightPressureBar.style.position = 'relative'; rightPressureBar.style.border = '2px solid white'; const rightPressureFill = document.createElement('div'); rightPressureFill.style.width = '0%'; rightPressureFill.style.height = '100%'; rightPressureFill.style.backgroundColor = '#4CAF50'; rightPressureFill.style.transition = 'width 0.1s linear'; rightPressureBar.appendChild(rightPressureFill); // Add labels const leftLabel = document.createElement('div'); leftLabel.innerHTML = '

'; leftLabel.style.position = 'absolute'; leftLabel.style.top = '0'; leftLabel.style.width = '100%'; leftLabel.style.height = '0'; leftLabel.style.padding = '0'; leftPressureBar.appendChild(leftLabel); const rightLabel = document.createElement('div'); rightLabel.innerHTML = '

'; rightLabel.style.position = 'absolute'; rightLabel.style.top = '0'; rightLabel.style.width = '100%'; rightLabel.style.height = '0'; rightLabel.style.padding = '0'; rightPressureBar.appendChild(rightLabel); pressureBarsDiv.appendChild(leftPressureBar); pressureBarsDiv.appendChild(rightPressureBar); document.body.appendChild(pressureBarsDiv); // Create win screen UI // Create win screen UI const winScreenDiv = document.createElement('div'); winScreenDiv.style.position = 'fixed'; winScreenDiv.style.top = '50%'; winScreenDiv.style.left = '50%'; winScreenDiv.style.transform = 'translate(-50%, -50%)'; winScreenDiv.style.padding = '20px'; winScreenDiv.style.backgroundColor = 'transparent'; winScreenDiv.style.color = 'white'; winScreenDiv.style.borderRadius = '10px'; winScreenDiv.style.fontFamily = 'Arial, sans-serif'; winScreenDiv.style.fontSize = '32px'; winScreenDiv.style.textAlign = 'center'; winScreenDiv.style.zIndex = '2000'; winScreenDiv.style.display = 'none'; winScreenDiv.innerHTML = `

`; document.body.appendChild(winScreenDiv); // Create lose screen UI const loseScreenDiv = document.createElement('div'); loseScreenDiv.style.position = 'fixed'; loseScreenDiv.style.top = '50%'; loseScreenDiv.style.left = '50%'; loseScreenDiv.style.transform = 'translate(-50%, -50%)'; loseScreenDiv.style.padding = '20px'; loseScreenDiv.style.backgroundColor = 'transparent'; loseScreenDiv.style.color = 'white'; loseScreenDiv.style.textShadow = '2px 2px 4px rgba(0,0,0,0.5)'; loseScreenDiv.style.fontFamily = 'Arial, sans-serif'; loseScreenDiv.style.fontSize = '32px'; loseScreenDiv.style.textAlign = 'center'; loseScreenDiv.style.zIndex = '2000'; loseScreenDiv.style.display = 'none'; loseScreenDiv.innerHTML = `

You Lose!

An opponent has completed 4 laps!

`; document.body.appendChild(loseScreenDiv); // Create start point plane const startPointGeometry = new THREE.PlaneGeometry(75, 4); // Increased width for easier crossing const startPointMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00, transparent: true, opacity: 0, side: THREE.DoubleSide, visible: false }); const startPoint = new THREE.Mesh(startPointGeometry, startPointMaterial); startPoint.rotation.x = -Math.PI / 2; startPoint.position.set(0, 1, -8); // Adjust position based on your track scene.add(startPoint); // Add detection radius visualization // Detection zone dimensions const detectionWidth = 75; // Same as start point width const detectionDepth = 30; // Depth of detection zone const detectionGeometry = new THREE.PlaneGeometry(detectionWidth, detectionDepth); const detectionMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true, transparent: true, opacity: 0, side: THREE.DoubleSide, visible: false }); const detectionZone = new THREE.Mesh(detectionGeometry, detectionMaterial); detectionZone.rotation.x = -Math.PI / 2; detectionZone.position.copy(startPoint.position); detectionZone.visible = false; // Hide the detection zone scene.add(detectionZone); const parentDiv = document.getElementById('renderDiv'); let canvas = document.getElementById('threeRenderCanvas'); if (!canvas) { canvas = document.createElement('canvas'); canvas.id = 'threeRenderCanvas'; parentDiv.appendChild(canvas); } // Create loading screen const loadingScreen = document.createElement('div'); loadingScreen.style.position = 'absolute'; loadingScreen.style.top = '0'; loadingScreen.style.left = '0'; loadingScreen.style.width = '100%'; loadingScreen.style.height = '100%'; loadingScreen.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; loadingScreen.style.color = 'white'; loadingScreen.style.display = 'flex'; loadingScreen.style.justifyContent = 'center'; loadingScreen.style.alignItems = 'center'; loadingScreen.style.fontSize = '24px'; loadingScreen.innerHTML = 'Loading... 0%'; parentDiv.appendChild(loadingScreen); // Loading manager events loadingManager.onProgress = function(url, itemsLoaded, itemsTotal) { const progress = ((itemsLoaded / itemsTotal) * 100).toFixed(0); loadingScreen.innerHTML = `Loading... ${progress}%`; }; loadingManager.onLoad = function() { loadingScreen.style.display = 'none'; // Main menu will be shown automatically since it's already in the DOM }; // Create character container const car = new THREE.Group(); car.position.set(0, 0, 0); scene.add(car); // Create warehouse box containers const warehouseBox = new THREE.Group(); warehouseBox.position.set(-669.90, 0, -128.30); warehouseBox.scale.set(0.7, 0.7, 0.7); warehouseBox.rotation.y = Math.PI / 12; // Rotate by 15 degrees scene.add(warehouseBox); const warehouseBox2 = new THREE.Group(); warehouseBox2.position.set(-543.14, 0, 18.80); warehouseBox2.scale.set(0.7, 0.7, 0.7); warehouseBox2.rotation.y = Math.PI / 12; // Same rotation as first box scene.add(warehouseBox2); const warehouseBox3 = new THREE.Group(); warehouseBox3.position.set(-486.88, 0, -8.52); warehouseBox3.scale.set(0.7, 0.7, 0.7); warehouseBox3.rotation.y = Math.PI / 12; // Same rotation as other boxes scene.add(warehouseBox3); const warehouseBox4 = new THREE.Group(); warehouseBox4.position.set(-435.69, 0, 14.76); warehouseBox4.scale.set(0.7, 0.7, 0.7); warehouseBox4.rotation.y = Math.PI / 12; // Same rotation as other boxes scene.add(warehouseBox4); const warehouseBox5 = new THREE.Group(); warehouseBox5.position.set(-365.07, 0, 104.12); warehouseBox5.scale.set(0.7, 0.7, 0.7); warehouseBox5.rotation.y = Math.PI / 12; // Same rotation as other boxes scene.add(warehouseBox5); const warehouseBox6 = new THREE.Group(); warehouseBox6.position.set(-203.65, 0, 243.05); warehouseBox6.scale.set(0.7, 0.7, 0.7); warehouseBox6.rotation.y = Math.PI / 12; // Same rotation as other boxes scene.add(warehouseBox6); const warehouseBox7 = new THREE.Group(); warehouseBox7.position.set(-104.69, 0, 262.18); warehouseBox7.scale.set(0.7, 0.7, 0.7); warehouseBox7.rotation.y = Math.PI / 12; // Same rotation as other boxes scene.add(warehouseBox7); const warehouseBox8 = new THREE.Group(); warehouseBox8.position.set(-73.66, 0, 291.31); warehouseBox8.scale.set(0.7, 0.7, 0.7); warehouseBox8.rotation.y = Math.PI / 12; // Same rotation as other boxes scene.add(warehouseBox8); // Create coffee container const coffee = new THREE.Group(); coffee.position.set(-695.01, 2, -278.12); // Raised slightly above ground scene.add(coffee); // Create second coffee container const coffee2 = new THREE.Group(); coffee2.position.set(-126.79, 2, 249.89); // Added 2 units to Y like the first coffee scene.add(coffee2); // Load character model const fbxLoader = new FBXLoader(loadingManager); fbxLoader.load('https://play.rosebud.ai/assets/daniel_derek.fbx?CE3t', (fbx) => { fbx.scale.setScalar(0.038); // Adjust scale to match scene size fbx.position.set(0, 0, 8); // Center the model fbx.rotation.y = Math.PI; // Make model face forward // Setup shadows for all meshes in the model fbx.traverse((child) => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; } }); car.add(fbx); }); // Create enemy group const mj_enemy = new THREE.Group(); mj_enemy.position.set(-0.5, 0, 8); scene.add(mj_enemy); // Load michael_james model fbxLoader.load('https://play.rosebud.ai/assets/michael_james.fbx?Z7xL', (fbx) => { fbx.scale.setScalar(0.038); // Match the scale of daniel_derek fbx.rotation.y = Math.PI; // Make model face forward // Setup shadows for all meshes in the model fbx.traverse((child) => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; } }); mj_enemy.add(fbx); // Add to mj_enemy group instead of scene }); // Create enemy group for lucas_oliver const lo_enemy = new THREE.Group(); lo_enemy.position.set(0.5, 0, 8); // Position to the other side of daniel_derek scene.add(lo_enemy); // Load lucas_oliver model fbxLoader.load('https://play.rosebud.ai/assets/lucas_oliver.fbx?yosY', (fbx) => { fbx.scale.setScalar(0.038); // Match the scale of other models fbx.rotation.y = Math.PI; // Make model face forward // Setup shadows for all meshes in the model fbx.traverse((child) => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; } }); lo_enemy.add(fbx); // Add to lo_enemy group }); // Create water dispenser containers const waterDispenser = new THREE.Group(); waterDispenser.position.set(-406.74, 0, -212.74); scene.add(waterDispenser); const waterDispenser2 = new THREE.Group(); waterDispenser2.position.set(-409.37, 0, -247.31); waterDispenser2.rotation.y = Math.PI / -1; // 90-degree rotation around Y-axis scene.add(waterDispenser2); const waterDispenser3 = new THREE.Group(); waterDispenser3.position.set(-428.57, 0, -263.67); scene.add(waterDispenser3); const waterDispenser4 = new THREE.Group(); waterDispenser4.position.set(-449.30, 0, -275.49); scene.add(waterDispenser4); // Create track group const track = new THREE.Group(); track.position.set(36, 0, -2); // Position at origin scene.add(track); // Load track model fbxLoader.load('https://play.rosebud.ai/assets/test_track_05.fbx?bqk3', (fbx) => { fbx.scale.setScalar(0.035); // Adjust scale as needed // Setup shadows for all meshes in the track fbx.traverse((child) => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; } }); track.add(fbx); // Add to track group }); // Load coffee model fbxLoader.load('https://play.rosebud.ai/assets/coffee_2.fbx?J3xh', (fbx) => { fbx.scale.setScalar(0.1); // Maintain the same scale fbx.position.set(0, -15, 0); // Setup shadows for coffee model fbx.traverse((child) => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; } }); coffee.add(fbx); // Add cloned coffee model to coffee2 const fbxClone = fbx.clone(); coffee2.add(fbxClone); }); // Create whiteboard container const whiteboard = new THREE.Group(); whiteboard.position.set(-208.09, 0, -241.12); scene.add(whiteboard); // Load whiteboard drawing texture const whiteboardTexture = textureLoader.load('https://play.rosebud.ai/assets/whiteboard_final.png?1u1T'); const whiteboardDrawingGeometry = new THREE.PlaneGeometry(14.6, 8.8); // 16:9 aspect ratio, scaled down further const whiteboardDrawingMaterial = new THREE.MeshBasicMaterial({ map: whiteboardTexture, side: THREE.DoubleSide }); const whiteboardDrawing = new THREE.Mesh(whiteboardDrawingGeometry, whiteboardDrawingMaterial); whiteboardDrawing.position.set(0, 8.3, -0.15); // Lower Y position for better alignment with smaller scale whiteboardDrawing.rotation.set(0, Math.PI / 1, 0); // Rotated to face the opposite direction whiteboard.add(whiteboardDrawing); // Load whiteboard model fbxLoader.load('https://play.rosebud.ai/assets/whiteboard.fbx?CtWa', (fbx) => { fbx.scale.setScalar(0.025); // Further reduced scale for smaller size fbx.rotation.y = Math.PI / 2; // Rotate by 30 degrees // Setup shadows for whiteboard model fbx.traverse((child) => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; } }); whiteboard.add(fbx); }); // Load warehouse box model fbxLoader.load('https://play.rosebud.ai/assets/warehouse_box.fbx?Zgdv', (fbx) => { fbx.scale.setScalar(0.050); // Reduced scale for the model // Setup shadows for warehouse box model fbx.traverse((child) => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; } }); // Add to all warehouse boxes warehouseBox.add(fbx.clone()); warehouseBox2.add(fbx.clone()); warehouseBox3.add(fbx.clone()); warehouseBox4.add(fbx.clone()); warehouseBox5.add(fbx.clone()); warehouseBox6.add(fbx.clone()); warehouseBox7.add(fbx.clone()); warehouseBox8.add(fbx.clone()); }); // Load water dispenser models fbxLoader.load('https://play.rosebud.ai/assets/waterdispenser_2.fbx?wHiV', (fbx) => { fbx.scale.setScalar(0.025); // Scaled down water dispenser // Setup shadows for water dispenser model fbx.traverse((child) => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; } }); // Add to all water dispensers waterDispenser.add(fbx.clone()); waterDispenser2.add(fbx.clone()); waterDispenser3.add(fbx.clone()); waterDispenser4.add(fbx.clone()); }); // Clock for animation const clock = new THREE.Clock(); // Initialize the camera const camera = new THREE.PerspectiveCamera( 80, canvas.offsetWidth / canvas.offsetHeight, 0.1, 1000 ); camera.position.set(0, 10, 20); camera.lookAt(car.position); // Initialize the renderer with HDR const renderer = new THREE.WebGLRenderer({ antialias: false, 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.ReinhardToneMapping; renderer.toneMappingExposure = 1.6; // 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, // increased bloom strength 0.8, // increased radius for softer bloom 0.6 // reduced threshold for more bloom effect ); composer.addPass(bloomPass); // Add anti-aliasing const smaaPass = new SMAAPass( window.innerWidth * renderer.getPixelRatio(), window.innerHeight * renderer.getPixelRatio() ); composer.addPass(smaaPass); // Initialize composer size composer.setSize(parentDiv.clientWidth, parentDiv.clientHeight); // Add sunlight const sunlight = new THREE.DirectionalLight(0xffffff, 1.4); sunlight.position.set(5, 10, 7); sunlight.castShadow = false; scene.add(sunlight); // Add ambient light to reduce contrast const ambientLight = new THREE.AmbientLight(0xffffff, 2.5); scene.add(ambientLight); // Define sky colors for environmental lighting const skyColor = new THREE.Color(0xf0f5ff); // Almost white sky const groundColor = new THREE.Color(0xffffff); // Pure 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(1500, 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 use custom camera following let carSpeed = 0; const maxSpeed = 0.5; let isSpeedBoosted = false; let speedBoostEndTime = 0; const speedBoostDuration = 2000; // 2 seconds in milliseconds const speedBoostMultiplier = 2; // Double the speed during boost const acceleration = 0.005; const deceleration = 0.01; const baseSteeringAngle = 0.015; // Base steering angle let steeringAngle = baseSteeringAngle; let wheelAngle = 0; const maxWheelAngle = Math.PI / 6; // Reduced max wheel angle let leftKeyPressStartTime = 0; // Track when A key was pressed let rightKeyPressStartTime = 0; // Track when D key was pressed let isSensitivityIncreased = false; // Track if sensitivity is increased // Enemy AI configuration const enemyConfig = { followDistance: 6, rotationSpeed: 0.05, positionLerpSpeed: 0.02, maxSpeed: 0.05, catchupThreshold: 8, minDistance: 4, speedBoostChance: 0.01, // Increased chance for overtaking (10x more frequent) speedBoostMultiplier: 2.0, // Increased multiplier for more aggressive boosts speedBoostDuration: 2000, // Longer boost duration frontDetectionAngle: Math.PI / 4, overtakeDistance: 15 // Increased distance for more aggressive overtaking }; // Enemy state let mjEnemySpeed = 0; let targetRotation = 0; const rotationLerpFactor = 0.02; // Further reduced for even smoother transitions const rotationDelay = 1.8; // Increased delay for slower turning response // Enemy state tracking const enemyStates = { mj_enemy: { speed: 0, isSpeedBoosting: false, speedBoostEndTime: 0 }, lo_enemy: { speed: 0, isSpeedBoosting: false, speedBoostEndTime: 0 } }; // Removed duplicate declaration of speedBoostEndTime since it's already declared at line 298 // Create flat terrain // Setup improved lighting system // Create initial scene // Animation loop // Add these variables at the top of your code let lastPhoneCallTime = 0; let gameStartTime = 0; // Add variable to track when game started const phoneCallStartDelay = 10000; // 10 second initial delay // Create phone call overlay const phoneCallOverlay = document.createElement('div'); phoneCallOverlay.id = 'phoneCallOverlay'; phoneCallOverlay.style.position = 'fixed'; phoneCallOverlay.style.top = '50%'; phoneCallOverlay.style.left = '50%'; phoneCallOverlay.style.transform = 'translate(-50%, -50%)'; phoneCallOverlay.style.width = '100%'; phoneCallOverlay.style.height = '100%'; phoneCallOverlay.style.zIndex = '1000'; phoneCallOverlay.style.display = 'none'; phoneCallOverlay.innerHTML = `

`; document.body.appendChild(phoneCallOverlay); // Function to check and trigger random phone calls function checkRandomPhoneCall() { const currentTime = Date.now(); // Only show phone call if: // 1. Game is in progress // 2. Enough time has passed since last call // 3. Phone call overlay is not already showing // 4. Win/lose screens are not showing // 5. Random chance is met if (assetsLoaded && gameStarted && currentTime - gameStartTime > phoneCallStartDelay && // Ensure 10 seconds have passed since game start currentTime - lastPhoneCallTime > 15000 && // At least 15 seconds between subsequent calls phoneCallOverlay.style.display === 'none' && winScreenDiv.style.display !== 'block' && loseScreenDiv.style.display !== 'block' && Math.random() < 0.01) { // 1% chance each frame to show phone call // Play vibrate sound first const vibrateSound = new Audio('https://play.rosebud.ai/assets/vibrate.mp3?5pvu'); vibrateSound.play(); // Wait for vibrate sound to play before showing overlay setTimeout(() => { phoneCallOverlay.style.display = 'block'; }, 750); // Longer delay to ensure vibrate sound is heard lastPhoneCallTime = currentTime; } } function animate() { requestAnimationFrame(animate); const delta = clock.getDelta(); // Update pressure bars if (assetsLoaded && gameStarted) { // Update left pressure bar (A key) if (keysPressed.left) { const leftPressTime = Date.now() - leftKeyPressStartTime; const leftPercentage = Math.min((leftPressTime / 300) * 100, 100); leftPressureFill.style.width = `${leftPercentage}%`; leftPressureFill.style.backgroundColor = leftPressTime >= 300 ? '#ff4444' : '#4CAF50'; } else { leftPressureFill.style.width = '0%'; leftPressureFill.style.backgroundColor = '#4CAF50'; } // Update right pressure bar (D key) if (keysPressed.right) { const rightPressTime = Date.now() - rightKeyPressStartTime; const rightPercentage = Math.min((rightPressTime / 300) * 100, 100); rightPressureFill.style.width = `${rightPercentage}%`; rightPressureFill.style.backgroundColor = rightPressTime >= 300 ? '#ff4444' : '#4CAF50'; } else { rightPressureFill.style.width = '0%'; rightPressureFill.style.backgroundColor = '#4CAF50'; } } if (assetsLoaded && gameStarted) { applyControls(); // Apply camera controls updateEnemyAI(); // Update enemy AI checkRandomPhoneCall(); // Check for random phone call // Update particles if (isSpeedBoosted) { // Ensure particles are visible during boost particleMaterial.opacity = 0.6; const positions = particles.geometry.attributes.position.array; // Update each particle for (let i = 0; i < particleCount; i++) { // Always reset a portion of particles each frame to ensure continuous flow if (lifetimes[i] <= 0 || Math.random() < 0.1) { // 10% chance to reset each frame // Reset particle to car position with offset based on car's rear const offset = new THREE.Vector3( Math.sin(car.rotation.y) * 2, // Offset behind car 0, Math.cos(car.rotation.y) * 2 ); const basePos = car.position.clone().add(offset); positions[i * 3] = basePos.x + (Math.random() - 0.5) * 2; positions[i * 3 + 1] = basePos.y; positions[i * 3 + 2] = basePos.z + (Math.random() - 0.5) * 2; // Reset velocity with direction based on car rotation const angle = car.rotation.y; const speedFactor = 1.5; // Increased particle speed velocities[i * 3] = (Math.sin(angle) * speedFactor + (Math.random() - 0.5)) * 0.5; velocities[i * 3 + 1] = Math.random() * 0.5; velocities[i * 3 + 2] = (Math.cos(angle) * speedFactor + (Math.random() - 0.5)) * 0.5; // Reset lifetime with variation lifetimes[i] = 0.5 + Math.random() * 0.5; // Lifetime between 0.5 and 1.0 } else { // Update position based on velocity positions[i * 3] += velocities[i * 3]; positions[i * 3 + 1] += velocities[i * 3 + 1]; positions[i * 3 + 2] += velocities[i * 3 + 2]; // Update lifetime lifetimes[i] -= delta; } } particles.geometry.attributes.position.needsUpdate = true; } else { // Hide particles when not boosting particleMaterial.opacity = 0; } } composer.render(delta); } // 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); // Inject CSS styles dynamically const styles = ` #mainMenu { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url('https://play.rosebud.ai/assets/bg_final.png?szNa') no-repeat center center; background-size: cover; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 9999; } #mainMenu #gameTitle { font-size: 100px; /* Adjust size as needed */ color: white; text-shadow: 3px 3px 6px rgba(0,0,0,0.7); margin-bottom: 40px; font-family: 'Arial', sans-serif; /* Example font */ text-align: center; } #mainMenu img:first-child { /* This style was for the old logo, we might not need it or adjust it */ width: 800px; /* Example: if you had a subtitle image or similar */ height: auto; margin-bottom: 40px; } #startButton:hover { transform: scale(1.1); } `; // Append the styles to the head const styleSheet = document.createElement("style"); styleSheet.type = "text/css"; styleSheet.innerText = styles; document.head.appendChild(styleSheet); // Create acceleration sound with seamless looping using the new sound file const accelerateSound = new Audio('https://play.rosebud.ai/assets/accelerate_finalv2.mp3?goiK'); accelerateSound.loop = true; // Enable looping accelerateSound.addEventListener('ended', () => { // Ensure seamless transition accelerateSound.currentTime = 0; if (!accelerateSound.paused) { accelerateSound.play(); } }); // Preload the audio for faster response accelerateSound.load(); // Create reverse sound const reverseSound = new Audio('https://play.rosebud.ai/assets/reverse_finalv2.mp3?rhVb'); reverseSound.loop = true; // Enable looping for continuous reverse sound reverseSound.volume = 0.7; // Slightly lower volume for reverse sound // Create hit obstacles sound const hitObstaclesSound = new Audio('https://play.rosebud.ai/assets/hitobstacles_finalv2.mp3?A0sE'); hitObstaclesSound.volume = 0.8; // Set appropriate volume for collision sound // Create collect sound const collectSound = new Audio('https://play.rosebud.ai/assets/collect_finalv2.mp3?qakr'); collectSound.volume = 0.8; // Set appropriate volume for collection sound // Create boost sound const boostSound = new Audio('https://play.rosebud.ai/assets/boost_finalv2.mp3?Ewdv'); boostSound.volume = 0.8; // Set appropriate volume for boost sound // Define keysPressed object with standardized key names const keysPressed = { up: false, down: false, left: false, right: false, jump: false, shift: false, e: 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; }); } // ========================= // Keyboard Controls Integration // ========================= // Add event listeners for keyboard controls window.addEventListener('keydown', (event) => { switch (event.code) { case 'KeyQ': isBackView = !isBackView; // Toggle back view break; case 'ArrowUp': case 'KeyW': keysPressed.up = true; break; case 'ArrowDown': case 'KeyS': keysPressed.down = true; break; case 'ArrowLeft': case 'KeyA': if (!keysPressed.left) { leftKeyPressStartTime = Date.now(); } keysPressed.left = true; break; case 'ArrowRight': case 'KeyD': if (!keysPressed.right) { rightKeyPressStartTime = Date.now(); } keysPressed.right = true; break; case 'Space': keysPressed.jump = true; break; case 'ShiftLeft': case 'ShiftRight': keysPressed.shift = true; break; case 'KeyE': keysPressed.e = true; // Hide phone call overlay when E is pressed const phoneCallOverlay = document.querySelector('#phoneCallOverlay'); if (phoneCallOverlay && phoneCallOverlay.style.display === 'block') { phoneCallOverlay.style.display = 'none'; lastPhoneCallTime = Date.now(); // Reset the timer when dismissed // Play decline sound when dismissing phone call const declineSound = new Audio('https://play.rosebud.ai/assets/decline.mp3?TYYy'); declineSound.play(); } 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; case 'ShiftLeft': case 'ShiftRight': keysPressed.shift = false; break; default: break; } }); // ========================= // End of Mobile and Keyboard Controls Integration // ========================= // Function to update a single enemy function updateSingleEnemy(enemy, enemyState, offset) { // Check if enemy should move based on multiple conditions if (!enemyCanMove || Math.abs(carSpeed) < 0.001) return; // Special handling for mj_enemy's initial movement if (enemy === mj_enemy && Date.now() < mjEnemyStartMoveTime) { // Keep mj_enemy at starting position during initial delay enemy.position.set(-0.5, 0, 8); enemy.rotation.y = Math.PI; return; } // Check if car is stopped (using a small threshold) const isCarStopped = Math.abs(carSpeed) < 0.001; // If car is stopped, keep enemies behind the car if (isCarStopped) { enemyState.speed = 0; // Calculate target position behind car with offset const behindOffset = new THREE.Vector3( Math.sin(car.rotation.y) * 5 + offset, // Add horizontal offset 0, Math.cos(car.rotation.y) * 5 ); const targetPosition = car.position.clone().add(behindOffset); // Smoothly interpolate enemy position and rotation enemy.position.lerp(targetPosition, 0.05); enemy.rotation.y = THREE.MathUtils.lerp(enemy.rotation.y, car.rotation.y, 0.05); return; } // Calculate distance and direction to car const distanceToCar = enemy.position.distanceTo(car.position); const directionToCar = new THREE.Vector2( car.position.x - enemy.position.x, car.position.z - enemy.position.z ).normalize(); // Calculate enemy's forward direction const enemyForward = new THREE.Vector2( -Math.sin(enemy.rotation.y), -Math.cos(enemy.rotation.y) ); // Calculate angle between enemy's forward direction and direction to car const angleToCar = Math.acos(enemyForward.dot(directionToCar)); // Check if enemy is in front of the car const isInFront = angleToCar < enemyConfig.frontDetectionAngle; // Handle speed boost const currentTime = Date.now(); if (enemyState.isSpeedBoosting && currentTime > enemyState.speedBoostEndTime) { enemyState.isSpeedBoosting = false; } // Only allow speed boost if car is not currently boosted if (!enemyState.isSpeedBoosting && isInFront && Math.random() < enemyConfig.speedBoostChance && !isSpeedBoosted) { enemyState.isSpeedBoosting = true; enemyState.speedBoostEndTime = currentTime + enemyConfig.speedBoostDuration; } else if (isSpeedBoosted && enemyState.isSpeedBoosting) { // If car starts boosting while enemy is boosting, end enemy boost enemyState.isSpeedBoosting = false; } // Calculate target speed based on distance and boost state let targetSpeed = enemyConfig.maxSpeed; if (enemyState.isSpeedBoosting) { // Calculate boost acceleration based on time since boost started const boostProgress = (currentTime - (enemyState.speedBoostEndTime - enemyConfig.speedBoostDuration)) / 1000; // Take 4 seconds to reach full speed (slower acceleration) const accelerationFactor = Math.min(boostProgress / 4, 1); // Use cubic easing for smoother acceleration const easeInOutCubic = t => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2; const smoothAcceleration = easeInOutCubic(accelerationFactor); // Gradually increase speed during boost with smoother acceleration const maxBoostSpeed = enemyConfig.maxSpeed * 1.5 * enemyConfig.speedBoostMultiplier; targetSpeed = enemyConfig.maxSpeed + (maxBoostSpeed - enemyConfig.maxSpeed) * smoothAcceleration; } else if (distanceToCar < enemyConfig.catchupThreshold) { // Normal following behavior targetSpeed *= (distanceToCar - enemyConfig.minDistance) / (enemyConfig.catchupThreshold - enemyConfig.minDistance); targetSpeed = Math.max(targetSpeed, 0.1); } // Even more gradual speed transition // Use different lerp factors for acceleration and deceleration const isAccelerating = targetSpeed > enemyState.speed; const speedLerpFactor = enemyState.isSpeedBoosting ? (isAccelerating ? 0.01 : 0.03) // Very slow acceleration, faster deceleration during boost : (isAccelerating ? 0.03 : 0.05); // Normal acceleration/deceleration enemyState.speed = THREE.MathUtils.lerp(enemyState.speed, targetSpeed, speedLerpFactor); // Calculate target position with offset const targetPosition = new THREE.Vector3(); const behindOffset = new THREE.Vector3( Math.sin(car.rotation.y) * enemyConfig.followDistance + offset, 0, Math.cos(car.rotation.y) * enemyConfig.followDistance ); // Calculate overtake position when boosting const overtakeOffset = new THREE.Vector3(); if (enemyState.isSpeedBoosting) { // When boosting, aim for a position in front of the car with swerving const time = Date.now() / 1000; // Convert to seconds for smoother oscillation const swerveAmount = Math.sin(time * 2) * 3; // Swerving amplitude of 3 units, frequency of 2 overtakeOffset.set( Math.sin(car.rotation.y) * -enemyConfig.overtakeDistance + swerveAmount, 0, Math.cos(car.rotation.y) * -enemyConfig.overtakeDistance ); } else { // Normal following behavior with swerving const time = Date.now() / 1000; const swerveAmount = Math.sin(time * 1.5) * 2; // Slower swerving when not overtaking overtakeOffset.set( swerveAmount, 0, 0 ); } targetPosition.copy(car.position).add(enemyState.isSpeedBoosting ? overtakeOffset : behindOffset).add(overtakeOffset); // Smoothly move enemy to target position enemy.position.lerp(targetPosition, enemyConfig.positionLerpSpeed); enemy.rotation.y = car.rotation.y; // Update position based on current speed and rotation enemy.position.x -= Math.sin(enemy.rotation.y) * enemyState.speed; enemy.position.z -= Math.cos(enemy.rotation.y) * enemyState.speed; } // Function to check enemy lap completion function checkEnemyLapCompletion(enemy, enemyName) { const currentTime = Date.now(); const dx = enemy.position.x - startPoint.position.x; const dz = enemy.position.z - startPoint.position.z; // Use the same rectangular collision detection as the car const halfWidth = detectionWidth / 2; const halfDepth = detectionDepth / 2; const inXBounds = Math.abs(dx) < halfWidth; const inZBounds = Math.abs(dz) < halfDepth; // Calculate enemy's forward direction const enemyForward = new THREE.Vector2( -Math.sin(enemy.rotation.y), -Math.cos(enemy.rotation.y) ); // Calculate direction to start point const toStart = new THREE.Vector2(dx, dz).normalize(); // Calculate dot product to determine if enemy is facing the right direction const dotProduct = enemyForward.dot(toStart); // Check if enough time has passed since last crossing const lastCrossTime = enemyName === 'mj_enemy' ? mjLastCrossTime : loLastCrossTime; const timeSinceLastCross = currentTime - lastCrossTime; // Check if enemy is crossing the start point with proper conditions if (inXBounds && inZBounds && // Check if enemy is within rectangular bounds Math.abs(enemy.position.y - startPoint.position.y) < 6 && // More forgiving height check dotProduct < -0.7 && // Ensure enemy is moving in the correct direction timeSinceLastCross >= 20000) { // 20 second delay between crossings // Visual feedback for start point crossing startPoint.material.color.setHex(0xff0000); setTimeout(() => { startPoint.material.color.setHex(0x00ff00); }, 200); // Update last crossing time and increment lap counter if (enemyName === 'mj_enemy') { mjLastCrossTime = currentTime; mjEnemyLaps++; console.log('MJ Enemy Laps:', mjEnemyLaps, '- Next crossing allowed in 20 seconds'); } else if (enemyName === 'lo_enemy') { loLastCrossTime = currentTime; loEnemyLaps++; console.log('LO Enemy Laps:', loEnemyLaps, '- Next crossing allowed in 20 seconds'); } // Check if either enemy has completed 4 laps if (mjEnemyLaps >= 4 || loEnemyLaps >= 4) { // Stop all currently playing sounds if (window.gameStartSound) { window.gameStartSound.pause(); window.gameStartSound.currentTime = 0; } if (accelerateSound && !accelerateSound.paused) accelerateSound.pause(); if (reverseSound && !reverseSound.paused) reverseSound.pause(); if (boostSound && !boostSound.paused) boostSound.pause(); if (hitObstaclesSound && !hitObstaclesSound.paused) hitObstaclesSound.pause(); if (collectSound && !collectSound.paused) collectSound.pause(); // Play lose sound const loseSound = new Audio('https://play.rosebud.ai/assets/lose_final.mp3?7ikN'); loseSound.play(); // Determine which enemy won const winningEnemy = mjEnemyLaps >= 4 ? 'Michael James' : 'Lucas Oliver'; // Show lose screen with try again button loseScreenDiv.innerHTML = `

`; loseScreenDiv.style.display = 'block'; // Hide phone call if it's showing phoneCallOverlay.style.display = 'none'; // Pause the game assetsLoaded = false; // Stop car movement carSpeed = 0; // Disable controls Object.keys(keysPressed).forEach(key => keysPressed[key] = false); } } } // Function to update all enemies function updateEnemyAI() { // Update mj_enemy with offset to the left updateSingleEnemy(mj_enemy, enemyStates.mj_enemy, -2); // Update lo_enemy with offset to the right updateSingleEnemy(lo_enemy, enemyStates.lo_enemy, 2); // Check lap completion for both enemies checkEnemyLapCompletion(mj_enemy, 'mj_enemy'); checkEnemyLapCompletion(lo_enemy, 'lo_enemy'); // Check if car is stopped const isCarStopped = Math.abs(carSpeed) < 0.001; if (isCarStopped) { mjEnemySpeed = 0; return; } // Calculate distance and direction to car const distanceToCar = mj_enemy.position.distanceTo(car.position); const directionToCar = new THREE.Vector2( car.position.x - mj_enemy.position.x, car.position.z - mj_enemy.position.z ).normalize(); // Calculate enemy's forward direction const enemyForward = new THREE.Vector2( -Math.sin(mj_enemy.rotation.y), -Math.cos(mj_enemy.rotation.y) ); // Calculate angle between enemy's forward direction and direction to car const angleToCar = Math.acos(enemyForward.dot(directionToCar)); // Check if enemy is in front of the car const isInFront = angleToCar < enemyConfig.frontDetectionAngle; // Handle speed boost const currentTime = Date.now(); if (enemyStates.mj_enemy.isSpeedBoosting && currentTime > enemyStates.mj_enemy.speedBoostEndTime) { enemyStates.mj_enemy.isSpeedBoosting = false; } // Only allow speed boost if car is not currently boosted if (!enemyStates.mj_enemy.isSpeedBoosting && isInFront && Math.random() < enemyConfig.speedBoostChance && !isSpeedBoosted) { enemyStates.mj_enemy.isSpeedBoosting = true; enemyStates.mj_enemy.speedBoostEndTime = currentTime + enemyConfig.speedBoostDuration; } else if (isSpeedBoosted && enemyStates.mj_enemy.isSpeedBoosting) { // If car starts boosting while enemy is boosting, end enemy boost enemyStates.mj_enemy.isSpeedBoosting = false; } // Calculate target speed based on distance and boost state let targetSpeed = enemyConfig.maxSpeed; if (enemyStates.mj_enemy.isSpeedBoosting) { // Calculate boost acceleration based on time since boost started const boostProgress = (currentTime - (enemyStates.mj_enemy.speedBoostEndTime - enemyConfig.speedBoostDuration)) / 1000; const accelerationFactor = Math.min(boostProgress / 2, 1); // Take 2 seconds to reach full speed // Gradually increase speed during boost const maxBoostSpeed = enemyConfig.maxSpeed * 1.5 * enemyConfig.speedBoostMultiplier; targetSpeed = enemyConfig.maxSpeed + (maxBoostSpeed - enemyConfig.maxSpeed) * accelerationFactor; } else if (distanceToCar < enemyConfig.catchupThreshold) { // Gradually reduce speed as we get closer to the car targetSpeed *= (distanceToCar - enemyConfig.minDistance) / (enemyConfig.catchupThreshold - enemyConfig.minDistance); targetSpeed = Math.max(targetSpeed, 0.1); // Maintain minimum movement } // More gradual speed transition const speedLerpFactor = enemyStates.mj_enemy.isSpeedBoosting ? 0.02 : 0.05; // Slower acceleration during boost mjEnemySpeed = THREE.MathUtils.lerp(mjEnemySpeed, targetSpeed, speedLerpFactor); // Calculate a slightly randomized position const time = Date.now() / 1000; // Convert to seconds for smoother oscillation const swerveAmount = Math.sin(time * 1.5) * 2; // Amplitude of 2 units, frequency of 1.5 const randomOffset = new THREE.Vector3( swerveAmount, // Smooth swerving on X axis 0, 0 ); // Calculate target position with some randomization const targetPosition = new THREE.Vector3(); const behindOffset = new THREE.Vector3( Math.sin(car.rotation.y) * enemyConfig.followDistance, 0, Math.cos(car.rotation.y) * enemyConfig.followDistance ); // Add random offset to target position targetPosition.copy(car.position).add(behindOffset).add(randomOffset); // Smoothly move enemy to target position mj_enemy.position.lerp(targetPosition, enemyConfig.positionLerpSpeed); // Set enemy rotation to match car rotation exactly mj_enemy.rotation.y = car.rotation.y; // Update position based on current speed and rotation mj_enemy.position.x -= Math.sin(mj_enemy.rotation.y) * mjEnemySpeed; mj_enemy.position.z -= Math.cos(mj_enemy.rotation.y) * mjEnemySpeed; } // Function to apply controls based on keysPressed function applyControls() { // Check for collision with coffee and apply speed boost (car only) if (coffee.visible || coffee2.visible) { // Check if either coffee is visible const distanceToCoffee = coffee.visible ? car.position.distanceTo(coffee.position) : Infinity; const distanceToCoffee2 = coffee2.visible ? car.position.distanceTo(coffee2.position) : Infinity; // Calculate 2D distance (ignoring Y axis) for more reliable collision const distance2D = Math.sqrt( Math.pow(car.position.x - coffee.position.x, 2) + Math.pow(car.position.z - coffee.position.z, 2) ); // More forgiving collision detection const distance2D_1 = coffee.visible ? Math.sqrt( Math.pow(car.position.x - coffee.position.x, 2) + Math.pow(car.position.z - coffee.position.z, 2) ) : Infinity; const distance2D_2 = coffee2.visible ? Math.sqrt( Math.pow(car.position.x - coffee2.position.x, 2) + Math.pow(car.position.z - coffee2.position.z, 2) ) : Infinity; const isCarCollision1 = coffee.visible && distance2D_1 < 5 && Math.abs(car.position.y - coffee.position.y) < 5; const isCarCollision2 = coffee2.visible && distance2D_2 < 5 && Math.abs(car.position.y - coffee2.position.y) < 5; if (isCarCollision1 || isCarCollision2) { // Show boost message boostMessageDiv.style.display = 'block'; // Play collection sound collectSound.currentTime = 0; // Reset sound to start collectSound.play(); // Make the collided coffee model disappear if (isCarCollision1) { coffee.visible = false; coffee.position.set(-695.01, 2, -278.12); } else { coffee2.visible = false; coffee2.position.set(-126.79, 2, 249.89); } } } // Check for speed boost activation when message is shown if (boostMessageDiv.style.display === 'block' && keysPressed.shift && !isSpeedBoosted) { isSpeedBoosted = true; speedBoostEndTime = Date.now() + speedBoostDuration; // Hide message only when shift is pressed boostMessageDiv.style.display = 'none'; // Play boost sound boostSound.currentTime = 0; // Reset sound to start boostSound.play(); // When boost message disappears, wait 2 seconds and respawn all coffee models setTimeout(() => { coffee.visible = true; coffee2.visible = true; // Reset coffee positions to their original locations coffee.position.set(-695.01, 2, -278.12); coffee2.position.set(-126.79, 2, 249.89); }, 2000); } // Check if speed boost should end if (isSpeedBoosted && Date.now() > speedBoostEndTime) { isSpeedBoosted = false; } // Handle acceleration and deceleration let currentMaxSpeed = maxSpeed; // Apply 50% speed increase when boost message is shown if (boostMessageDiv.style.display === 'block') { currentMaxSpeed *= 1; } // Apply speed boost multiplier if activated if (isSpeedBoosted) { currentMaxSpeed *= speedBoostMultiplier; } if (keysPressed.up) { carSpeed = Math.min(carSpeed + acceleration, currentMaxSpeed); // Play acceleration sound with volume based on speed if (accelerateSound.paused) { accelerateSound.volume = 0.2; // Start at 20% volume accelerateSound.play(); } // Gradually increase volume based on speed with safety clamp accelerateSound.volume = Math.max(0.2, Math.min((carSpeed / currentMaxSpeed) * 1.5, 1)); } else if (keysPressed.down) { carSpeed = Math.max(carSpeed - acceleration, -currentMaxSpeed / 2); // Play reverse sound if not already playing if (reverseSound.paused) { reverseSound.volume = 0; // Start silent reverseSound.play(); } // Gradually increase reverse sound volume based on reverse speed with safety clamp reverseSound.volume = Math.max(0, Math.min(Math.abs(carSpeed) / (currentMaxSpeed / 2), 0.7)); // Fade out acceleration sound if (!accelerateSound.paused) { fadeOutSound(accelerateSound, 100); } } else { // Apply deceleration when no input // Fade out both acceleration and reverse sounds if (!accelerateSound.paused) { fadeOutSound(accelerateSound, 100); } if (!reverseSound.paused) { fadeOutSound(reverseSound, 100); } if (Math.abs(carSpeed) < deceleration) { carSpeed = 0; } else { carSpeed -= Math.sign(carSpeed) * deceleration; } } // Handle steering with sensitivity boost if (keysPressed.left) { // Check if A key has been held for 0.2 seconds if (Date.now() - leftKeyPressStartTime >= 200 && !isSensitivityIncreased) { steeringAngle = baseSteeringAngle * 2.0; // Increase sensitivity by 100% isSensitivityIncreased = true; } wheelAngle = Math.min(wheelAngle + steeringAngle, maxWheelAngle); targetRotation += (steeringAngle * Math.sign(carSpeed) * rotationDelay) * (Math.abs(carSpeed) / maxSpeed) * 0.7; } else if (keysPressed.right) { // Check if D key has been held for 0.3 seconds if (Date.now() - rightKeyPressStartTime >= 200 && !isSensitivityIncreased) { steeringAngle = baseSteeringAngle * 2.0; // Increase sensitivity by 100% isSensitivityIncreased = true; } wheelAngle = Math.max(wheelAngle - steeringAngle, -maxWheelAngle); targetRotation -= (steeringAngle * Math.sign(carSpeed) * rotationDelay) * (Math.abs(carSpeed) / maxSpeed) * 0.7; } else { // Reset wheel angle and steering sensitivity wheelAngle = 0; steeringAngle = baseSteeringAngle; isSensitivityIncreased = false; } // Smoothly interpolate the car's rotation towards the target rotation car.rotation.y = THREE.MathUtils.lerp(car.rotation.y, targetRotation, rotationLerpFactor); // Update car position // Calculate next position const nextX = car.position.x - Math.sin(car.rotation.y) * carSpeed; const nextZ = car.position.z - Math.cos(car.rotation.y) * carSpeed; // Check collision with box colliders const carBoundingBox = new THREE.Box3().setFromObject(car); const colliderBoundingBox = new THREE.Box3().setFromObject(boxCollider); const colliderBoundingBox2 = new THREE.Box3().setFromObject(boxCollider2); // Get bounding boxes for warehouse colliders const warehouseColliderBoxes = [ new THREE.Box3().setFromObject(warehouseCollider1), new THREE.Box3().setFromObject(warehouseCollider2), new THREE.Box3().setFromObject(warehouseCollider3), new THREE.Box3().setFromObject(warehouseCollider4), new THREE.Box3().setFromObject(warehouseCollider5), new THREE.Box3().setFromObject(warehouseCollider6), new THREE.Box3().setFromObject(warehouseCollider7), new THREE.Box3().setFromObject(warehouseCollider8), new THREE.Box3().setFromObject(waterDispenserCollider1), new THREE.Box3().setFromObject(waterDispenserCollider2), new THREE.Box3().setFromObject(waterDispenserCollider3), new THREE.Box3().setFromObject(waterDispenserCollider4) ]; // Create a temporary position for collision testing const tempCar = car.clone(); tempCar.position.set(nextX, car.position.y, nextZ); const nextCarBoundingBox = new THREE.Box3().setFromObject(tempCar); // Check collision with all boxes let collision = false; let collisionNormal = new THREE.Vector3(); const bounceForce = 0.5; // Bounce force multiplier // Function to handle bounce const handleBounce = (boxCenter) => { const currentTime = Date.now(); // Calculate collision normal (direction to bounce) collisionNormal.subVectors(car.position, boxCenter).normalize(); // Apply bounce force const currentSpeed = Math.abs(carSpeed); const bounceSpeed = currentSpeed * bounceForce; // Update car position away from collision car.position.x += collisionNormal.x * bounceSpeed; car.position.z += collisionNormal.z * bounceSpeed; // Check if enough time has passed since last collision if (currentTime - lastCollisionTime >= collisionCooldown) { // Play hit obstacles sound hitObstaclesSound.currentTime = 0; // Reset sound to start hitObstaclesSound.play(); // Update collision count and time collisionCount++; lastCollisionTime = currentTime; checkCollisionGameOver(); } // Always apply full bounce effect regardless of cooldown carSpeed = -carSpeed * bounceForce; targetRotation += collisionNormal.x * 0.2; }; // Check main colliders if (nextCarBoundingBox.intersectsBox(colliderBoundingBox)) { collision = true; handleBounce(boxCollider.position); } else if (nextCarBoundingBox.intersectsBox(colliderBoundingBox2)) { collision = true; handleBounce(boxCollider2.position); } // Check whiteboard collider const whiteboardColliderBox = new THREE.Box3().setFromObject(whiteboardCollider); if (nextCarBoundingBox.intersectsBox(whiteboardColliderBox)) { collision = true; handleBounce(whiteboardCollider.position); } // Check warehouse colliders for (let i = 0; i < warehouseColliderBoxes.length; i++) { const box = warehouseColliderBoxes[i]; if (nextCarBoundingBox.intersectsBox(box)) { collision = true; // Get the corresponding warehouse collider position const warehouseCollider = [ warehouseCollider1, warehouseCollider2, warehouseCollider3, warehouseCollider4, warehouseCollider5, warehouseCollider6, warehouseCollider7, warehouseCollider8, waterDispenserCollider1, waterDispenserCollider2, waterDispenserCollider3, waterDispenserCollider4 ][i]; handleBounce(warehouseCollider.position); break; } } // Update position if no collision if (!collision) { car.position.x = nextX; car.position.z = nextZ; } // Animate coffee model - rotation and floating effect const time = clock.getElapsedTime(); // Animate both coffee models coffee.rotation.y += 0.01; // Constant rotation coffee.position.y = 2 + Math.sin(time * 2) * 0.2; // Floating effect: base height + oscillation coffee2.rotation.y += 0.01; // Constant rotation coffee2.position.y = 2 + Math.sin(time * 2) * 0.2; // Floating effect: base height + oscillation // Update wheel rotations // Remove wheel rotations as we no longer have wheels // Instead, we can add character animation here if needed // Update camera position to follow car // Calculate camera position based on view state let cameraOffset; if (isBackView) { // Back view position (closer to car, lower height) cameraOffset = new THREE.Vector3(0, 10, -16); } else { // Normal view position cameraOffset = new THREE.Vector3(0, 10, 16); } const cameraPosition = car.position.clone() .add(cameraOffset.applyMatrix4(new THREE.Matrix4().makeRotationY(car.rotation.y))); camera.position.lerp(cameraPosition, 0.1); camera.lookAt(car.position); // Check if car crosses start point const currentTime = Date.now(); // Calculate 2D distance (ignoring Y axis) for more reliable detection const dx = car.position.x - startPoint.position.x; const dz = car.position.z - startPoint.position.z; const distanceToStart = Math.sqrt(dx * dx + dz * dz); // Calculate car's forward direction const carForward = new THREE.Vector2(-Math.sin(car.rotation.y), -Math.cos(car.rotation.y)); // Calculate direction to start point const toStart = new THREE.Vector2(dx, dz).normalize(); // Calculate dot product to determine if car is facing the right direction const dotProduct = carForward.dot(toStart); // Rectangular collision detection const halfWidth = detectionWidth / 2; const halfDepth = detectionDepth / 2; const inXBounds = Math.abs(dx) < halfWidth; const inZBounds = Math.abs(dz) < halfDepth; if (inXBounds && inZBounds && // Check if car is within rectangular bounds Math.abs(car.position.y - startPoint.position.y) < 6 && // Height check currentTime - lastCheckpointTime > checkpointCooldown) { // Visual feedback for crossing start point startPoint.material.color.setHex(0xff0000); setTimeout(() => { startPoint.material.color.setHex(0x00ff00); }, 200); if (!firstLapPassed) { // First time passing through the start point firstLapPassed = true; lastCheckpointTime = currentTime; console.log('First pass through start point - now counting laps'); } else if (dotProduct < -0.7) { // Check if car is moving in the correct direction // Subsequent passes through the start point lapCount++; lastCheckpointTime = currentTime; // Play passthrough sound on subsequent passes const passSound = new Audio('https://play.rosebud.ai/assets/passthrough.mp3?5EyO'); passSound.play(); lapCounterDiv.innerHTML = `Laps: ${lapCount}/3`; // Visual feedback startPoint.material.color.setHex(0xff0000); setTimeout(() => { startPoint.material.color.setHex(0x00ff00); }, 200); // Check for win condition (3 laps) if (lapCount >= 3) { // Stop game start sound if (window.gameStartSound) { window.gameStartSound.pause(); window.gameStartSound.currentTime = 0; } // Stop any currently playing sounds if (accelerateSound && !accelerateSound.paused) accelerateSound.pause(); if (reverseSound && !reverseSound.paused) reverseSound.pause(); if (boostSound && !boostSound.paused) boostSound.pause(); if (hitObstaclesSound && !hitObstaclesSound.paused) hitObstaclesSound.pause(); if (collectSound && !collectSound.paused) collectSound.pause(); // Play winner sound const winnerSound = new Audio('https://play.rosebud.ai/assets/winner_final.mp3?7qYw'); winnerSound.play(); // Show win screen first winScreenDiv.innerHTML = `

`; winScreenDiv.style.display = 'block'; // Hide phone call if it's showing phoneCallOverlay.style.display = 'none'; // Pause the game assetsLoaded = false; // This will stop updates in the animation loop // Stop car movement carSpeed = 0; // Disable controls Object.keys(keysPressed).forEach(key => keysPressed[key] = false); } } } } // Function to check if game should end due to collisions function checkCollisionGameOver() { if (collisionCount >= 3) { // Stop all currently playing sounds if (window.gameStartSound) { window.gameStartSound.pause(); window.gameStartSound.currentTime = 0; } if (accelerateSound && !accelerateSound.paused) accelerateSound.pause(); if (reverseSound && !reverseSound.paused) reverseSound.pause(); if (boostSound && !boostSound.paused) boostSound.pause(); if (hitObstaclesSound && !hitObstaclesSound.paused) hitObstaclesSound.pause(); if (collectSound && !collectSound.paused) collectSound.pause(); // Play lose sound const loseSound = new Audio('https://play.rosebud.ai/assets/lose_final.mp3?7ikN'); loseSound.play(); // Show lose screen with collision message loseScreenDiv.innerHTML = `