import * as THREE from 'three'; import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; import { FBXLoader } from 'three/addons/loaders/FBXLoader.js'; import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'; import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'; import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js'; import { SMAAPass } from 'three/addons/postprocessing/SMAAPass.js'; // Initialize loading manager and loaders const loadingManager = new THREE.LoadingManager({ onStart: function(url, itemsLoaded, itemsTotal) { console.log('Started loading: ' + url); }, onLoad: function() { console.log('Loading complete!'); assetsLoaded = true; }, onProgress: function(url, itemsLoaded, itemsTotal) { const percentComplete = (itemsLoaded / itemsTotal * 100); console.log('Loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files. ' + percentComplete + '% complete'); }, onError: function(url) { console.error('Error loading: ' + url); } }); const fbxLoader = new FBXLoader(loadingManager); // Initialize background music const backgroundMusic = new Audio('https://play.rosebud.ai/assets/Walking Shadows.mp3?m1F8'); backgroundMusic.loop = true; backgroundMusic.volume = 0.1; // Set volume to 10% let isMoving = false; const pickupSound = new Audio('https://play.rosebud.ai/assets/pickup.mp3?Umpu'); pickupSound.volume = 0.3; // Set volume to 30% // Create pickup text overlay function function showPickupText(text, position) { const pickupText = document.createElement('div'); pickupText.style.position = 'absolute'; pickupText.style.color = 'white'; pickupText.style.fontSize = '24px'; pickupText.style.fontWeight = 'bold'; pickupText.style.textShadow = '2px 2px 2px black'; pickupText.style.pointerEvents = 'none'; pickupText.textContent = text; parentDiv.appendChild(pickupText); // Convert 3D position to screen coordinates const screenPosition = position.clone(); screenPosition.project(camera); const x = (screenPosition.x * 0.5 + 0.5) * parentDiv.clientWidth; const y = (-screenPosition.y * 0.5 + 0.5) * parentDiv.clientHeight; pickupText.style.left = x + 'px'; pickupText.style.top = y + 'px'; // Animate and remove let opacity = 1; let yOffset = 0; const animate = () => { opacity -= 0.02; yOffset -= 1; pickupText.style.opacity = opacity; pickupText.style.transform = `translateY(${yOffset}px)`; if (opacity > 0) { requestAnimationFrame(animate); } else { parentDiv.removeChild(pickupText); } }; requestAnimationFrame(animate); } let mixer; let zombies = []; let potions = []; let laserSight; let isLaserEnabled = false; let isMouseDown = false; let isRadarVisible = true; // Add radar visibility toggle let ammoBoxes = []; let dyingAnimation; let isPaused = false; // Day/night cycle variables let timeOfDay = 0.5; // Start at midday let lastCycleChange = 0; const CYCLE_DURATION = 900; // 15 minutes in seconds // Torch spotlight const torchLight = new THREE.SpotLight(0xFFFAF0, 0); // Warmer white color torchLight.position.set(0, 2, 0); torchLight.angle = Math.PI / 5; // Wider angle torchLight.penumbra = 0.4; // Softer edges torchLight.decay = 1.2; // Less decay for more distance torchLight.distance = 25; // Increased distance torchLight.castShadow = true; torchLight.shadow.mapSize.width = 1024; torchLight.shadow.mapSize.height = 1024; torchLight.shadow.camera.near = 0.5; torchLight.shadow.camera.far = 30; // Increased far plane to match distance // Load the dying and neck bite animations let neckBiteAnimation; fbxLoader.load('https://play.rosebud.ai/assets/Zombie Dying.fbx?l5Jq', (fbx) => { dyingAnimation = fbx.animations[0]; }); fbxLoader.load('https://play.rosebud.ai/assets/Zombie Neck Bite.fbx?268B', (fbx) => { neckBiteAnimation = fbx.animations[0]; }); const textureLoader = new THREE.TextureLoader(loadingManager); const heartTexture = textureLoader.load('https://play.rosebud.ai/assets/a heart icon to represent health.png?UTra'); let assetsLoaded = false; let gunModel; // Initialize GLTFLoader for potion bottle and gun const gltfLoader = new GLTFLoader(loadingManager); // Load gun model gltfLoader.load('https://play.rosebud.ai/assets/gun.glb?uVVw', (gltf) => { gunModel = gltf.scene; gunModel.scale.set(1.0, 1.0, 1.0); // Doubled scale gunModel.position.set(0.3, 0.2, 5); // Using the updated position gunModel.rotation.set(0, Math.PI, 0); // Keep rotation camera.add(gunModel); // Attach to camera so it moves with player view console.log('Gun model loaded and added to camera'); // Make sure materials are visible gunModel.traverse((child) => { if (child.isMesh) { child.material.needsUpdate = true; child.material.metalness = 0.7; child.material.roughness = 0.3; child.castShadow = true; } }); }, undefined, (error) => { console.error('Error loading gun model:', error); }); 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.flexDirection = 'column'; loadingScreen.style.justifyContent = 'center'; loadingScreen.style.alignItems = 'center'; loadingScreen.style.fontSize = '24px'; // Create loading text const loadingText = document.createElement('div'); loadingText.innerHTML = 'Loading... 0%'; loadingText.style.marginBottom = '20px'; loadingScreen.appendChild(loadingText); // Create buttons container const buttonsContainer = document.createElement('div'); buttonsContainer.style.display = 'none'; buttonsContainer.style.flexDirection = 'column'; buttonsContainer.style.gap = '10px'; // Create Instructions button const instructionsButton = document.createElement('button'); instructionsButton.innerHTML = 'Instructions'; instructionsButton.style.padding = '10px 20px'; instructionsButton.style.fontSize = '18px'; instructionsButton.style.cursor = 'pointer'; instructionsButton.style.backgroundColor = '#4CAF50'; instructionsButton.style.border = 'none'; instructionsButton.style.color = 'white'; instructionsButton.style.borderRadius = '5px'; // Create Play Game button const playButton = document.createElement('button'); playButton.innerHTML = 'Play Game'; playButton.style.padding = '10px 20px'; playButton.style.fontSize = '18px'; playButton.style.cursor = 'pointer'; playButton.style.backgroundColor = '#4CAF50'; playButton.style.border = 'none'; playButton.style.color = 'white'; playButton.style.borderRadius = '5px'; // Create Instructions screen const instructionsScreen = document.createElement('div'); instructionsScreen.style.position = 'absolute'; instructionsScreen.style.top = '0'; instructionsScreen.style.left = '0'; instructionsScreen.style.width = '100%'; instructionsScreen.style.height = '100%'; instructionsScreen.style.backgroundColor = 'rgba(0, 0, 0, 0.9)'; instructionsScreen.style.color = 'white'; instructionsScreen.style.display = 'none'; instructionsScreen.style.flexDirection = 'column'; instructionsScreen.style.justifyContent = 'center'; instructionsScreen.style.alignItems = 'center'; instructionsScreen.style.padding = '20px'; instructionsScreen.style.boxSizing = 'border-box'; // Add instructions content instructionsScreen.innerHTML = `

Game Controls

WASD or Arrow Keys - Movement

L - Toggle Scope

Z - Toggle Laser Sight

X - Toggle Rear View

P - Game Paused

M - Toggle Music

R - Toggle Radar

Left Mouse Button - Shoot (Hold for Rapid Fire)

Radar Colors

Red Dots - Zombies

Yellow Dots - Health Potions

Blue Dots - Ammo Boxes

