import * as THREE from 'three'; // Add Google Fonts link const link = document.createElement('link'); link.href = 'https://fonts.googleapis.com/css2?family=Creepster&display=swap'; link.rel = 'stylesheet'; document.head.appendChild(link); import { // OrbitControls removed } from 'three/addons/controls/OrbitControls.js'; // Import can be removed 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 const loadingManager = new THREE.LoadingManager(); const textureLoader = new THREE.TextureLoader(loadingManager); let assetsLoaded = false; // Load zombie texture const zombieTexture = textureLoader.load('https://play.rosebud.ai/assets/scary zombie full body.png?EiHp'); 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); // Initialize background music variable let backgroundMusic; // Initialize kill score let killScore = 0; // Loading manager events loadingManager.onProgress = function(url, itemsLoaded, itemsTotal) { const progress = (itemsLoaded / itemsTotal * 100).toFixed(0); loadingScreen.innerHTML = `Loading... ${progress}%`; }; loadingManager.onLoad = function() { assetsLoaded = true; loadingScreen.style.display = 'none'; // Initialize and play background music backgroundMusic = new Audio('https://play.rosebud.ai/assets/halloween-horror-atmosphere-193645.mp3?2xUL'); backgroundMusic.loop = true; backgroundMusic.volume = 0.1; // Adjusted volume for the new track // Attempt to play the music. Note: Some browsers may require user interaction to play audio. backgroundMusic.play().catch((error) => { console.warn('Autoplay was prevented. User interaction is required to play the background music.'); }); }; loadingManager.onError = function(url) { console.error('Error loading:', url); }; // Initialize the scene const scene = new THREE.Scene(); const world = new CANNON.World(); world.gravity.set(0, -9.81, 0); // Standard gravity // Define physics materials const groundPhysMaterial = new CANNON.Material('ground'); const playerPhysMaterial = new CANNON.Material('player'); const wallPhysMaterial = new CANNON.Material('wall'); // Player's physical body const playerHeight = 1.5; // Shorter than standard height const playerShape = new CANNON.Cylinder(0.3, 0.3, playerHeight, 8); const playerBody = new CANNON.Body({ mass: 70, // Average human mass shape: playerShape, material: playerPhysMaterial }); playerBody.position.set(0, playerHeight / 2 + 0.1, 0); // Start slightly above the ground world.addBody(playerBody); // Player health system let playerHealth = 100; const healthBar = document.createElement('div'); healthBar.style.position = 'absolute'; healthBar.style.bottom = '20px'; healthBar.style.left = '20px'; healthBar.style.width = '200px'; healthBar.style.height = '20px'; healthBar.style.backgroundColor = '#333'; healthBar.style.border = '2px solid #fff'; const healthBarFill = document.createElement('div'); healthBarFill.style.width = '100%'; healthBarFill.style.height = '100%'; healthBarFill.style.backgroundColor = '#0f0'; healthBar.appendChild(healthBarFill); parentDiv.appendChild(healthBar); // Create kill score display const killScoreDisplay = document.createElement('div'); killScoreDisplay.id = 'killScore'; killScoreDisplay.style.position = 'absolute'; killScoreDisplay.style.top = '20px'; killScoreDisplay.style.left = '20px'; killScoreDisplay.style.color = '#fff'; killScoreDisplay.style.fontSize = '24px'; killScoreDisplay.style.fontWeight = 'bold'; parentDiv.appendChild(killScoreDisplay); world.defaultContactMaterial.friction = 0.01; world.defaultContactMaterial.restitution = 0; world.solver.iterations = 10; world.solver.tolerance = 0.001; // Create contact material for player-object interactions const playerGroundContact = new CANNON.ContactMaterial(playerPhysMaterial, groundPhysMaterial, { friction: 0.1, restitution: 0.3 }); const playerWallContact = new CANNON.ContactMaterial(playerPhysMaterial, wallPhysMaterial, { friction: 0.1, restitution: 0.3 }); world.addContactMaterial(playerGroundContact); world.addContactMaterial(playerWallContact); const clock = new THREE.Clock(); // Initialize the camera (player's view) const camera = new THREE.PerspectiveCamera( 75, canvas.offsetWidth / canvas.offsetHeight, 0.1, 1000 ); camera.position.set(0, 1.7, 0); // Set initial camera position (eye level) const raygunTexture = textureLoader.load('https://play.rosebud.ai/assets/alienraygun.png?0DbM'); const raygunMaterial = new THREE.SpriteMaterial({ map: raygunTexture }); const raygun = new THREE.Sprite(raygunMaterial); raygun.scale.set(0.6, 0.6, 1); // Increased scale from 0.3 to 0.6 raygun.position.set(0.4, -0.4, -0.7); // Adjusted position to accommodate larger size camera.add(raygun); scene.add(camera); // Bullet management const bullets = []; const bulletGeometry = new THREE.SphereGeometry(0.1, 8, 8); const bulletMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); const bulletSpeed = 50; const bulletLifetime = 2000; // 2 seconds function createBullet() { const bullet = new THREE.Mesh(bulletGeometry, bulletMaterial); // Get the raygun's world position and orientation const raygunWorldPosition = new THREE.Vector3(); const raygunWorldQuaternion = new THREE.Quaternion(); raygun.getWorldPosition(raygunWorldPosition); raygun.getWorldQuaternion(raygunWorldQuaternion); // Set bullet position to the tip of the raygun bullet.position.copy(raygunWorldPosition); bullet.position.add(new THREE.Vector3(0, 0, -0.5).applyQuaternion(raygunWorldQuaternion)); // Set bullet orientation to match the raygun bullet.quaternion.copy(raygunWorldQuaternion); scene.add(bullet); bullets.push({ mesh: bullet, velocity: new THREE.Vector3(0, 0, -1).applyQuaternion(raygunWorldQuaternion).multiplyScalar(bulletSpeed), created: Date.now() }); } // Initialize the renderer with HDR const renderer = new THREE.WebGLRenderer({ antialias: true, canvas: canvas, powerPreference: "high-performance" }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(canvas.offsetWidth, canvas.offsetHeight); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; renderer.outputEncoding = THREE.sRGBEncoding; renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.2; // Initialize post-processing const composer = new EffectComposer(renderer); // Regular scene render pass const renderPass = new RenderPass(scene, camera); composer.addPass(renderPass); // Add subtle bloom effect const bloomPass = new UnrealBloomPass( new THREE.Vector2(window.innerWidth, window.innerHeight), 0.2, // bloom strength 0.4, // radius 0.9 // threshold ); composer.addPass(bloomPass); // Add anti-aliasing const smaaPass = new SMAAPass( window.innerWidth * renderer.getPixelRatio(), window.innerHeight * renderer.getPixelRatio() ); composer.addPass(smaaPass); // Initialize composer size composer.setSize(parentDiv.clientWidth, parentDiv.clientHeight); // Define sky colors for environmental lighting const skyColor = new THREE.Color(0x87CEEB); // Bright sky blue const groundColor = new THREE.Color(0xFFFFFF); // White ground reflection // Create sky dome with improved colors const vertexShader = ` varying vec3 vWorldPosition; void main() { vec4 worldPosition = modelMatrix * vec4( position, 1.0 ); vWorldPosition = worldPosition.xyz; gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); }`; const fragmentShader = ` uniform vec3 topColor; uniform vec3 bottomColor; uniform float offset; uniform float exponent; varying vec3 vWorldPosition; void main() { float h = normalize( vWorldPosition + offset ).y; gl_FragColor = vec4( mix( bottomColor, topColor, max( pow( max( h, 0.0 ), exponent ), 0.0 ) ), 1.0 ); }`; const uniforms = { topColor: { value: skyColor }, bottomColor: { value: groundColor }, offset: { value: 33 }, exponent: { value: 0.6 } }; const skyGeo = new THREE.SphereGeometry(500, 32, 15); const skyMat = new THREE.ShaderMaterial({ uniforms: uniforms, vertexShader: vertexShader, fragmentShader: fragmentShader, side: THREE.BackSide }); const sky = new THREE.Mesh(skyGeo, skyMat); scene.add(sky); // FPS controls let moveForward = false, moveBackward = false, moveLeft = false, moveRight = false; const onKeyDown = function(event) { switch (event.code) { case 'ArrowUp': case 'KeyW': moveForward = true; break; case 'ArrowLeft': case 'KeyA': moveLeft = true; break; case 'ArrowDown': case 'KeyS': moveBackward = true; break; case 'ArrowRight': case 'KeyD': moveRight = true; break; } }; const onKeyUp = function(event) { switch (event.code) { case 'ArrowUp': case 'KeyW': moveForward = false; break; case 'ArrowLeft': case 'KeyA': moveLeft = false; break; case 'ArrowDown': case 'KeyS': moveBackward = false; break; case 'ArrowRight': case 'KeyD': moveRight = false; break; } }; document.addEventListener('keydown', onKeyDown); document.addEventListener('keyup', onKeyUp); // Mouse look controls const pitchObject = new THREE.Object3D(); pitchObject.add(camera); const yawObject = new THREE.Object3D(); yawObject.position.y = playerHeight / 2 + 0.1; // Set camera position to half of player height plus a small offset yawObject.add(pitchObject); scene.add(yawObject); // Align initial camera rotation with world axes yawObject.rotation.y = Math.PI; // Rotate 180 degrees to face -Z direction const PI_2 = Math.PI / 2; const onMouseMove = function(event) { if (document.pointerLockElement === canvas) { const movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0; const movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0; yawObject.rotation.y -= movementX * 0.002; pitchObject.rotation.x -= movementY * 0.002; pitchObject.rotation.x = Math.max(-PI_2, Math.min(PI_2, pitchObject.rotation.x)); } }; document.addEventListener('mousemove', onMouseMove, false); canvas.addEventListener('click', function() { canvas.requestPointerLock(); }); // Shooting mechanic let lastShotTime = 0; const shootCooldown = 250; // 250 milliseconds cooldown between shots document.addEventListener('mousedown', function(event) { if (document.pointerLockElement === canvas && event.button === 0) { const currentTime = Date.now(); if (currentTime - lastShotTime > shootCooldown) { createBullet(); lastShotTime = currentTime; // Create muzzle flash effect const muzzleFlash = new THREE.PointLight(0xFFFF00, 1, 3); muzzleFlash.position.copy(raygun.position); muzzleFlash.position.z -= 0.5; camera.add(muzzleFlash); // Remove muzzle flash after a short duration setTimeout(() => { camera.remove(muzzleFlash); }, 50); } } }); // 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://develop.play.rosebud.ai/assets/Grass_04.png?MBRT'); const normalMap = textureLoader.load('https://develop.play.rosebud.ai/assets/Grass_04_Nrm.png?BQVT'); texture.wrapS = texture.wrapT = THREE.RepeatWrapping; texture.repeat.set(20, 20); texture.encoding = THREE.sRGBEncoding; normalMap.wrapS = normalMap.wrapT = THREE.RepeatWrapping; normalMap.repeat.set(20, 20); const material = new THREE.MeshStandardMaterial({ map: texture, normalMap: normalMap, normalScale: new THREE.Vector2(2, 2), 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; } // Function to create a simple tree model function createTree() { const treeGroup = new THREE.Group(); // Tree trunk const trunkGeometry = new THREE.CylinderGeometry(0.2, 0.4, 2, 8); const trunkMaterial = new THREE.MeshStandardMaterial({ color: 0x8B4513 }); const trunk = new THREE.Mesh(trunkGeometry, trunkMaterial); trunk.position.y = 1; treeGroup.add(trunk); // Tree foliage const foliageGeometry = new THREE.ConeGeometry(1.5, 3, 8); const foliageMaterial = new THREE.MeshStandardMaterial({ color: 0x228B22 }); const foliage = new THREE.Mesh(foliageGeometry, foliageMaterial); foliage.position.y = 3; treeGroup.add(foliage); treeGroup.castShadow = true; treeGroup.receiveShadow = true; return treeGroup; } // Function to create a simple bush model function createBush() { const bushGeometry = new THREE.SphereGeometry(0.5, 8, 8); const bushMaterial = new THREE.MeshStandardMaterial({ color: 0x228B22 }); const bush = new THREE.Mesh(bushGeometry, bushMaterial); bush.position.y = 0.5; bush.castShadow = true; bush.receiveShadow = true; return bush; } // Function to randomly place trees and bushes function placeFoliage(terrain) { const terrainSize = 200; // Same as in createTerrain function const numberOfTrees = 50; const numberOfBushes = 100; for (let i = 0; i < numberOfTrees; i++) { const tree = createTree(); const x = Math.random() * terrainSize - terrainSize / 2; const z = Math.random() * terrainSize - terrainSize / 2; tree.position.set(x, 0, z); scene.add(tree); } for (let i = 0; i < numberOfBushes; i++) { const bush = createBush(); const x = Math.random() * terrainSize - terrainSize / 2; const z = Math.random() * terrainSize - terrainSize / 2; bush.position.set(x, 0, z); scene.add(bush); } } // Function to create walls around the map function createWalls() { const terrainSize = 200; // Same as in createTerrain function const wallHeight = 10; const wallThickness = 2; const wallMaterial = new THREE.MeshStandardMaterial({ color: 0x8B4513 }); // Brown color for the walls const walls = [ // North wall { position: [0, wallHeight / 2, -terrainSize / 2], size: [terrainSize, wallHeight, wallThickness] }, // South wall { position: [0, wallHeight / 2, terrainSize / 2], size: [terrainSize, wallHeight, wallThickness] }, // East wall { position: [terrainSize / 2, wallHeight / 2, 0], size: [wallThickness, wallHeight, terrainSize] }, // West wall { position: [-terrainSize / 2, wallHeight / 2, 0], size: [wallThickness, wallHeight, terrainSize] } ]; walls.forEach(wall => { const geometry = new THREE.BoxGeometry(wall.size[0], wall.size[1], wall.size[2]); const mesh = new THREE.Mesh(geometry, wallMaterial); mesh.position.set(...wall.position); mesh.castShadow = true; mesh.receiveShadow = true; scene.add(mesh); // Add physics body for the wall const wallShape = new CANNON.Box(new CANNON.Vec3(wall.size[0] / 2, wall.size[1] / 2, wall.size[2] / 2)); const wallBody = new CANNON.Body({ mass: 0, material: wallPhysMaterial }); // Static body wallBody.addShape(wallShape); wallBody.position.set(...wall.position); world.addBody(wallBody); }); } // Setup improved lighting system const sunLight = new THREE.DirectionalLight(skyColor, 2.0); sunLight.position.set(-50, 100, -50); sunLight.castShadow = true; sunLight.shadow.mapSize.width = 2048; sunLight.shadow.mapSize.height = 2048; sunLight.shadow.camera.near = 10; sunLight.shadow.camera.far = 400; sunLight.shadow.camera.left = -100; sunLight.shadow.camera.right = 100; sunLight.shadow.camera.top = 100; sunLight.shadow.camera.bottom = -100; sunLight.shadow.bias = -0.001; scene.add(sunLight); // Add hemisphere light to simulate sky and ground bounce light const hemiLight = new THREE.HemisphereLight(skyColor, groundColor, 0.6); scene.add(hemiLight); // Create initial scene const terrain = createTerrain(); placeFoliage(terrain); createWalls(); // Function to create and spawn zombies function spawnZombies() { const zombieHeight = 2.5; // Increased zombie height const zombieWidth = 1.2; // Increased zombie width const zombieGeometry = new THREE.PlaneGeometry(zombieWidth, zombieHeight); const zombieMaterial = new THREE.MeshBasicMaterial({ map: zombieTexture, transparent: true, side: THREE.DoubleSide }); const zombies = []; const minDistanceFromPlayer = 50; // Minimum distance from the player const spawnRadius = 95; // Maximum spawn radius (within walls) for (let i = 0; i < 100; i++) { const zombie = new THREE.Mesh(zombieGeometry, zombieMaterial); let x, z; do { const angle = Math.random() * Math.PI * 2; const radius = minDistanceFromPlayer + Math.random() * (spawnRadius - minDistanceFromPlayer); x = Math.cos(angle) * radius; z = Math.sin(angle) * radius; } while (Math.abs(x) > spawnRadius || Math.abs(z) > spawnRadius); zombie.position.set(x, playerHeight / 2, z); zombie.lookAt(camera.position); scene.add(zombie); zombies.push({ mesh: zombie, speed: 2 + Math.random() * 2, // Random speed between 2 and 4 health: 100 }); } return zombies; } // Spawn zombies const zombies = spawnZombies(); // Function to create a UFO function createUFO() { const ufoTexture = textureLoader.load('https://play.rosebud.ai/assets/UFO.png?IFg1'); const ufoGeometry = new THREE.PlaneGeometry(10, 5); const ufoMaterial = new THREE.MeshBasicMaterial({ map: ufoTexture, transparent: true, side: THREE.DoubleSide }); const ufo = new THREE.Mesh(ufoGeometry, ufoMaterial); ufo.rotation.x = -Math.PI / 2; // Make UFO flat and facing downwards // Random position within the map boundaries, but high in the sky const x = (Math.random() - 0.5) * 180; const y = 50 + Math.random() * 30; // Between 50 and 80 units high const z = (Math.random() - 0.5) * 180; ufo.position.set(x, y, z); // Random movement direction ufo.velocity = new THREE.Vector3( (Math.random() - 0.5) * 10, (Math.random() - 0.5) * 5, (Math.random() - 0.5) * 10 ); return ufo; } // Create and add UFOs to the scene const ufos = []; for (let i = 0; i < 6; i++) { const ufo = createUFO(); scene.add(ufo); ufos.push(ufo); } // Explosion effect function createExplosion(position) { const particleCount = 50; const geometry = new THREE.BufferGeometry(); const positions = []; const colors = []; for (let i = 0; i < particleCount; i++) { positions.push((Math.random() - 0.5) * 2, (Math.random() - 0.5) * 2, (Math.random() - 0.5) * 2); colors.push(1, 0, 0); // Red color } geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3)); geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3)); const material = new THREE.PointsMaterial({ size: 0.1, vertexColors: true }); const particles = new THREE.Points(geometry, material); particles.position.copy(position); scene.add(particles); // Animate explosion const startTime = Date.now(); function animateExplosion() { const elapsedTime = Date.now() - startTime; const positions = particles.geometry.attributes.position.array; for (let i = 0; i < positions.length; i += 3) { positions[i] += (Math.random() - 0.5) * 0.1; positions[i + 1] += (Math.random() - 0.5) * 0.1; positions[i + 2] += (Math.random() - 0.5) * 0.1; } particles.geometry.attributes.position.needsUpdate = true; if (elapsedTime < 1000) { requestAnimationFrame(animateExplosion); } else { scene.remove(particles); } } animateExplosion(); } let animationFrameId; function animate() { animationFrameId = requestAnimationFrame(animate); const deltaTime = Math.min(clock.getDelta(), 0.1); if (assetsLoaded) { world.step(deltaTime); // Update bullets for (let i = bullets.length - 1; i >= 0; i--) { const bullet = bullets[i]; bullet.mesh.position.add(bullet.velocity.clone().multiplyScalar(deltaTime)); // Check bullet lifetime if (Date.now() - bullet.created > bulletLifetime) { scene.remove(bullet.mesh); bullets.splice(i, 1); } } // Player movement const speed = 5; const velocity = new THREE.Vector3(); const direction = new THREE.Vector3(); direction.z = Number(moveBackward) - Number(moveForward); direction.x = Number(moveRight) - Number(moveLeft); direction.normalize(); if (moveForward || moveBackward) velocity.z = direction.z * speed; if (moveLeft || moveRight) velocity.x = direction.x * speed; // Apply rotation to velocity based on camera direction velocity.applyQuaternion(yawObject.quaternion); // Set player's velocity playerBody.velocity.x = velocity.x; playerBody.velocity.z = velocity.z; playerBody.velocity.y = 0; // Ensure the player doesn't fly // Update yawObject position to match playerBody yawObject.position.copy(playerBody.position); yawObject.position.y = playerBody.position.y + playerHeight / 2; // Adjust for player height // Update camera position based on physics body yawObject.position.copy(playerBody.position); yawObject.position.y = playerBody.position.y + playerHeight / 2; // Adjust for player height // Improved collision detection for bullets for (let i = bullets.length - 1; i >= 0; i--) { const bullet = bullets[i]; // Check collision with walls if (Math.abs(bullet.mesh.position.x) > 100 || Math.abs(bullet.mesh.position.z) > 100) { scene.remove(bullet.mesh); bullets.splice(i, 1); continue; } // Check collision with zombies for (let j = zombies.length - 1; j >= 0; j--) { const zombie = zombies[j]; const zombieBox = new THREE.Box3().setFromObject(zombie.mesh); const bulletBox = new THREE.Box3().setFromObject(bullet.mesh); if (zombieBox.intersectsBox(bulletBox)) { zombie.health -= 50; // Reduce zombie health if (zombie.health <= 0) { createExplosion(zombie.mesh.position); scene.remove(zombie.mesh); zombies.splice(j, 1); killScore++; // Increment kill score updateScoreDisplay(); // Update the displayed score // Check for win condition if (zombies.length === 0) { playerWin(); } } scene.remove(bullet.mesh); bullets.splice(i, 1); break; } } } // Update zombies zombies.forEach((zombie, index) => { // Make zombies face and move towards the player const direction = new THREE.Vector3(); direction.subVectors(yawObject.position, zombie.mesh.position).normalize(); // Move zombie towards player const newPosition = zombie.mesh.position.clone().add(direction.multiplyScalar(zombie.speed * deltaTime)); // Check for collision with player if (newPosition.distanceTo(yawObject.position) > 1.5) { zombie.mesh.position.copy(newPosition); } else { playerHealth -= 10 * deltaTime; // Decrease health over time when in contact flashScreen(); // Flash the screen red healthBarFill.style.width = `${playerHealth}%`; if (playerHealth <= 0) { gameOver(); } } // Make zombie face the player zombie.mesh.lookAt(yawObject.position); }); // Update UFO positions ufos.forEach(ufo => { // Get player's view direction const playerDirection = new THREE.Vector3(0, 0, -1); playerDirection.applyQuaternion(camera.quaternion); // Calculate new velocity based on player's view direction const newVelocity = playerDirection.clone().multiplyScalar(5); // Adjust speed as needed // Smoothly interpolate between current velocity and new velocity ufo.velocity.lerp(newVelocity, 0.02); // Adjust lerp factor for smoother or quicker turns // Update UFO position ufo.position.add(ufo.velocity.clone().multiplyScalar(deltaTime)); // Bounce off invisible boundaries if (Math.abs(ufo.position.x) > 90 || Math.abs(ufo.position.z) > 90) { ufo.velocity.x *= -1; ufo.velocity.z *= -1; } if (ufo.position.y < 40 || ufo.position.y > 90) { ufo.velocity.y *= -1; } // Make UFO face the direction it's moving ufo.lookAt(ufo.position.clone().add(ufo.velocity)); // Tilt the UFO slightly in the direction of movement const tiltAmount = Math.PI / 12; // 15 degrees tilt ufo.rotation.x = -tiltAmount * (ufo.velocity.y / 5); // Adjust tilt based on vertical velocity }); } composer.render(); } // Screen flash effect const flashOverlay = document.createElement('div'); flashOverlay.style.position = 'absolute'; flashOverlay.style.top = '0'; flashOverlay.style.left = '0'; flashOverlay.style.width = '100%'; flashOverlay.style.height = '100%'; flashOverlay.style.backgroundColor = 'rgba(255, 0, 0, 0.3)'; flashOverlay.style.opacity = '0'; flashOverlay.style.transition = 'opacity 0.1s ease-in-out'; flashOverlay.style.pointerEvents = 'none'; parentDiv.appendChild(flashOverlay); function flashScreen() { flashOverlay.style.opacity = '1'; setTimeout(() => { flashOverlay.style.opacity = '0'; }, 100); } // 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); // The game will now start from the showTitleMenu function // animate() and updateScoreDisplay() are called in startGame() // Function to update the displayed score function updateScoreDisplay() { const scoreElement = document.getElementById('killScore'); if (scoreElement) { scoreElement.textContent = `Zombies Killed: ${killScore}`; } } // Show the title menu instead of immediately starting the game showTitleMenu(); function gameOver() { 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 = '#ff0000'; gameOverScreen.style.display = 'flex'; gameOverScreen.style.justifyContent = 'center'; gameOverScreen.style.alignItems = 'center'; gameOverScreen.style.fontSize = '64px'; gameOverScreen.style.fontFamily = "'Creepster', cursive"; gameOverScreen.style.textShadow = '0 0 10px #ff0000, 0 0 20px #ff0000, 0 0 30px #ff0000'; gameOverScreen.textContent = 'GAME OVER'; parentDiv.appendChild(gameOverScreen); // Stop the game loop cancelAnimationFrame(animationFrameId); // Remove event listeners document.removeEventListener('keydown', onKeyDown); document.removeEventListener('keyup', onKeyUp); document.removeEventListener('mousemove', onMouseMove); canvas.removeEventListener('click', canvas.requestPointerLock); } function playerWin() { const winScreen = document.createElement('div'); winScreen.style.position = 'absolute'; winScreen.style.top = '0'; winScreen.style.left = '0'; winScreen.style.width = '100%'; winScreen.style.height = '100%'; winScreen.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; winScreen.style.color = '#00ff00'; winScreen.style.display = 'flex'; winScreen.style.flexDirection = 'column'; winScreen.style.justifyContent = 'center'; winScreen.style.alignItems = 'center'; winScreen.style.fontSize = '48px'; winScreen.style.fontFamily = "'Creepster', cursive"; winScreen.innerHTML = `

CONGRATULATIONS!

You've defeated all the zombies!

Final Score: ${killScore}

`; parentDiv.appendChild(winScreen); // Stop the game loop cancelAnimationFrame(animationFrameId); // Remove event listeners document.removeEventListener('keydown', onKeyDown); document.removeEventListener('keyup', onKeyUp); document.removeEventListener('mousemove', onMouseMove); canvas.removeEventListener('click', canvas.requestPointerLock); } function showTitleMenu() { const titleMenu = document.createElement('div'); titleMenu.style.position = 'absolute'; titleMenu.style.top = '0'; titleMenu.style.left = '0'; titleMenu.style.width = '100%'; titleMenu.style.height = '100%'; titleMenu.style.backgroundImage = 'url(https://play.rosebud.ai/assets/aliensvszombiepic.png?oge8)'; titleMenu.style.backgroundSize = 'cover'; titleMenu.style.backgroundPosition = 'center'; titleMenu.style.color = '#00ff00'; titleMenu.style.display = 'flex'; titleMenu.style.flexDirection = 'column'; titleMenu.style.justifyContent = 'center'; titleMenu.style.alignItems = 'center'; titleMenu.style.fontSize = '48px'; titleMenu.style.fontFamily = "'Creepster', cursive"; titleMenu.innerHTML = `

Aliens vs Zombies

Created by Brain Joose

`; parentDiv.appendChild(titleMenu); // Add event listener to the start button document.getElementById('startButton').addEventListener('click', () => { parentDiv.removeChild(titleMenu); startGame(); }); } function startGame() { // Initialize the game animate(); updateScoreDisplay(); }