`; // Create Return button const returnButton = document.createElement('button'); returnButton.innerHTML = 'Return'; returnButton.style.padding = '10px 20px'; returnButton.style.fontSize = '18px'; returnButton.style.cursor = 'pointer'; returnButton.style.backgroundColor = '#4CAF50'; returnButton.style.border = 'none'; returnButton.style.color = 'white'; returnButton.style.borderRadius = '5px'; returnButton.style.marginTop = '20px'; instructionsScreen.appendChild(returnButton); buttonsContainer.appendChild(instructionsButton); buttonsContainer.appendChild(playButton); loadingScreen.appendChild(buttonsContainer); parentDiv.appendChild(loadingScreen); parentDiv.appendChild(instructionsScreen); // Loading manager events loadingManager.onProgress = function(url, itemsLoaded, itemsTotal) { const progress = (itemsLoaded / itemsTotal * 100).toFixed(0); loadingText.innerHTML = `Loading... ${progress}%`; }; loadingManager.onLoad = function() { assetsLoaded = true; loadingText.style.display = 'none'; buttonsContainer.style.display = 'flex'; }; loadingManager.onError = function(url) { console.error('Error loading:', url); }; // Add crosshair const crosshair = document.createElement('div'); crosshair.style.position = 'absolute'; crosshair.style.top = '50%'; crosshair.style.left = '50%'; crosshair.style.width = '20px'; crosshair.style.height = '20px'; crosshair.style.transform = 'translate(-50%, -50%)'; crosshair.style.pointerEvents = 'none'; crosshair.id = 'crosshair'; // Create vertical line const verticalLine = document.createElement('div'); verticalLine.style.position = 'absolute'; verticalLine.style.left = '50%'; verticalLine.style.top = '0'; verticalLine.style.width = '2px'; verticalLine.style.height = '100%'; verticalLine.style.backgroundColor = 'white'; verticalLine.style.transform = 'translateX(-50%)'; // Create horizontal line const horizontalLine = document.createElement('div'); horizontalLine.style.position = 'absolute'; horizontalLine.style.left = '0'; horizontalLine.style.top = '50%'; horizontalLine.style.width = '100%'; horizontalLine.style.height = '2px'; horizontalLine.style.backgroundColor = 'white'; horizontalLine.style.transform = 'translateY(-50%)'; // Add lines to crosshair crosshair.appendChild(verticalLine); crosshair.appendChild(horizontalLine); parentDiv.appendChild(crosshair); // Add sniper scope overlay const scopeOverlay = document.createElement('div'); scopeOverlay.id = 'scopeOverlay'; scopeOverlay.style.position = 'absolute'; scopeOverlay.style.top = '0'; scopeOverlay.style.left = '0'; scopeOverlay.style.width = '100%'; scopeOverlay.style.height = '100%'; scopeOverlay.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; scopeOverlay.style.display = 'none'; scopeOverlay.style.pointerEvents = 'none'; // Create scope circle const scopeCircle = document.createElement('div'); scopeCircle.style.position = 'absolute'; scopeCircle.style.top = '50%'; scopeCircle.style.left = '50%'; scopeCircle.style.width = '40%'; scopeCircle.style.height = '40%'; scopeCircle.style.border = '2px solid black'; scopeCircle.style.borderRadius = '50%'; scopeCircle.style.transform = 'translate(-50%, -50%)'; scopeCircle.style.boxShadow = 'inset 0 0 20px black'; scopeCircle.style.background = 'radial-gradient(circle, transparent 70%, black 71%)'; // Create crosshairs const scopeCrosshair = document.createElement('div'); scopeCrosshair.style.position = 'absolute'; scopeCrosshair.style.top = '50%'; scopeCrosshair.style.left = '50%'; scopeCrosshair.style.transform = 'translate(-50%, -50%)'; scopeCrosshair.style.width = '40%'; scopeCrosshair.style.height = '40%'; // Add vertical and horizontal lines const scopeVerticalLine = document.createElement('div'); scopeVerticalLine.style.position = 'absolute'; scopeVerticalLine.style.top = '0'; scopeVerticalLine.style.left = '50%'; scopeVerticalLine.style.width = '1px'; scopeVerticalLine.style.height = '100%'; scopeVerticalLine.style.backgroundColor = 'black'; const scopeHorizontalLine = document.createElement('div'); scopeHorizontalLine.style.position = 'absolute'; scopeHorizontalLine.style.top = '50%'; scopeHorizontalLine.style.left = '0'; scopeHorizontalLine.style.width = '100%'; scopeHorizontalLine.style.height = '1px'; scopeHorizontalLine.style.backgroundColor = 'black'; scopeCrosshair.appendChild(scopeVerticalLine); scopeCrosshair.appendChild(scopeHorizontalLine); scopeOverlay.appendChild(scopeCircle); scopeOverlay.appendChild(scopeCrosshair); parentDiv.appendChild(scopeOverlay); // Add radar const radar = document.createElement('div'); radar.style.position = 'absolute'; radar.style.top = '20px'; radar.style.right = '20px'; radar.style.width = '200px'; radar.style.height = '200px'; radar.style.backgroundColor = 'rgba(0, 20, 0, 0.5)'; radar.style.border = '2px solid #0f0'; radar.style.borderRadius = '50%'; radar.style.overflow = 'hidden'; // Add radar scan line effect const radarScan = document.createElement('div'); radarScan.style.position = 'absolute'; radarScan.style.top = '50%'; radarScan.style.left = '50%'; radarScan.style.width = '50%'; radarScan.style.height = '2px'; radarScan.style.backgroundColor = 'rgba(0, 255, 0, 0.5)'; radarScan.style.transformOrigin = '0 50%'; radarScan.style.animation = 'radar-spin 4s infinite linear'; radar.appendChild(radarScan); // Add player dot (center) const playerDot = document.createElement('div'); playerDot.style.position = 'absolute'; playerDot.style.top = '50%'; playerDot.style.left = '50%'; playerDot.style.width = '6px'; playerDot.style.height = '6px'; playerDot.style.backgroundColor = '#0f0'; playerDot.style.borderRadius = '50%'; playerDot.style.transform = 'translate(-50%, -50%)'; radar.appendChild(playerDot); // Add radar scanning animation const style = document.createElement('style'); style.textContent = ` @keyframes radar-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } `; document.head.appendChild(style); parentDiv.appendChild(radar); // Add Game Over screen const gameOverScreen = document.createElement('div'); gameOverScreen.style.position = 'absolute'; gameOverScreen.style.top = '0'; gameOverScreen.style.left = '0'; gameOverScreen.style.width = '100%'; gameOverScreen.style.height = '100%'; gameOverScreen.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; gameOverScreen.style.color = 'red'; gameOverScreen.style.display = 'none'; gameOverScreen.style.justifyContent = 'center'; gameOverScreen.style.alignItems = 'center'; gameOverScreen.style.fontSize = '72px'; gameOverScreen.style.fontWeight = 'bold'; gameOverScreen.style.fontFamily = 'Arial'; gameOverScreen.innerHTML = `

GAME OVER

`; parentDiv.appendChild(gameOverScreen); // Create pause screen const pauseScreen = document.createElement('div'); pauseScreen.style.position = 'absolute'; pauseScreen.style.top = '0'; pauseScreen.style.left = '0'; pauseScreen.style.width = '100%'; pauseScreen.style.height = '100%'; pauseScreen.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; pauseScreen.style.color = 'white'; pauseScreen.style.display = 'none'; pauseScreen.style.justifyContent = 'center'; pauseScreen.style.alignItems = 'center'; pauseScreen.style.fontSize = '72px'; pauseScreen.style.fontWeight = 'bold'; pauseScreen.style.fontFamily = 'Arial'; pauseScreen.style.zIndex = '1000'; pauseScreen.textContent = 'GAME PAUSED'; parentDiv.appendChild(pauseScreen); // Add HUD const hud = document.createElement('div'); // Player state const player = { speed: 16.5, // Increased by 10% bullets: 200, health: 100, velocity: new THREE.Vector3(0, 0, 0), gravity: -30, canFire: true, score: 0 }; // Create separate container for score const scoreContainer = document.createElement('div'); scoreContainer.style.position = 'absolute'; scoreContainer.style.top = '20px'; scoreContainer.style.left = '50%'; scoreContainer.style.transform = 'translateX(-50%)'; scoreContainer.style.fontFamily = 'Arial'; scoreContainer.style.fontSize = '32px'; scoreContainer.style.userSelect = 'none'; // Add score display const scoreDisplay = document.createElement('div'); scoreDisplay.style.color = '#0f0'; scoreDisplay.textContent = `Score: ${player.score}`; scoreContainer.appendChild(scoreDisplay); parentDiv.appendChild(scoreContainer); // Main HUD container for health and bullets hud.style.position = 'absolute'; hud.style.top = '20px'; hud.style.left = '20px'; hud.style.display = 'flex'; hud.style.alignItems = 'center'; hud.style.fontFamily = 'Arial'; hud.style.fontSize = '24px'; hud.style.userSelect = 'none'; // Add bullets display const bulletsDisplay = document.createElement('div'); bulletsDisplay.style.color = '#00f'; bulletsDisplay.textContent = `Bullets: ${player.bullets}`; hud.appendChild(bulletsDisplay); // Add health display const healthDisplay = document.createElement('div'); healthDisplay.style.marginLeft = '20px'; healthDisplay.style.color = '#ff0'; healthDisplay.textContent = `Health: ${player.health}`; hud.appendChild(healthDisplay); parentDiv.appendChild(hud); // Initialize the camera first const camera = new THREE.PerspectiveCamera( 75, canvas.offsetWidth / canvas.offsetHeight, 0.1, 1000 ); // Initialize the scene const scene = new THREE.Scene(); // Add fog to limit draw distance scene.fog = new THREE.Fog(0xCCCCCC, 20, 100); // Set initial camera position camera.position.set(0, 1.7, 10); camera.lookAt(0, 1.7, 0); console.log('Scene initialized with camera at:', camera.position); const world = new CANNON.World(); world.gravity.set(0, -9.81, 0); // Standard gravity world.defaultContactMaterial.friction = 0.01; // Define physics materials first const groundPhysMaterial = new CANNON.Material('ground'); // Create player physics body const playerShape = new CANNON.Box(new CANNON.Vec3(0.5, 0.9, 0.5)); const playerBody = new CANNON.Body({ mass: 70, // Player mass in kg material: groundPhysMaterial, fixedRotation: true, linearDamping: 0.9, position: new CANNON.Vec3(0, 1.7, 0) }); playerBody.addShape(playerShape); world.addBody(playerBody); world.defaultContactMaterial.restitution = 0; world.solver.iterations = 10; world.solver.tolerance = 0.001; const clock = new THREE.Clock(); // Initialize rear view camera // Create rear view camera const rearCamera = new THREE.PerspectiveCamera( 75, 16 / 9, // Standard 16:9 aspect ratio 0.1, 1000 ); // Adjusted camera position to better view the big ball camera.position.set(0, 1.7, 0); // Start at ground level with height of 1.7 units camera.lookAt(0, 1.7, -1); // Look forward // Movement state const moveState = { forward: false, backward: false, left: false, right: false, sprint: false }; // 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.autoClear = true; // Reset to true for main render renderer.setScissorTest(true); renderer.shadowMap.type = THREE.PCFSoftShadowMap; renderer.outputEncoding = THREE.sRGBEncoding; renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.2; // Initialize post-processing const composer = new EffectComposer(renderer); // Regular scene render pass const renderPass = new RenderPass(scene, camera); composer.addPass(renderPass); // Add subtle bloom effect const bloomPass = new UnrealBloomPass( new THREE.Vector2(window.innerWidth, window.innerHeight), 0.2, // bloom strength 0.4, // radius 0.9 // threshold ); composer.addPass(bloomPass); // Add anti-aliasing const smaaPass = new SMAAPass( window.innerWidth * renderer.getPixelRatio(), window.innerHeight * renderer.getPixelRatio() ); composer.addPass(smaaPass); // Initialize composer size composer.setSize(parentDiv.clientWidth, parentDiv.clientHeight); // Define sky colors for environmental lighting const skyColor = new THREE.Color(0x87CEEB); // Bright sky blue const groundColor = new THREE.Color(0xFFFFFF); // White ground reflection // Create sky dome with improved colors const vertexShader = ` varying vec3 vWorldPosition; 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 } }; // Create textured sky dome const skyGeometry = new THREE.SphereGeometry(500, 32, 15); const skyTexture = textureLoader.load('https://play.rosebud.ai/assets/grey and cloudy sky.png?5Y57'); skyTexture.encoding = THREE.sRGBEncoding; const skyMaterial = new THREE.MeshBasicMaterial({ map: skyTexture, side: THREE.BackSide }); const sky = new THREE.Mesh(skyGeometry, skyMaterial); scene.add(sky); // Lock pointer on click renderer.domElement.addEventListener('click', () => { renderer.domElement.requestPointerLock(); }); // Mouse look controls let pitch = 0; let yaw = 0; document.addEventListener('mousemove', (event) => { if (document.pointerLockElement === renderer.domElement) { yaw -= event.movementX * 0.002; pitch -= event.movementY * 0.002; pitch = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, pitch)); camera.quaternion.setFromEuler(new THREE.Euler(pitch, yaw, 0, 'YXZ')); } }); // Movement controls document.addEventListener('keydown', (event) => { switch (event.code) { case 'KeyM': if (backgroundMusic.paused) { backgroundMusic.play(); } else { backgroundMusic.pause(); } break; case 'KeyR': isRadarVisible = !isRadarVisible; radar.style.display = isRadarVisible ? 'block' : 'none'; break; case 'KeyP': if (gameStarted) { isPaused = !isPaused; pauseScreen.style.display = isPaused ? 'flex' : 'none'; // Control music and sounds based on pause state if (isPaused) { backgroundMusic.pause(); // Stop all currently playing groan sounds document.querySelectorAll('audio').forEach(audio => { if (audio.src.includes('groan')) { audio.pause(); audio.currentTime = 0; } }); } else { backgroundMusic.play(); } } break; case 'KeyX': rearCamera.userData.enabled = !rearCamera.userData.enabled; break; case 'KeyZ': isLaserEnabled = !isLaserEnabled; if (!document.getElementById('scopeOverlay') || document.getElementById('scopeOverlay').style.display === 'none') { laserSight.style.display = isLaserEnabled ? 'block' : 'none'; } break; case 'KeyL': const scopeOverlay = document.getElementById('scopeOverlay'); const normalCrosshair = document.getElementById('crosshair'); if (!scopeOverlay || !normalCrosshair) return; if (scopeOverlay.style.display === 'none') { scopeOverlay.style.display = 'block'; normalCrosshair.style.display = 'none'; if (laserSight) laserSight.style.display = 'none'; camera.fov = 30; // Zoomed in FOV hemiLight.intensity = 1.2; // Increase ambient light sunLight.intensity = 3.0; // Increase sun light renderer.toneMappingExposure = 1.8; // Increase overall exposure } else { scopeOverlay.style.display = 'none'; normalCrosshair.style.display = 'block'; if (laserSight && isLaserEnabled) laserSight.style.display = 'block'; camera.fov = 75; // Normal FOV hemiLight.intensity = 0.6; // Restore ambient light sunLight.intensity = 2.0; // Restore sun light renderer.toneMappingExposure = 1.2; // Restore normal exposure } camera.updateProjectionMatrix(); break; case 'KeyW': case 'ArrowUp': moveState.forward = true; break; case 'KeyS': case 'ArrowDown': moveState.backward = true; break; case 'KeyA': case 'ArrowLeft': moveState.left = true; break; case 'KeyD': case 'ArrowRight': moveState.right = true; break; } }); document.addEventListener('keyup', (event) => { switch (event.code) { case 'KeyW': case 'ArrowUp': moveState.forward = false; break; case 'KeyS': case 'ArrowDown': moveState.backward = false; break; case 'KeyA': case 'ArrowLeft': moveState.left = false; break; case 'KeyD': case 'ArrowRight': moveState.right = false; break; } }); // Shooting controls document.addEventListener('mousedown', (event) => { if (event.button === 0) { isMouseDown = true; } }); document.addEventListener('mouseup', (event) => { if (event.button === 0) { isMouseDown = false; } }); // Function to handle shooting // Initialize audio const gunSound = new Audio('https://play.rosebud.ai/assets/gun.wav?qJsz'); gunSound.volume = 0.15; // Adjust volume to 15% function shoot() { if (player.canFire && player.bullets > 0) { player.canFire = false; player.bullets--; updateHUD(); // Play gun sound const gunSoundClone = gunSound.cloneNode(); gunSoundClone.play(); // Create bullet with tracer effect const bulletGeometry = new THREE.SphereGeometry(0.15); const bulletMaterial = new THREE.MeshStandardMaterial({ color: 0xff8800, emissive: 0xff4400, emissiveIntensity: 2.5, metalness: 1.0, roughness: 0.2, transparent: true, opacity: 0.9 }); const bullet = new THREE.Mesh(bulletGeometry, bulletMaterial); // Create trail effect const trailGeometry = new THREE.BufferGeometry(); const trailPositions = new Float32Array(30 * 3); // 30 points for trail trailGeometry.setAttribute('position', new THREE.BufferAttribute(trailPositions, 3)); const trailMaterial = new THREE.PointsMaterial({ color: 0xff6600, size: 0.1, transparent: true, opacity: 0.6, blending: THREE.AdditiveBlending }); const trail = new THREE.Points(trailGeometry, trailMaterial); bullet.userData.trail = trail; bullet.userData.trailPositions = trailPositions; bullet.userData.trailIndex = 0; scene.add(trail); // Position bullet at quarter screen height from bottom bullet.position.copy(camera.position); bullet.position.y = camera.position.y - (camera.position.y * 0.75); const offsetDirection = new THREE.Vector3(0, 0, -2); offsetDirection.applyQuaternion(camera.quaternion); bullet.position.add(offsetDirection); // Get direction from camera const direction = new THREE.Vector3(0, 0, -1); direction.applyQuaternion(camera.quaternion); // Add bullet to scene scene.add(bullet); // Create physics for bullet const bulletShape = new CANNON.Sphere(0.05); const bulletBody = new CANNON.Body({ mass: 0.1, shape: bulletShape, position: new CANNON.Vec3(bullet.position.x, bullet.position.y, bullet.position.z), velocity: new CANNON.Vec3(direction.x * 400, direction.y * 400, direction.z * 400), collisionResponse: true, collisionFilterGroup: 4, // Bullet group collisionFilterMask: 1 | 2 // Can collide with ground/buildings (1) and zombies (2) }); // Add collision event listener with debounce let hasCollided = false; bulletBody.addEventListener("collide", (event) => { if (!hasCollided && bulletBody.world) { hasCollided = true; requestAnimationFrame(() => { if (bullet.parent) scene.remove(bullet); if (bullet.userData.trail && bullet.userData.trail.parent) { scene.remove(bullet.userData.trail); } if (bulletBody.world) world.remove(bulletBody); clearInterval(hitCheckInterval); }); } }); world.addBody(bulletBody); // Remove bullet after 2 seconds // Check for zombie hits const bulletRaycaster = new THREE.Raycaster(bullet.position, direction); const checkZombieHit = () => { zombies.forEach((zombie, index) => { // Skip already dying zombies if (zombie.isDying) return; // Get zombie and bullet positions const zombiePos = zombie.model.position; const bulletPos = bullet.position; // Simple distance check for hit detection const distance = zombiePos.distanceTo(bulletPos); // If bullet is within 5 units of zombie, count as hit if (distance < 5) { if (!zombie.isDying) { zombie.isDying = true; zombie.speed = 0; // Play dying animation if (dyingAnimation) { zombie.mixer.stopAllAction(); const dyingAction = zombie.mixer.clipAction(dyingAnimation); dyingAction.setLoop(THREE.LoopOnce); dyingAction.clampWhenFinished = true; dyingAction.play(); // Remove zombie after animation setTimeout(() => { scene.remove(zombie.model); world.remove(zombie.body); zombies.splice(index, 1); // Increase score player.score += 10; scoreDisplay.textContent = `Score: ${player.score}`; // Regenerate zombie at random position // Only spawn new zombies if under the limit if (zombies.length < 30) { const numToSpawn = Math.min(3, 30 - zombies.length); for (let i = 0; i < numToSpawn; i++) { const position = findValidZombiePosition(); createZombie(position); } } }, 3000); } } // Remove bullet on hit if (bullet.parent) scene.remove(bullet); if (bulletBody.world) world.remove(bulletBody); if (bullet.userData.trail && bullet.userData.trail.parent) { scene.remove(bullet.userData.trail); } return true; } }); }; // Check for hits every frame for 2 seconds const hitCheckInterval = setInterval(() => { bullet.position.copy(bulletBody.position); // Update bullet position bullet.position.copy(bulletBody.position); // Update trail positions const positions = bullet.userData.trailPositions; const index = bullet.userData.trailIndex * 3; // Add new position to trail positions[index] = bullet.position.x; positions[index + 1] = bullet.position.y; positions[index + 2] = bullet.position.z; // Update trail index bullet.userData.trailIndex = (bullet.userData.trailIndex + 1) % 30; // Update trail geometry bullet.userData.trail.geometry.attributes.position.needsUpdate = true; checkZombieHit(); }, 16); setTimeout(() => { clearInterval(hitCheckInterval); if (bullet.parent) scene.remove(bullet); if (bullet.userData.trail && bullet.userData.trail.parent) { scene.remove(bullet.userData.trail); } if (bulletBody.world) world.remove(bulletBody); }, 8000); // Add fire rate limit (faster for machine gun effect) setTimeout(() => { player.canFire = true; }, 100); // Reduced from 50ms to create a machine gun effect } } // Update HUD content function updateHUD() { // Update health display healthDisplay.textContent = `Health: ${player.health}`; // Update bullets display bulletsDisplay.textContent = `Bullets: ${player.bullets}`; // Update score display scoreDisplay.textContent = `Score: ${player.score}`; } // Initial HUD update updateHUD(); // Create flat terrain function createTerrain() { const size = 200; // Create simple flat plane for visuals const geometry = new THREE.PlaneGeometry(size, size); const texture = textureLoader.load('https://play.rosebud.ai/assets/road.png?HqCp'); texture.wrapS = texture.wrapT = THREE.RepeatWrapping; texture.repeat.set(20, 20); texture.encoding = THREE.sRGBEncoding; const material = new THREE.MeshStandardMaterial({ map: texture, roughness: 0.8, metalness: 0.1, envMapIntensity: 1.0 }); const terrain = new THREE.Mesh(geometry, material); terrain.rotation.x = -Math.PI / 2; terrain.receiveShadow = true; scene.add(terrain); const groundShape = new CANNON.Box(new CANNON.Vec3(size / 2, 0.1, size / 2)); const groundBody = new CANNON.Body({ mass: 0, material: groundPhysMaterial }); groundBody.addShape(groundShape); groundBody.position.set(0, -0.1, 0); world.addBody(groundBody); return terrain; } // Create particle system for pickups function createParticleSystem(color, position) { const particleCount = 20; const particles = new THREE.BufferGeometry(); const positions = new Float32Array(particleCount * 3); const velocities = []; for (let i = 0; i < particleCount; i++) { // Random position in a small sphere around the center const angle = Math.random() * Math.PI * 2; const radius = 0.3; positions[i * 3] = Math.cos(angle) * radius; positions[i * 3 + 1] = (Math.random() - 0.5) * radius; positions[i * 3 + 2] = Math.sin(angle) * radius; // Store velocity for animation velocities.push({ x: (Math.random() - 0.5) * 0.02, y: Math.random() * 0.02, z: (Math.random() - 0.5) * 0.02 }); } particles.setAttribute('position', new THREE.BufferAttribute(positions, 3)); const particleMaterial = new THREE.PointsMaterial({ color: color, size: 0.05, transparent: true, opacity: 0.6, blending: THREE.AdditiveBlending }); const particleSystem = new THREE.Points(particles, particleMaterial); particleSystem.position.copy(position); particleSystem.userData.velocities = velocities; particleSystem.userData.initialPositions = positions.slice(); return particleSystem; } // Setup improved lighting system const sunLight = new THREE.DirectionalLight(skyColor, 3.0); // Increased intensity 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, 1.0); // Increased intensity scene.add(hemiLight); // Add torch spotlight to the scene scene.add(torchLight); torchLight.target.position.set(0, 0, -1); scene.add(torchLight.target); // Create initial scene const terrain = createTerrain(); // Create potion bottles function createPotion(position) { gltfLoader.load('https://play.rosebud.ai/assets/a bottle of potion.glb?B69X', (gltf) => { const model = gltf.scene; model.scale.set(0.5, 0.5, 0.5); model.position.copy(position); // Add glow effect to the potion bottle model.traverse((child) => { if (child.isMesh) { // Add stronger white tint to the material const originalColor = child.material.color.clone(); child.material.color.lerp(new THREE.Color(0xffffff), 0.1); // Add emissive glow child.material.emissive = new THREE.Color(0xffffff); child.material.emissiveIntensity = 0.08; child.material.needsUpdate = true; } }); // Add floating animation const startY = position.y; model.userData.floatOffset = Math.random() * Math.PI * 2; model.userData.floatSpeed = 1 + Math.random() * 0.5; model.userData.updatePosition = (time) => { model.position.y = startY + Math.sin(time * model.userData.floatSpeed + model.userData.floatOffset) * 0.2; model.rotation.y += 0.02; }; scene.add(model); // Add particle system const particles = createParticleSystem(0xffff00, position); scene.add(particles); potions.push({ model: model, position: position, collected: false, particles: particles }); }); } // Helper function to check if a position is valid (not inside buildings) function isValidSpawnPosition(position) { // Create a ray going up and down from the position const rayUp = new THREE.Raycaster( new THREE.Vector3(position.x, 0, position.z), new THREE.Vector3(0, 1, 0) ); const rayDown = new THREE.Raycaster( new THREE.Vector3(position.x, 20, position.z), new THREE.Vector3(0, -1, 0) ); // Check for intersections with buildings const intersectsUp = rayUp.intersectObjects(scene.children.filter(obj => obj.geometry instanceof THREE.BoxGeometry && obj.position.y > 2 // Filter out ground and small objects )); const intersectsDown = rayDown.intersectObjects(scene.children.filter(obj => obj.geometry instanceof THREE.BoxGeometry && obj.position.y > 2 // Filter out ground and small objects )); // If we have both up and down intersections, we're inside a building return !(intersectsUp.length > 0 && intersectsDown.length > 0); } // Spawn initial potions for (let i = 0; i < 5; i++) { let validPosition; let attempts = 0; const maxAttempts = 50; // Keep trying until we find a valid position or reach max attempts do { const x = (Math.random() - 0.5) * 100; const z = (Math.random() - 0.5) * 100; validPosition = new THREE.Vector3(x, 1.5, z); attempts++; } while (!isValidSpawnPosition(validPosition) && attempts < maxAttempts); // Only create if we found a valid position if (isValidSpawnPosition(validPosition)) { createPotion(validPosition); } } // Create ammo box function createAmmoBox(position) { gltfLoader.load('https://play.rosebud.ai/assets/an ammo box.glb?FshM', (gltf) => { const model = gltf.scene; model.scale.set(0.5, 0.5, 0.5); model.position.copy(position); // Add glow effect to the ammo box model.traverse((child) => { if (child.isMesh) { // Add stronger white tint to the material const originalColor = child.material.color.clone(); child.material.color.lerp(new THREE.Color(0xffffff), 0.1); // Add emissive glow child.material.emissive = new THREE.Color(0xffffff); child.material.emissiveIntensity = 0.08; child.material.needsUpdate = true; } }); // Add floating animation const startY = position.y; model.userData.floatOffset = Math.random() * Math.PI * 2; model.userData.floatSpeed = 1 + Math.random() * 0.5; model.userData.updatePosition = (time) => { model.position.y = startY + Math.sin(time * model.userData.floatSpeed + model.userData.floatOffset) * 0.2; model.rotation.y += 0.02; }; scene.add(model); // Add particle system const particles = createParticleSystem(0x0000ff, position); scene.add(particles); ammoBoxes.push({ model: model, position: position, collected: false, particles: particles }); }); } // Spawn initial ammo boxes for (let i = 0; i < 3; i++) { let validPosition; let attempts = 0; const maxAttempts = 50; // Keep trying until we find a valid position or reach max attempts do { const x = (Math.random() - 0.5) * 100; const z = (Math.random() - 0.5) * 100; validPosition = new THREE.Vector3(x, 1.5, z); attempts++; } while (!isValidSpawnPosition(validPosition) && attempts < maxAttempts); // Only create if we found a valid position if (isValidSpawnPosition(validPosition)) { createAmmoBox(validPosition); } } // Create procedural city with LOD function createCity() { const lowPolyMaterial = new THREE.MeshBasicMaterial({ color: 0x808080 }); const gridSize = 8; // Reduced grid size for larger buildings const spacing = 30; // Increased space between buildings const buildingTexture1 = textureLoader.load('https://play.rosebud.ai/assets/scrape4.jpg?uNL6'); const buildingTexture2 = textureLoader.load('https://play.rosebud.ai/assets/scrape2.jpg?lhbc'); const buildingTexture3 = textureLoader.load('https://play.rosebud.ai/assets/scrape5.jpg?HaVZ'); const buildingTexture4 = textureLoader.load('https://play.rosebud.ai/assets/scrape3.png?OEfq'); const buildingTexture5 = textureLoader.load('https://play.rosebud.ai/assets/scrape1.jpg?mfjL'); buildingTexture1.encoding = THREE.sRGBEncoding; buildingTexture2.encoding = THREE.sRGBEncoding; buildingTexture3.encoding = THREE.sRGBEncoding; buildingTexture4.encoding = THREE.sRGBEncoding; buildingTexture5.encoding = THREE.sRGBEncoding; // Calculate the starting position to center the grid const startX = -(gridSize * spacing) / 2 + spacing / 2; const startZ = -(gridSize * spacing) / 2 + spacing / 2; for (let x = 0; x < gridSize; x++) { for (let z = 0; z < gridSize; z++) { // Random height between 20 and 80 units const height = 20 + Math.random() * 60; // Random width and depth between 10 and 20 units const width = 10 + Math.random() * 10; const depth = 10 + Math.random() * 10; const geometry = new THREE.BoxGeometry(width, height, depth); const material = new THREE.MeshStandardMaterial({ map: (() => { const rand = Math.random(); if (rand < 0.25) return buildingTexture1; if (rand < 0.45) return buildingTexture2; if (rand < 0.65) return buildingTexture3; if (rand < 0.85) return buildingTexture4; return buildingTexture5; })(), roughness: 0.7, metalness: 0.2 }); const building = new THREE.Mesh(geometry, material); building.position.set( startX + x * spacing, height / 2, startZ + z * spacing ); building.castShadow = true; building.receiveShadow = true; scene.add(building); // Add physics body for the building const buildingShape = new CANNON.Box(new CANNON.Vec3(width / 2, height / 2, depth / 2)); const buildingBody = new CANNON.Body({ mass: 0, material: groundPhysMaterial, collisionFilterGroup: 1, collisionFilterMask: 1 | 2, fixedRotation: true, type: CANNON.Body.STATIC }); buildingBody.addShape(buildingShape); buildingBody.position.set( startX + x * spacing, height / 2, startZ + z * spacing ); world.addBody(buildingBody); } } // Create bordering wall const wallHeight = 40; // Increased wall height to match taller buildings const wallThickness = 2; const citySize = gridSize * spacing; const halfSize = citySize / 2; // Load and configure wall texture const wallTexture = textureLoader.load('https://play.rosebud.ai/assets/a seamless wall texture with bulletholes and grafitti.png?Iu0u'); wallTexture.encoding = THREE.sRGBEncoding; wallTexture.wrapS = wallTexture.wrapT = THREE.RepeatWrapping; wallTexture.repeat.set(10, 2); // Adjust these values to control tiling const wallMaterial = new THREE.MeshStandardMaterial({ map: wallTexture, roughness: 0.7, metalness: 0.2 }); // Create the four walls const walls = [ // North wall { pos: [0, wallHeight / 2, -halfSize], scale: [citySize, wallHeight, wallThickness] }, // South wall { pos: [0, wallHeight / 2, halfSize], scale: [citySize, wallHeight, wallThickness] }, // East wall { pos: [halfSize, wallHeight / 2, 0], scale: [wallThickness, wallHeight, citySize] }, // West wall { pos: [-halfSize, wallHeight / 2, 0], scale: [wallThickness, wallHeight, citySize] } ]; walls.forEach(wall => { const wallGeometry = new THREE.BoxGeometry(wall.scale[0], wall.scale[1], wall.scale[2]); const wallMesh = new THREE.Mesh(wallGeometry, wallMaterial); wallMesh.position.set(wall.pos[0], wall.pos[1], wall.pos[2]); wallMesh.castShadow = true; wallMesh.receiveShadow = true; scene.add(wallMesh); // Add physics body for the wall const wallShape = new CANNON.Box(new CANNON.Vec3(wall.scale[0] / 2, wall.scale[1] / 2, wall.scale[2] / 2)); const wallBody = new CANNON.Body({ mass: 0, material: groundPhysMaterial, shape: wallShape }); wallBody.position.set(wall.pos[0], wall.pos[1], wall.pos[2]); world.addBody(wallBody); }); } // Create the city createCity(); // Add zombies to the scene // Initialize zombie groan sound const zombieGroanSound = new Audio('https://play.rosebud.ai/assets/groan.wav?2He2'); zombieGroanSound.volume = 0.2; // Set volume to 20% function createZombie(position) { fbxLoader.load('https://play.rosebud.ai/assets/Zombie Running.fbx?A6J6', (fbx) => { // Ensure proper scale and position fbx.scale.set(0.01, 0.01, 0.01); fbx.position.set(position.x, 1.5, position.z); scene.add(fbx); // Initialize mixer and play animation immediately const zombieMixer = new THREE.AnimationMixer(fbx); const action = zombieMixer.clipAction(fbx.animations[0]); action.play(); // Create physics body for zombie const zombieShape = new CANNON.Box(new CANNON.Vec3(0.75, 1.5, 0.75)); const zombieBody = new CANNON.Body({ mass: 5, material: groundPhysMaterial, collisionFilterGroup: 2, collisionFilterMask: 1 | 2, fixedRotation: true, linearDamping: 0.9 }); zombieBody.addShape(zombieShape); zombieBody.position.set(position.x, 1.5, position.z); zombieBody.addEventListener('collide', (event) => { if (!zombieBody.world) return; // Skip if body was removed }); world.addBody(zombieBody); // Create zombie object with all necessary properties const zombie = { model: fbx, mixer: zombieMixer, direction: new THREE.Vector3(1, 0, 0), speed: 2, isDying: false, isNeckBiting: false, isChangingDirection: false, body: zombieBody, neckBiteTimer: 0, isChasing: false, lastGroanTime: 0, nextGroanTime: Math.random() * 10 + 5, lastPosition: new THREE.Vector3().copy(fbx.position), stuckTime: 0 }; // Add zombie to zombies array zombies.push(zombie); // Debug log to verify zombie creation console.log('Zombie created:', { position: zombie.model.position, physicsBody: zombie.body.position, animation: zombie.mixer ? 'initialized' : 'failed' }); }); } // Add some zombies at random positions function findValidZombiePosition() { let attempts = 0; const maxAttempts = 50; while (attempts < maxAttempts) { const x = (Math.random() - 0.5) * 100; const z = (Math.random() - 0.5) * 100; const testPosition = new THREE.Vector3(x, 1, z); // Check distance from player and existing zombies let isTooClose = false; // Check distance from player first const distanceToPlayer = camera.position.distanceTo(testPosition); if (distanceToPlayer < 40) { isTooClose = true; } else { // Then check distance from other zombies for (const zombie of zombies) { if (zombie.model.position.distanceTo(testPosition) < 3) { isTooClose = true; break; } } } if (!isTooClose && isValidSpawnPosition(testPosition)) { return testPosition; } attempts++; } // If no valid position found after max attempts, try farther out const x = (Math.random() - 0.5) * 150; const z = (Math.random() - 0.5) * 150; return new THREE.Vector3(x, 1, z); } // Spawn initial zombies for (let i = 0; i < 30; i++) { const position = findValidZombiePosition(); createZombie(position); } // Add button event listeners instructionsButton.addEventListener('click', () => { instructionsScreen.style.display = 'flex'; loadingScreen.style.display = 'none'; }); returnButton.addEventListener('click', () => { instructionsScreen.style.display = 'none'; loadingScreen.style.display = 'flex'; }); let gameStarted = false; playButton.addEventListener('click', () => { loadingScreen.style.display = 'none'; instructionsScreen.style.display = 'none'; gameStarted = true; // Start playing background music when game starts backgroundMusic.play(); }); function animate() { requestAnimationFrame(animate); if (!assetsLoaded) { console.log('Waiting for assets to load...'); return; } // Update radar dots for zombies and potions // Remove old dots const oldDots = radar.querySelectorAll('.zombie-dot, .potion-dot, .ammo-dot'); oldDots.forEach(dot => dot.remove()); // Add new dots for zombies, potions, and ammo boxes zombies.forEach(zombie => { // Calculate relative position to player const relativeX = zombie.model.position.x - camera.position.x; const relativeZ = zombie.model.position.z - camera.position.z; // Calculate distance to zombie const distance = Math.sqrt(relativeX * relativeX + relativeZ * relativeZ); // Only show zombies within 100 units if (distance <= 100) { // Get player's forward direction const forward = new THREE.Vector3(0, 0, -1); forward.applyQuaternion(camera.quaternion); // Calculate angle between north (positive Z) and player's forward direction const playerAngle = Math.atan2(forward.x, forward.z); // Calculate angle between north and direction to zombie const zombieAngle = Math.atan2(relativeX, relativeZ); // Calculate relative angle (radar angle) const relativeAngle = zombieAngle - playerAngle; // Calculate distance const distance = Math.sqrt(relativeX * relativeX + relativeZ * relativeZ); const scaledDistance = Math.min(distance, 100) / 100 * 90; // 90 pixels is radar radius // Convert to radar coordinates // Note: We use -sin for X and -cos for Y to make top of radar forward-facing const radarX = -Math.sin(relativeAngle) * scaledDistance; const radarY = -Math.cos(relativeAngle) * scaledDistance; // Create zombie dot const zombieDot = document.createElement('div'); zombieDot.className = 'zombie-dot'; zombieDot.style.position = 'absolute'; zombieDot.style.top = '50%'; zombieDot.style.left = '50%'; zombieDot.style.width = '4px'; zombieDot.style.height = '4px'; zombieDot.style.backgroundColor = '#f00'; zombieDot.style.borderRadius = '50%'; zombieDot.style.transform = `translate(calc(${radarX}px - 50%), calc(${radarY}px - 50%))`; radar.appendChild(zombieDot); } }); // Add dots for potions potions.forEach(potion => { if (!potion.collected) { // Calculate relative position to player const relativeX = potion.model.position.x - camera.position.x; const relativeZ = potion.model.position.z - camera.position.z; // Calculate distance to potion const distance = Math.sqrt(relativeX * relativeX + relativeZ * relativeZ); // Only show potions within 100 units if (distance <= 100) { // Get player's forward direction const forward = new THREE.Vector3(0, 0, -1); forward.applyQuaternion(camera.quaternion); // Calculate angle between north (positive Z) and player's forward direction const playerAngle = Math.atan2(forward.x, forward.z); // Calculate angle between north and direction to potion const potionAngle = Math.atan2(relativeX, relativeZ); // Calculate relative angle (radar angle) const relativeAngle = potionAngle - playerAngle; // Calculate distance const distance = Math.sqrt(relativeX * relativeX + relativeZ * relativeZ); const scaledDistance = Math.min(distance, 100) / 100 * 65; // 65 pixels is radar radius // Convert to radar coordinates const radarX = -Math.sin(relativeAngle) * scaledDistance; const radarY = -Math.cos(relativeAngle) * scaledDistance; // Create potion dot const potionDot = document.createElement('div'); potionDot.className = 'potion-dot'; potionDot.style.position = 'absolute'; potionDot.style.top = '50%'; potionDot.style.left = '50%'; potionDot.style.width = '4px'; potionDot.style.height = '4px'; potionDot.style.backgroundColor = '#ff0'; // Yellow color for potions potionDot.style.borderRadius = '50%'; potionDot.style.transform = `translate(calc(${radarX}px - 50%), calc(${radarY}px - 50%))`; radar.appendChild(potionDot); } } }); const deltaTime = Math.min(clock.getDelta(), 0.1); const time = clock.getElapsedTime(); if (assetsLoaded && gameStarted && !isPaused) { // Update day/night cycle if (time - lastCycleChange >= CYCLE_DURATION) { lastCycleChange = time; timeOfDay = 0; // Reset to start of day } else { timeOfDay = (time - lastCycleChange) / CYCLE_DURATION; } // Update lighting based on time of day const nightProgress = Math.sin(timeOfDay * Math.PI) * 0.5 + 0.5; // Adjust sun and hemisphere light sunLight.intensity = Math.max(0.1, 3.0 - (nightProgress * 2.5)); hemiLight.intensity = Math.max(0.1, 1.0 - (nightProgress * 0.8)); // Adjust torch light torchLight.intensity = Math.min(3.0, nightProgress * 3.5); // Increased max intensity // Update torch position and direction torchLight.position.copy(camera.position); const torchTarget = new THREE.Vector3(); camera.getWorldDirection(torchTarget); torchTarget.multiplyScalar(5).add(camera.position); torchLight.target.position.copy(torchTarget); // Adjust fog and sky color const dayColor = new THREE.Color(0x87CEEB); const nightColor = new THREE.Color(0x001025); const currentSkyColor = new THREE.Color(); currentSkyColor.lerpColors(dayColor, nightColor, nightProgress); scene.fog.color.copy(currentSkyColor); scene.background = currentSkyColor; try { // Cleanup any invalid bodies before stepping world.bodies = world.bodies.filter(body => body && body.type !== undefined); world.step(deltaTime); } catch (error) { console.warn('Physics step error:', error); } // Update LODs based on camera position scene.traverse(function(object) { if (object instanceof THREE.LOD) { object.update(camera); } // Skip rendering distant static objects if (object.isStatic && object.position.distanceTo(camera.position) > 100) { object.visible = false; } else if (object.isStatic) { object.visible = true; } }); // Update potions potions.forEach((potion, index) => { if (!potion.collected) { // Update floating animation potion.model.userData.updatePosition(time); // Check collision with player const distance = camera.position.distanceTo(potion.model.position); if (distance < 2) { // Play pickup sound for 1 second const pickupSoundClone = pickupSound.cloneNode(); pickupSoundClone.play(); setTimeout(() => { pickupSoundClone.pause(); pickupSoundClone.currentTime = 0; }, 1000); // Show pickup text showPickupText("HEALTH +25", potion.model.position); // Collect potion potion.collected = true; scene.remove(potion.model); scene.remove(potion.particles); // Heal player player.health = Math.min(100, player.health + 25); updateHUD(); // Respawn potion in new location after delay setTimeout(() => { let validPosition; let attempts = 0; const maxAttempts = 50; do { const x = (Math.random() - 0.5) * 100; const z = (Math.random() - 0.5) * 100; validPosition = new THREE.Vector3(x, 1.5, z); attempts++; } while (!isValidSpawnPosition(validPosition) && attempts < maxAttempts); if (isValidSpawnPosition(validPosition)) { createPotion(validPosition); } potions.splice(index, 1); }, 30000); // Respawn after 30 seconds } } }); // Update ammo boxes ammoBoxes.forEach((ammoBox, index) => { if (!ammoBox.collected) { // Update floating animation ammoBox.model.userData.updatePosition(time); // Check collision with player const distance = camera.position.distanceTo(ammoBox.model.position); if (distance < 2) { // Play pickup sound for 1 second const pickupSoundClone = pickupSound.cloneNode(); pickupSoundClone.play(); setTimeout(() => { pickupSoundClone.pause(); pickupSoundClone.currentTime = 0; }, 1000); // Show pickup text showPickupText("AMMO +50", ammoBox.model.position); // Collect ammo box ammoBox.collected = true; scene.remove(ammoBox.model); scene.remove(ammoBox.particles); // Restore ammo player.bullets = Math.min(200, player.bullets + 50); updateHUD(); // Respawn ammo box in new location after delay setTimeout(() => { let validPosition; let attempts = 0; const maxAttempts = 50; do { const x = (Math.random() - 0.5) * 100; const z = (Math.random() - 0.5) * 100; validPosition = new THREE.Vector3(x, 1.5, z); attempts++; } while (!isValidSpawnPosition(validPosition) && attempts < maxAttempts); if (isValidSpawnPosition(validPosition)) { createAmmoBox(validPosition); } ammoBoxes.splice(index, 1); }, 45000); // Respawn after 45 seconds } } }); // Add radar dots for ammo boxes ammoBoxes.forEach(ammoBox => { if (!ammoBox.collected) { // Calculate relative position to player const relativeX = ammoBox.model.position.x - camera.position.x; const relativeZ = ammoBox.model.position.z - camera.position.z; // Calculate distance to ammo box const distance = Math.sqrt(relativeX * relativeX + relativeZ * relativeZ); // Only show ammo boxes within 100 units if (distance <= 100) { // Get player's forward direction const forward = new THREE.Vector3(0, 0, -1); forward.applyQuaternion(camera.quaternion); // Calculate angle between north and player's forward direction const playerAngle = Math.atan2(forward.x, forward.z); // Calculate angle between north and direction to ammo box const ammoAngle = Math.atan2(relativeX, relativeZ); // Calculate relative angle (radar angle) const relativeAngle = ammoAngle - playerAngle; // Calculate distance const distance = Math.sqrt(relativeX * relativeX + relativeZ * relativeZ); const scaledDistance = Math.min(distance, 100) / 100 * 90; // Convert to radar coordinates const radarX = -Math.sin(relativeAngle) * scaledDistance; const radarY = -Math.cos(relativeAngle) * scaledDistance; // Create ammo box dot const ammoDot = document.createElement('div'); ammoDot.className = 'ammo-dot'; ammoDot.style.position = 'absolute'; ammoDot.style.top = '50%'; ammoDot.style.left = '50%'; ammoDot.style.width = '4px'; ammoDot.style.height = '4px'; ammoDot.style.backgroundColor = '#00f'; // Blue color for ammo boxes ammoDot.style.borderRadius = '50%'; ammoDot.style.transform = `translate(calc(${radarX}px - 50%), calc(${radarY}px - 50%))`; radar.appendChild(ammoDot); } } }); // Update zombie animations and positions zombies.forEach((zombie, index) => { // Update animation if (zombie.mixer) { zombie.mixer.update(deltaTime); } // Check if zombie is stuck const currentPosition = zombie.model.position; const movement = currentPosition.distanceTo(zombie.lastPosition); if (movement < 0.01) { // If movement is less than 0.01 units zombie.stuckTime += deltaTime; if (zombie.stuckTime > 5) { // If stuck for more than 5 seconds // Remove stuck zombie scene.remove(zombie.model); world.remove(zombie.body); zombies.splice(index, 1); // Spawn new zombie at random position const x = (Math.random() - 0.5) * 100; const z = (Math.random() - 0.5) * 100; createZombie(new THREE.Vector3(x, 1, z)); return; } } else { zombie.stuckTime = 0; // Reset stuck timer if zombie moved } // Update last position zombie.lastPosition.copy(currentPosition); // Move zombie const previousPosition = zombie.model.position.clone(); // Check if player is in range and FOV const toPlayer = camera.position.clone().sub(zombie.model.position); const distanceToPlayer = toPlayer.length(); const angleToPlayer = toPlayer.normalize().dot(zombie.direction); // If player is within 20 units, chase regardless of angle if (distanceToPlayer < 20) { // Play groan sound when zombie first spots player if (!zombie.isChasing) { zombie.isChasing = true; const groanSound = zombieGroanSound.cloneNode(); // Adjust volume based on distance groanSound.volume = Math.max(0.05, Math.min(0.2, (10 - distanceToPlayer) / 10)); groanSound.play(); } // Only move if further than 2 units away if (distanceToPlayer > 2) { // Chase player zombie.direction.copy(toPlayer); zombie.speed = 2.75; // Increased chase speed by 10% } else if (distanceToPlayer <= 2) { // Stop when close enough zombie.speed = 0; // Keep facing the player zombie.direction.copy(toPlayer); // Handle neck bite animation and damage if (!zombie.isNeckBiting && neckBiteAnimation) { zombie.isNeckBiting = true; // Store current running animation const currentActions = zombie.mixer.clipAction(zombie.model.animations[0]); // Play neck bite animation const neckBiteAction = zombie.mixer.clipAction(neckBiteAnimation); neckBiteAction.setLoop(THREE.LoopRepeat); // Crossfade to bite animation currentActions.crossFadeTo(neckBiteAction, 0.5); neckBiteAction.play(); } // Apply damage every second while biting zombie.neckBiteTimer += deltaTime; if (zombie.neckBiteTimer >= 1.0) { zombie.neckBiteTimer = 0; player.health = Math.max(0, player.health - 5); updateHUD(); // Check for game over if (player.health <= 0) { gameOver(); } } } else { // If zombie moves away, stop biting and return to running animation if (zombie.isNeckBiting) { zombie.isNeckBiting = false; zombie.mixer.stopAllAction(); const runningAction = zombie.mixer.clipAction(zombie.model.animations[0]); runningAction.play(); } } } else { zombie.speed = 1.65; // Normal patrol speed when beyond chase range zombie.isChasing = false; // Reset chasing state when player is out of range // Handle random groaning if (time > zombie.nextGroanTime) { const distanceToPlayer = camera.position.distanceTo(zombie.model.position); if (distanceToPlayer < 20) { // Increased groan range to match chase range const groanSound = zombieGroanSound.cloneNode(); // Adjust volume based on distance groanSound.volume = Math.max(0.05, Math.min(0.2, (10 - distanceToPlayer) / 10)); groanSound.play(); // Set next groan time zombie.nextGroanTime = time + Math.random() * 15 + 10; // Random time between 10-25 seconds } } } // Calculate desired movement let movementVector = zombie.direction.clone().multiplyScalar(zombie.speed * deltaTime); // Apply movement to physics body zombie.body.velocity.x = movementVector.x * 10; zombie.body.velocity.z = movementVector.z * 10; zombie.body.velocity.y = 0; // Update model position from physics body zombie.model.position.copy(zombie.body.position); // Ray cast to check for collisions // Create multiple raycasts for better collision detection const rayDirections = [ zombie.direction.clone().normalize(), new THREE.Vector3(-zombie.direction.z, 0, zombie.direction.x).normalize(), new THREE.Vector3(zombie.direction.z, 0, -zombie.direction.x).normalize() ]; let collision = false; for (const direction of rayDirections) { const ray = new THREE.Raycaster( previousPosition, direction, 0, movementVector.length() + 2 // Increased collision buffer ); const intersects = ray.intersectObjects(scene.children.filter(obj => obj.geometry instanceof THREE.BoxGeometry && obj !== zombie.model )); if (intersects.length > 0) { collision = true; break; } } if (!collision) { // Calculate new position from previous position and movement vector const newPosition = previousPosition.clone().add(movementVector); // Update physics body position zombie.body.position.x = newPosition.x; zombie.body.position.z = newPosition.z; zombie.body.position.y = 0; // Lock Y position to 0 zombie.body.velocity.y = 0; // Reset vertical velocity // Update visual model zombie.model.position.copy(zombie.body.position); // Rotate zombie towards movement direction zombie.model.lookAt( zombie.model.position.x + zombie.direction.x, zombie.model.position.y, zombie.model.position.z + zombie.direction.z ); } else { // Collision detected, implement smarter direction change if (!zombie.isChangingDirection) { zombie.isChangingDirection = true; // Get collision normal (approximate from collision check) const normal = zombie.direction.clone().multiplyScalar(-1); // Calculate reflection direction const reflection = zombie.direction.clone() .reflect(normal) .add(new THREE.Vector3( (Math.random() - 0.5) * 0.5, 0, (Math.random() - 0.5) * 0.5 )) .normalize(); // Add some randomness to avoid getting stuck const randomAngle = (Math.random() - 0.5) * Math.PI / 2; // ±45 degrees reflection.applyAxisAngle(new THREE.Vector3(0, 1, 0), randomAngle); // Update zombie direction zombie.direction.copy(reflection); // Reduce speed temporarily const originalSpeed = zombie.speed; zombie.speed *= 0.3; // Reset direction change flag and speed after a delay setTimeout(() => { zombie.isChangingDirection = false; zombie.speed = originalSpeed; }, 500); } } // Change direction if zombie goes too far if (Math.abs(zombie.model.position.x) > 50 || Math.abs(zombie.model.position.z) > 50) { zombie.direction.set( (Math.random() - 0.5) * 2, 0, (Math.random() - 0.5) * 2 ).normalize(); } }); // Handle movement const speed = player.speed * (moveState.sprint ? 2 : 1); const moveVector = new THREE.Vector3(); // Check if player is moving isMoving = moveState.forward || moveState.backward || moveState.left || moveState.right; // Update particle systems potions.forEach(potion => { if (!potion.collected && potion.particles) { const positions = potion.particles.geometry.attributes.position.array; const velocities = potion.particles.userData.velocities; const initialPositions = potion.particles.userData.initialPositions; for (let i = 0; i < positions.length; i += 3) { positions[i] += velocities[i / 3].x; positions[i + 1] += velocities[i / 3].y; positions[i + 2] += velocities[i / 3].z; // Reset particle if it moves too far from initial position const dx = positions[i] - initialPositions[i]; const dy = positions[i + 1] - initialPositions[i + 1]; const dz = positions[i + 2] - initialPositions[i + 2]; if (Math.sqrt(dx * dx + dy * dy + dz * dz) > 0.5) { positions[i] = initialPositions[i]; positions[i + 1] = initialPositions[i + 1]; positions[i + 2] = initialPositions[i + 2]; } } potion.particles.geometry.attributes.position.needsUpdate = true; potion.particles.position.copy(potion.model.position); } }); ammoBoxes.forEach(ammoBox => { if (!ammoBox.collected && ammoBox.particles) { const positions = ammoBox.particles.geometry.attributes.position.array; const velocities = ammoBox.particles.userData.velocities; const initialPositions = ammoBox.particles.userData.initialPositions; for (let i = 0; i < positions.length; i += 3) { positions[i] += velocities[i / 3].x; positions[i + 1] += velocities[i / 3].y; positions[i + 2] += velocities[i / 3].z; // Reset particle if it moves too far from initial position const dx = positions[i] - initialPositions[i]; const dy = positions[i + 1] - initialPositions[i + 1]; const dz = positions[i + 2] - initialPositions[i + 2]; if (Math.sqrt(dx * dx + dy * dy + dz * dz) > 0.5) { positions[i] = initialPositions[i]; positions[i + 1] = initialPositions[i + 1]; positions[i + 2] = initialPositions[i + 2]; } } ammoBox.particles.geometry.attributes.position.needsUpdate = true; ammoBox.particles.position.copy(ammoBox.model.position); } }); if (moveState.forward) moveVector.z -= speed * deltaTime; if (moveState.backward) moveVector.z += speed * deltaTime; if (moveState.left) moveVector.x -= speed * deltaTime; if (moveState.right) moveVector.x += speed * deltaTime; // Apply movement relative to camera rotation moveVector.applyQuaternion(camera.quaternion); // Apply movement to player physics body playerBody.velocity.x = moveVector.x * 10; playerBody.velocity.z = moveVector.z * 10; // Update camera position based on physics body camera.position.copy(playerBody.position); camera.position.y = 1.7; // Store current position before movement const previousPosition = camera.position.clone(); // Try to move camera.position.add(moveVector); // Check for collisions with buildings const playerRadius = 1; let collision = false; // Ray cast in movement direction const ray = new THREE.Raycaster(previousPosition, moveVector.clone().normalize(), 0, playerRadius + moveVector.length()); const intersects = ray.intersectObjects(scene.children.filter(obj => obj.geometry instanceof THREE.BoxGeometry)); if (intersects.length > 0) { collision = true; } // If collision detected, revert to previous position if (collision) { camera.position.copy(previousPosition); } // Ground height enforcement playerBody.position.y = 1.7; playerBody.velocity.y = 0; } // Check for continuous firing if (isMouseDown && gameStarted && !isPaused) { shoot(); } // Update laser sight GUI line if (laserSight && isLaserEnabled) { const crosshair = document.getElementById('crosshair'); const crosshairRect = crosshair.getBoundingClientRect(); const crosshairCenterX = crosshairRect.left + crosshairRect.width / 2; const crosshairCenterY = crosshairRect.top + crosshairRect.height / 2; // Calculate the angle between bottom center and crosshair const dx = crosshairCenterX - window.innerWidth / 2; const dy = window.innerHeight - crosshairCenterY; const angle = Math.atan2(dx, dy); // Calculate the length of the line const length = Math.sqrt(dx * dx + dy * dy); // Update the laser line laserSight.style.height = `${length}px`; laserSight.style.transform = `rotate(${angle}rad)`; } // Main view render // Update gun model position if it exists if (gunModel) { // Make gun sway slightly based on movement if (isMoving) { const swayAmount = 0.02; const swaySpeed = 5; gunModel.position.y = -0.2 + Math.sin(time * swaySpeed) * swayAmount; gunModel.position.x = 0.3 + Math.cos(time * swaySpeed) * swayAmount * 0.5; } else { // Reset position when not moving gunModel.position.set(0.3, 0.2, 5); } } // First render the main view renderer.setViewport(0, 0, parentDiv.clientWidth, parentDiv.clientHeight); renderer.setScissor(0, 0, parentDiv.clientWidth, parentDiv.clientHeight); renderer.clear(); composer.render(); // Then render the rear view if (gameStarted && rearCamera.userData.enabled) { renderer.autoClear = false; // Disable clear for rear view // Update rear camera position and rotation rearCamera.position.copy(camera.position); // Calculate rotation for rear view const rearRotation = new THREE.Euler(0, 0, 0, 'YXZ'); // Get player's yaw (y-rotation) and limit it to prevent extreme rotations const yaw = camera.rotation.y; // Keep rear view more stable by using only main cardinal directions let rearYaw; // Always set rear view to be opposite of current view rearYaw = camera.rotation.y + Math.PI; rearCamera.rotation.x = camera.rotation.x; rearRotation.set(0, rearYaw, 0); rearCamera.setRotationFromEuler(rearRotation); // Set viewport for rear view (bottom left corner) const width = parentDiv.clientWidth; const height = parentDiv.clientHeight; const rearWidth = Math.min(width, height) * 0.3; // 30% of the smallest screen dimension const rearHeight = rearWidth * (9 / 16); // Apply 16:9 aspect ratio renderer.setViewport(20, 20, rearWidth, rearHeight); // 20px margin from edges renderer.setScissor(20, 20, rearWidth, rearHeight); renderer.setScissorTest(true); // Add border around rear view const borderSize = 2; const borderColor = new THREE.Color(0x444444); renderer.setClearColor(borderColor); renderer.setViewport(18, 18, rearWidth + 4, rearHeight + 4); renderer.setScissor(18, 18, rearWidth + 4, rearHeight + 4); renderer.clear(); // Render actual rear view renderer.setViewport(20, 20, rearWidth, rearHeight); renderer.setScissor(20, 20, rearWidth, rearHeight); renderer.render(scene, rearCamera); // Reset viewport and scissor renderer.setViewport(0, 0, width, height); renderer.setScissor(0, 0, width, height); renderer.setScissorTest(false); renderer.autoClear = true; // Reset to true } } // Handle window resize function onWindowResize() { const width = parentDiv.clientWidth; const height = parentDiv.clientHeight; // Update rear camera aspect ratio const rearViewWidth = Math.min(width, height) * 0.3; rearCamera.aspect = 16 / 9; // Set to 16:9 aspect ratio rearCamera.updateProjectionMatrix(); // 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); // Initialize high scores array let highScores = JSON.parse(localStorage.getItem('zombieHighScores')) || []; // Function to update high score table function updateHighScoreTable() { const tableBody = document.getElementById('highScoreTableBody'); if (!tableBody) return; tableBody.innerHTML = ''; highScores.sort((a, b) => b.score - a.score); for (let i = 0; i < Math.min(10, highScores.length); i++) { const row = document.createElement('tr'); row.innerHTML = ` ${i + 1} ${highScores[i].initials} ${highScores[i].score} `; tableBody.appendChild(row); } } // Function to check if current score is a high score function isHighScore(score) { if (highScores.length < 10) return true; return score > highScores[highScores.length - 1].score; } // Game Over function function gameOver() { gameStarted = false; gameOverScreen.style.display = 'flex'; // Stop background music on game over backgroundMusic.pause(); backgroundMusic.currentTime = 0; const newHighScoreForm = document.getElementById('newHighScoreForm'); const highScoreTable = document.getElementById('highScoreTable'); const playerInitials = document.getElementById('playerInitials'); const saveScoreButton = document.getElementById('saveScore'); const continueButton = document.createElement('button'); // Style continue button continueButton.innerHTML = 'Continue'; continueButton.style.fontSize = '20px'; continueButton.style.padding = '5px 15px'; continueButton.style.backgroundColor = '#4CAF50'; continueButton.style.color = 'white'; continueButton.style.border = 'none'; continueButton.style.borderRadius = '5px'; continueButton.style.cursor = 'pointer'; continueButton.style.marginTop = '20px'; continueButton.style.display = 'none'; // Add continue button to high score table document.getElementById('highScoreTable').appendChild(continueButton); if (isHighScore(player.score)) { newHighScoreForm.style.display = 'block'; saveScoreButton.onclick = () => { if (playerInitials.value.trim()) { // Create fireworks effect createFireworks(10); // Add new score to high scores highScores.push({ initials: playerInitials.value.toUpperCase(), score: player.score }); // Sort and limit to top 10 highScores.sort((a, b) => b.score - a.score); highScores = highScores.slice(0, 10); // Save to localStorage localStorage.setItem('zombieHighScores', JSON.stringify(highScores)); // Hide form and show high scores newHighScoreForm.style.display = 'none'; updateHighScoreTable(); highScoreTable.style.display = 'block'; continueButton.style.display = 'block'; } }; } else { // Just show high scores updateHighScoreTable(); highScoreTable.style.display = 'block'; continueButton.style.display = 'block'; } // Reset player position and health playerBody.position.set(0, 1.7, 0); playerBody.velocity.set(0, 0, 0); camera.position.copy(playerBody.position); // Add continue button click handler continueButton.onclick = () => { // Reset game state // Reset game state player.health = 100; player.bullets = 100; player.score = 0; updateHUD(); // Hide all game over elements gameOverScreen.style.display = 'none'; document.getElementById('newHighScoreForm').style.display = 'none'; document.getElementById('highScoreTable').style.display = 'none'; loadingScreen.style.display = 'flex'; loadingText.style.display = 'none'; buttonsContainer.style.display = 'flex'; // Reset all zombies zombies.forEach(zombie => { scene.remove(zombie.model); world.remove(zombie.body); }); zombies = []; // Respawn zombies for (let i = 0; i < Math.min(15, 30); i++) { const x = (Math.random() - 0.5) * 100; const z = (Math.random() - 0.5) * 100; createZombie(new THREE.Vector3(x, 1, z)); } }; } // Create laser sight function createLaserSight() { const laserLine = document.createElement('div'); laserLine.style.position = 'absolute'; laserLine.style.bottom = '0'; laserLine.style.left = '50%'; laserLine.style.width = '2px'; laserLine.style.backgroundColor = 'rgba(255, 0, 0, 0.7)'; laserLine.style.transformOrigin = 'bottom center'; laserLine.style.pointerEvents = 'none'; laserLine.style.display = 'none'; parentDiv.appendChild(laserLine); return laserLine; } // Initialize laser sight laserSight = createLaserSight(); // Start animation // Create fireworks effect function createFireworks(count) { for (let i = 0; i < count; i++) { const firework = document.createElement('div'); firework.style.position = 'absolute'; firework.style.width = '4px'; firework.style.height = '4px'; firework.style.borderRadius = '50%'; firework.style.pointerEvents = 'none'; // Random color const colors = ['#ff0', '#f0f', '#0ff', '#0f0', '#ff5']; firework.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]; // Start position (center of screen) const startX = window.innerWidth / 2; const startY = window.innerHeight / 2; // Random angle and velocity const angle = Math.random() * Math.PI * 2; const velocity = 10 + Math.random() * 15; const lifetime = 1000 + Math.random() * 1000; // 1-2 seconds firework.style.left = startX + 'px'; firework.style.top = startY + 'px'; document.body.appendChild(firework); // Animate the firework let elapsed = 0; const startTime = performance.now(); function animateParticle(currentTime) { elapsed = currentTime - startTime; const progress = elapsed / lifetime; if (progress >= 1) { document.body.removeChild(firework); return; } // Calculate position with gravity effect const x = startX + Math.cos(angle) * velocity * progress * 60; const y = startY + Math.sin(angle) * velocity * progress * 60 + (0.5 * 9.81 * Math.pow(progress * 2, 2) * 30); // Gravity effect firework.style.left = x + 'px'; firework.style.top = y + 'px'; // Fade out firework.style.opacity = 1 - progress; requestAnimationFrame(animateParticle); } requestAnimationFrame(animateParticle); } } // Add event listener for ESC key to enable input document.addEventListener('keydown', (event) => { if (event.key === 'Escape') { const playerInitials = document.getElementById('playerInitials'); if (playerInitials) { playerInitials.readOnly = false; playerInitials.focus(); } } }); animate();

Game Controls

Radar Colors

GAME OVER

High Scores