import * as THREE from 'three'; import { PointerLockControls } from 'three/addons/controls/PointerLockControls.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 Cannon.js const world = new CANNON.World(); world.gravity.set(0, -9.82, 0); world.broadphase = new CANNON.NaiveBroadphase(); world.solver.iterations = 10; // Create player physics body const playerShape = new CANNON.Sphere(1); // 1 unit radius const playerBody = new CANNON.Body({ mass: 5, material: new CANNON.Material(), fixedRotation: true, // Prevent player from rotating shape: playerShape }); playerBody.position.set(0, 2, 0); world.addBody(playerBody); world.defaultContactMaterial = new CANNON.ContactMaterial( new CANNON.Material(), new CANNON.Material(), { friction: 0.5, restitution: 0.3 } ); // Initialize loading manager const loadingManager = new THREE.LoadingManager(); const textureLoader = new THREE.TextureLoader(loadingManager); let assetsLoaded = false; let gunTexture, bulletTexture, enemyTextures = [], explosionTexture; let playerScore = 0; let playerHealth = 100; let isGameOver = false; let gameStarted = false; // Create title menu const titleMenu = document.createElement('div'); titleMenu.style.position = 'fixed'; titleMenu.style.top = '0'; titleMenu.style.left = '0'; titleMenu.style.width = '100%'; titleMenu.style.height = '100%'; titleMenu.style.backgroundColor = 'rgba(0, 0, 0, 0.9)'; titleMenu.style.display = 'flex'; titleMenu.style.flexDirection = 'column'; titleMenu.style.justifyContent = 'center'; titleMenu.style.alignItems = 'center'; titleMenu.style.zIndex = '3000'; // Game title const gameTitle = document.createElement('h1'); gameTitle.textContent = 'Your First FPS Game'; gameTitle.style.color = '#ff3333'; gameTitle.style.fontSize = '48px'; gameTitle.style.marginBottom = '10px'; gameTitle.style.textShadow = '2px 2px 4px rgba(0,0,0,0.5)'; gameTitle.style.fontFamily = 'Arial, sans-serif'; // Create subtitle const subtitle = document.createElement('div'); subtitle.textContent = 'Created by Brain Joose... AND YOU!'; subtitle.style.color = '#ff6666'; subtitle.style.fontSize = '24px'; subtitle.style.marginBottom = '30px'; subtitle.style.textShadow = '1px 1px 2px rgba(0,0,0,0.5)'; subtitle.style.fontFamily = 'Arial, sans-serif'; // Create button container const buttonContainer = document.createElement('div'); buttonContainer.style.display = 'flex'; buttonContainer.style.flexDirection = 'column'; buttonContainer.style.gap = '20px'; // Button style function function styleButton(button) { button.style.padding = '15px 30px'; button.style.fontSize = '24px'; button.style.cursor = 'pointer'; button.style.backgroundColor = '#ff3333'; button.style.border = 'none'; button.style.color = 'white'; button.style.borderRadius = '5px'; button.style.width = '250px'; button.style.transition = 'all 0.2s ease'; button.onmouseenter = () => { button.style.backgroundColor = '#ff6666'; button.style.transform = 'scale(1.05)'; }; button.onmouseleave = () => { button.style.backgroundColor = '#ff3333'; button.style.transform = 'scale(1)'; }; } // Start button const startButton = document.createElement('button'); startButton.textContent = 'Start Game'; styleButton(startButton); // Instructions button const instructionsButton = document.createElement('button'); instructionsButton.textContent = 'Instructions'; styleButton(instructionsButton); // Instructions modal const instructionsModal = document.createElement('div'); instructionsModal.style.display = 'none'; instructionsModal.style.position = 'fixed'; instructionsModal.style.top = '50%'; instructionsModal.style.left = '50%'; instructionsModal.style.transform = 'translate(-50%, -50%)'; instructionsModal.style.backgroundColor = 'rgba(0, 0, 0, 0.95)'; instructionsModal.style.padding = '30px'; instructionsModal.style.borderRadius = '10px'; instructionsModal.style.color = 'white'; instructionsModal.style.zIndex = '4000'; instructionsModal.style.maxWidth = '80%'; instructionsModal.style.maxHeight = '80%'; instructionsModal.style.overflowY = 'auto'; const instructionsContent = `

How to Play

Movement:
- Use WASD or Arrow keys to move
- Use mouse to look around
- Click to shoot

Mobile Controls:
- Use on-screen D-pad to move
- Swipe screen to look around
- Tap to shoot

Objectives:
- Defeat enemies to score points
- Regular monsters: 100 points
- Zombies: 150 points
- Avoid enemy contact to stay alive
- Your health decreases when enemies touch you

`; instructionsModal.innerHTML = instructionsContent; const closeButton = document.createElement('button'); closeButton.textContent = 'Close'; closeButton.style.marginTop = '20px'; styleButton(closeButton); closeButton.style.width = '150px'; closeButton.style.fontSize = '18px'; closeButton.style.padding = '10px 20px'; instructionsModal.appendChild(closeButton); // Event listeners startButton.addEventListener('click', () => { titleMenu.style.display = 'none'; gameStarted = true; controls.lock(); }); instructionsButton.addEventListener('click', () => { instructionsModal.style.display = 'block'; }); closeButton.addEventListener('click', () => { instructionsModal.style.display = 'none'; }); // Add elements to DOM buttonContainer.appendChild(startButton); buttonContainer.appendChild(instructionsButton); titleMenu.appendChild(gameTitle); titleMenu.appendChild(subtitle); titleMenu.appendChild(buttonContainer); document.body.appendChild(titleMenu); document.body.appendChild(instructionsModal); // Get the parent div first const parentDiv = document.getElementById('renderDiv'); let canvas = document.getElementById('threeRenderCanvas'); if (!canvas) { canvas = document.createElement('canvas'); canvas.id = 'threeRenderCanvas'; parentDiv.appendChild(canvas); } // Create health bar const healthBar = document.createElement('div'); healthBar.style.position = 'fixed'; healthBar.style.top = '20px'; healthBar.style.left = '20px'; healthBar.style.width = '200px'; healthBar.style.height = '20px'; healthBar.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; healthBar.style.border = '2px solid white'; healthBar.style.zIndex = '1000'; const healthFill = document.createElement('div'); healthFill.style.width = '100%'; healthFill.style.height = '100%'; healthFill.style.backgroundColor = '#ff3333'; healthFill.style.transition = 'width 0.2s'; healthBar.appendChild(healthFill); parentDiv.appendChild(healthBar); // Create score display const scoreDisplay = document.createElement('div'); scoreDisplay.style.position = 'fixed'; scoreDisplay.style.top = '20px'; scoreDisplay.style.right = '20px'; scoreDisplay.style.color = 'white'; scoreDisplay.style.fontSize = '24px'; scoreDisplay.style.fontWeight = 'bold'; scoreDisplay.style.textShadow = '2px 2px 4px rgba(0,0,0,0.5)'; scoreDisplay.style.zIndex = '1000'; scoreDisplay.textContent = 'Score: 0'; parentDiv.appendChild(scoreDisplay); let bullets = [], enemies = [], explosions = []; // Enemy class class Enemy { constructor(position, textureIndex) { const geometry = new THREE.PlaneGeometry(2, 2); const material = new THREE.MeshBasicMaterial({ map: enemyTextures[textureIndex], transparent: true, side: THREE.DoubleSide }); this.mesh = new THREE.Mesh(geometry, material); this.mesh.position.copy(position); this.mesh.position.y = 1; this.isZombie = textureIndex === 2; // Check if it's the zombie texture this.speed = 0.03; this.maxSpeed = this.isZombie ? 0.06 : 0.08; // Zombies are slower this.direction = new THREE.Vector3( Math.random() - 0.5, 0, Math.random() - 0.5 ).normalize(); this.state = 'patrol'; this.patrolPoint = new THREE.Vector3( Math.random() * 40 - 20, 0, Math.random() * 40 - 20 ); this.changeDirectionTime = 0; this.health = 100; this.detectionRange = 20; this.fleeHealth = 30; scene.add(this.mesh); } update(playerPosition) { const distanceToPlayer = this.mesh.position.distanceTo(playerPosition); // Add a unique offset for each enemy const offsetPosition = playerPosition.clone(); if (!this.chaseOffset) { // Create a persistent random offset for this enemy this.chaseOffset = new THREE.Vector3( (Math.random() - 0.5) * 6, 0, (Math.random() - 0.5) * 6 ); } offsetPosition.add(this.chaseOffset); // Check if player is in line of sight const directionToPlayer = new THREE.Vector3().subVectors(offsetPosition, this.mesh.position).normalize(); const angleToPlayer = this.direction.angleTo(directionToPlayer); const canSeePlayer = distanceToPlayer < this.detectionRange && angleToPlayer < Math.PI / 2; // State machine if (this.health <= this.fleeHealth) { this.state = 'flee'; } else if (canSeePlayer) { this.state = 'chase'; } else if (distanceToPlayer > this.detectionRange) { this.state = 'patrol'; } // Behavior based on state switch (this.state) { case 'chase': // Check for nearby enemies and adjust position const repulsionForce = new THREE.Vector3(); enemies.forEach(otherEnemy => { if (otherEnemy !== this) { const dist = this.mesh.position.distanceTo(otherEnemy.mesh.position); if (dist < 4) { // Repulsion radius const force = this.mesh.position.clone() .sub(otherEnemy.mesh.position) .normalize() .multiplyScalar(1 / Math.max(dist, 0.1)); repulsionForce.add(force); } } }); // Blend between chase direction and repulsion this.direction.copy(directionToPlayer) .add(repulsionForce.multiplyScalar(0.5)) .normalize(); if (!this.isZombie) { // Flying monsters can move in 3D this.direction.y = (offsetPosition.y - this.mesh.position.y) * 0.1; } this.speed = this.maxSpeed; break; case 'flee': this.direction.copy(directionToPlayer).multiplyScalar(-1); this.speed = this.maxSpeed; break; case 'patrol': // Check if reached patrol point const distanceToPatrol = this.mesh.position.distanceTo(this.patrolPoint); if (distanceToPatrol < 0.5 || Date.now() - this.changeDirectionTime > 3000) { this.patrolPoint.set( Math.random() * 40 - 20, 0, Math.random() * 40 - 20 ); this.direction.subVectors(this.patrolPoint, this.mesh.position).normalize(); this.changeDirectionTime = Date.now(); } this.speed = 0.03; break; } // Move enemy const movement = this.direction.clone().multiplyScalar(this.speed); // Keep zombies grounded if (this.isZombie) { movement.y = 0; this.mesh.position.y = 1; } else { // Flying monsters have height limits const newY = this.mesh.position.y + movement.y; if (newY < 1 || newY > 5) { movement.y = 0; } } this.mesh.position.add(movement); // Keep within bounds const maxDistance = 50; if (this.mesh.position.length() > maxDistance) { this.mesh.position.normalize().multiplyScalar(maxDistance); this.direction.multiplyScalar(-1); } // Make enemy face movement direction const lookTarget = new THREE.Vector3().addVectors( this.mesh.position, this.direction ); this.mesh.lookAt(lookTarget); } damage(amount) { this.health -= amount; return this.health <= 0; } } // Explosion class class Explosion { constructor(position) { const geometry = new THREE.PlaneGeometry(3, 3); const material = new THREE.MeshBasicMaterial({ map: explosionTexture, transparent: true, side: THREE.DoubleSide, opacity: 1 }); this.mesh = new THREE.Mesh(geometry, material); this.mesh.position.copy(position); this.mesh.position.y = 1; this.startTime = Date.now(); this.duration = 500; // 500ms explosion duration scene.add(this.mesh); } update() { const elapsed = Date.now() - this.startTime; const progress = elapsed / this.duration; if (progress >= 1) { scene.remove(this.mesh); return true; // Should be removed } // Scale up the explosion const scale = 1 + progress * 2; this.mesh.scale.set(scale, scale, scale); // Fade out this.mesh.material.opacity = 1 - progress; // Rotate slightly for effect this.mesh.rotation.z += 0.1; return false; } } // Bullet class class Bullet { constructor(position, direction) { const geometry = new THREE.PlaneGeometry(0.3, 0.3); // Larger bullets const material = new THREE.MeshBasicMaterial({ map: bulletTexture, transparent: true, side: THREE.DoubleSide, opacity: 1, emissive: new THREE.Color(0xffff00), emissiveIntensity: 0.5 }); this.mesh = new THREE.Mesh(geometry, material); this.mesh.position.copy(position); this.direction = direction.normalize(); this.speed = 1.5; // Slightly slower for better visibility this.lifespan = 2000; // 2 seconds this.born = Date.now(); scene.add(this.mesh); } update() { this.mesh.position.add(this.direction.multiplyScalar(this.speed)); this.mesh.lookAt(camera.position); // Make the bullet rotate slightly for better visibility this.mesh.rotateZ(Date.now() * 0.005); if (Date.now() - this.born > this.lifespan) { scene.remove(this.mesh); return true; // Should be removed } return false; } } // Function to create gun overlay after textures are loaded function createGunOverlay() { const gunDiv = document.createElement('div'); gunDiv.style.position = 'fixed'; gunDiv.style.bottom = '0'; gunDiv.style.right = '0'; gunDiv.style.width = '40%'; gunDiv.style.height = '40%'; gunDiv.style.backgroundImage = `url(${gunTexture.source.data.src})`; gunDiv.style.backgroundSize = 'contain'; gunDiv.style.backgroundRepeat = 'no-repeat'; gunDiv.style.backgroundPosition = 'bottom right'; gunDiv.style.pointerEvents = 'none'; parentDiv.appendChild(gunDiv); } // 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 audio variables let backgroundMusic; let explosionSound; // Create explosion sound explosionSound = new Audio('https://play.rosebud.ai/assets/explode3-87806.mp3?XaCu'); explosionSound.volume = 0.3; // Set appropriate volume // 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'; // Create gun overlay after textures are loaded createGunOverlay(); // Initialize and play background music backgroundMusic = new Audio('https://play.rosebud.ai/assets/rosebud_official_theme_02.mp3?dAdD'); backgroundMusic.loop = true; backgroundMusic.volume = 0.04; // Adjust volume as needed (0.0 to 1.0) backgroundMusic.play().catch((error) => { console.warn('Autoplay was prevented. User interaction is required to play the background music.'); }); }; // Initialize the scene const scene = new THREE.Scene(); // Clock for animation const clock = new THREE.Clock(); // Initialize the camera const camera = new THREE.PerspectiveCamera( 75, canvas.offsetWidth / canvas.offsetHeight, 0.1, 1000 ); camera.position.set(0, 2, 0); // Spawn at origin at player height camera.lookAt(0, 2, -1); // Look slightly forward // 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); // First Person Controls setup const controls = new PointerLockControls(camera, canvas); // Click handler for pointer lock canvas.addEventListener('click', () => { controls.lock(); }); // Shooting function function shoot() { const bulletPosition = camera.position.clone(); const bulletDirection = new THREE.Vector3(0, 0, -1); bulletDirection.applyQuaternion(camera.quaternion); // Calculate gun position (bottom right of screen) const rightOffset = bulletDirection.clone().cross(new THREE.Vector3(0, 1, 0)).normalize(); const upOffset = new THREE.Vector3(0, -0.15, 0); // Raised slightly for better gun alignment // Move bullet spawn to precise gun muzzle position bulletPosition.add(rightOffset.multiplyScalar(0.4)); // Slightly more right to align with gun bulletPosition.add(upOffset); // Slight downward offset for gun muzzle bulletPosition.add(bulletDirection.multiplyScalar(1.5)); // Further forward to match gun length // Add slight randomization for more realistic feel const spread = 0.001; // Very small spread bulletDirection.x += (Math.random() - 0.5) * spread; bulletDirection.y += (Math.random() - 0.5) * spread; bulletDirection.z += (Math.random() - 0.5) * spread; bullets.push(new Bullet(bulletPosition, bulletDirection)); } // Add click event for shooting window.addEventListener('click', () => { if (document.pointerLockElement === canvas) { shoot(); } }); // Create walls function createWalls() { const wallHeight = 10; const wallThickness = 2; const mapSize = 200; // Match terrain size const halfSize = mapSize / 2; // Wall material const wallMaterial = new THREE.MeshStandardMaterial({ color: 0x808080, roughness: 0.7, metalness: 0.3 }); // Create walls (visual) const wallGeometry = new THREE.BoxGeometry(wallThickness, wallHeight, mapSize); const walls = [ // Left wall new THREE.Mesh(wallGeometry, wallMaterial), // Right wall new THREE.Mesh(wallGeometry, wallMaterial), // Front wall new THREE.Mesh(new THREE.BoxGeometry(mapSize, wallHeight, wallThickness), wallMaterial), // Back wall new THREE.Mesh(new THREE.BoxGeometry(mapSize, wallHeight, wallThickness), wallMaterial) ]; // Position walls walls[0].position.set(-halfSize, wallHeight / 2, 0); // Left walls[1].position.set(halfSize, wallHeight / 2, 0); // Right walls[2].position.set(0, wallHeight / 2, -halfSize); // Front walls[3].position.set(0, wallHeight / 2, halfSize); // Back // Add walls to scene walls.forEach(wall => { wall.castShadow = true; wall.receiveShadow = true; scene.add(wall); }); // Create physical walls (Cannon.js) const wallShape = new CANNON.Box(new CANNON.Vec3(wallThickness, wallHeight / 2, mapSize / 2)); const wallFrontShape = new CANNON.Box(new CANNON.Vec3(mapSize / 2, wallHeight / 2, wallThickness)); walls.forEach((wall, index) => { const wallBody = new CANNON.Body({ mass: 0, // Static body material: new CANNON.Material(), collisionResponse: true }); // Add appropriate shape based on wall orientation if (index < 2) { wallBody.addShape(wallShape); } else { wallBody.addShape(wallFrontShape); } // Match visual wall positions wallBody.position.copy(wall.position); world.addBody(wallBody); }); } // Create flat terrain function createTerrain() { const size = 200; // Create ground body for physics const groundShape = new CANNON.Plane(); const groundBody = new CANNON.Body({ mass: 0, material: new CANNON.Material() }); groundBody.addShape(groundShape); groundBody.quaternion.setFromEuler(-Math.PI / 2, 0, 0); world.addBody(groundBody); // 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); return terrain; } // Tree class for forest generation class Tree { constructor(position) { // Create trunk const trunkGeometry = new THREE.CylinderGeometry(0.2, 0.3, 2, 8); const trunkMaterial = new THREE.MeshStandardMaterial({ color: 0x4d2926, roughness: 0.9, metalness: 0.1 }); this.trunk = new THREE.Mesh(trunkGeometry, trunkMaterial); // Create foliage (2-3 layers of cones) const layers = 2 + Math.floor(Math.random()); this.foliage = []; const foliageMaterial = new THREE.MeshStandardMaterial({ color: 0x1a472a, roughness: 0.8, metalness: 0.2 }); for (let i = 0; i < layers; i++) { const height = 2 - (i * 0.5); const radius = 1.5 - (i * 0.3); const foliageGeometry = new THREE.ConeGeometry(radius, height, 8); const cone = new THREE.Mesh(foliageGeometry, foliageMaterial); cone.position.y = 1.5 + (i * 0.5); this.foliage.push(cone); } // Create tree group this.group = new THREE.Group(); this.group.add(this.trunk); this.foliage.forEach(cone => this.group.add(cone)); // Position tree this.group.position.copy(position); // Add random rotation for variety this.group.rotation.y = Math.random() * Math.PI * 2; // Add slight random scale variation const scale = 0.8 + Math.random() * 0.4; this.group.scale.set(scale, scale, scale); // Enable shadows this.trunk.castShadow = true; this.trunk.receiveShadow = true; this.foliage.forEach(cone => { cone.castShadow = true; cone.receiveShadow = true; }); } } // Function to create forest function createForest() { const mapSize = 200; // Match terrain size const forestDensity = 0.8; // Trees per unit length const margin = 10; // Distance from walls const treeLine = 30; // Width of forest // Create trees along the edges of the map const edges = [{ start: [-mapSize / 2, -mapSize / 2], end: [mapSize / 2, -mapSize / 2] }, // Front { start: [-mapSize / 2, mapSize / 2], end: [mapSize / 2, mapSize / 2] }, // Back { start: [-mapSize / 2, -mapSize / 2], end: [-mapSize / 2, mapSize / 2] }, // Left { start: [mapSize / 2, -mapSize / 2], end: [mapSize / 2, mapSize / 2] } // Right ]; edges.forEach(edge => { const length = Math.sqrt( Math.pow(edge.end[0] - edge.start[0], 2) + Math.pow(edge.end[1] - edge.start[1], 2) ); const numTrees = Math.floor(length * forestDensity); for (let i = 0; i < numTrees; i++) { const t = i / numTrees; const x = edge.start[0] + (edge.end[0] - edge.start[0]) * t; const z = edge.start[1] + (edge.end[1] - edge.start[1]) * t; // Add random offset const offsetDist = margin + Math.random() * treeLine; const offsetAngle = Math.atan2( edge.end[1] - edge.start[1], edge.end[0] - edge.start[0] ) + Math.PI / 2; const treeX = x + Math.cos(offsetAngle) * offsetDist; const treeZ = z + Math.sin(offsetAngle) * offsetDist; // Add some randomness to position const randomOffset = 2; const finalX = treeX + (Math.random() - 0.5) * randomOffset; const finalZ = treeZ + (Math.random() - 0.5) * randomOffset; const tree = new Tree(new THREE.Vector3(finalX, 0, finalZ)); scene.add(tree.group); } }); } // 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(); createWalls(); // Add walls to the scene createForest(); // Add forest around the map // Load textures gunTexture = textureLoader.load('https://play.rosebud.ai/assets/pov gun in hand.png?EhIi'); bulletTexture = textureLoader.load('https://play.rosebud.ai/assets/bullet.png?TBk0'); explosionTexture = textureLoader.load('https://play.rosebud.ai/assets/explosion.png?HnxH'); // Load enemy textures enemyTextures.push(textureLoader.load('https://play.rosebud.ai/assets/enemy monster 1.png?Z5Nu')); enemyTextures.push(textureLoader.load('https://play.rosebud.ai/assets/enemy monster 2.png?1wCV')); enemyTextures.push(textureLoader.load('https://play.rosebud.ai/assets/enemy zombie 3.png?h6eK')); // Spawn initial enemies function spawnEnemies(count) { for (let i = 0; i < count; i++) { const angle = (Math.PI * 2 * i) / count + Math.random() * 0.5 - 0.25; // Add random angle offset const minRadius = 15; // Minimum spawn distance from player const maxRadius = 25; // Maximum spawn distance from player const radius = minRadius + Math.random() * (maxRadius - minRadius); // Randomly choose enemy type, but ensure at least one zombie if count > 2 let textureIndex; if (i === 0 && count > 2) { textureIndex = 2; // Force at least one zombie } else { textureIndex = Math.floor(Math.random() * enemyTextures.length); } const position = new THREE.Vector3( Math.cos(angle) * radius + camera.position.x, // Spawn relative to player textureIndex === 2 ? 1 : 1 + Math.random() * 3, // Zombies start at ground level Math.sin(angle) * radius + camera.position.z // Spawn relative to player ); enemies.push(new Enemy(position, textureIndex)); } } // Spawn 5 initial enemies spawnEnemies(5); // Animation loop function animate() { requestAnimationFrame(animate); // Only update game if started and assets are loaded if (!gameStarted || !assetsLoaded) { composer.render(); return; } // Update physics world.step(1 / 60); if (assetsLoaded && !isGameOver) { applyControls(); // Apply camera controls // Update explosions if any exist if (explosions) { for (let i = explosions.length - 1; i >= 0; i--) { if (explosions[i].update()) { explosions.splice(i, 1); } } } // Update enemies // Update enemies and check for collision with player enemies.forEach(enemy => { enemy.update(camera.position); // Check for collision with player const distanceToPlayer = enemy.mesh.position.distanceTo(camera.position); if (distanceToPlayer < 2) { // Collision threshold // Reduce health based on enemy type const damage = enemy.isZombie ? 0.5 : 0.3; // Zombies do more damage playerHealth -= damage; // Update health bar healthFill.style.width = `${Math.max(playerHealth, 0)}%`; // Change health bar color based on health if (playerHealth < 30) { healthFill.style.backgroundColor = '#ff0000'; } else if (playerHealth < 60) { healthFill.style.backgroundColor = '#ff9900'; } // Check for game over if (playerHealth <= 0) { gameOver(); } } }); // Update and clean up bullets let enemyHit = false; for (let i = bullets.length - 1; i >= 0; i--) { if (bullets[i].update()) { bullets.splice(i, 1); continue; } // Check for bullet-enemy collisions const bulletPos = bullets[i].mesh.position; for (let j = enemies.length - 1; j >= 0; j--) { const enemyPos = enemies[j].mesh.position; const distance = bulletPos.distanceTo(enemyPos); if (distance < 1.5) { // Collision threshold // Remove bullet scene.remove(bullets[i].mesh); bullets.splice(i, 1); // Damage enemy if (enemies[j].damage(34)) { // 3 hits to kill // Create explosion at enemy position explosions.push(new Explosion(enemies[j].mesh.position.clone())); // Add points based on enemy type const points = enemies[j].isZombie ? 150 : 100; playerScore += points; scoreDisplay.textContent = `Score: ${playerScore}`; // Show floating score text const scoreText = document.createElement('div'); scoreText.style.position = 'fixed'; scoreText.style.color = '#ffff00'; scoreText.style.fontSize = '20px'; scoreText.style.fontWeight = 'bold'; scoreText.style.textShadow = '2px 2px 4px rgba(0,0,0,0.5)'; scoreText.style.zIndex = '1000'; scoreText.textContent = `+${points}`; // Convert 3D position to screen coordinates const vector = enemies[j].mesh.position.clone(); vector.project(camera); const x = (vector.x * 0.5 + 0.5) * canvas.width; const y = (-vector.y * 0.5 + 0.5) * canvas.height; scoreText.style.left = `${x}px`; scoreText.style.top = `${y}px`; parentDiv.appendChild(scoreText); // Animate and remove the score text setTimeout(() => { scoreText.style.transition = 'all 0.5s ease-out'; scoreText.style.transform = 'translateY(-30px)'; scoreText.style.opacity = '0'; setTimeout(() => { parentDiv.removeChild(scoreText); }, 500); }, 50); // Play explosion sound with slight randomization const explosionClone = explosionSound.cloneNode(); explosionClone.volume = explosionSound.volume * (0.8 + Math.random() * 0.4); // Random volume variation explosionClone.playbackRate = 0.9 + Math.random() * 0.2; // Random pitch variation explosionClone.play(); scene.remove(enemies[j].mesh); enemies.splice(j, 1); // Spawn new enemy if too few remain if (enemies.length < 3) { spawnEnemies(1); } } break; } } } } composer.render(); } // Handle window resize function onWindowResize() { const width = parentDiv.clientWidth; const height = parentDiv.clientHeight; // Update camera camera.aspect = width / height; camera.updateProjectionMatrix(); // Update renderer and composer renderer.setSize(width, height); composer.setSize(width, height); // Update post-processing passes bloomPass.resolution.set(width, height); smaaPass.setSize(width, height); } // Add event listeners window.addEventListener('resize', onWindowResize); const resizeObserver = new ResizeObserver(onWindowResize); resizeObserver.observe(parentDiv); // Start animation animate(); // ========================= // Mobile Controls Integration // ========================= // Create a container for the D-pad const dpadContainer = document.createElement('div'); dpadContainer.id = 'dpadContainer'; document.body.appendChild(dpadContainer); // Create directional buttons const directions = ['up', 'down', 'left', 'right']; directions.forEach(direction => { const button = document.createElement('button'); button.id = `${direction}Button`; button.classList.add('dpad-button'); // Set the appropriate icon based on direction let iconUrl = ''; switch (direction) { case 'up': iconUrl = 'https://play.rosebud.ai/assets/up_chevron.png?YWEq'; break; case 'down': iconUrl = 'https://play.rosebud.ai/assets/down_chevron.png?yojk'; break; case 'left': iconUrl = 'https://play.rosebud.ai/assets/left_chevron.png?C3aB'; break; case 'right': iconUrl = 'https://play.rosebud.ai/assets/right_chevron.png?mSRu'; break; } button.style.backgroundImage = `url('${iconUrl}')`; dpadContainer.appendChild(button); }); // Create a container for the Jump button const jumpContainer = document.createElement('div'); jumpContainer.id = 'jumpContainer'; document.body.appendChild(jumpContainer); // Create Jump button const jumpButton = document.createElement('button'); jumpButton.id = 'jumpButton'; jumpButton.classList.add('jump-button'); jumpButton.style.backgroundImage = `url('https://play.rosebud.ai/assets/Up-Arrow.png?64aM')`; jumpContainer.appendChild(jumpButton); // Inject CSS styles dynamically const styles = ` /* D-Pad Container */ #dpadContainer { position: fixed; bottom: 150px; /* Moved up further */ left: 30px; /* Moved inward */ width: 150px; /* Increased size */ height: 150px; /* Increased size */ display: grid; grid-template-areas: ". up ." "left . right" ". down ."; grid-gap: 10px; /* Spacing between buttons */ z-index: 1000; } /* Positioning each button in the grid */ #upButton { grid-area: up; } #downButton { grid-area: down; } #leftButton { grid-area: left; } #rightButton { grid-area: right; } /* D-Pad Buttons */ .dpad-button { width: 50px; /* Consistent size */ height: 50px; /* Consistent size */ margin: 0; /* Remove margin as grid-gap handles spacing */ background-color: rgba(0, 0, 0, 0.5); /* Dark semi-transparent background */ background-size: 60%; /* Uniform icon size */ background-repeat: no-repeat; background-position: center; border: none; border-radius: 12px; /* Rounded corners */ opacity: 0.9; /* Higher opacity */ transition: opacity 0.2s, transform 0.1s, box-shadow 0.2s, filter 0.2s; /* Smooth transitions */ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Initial shadow */ } /* Active State for D-Pad Buttons */ .dpad-button:active { opacity: 1; transform: scale(0.95); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Shadow becomes more pronounced */ filter: brightness(1.1); /* Slight brightness increase */ } /* Jump Button Container */ #jumpContainer { position: fixed; bottom: 150px; /* Moved up further */ right: 30px; /* Moved inward */ width: 80px; /* Maintained size */ height: 80px; /* Maintained size */ display: flex; justify-content: center; align-items: center; z-index: 1000; } /* Jump Button */ .jump-button { width: 70px; /* Increased size */ height: 70px; /* Increased size */ background-color: rgba(0, 0, 0, 0.5); /* Dark semi-transparent background */ background-size: 60%; /* Uniform icon size */ background-repeat: no-repeat; background-position: center; border: none; border-radius: 35px; /* Fully rounded */ opacity: 0.9; /* Higher opacity */ transition: opacity 0.2s, transform 0.1s, box-shadow 0.2s, filter 0.2s; /* Smooth transitions */ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Initial shadow */ background-image: url('https://play.rosebud.ai/assets/Up-Arrow.png?64aM'); /* Jump button icon */ } /* Active State for Jump Button */ .jump-button:active { opacity: 1; transform: scale(0.95); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Shadow becomes more pronounced */ filter: brightness(1.1); /* Slight brightness increase */ } /* Responsive Adjustments */ @media (max-width: 600px) { /* D-Pad Container */ #dpadContainer { bottom: 120px; /* Increased from 80px to move up on smaller screens */ left: 25px; width: 120px; height: 120px; } /* D-Pad Buttons */ .dpad-button { width: 40px; height: 40px; background-size: 60%; /* Ensure uniform size */ } /* Jump Button Container */ #jumpContainer { bottom: 120px; /* Increased from 80px */ right: 25px; width: 60px; height: 60px; } /* Jump Button */ .jump-button { width: 60px; height: 60px; background-size: 60%; /* Ensure uniform size */ } } `; // Append the styles to the head const styleSheet = document.createElement("style"); styleSheet.type = "text/css"; styleSheet.innerText = styles; document.head.appendChild(styleSheet); // Define keysPressed object with standardized key names const keysPressed = { up: false, down: false, left: false, right: false, jump: false, }; // Helper functions to handle button presses function addButtonListeners(buttonId, key) { const button = document.getElementById(buttonId); if (!button) return; // Prevent default to avoid unwanted scrolling or other behaviors button.addEventListener('touchstart', (event) => { event.preventDefault(); keysPressed[key] = true; }, { passive: false }); button.addEventListener('touchend', (event) => { event.preventDefault(); keysPressed[key] = false; }, { passive: false }); // Also handle mouse events for desktop compatibility button.addEventListener('mousedown', (event) => { event.preventDefault(); keysPressed[key] = true; }); button.addEventListener('mouseup', (event) => { event.preventDefault(); keysPressed[key] = false; }); button.addEventListener('mouseleave', (event) => { event.preventDefault(); keysPressed[key] = false; }); } // Map buttons to standardized keys addButtonListeners('upButton', 'up'); addButtonListeners('downButton', 'down'); addButtonListeners('leftButton', 'left'); addButtonListeners('rightButton', 'right'); addButtonListeners('jumpButton', 'jump'); // ========================= // Keyboard Controls Integration // ========================= // Add event listeners for keyboard controls window.addEventListener('keydown', (event) => { switch (event.code) { case 'ArrowUp': case 'KeyW': keysPressed.up = true; break; case 'ArrowDown': case 'KeyS': keysPressed.down = true; break; case 'ArrowLeft': case 'KeyA': keysPressed.left = true; break; case 'ArrowRight': case 'KeyD': keysPressed.right = true; break; case 'Space': keysPressed.jump = true; break; default: break; } }); window.addEventListener('keyup', (event) => { switch (event.code) { case 'ArrowUp': case 'KeyW': keysPressed.up = false; break; case 'ArrowDown': case 'KeyS': keysPressed.down = false; break; case 'ArrowLeft': case 'KeyA': keysPressed.left = false; break; case 'ArrowRight': case 'KeyD': keysPressed.right = false; break; case 'Space': keysPressed.jump = false; break; default: break; } }); // ========================= // End of Mobile and Keyboard Controls Integration // ========================= // Function to apply controls based on keysPressed function applyControls() { const moveSpeed = 0.15; // Reduced speed for more natural movement const deltaTime = clock.getDelta(); // Get time since last frame const currentSpeed = moveSpeed * deltaTime * 60; // Normalize speed based on framerate // Calculate movement direction based on camera rotation const direction = new THREE.Vector3(); const rotation = camera.getWorldDirection(direction); // Calculate movement vector const movement = new THREE.Vector3(0, 0, 0); if (keysPressed.up) { movement.z -= currentSpeed; } if (keysPressed.down) { movement.z += currentSpeed * 0.8; } if (keysPressed.left) { movement.x -= currentSpeed * 0.9; } if (keysPressed.right) { movement.x += currentSpeed * 0.9; } // Apply movement relative to camera rotation movement.applyQuaternion(camera.quaternion); // Update physics body velocity const damping = 0.9; // Reduce sliding playerBody.velocity.x = movement.x * 60; playerBody.velocity.z = movement.z * 60; playerBody.velocity.y = 0; // Keep vertical velocity at 0 // Update camera position based on physics body camera.position.copy(playerBody.position); camera.position.y = 2; // Maintain fixed height } function gameOver() { isGameOver = true; gameStarted = false; controls.unlock(); // Create game over screen const gameOverScreen = document.createElement('div'); gameOverScreen.style.position = 'fixed'; gameOverScreen.style.top = '0'; gameOverScreen.style.left = '0'; gameOverScreen.style.width = '100%'; gameOverScreen.style.height = '100%'; gameOverScreen.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; gameOverScreen.style.color = 'white'; gameOverScreen.style.display = 'flex'; gameOverScreen.style.flexDirection = 'column'; gameOverScreen.style.justifyContent = 'center'; gameOverScreen.style.alignItems = 'center'; gameOverScreen.style.zIndex = '2000'; const gameOverText = document.createElement('h1'); gameOverText.textContent = 'GAME OVER'; gameOverText.style.marginBottom = '20px'; const finalScore = document.createElement('h2'); finalScore.textContent = `Final Score: ${playerScore}`; finalScore.style.marginBottom = '30px'; finalScore.style.color = '#ffff00'; const restartButton = document.createElement('button'); restartButton.textContent = 'Restart Game'; restartButton.style.padding = '10px 20px'; restartButton.style.fontSize = '18px'; restartButton.style.cursor = 'pointer'; restartButton.style.backgroundColor = '#ff3333'; restartButton.style.border = 'none'; restartButton.style.color = 'white'; restartButton.style.borderRadius = '5px'; restartButton.addEventListener('click', () => { // Reset game state playerHealth = 100; playerScore = 0; isGameOver = false; gameStarted = true; scoreDisplay.textContent = 'Score: 0'; healthFill.style.width = '100%'; healthFill.style.backgroundColor = '#ff3333'; // Remove all existing enemies enemies.forEach(enemy => { scene.remove(enemy.mesh); }); enemies = []; // Spawn new enemies spawnEnemies(5); // Reset player position camera.position.set(0, 2, 0); camera.lookAt(0, 2, -1); // Remove game over screen document.body.removeChild(gameOverScreen); }); gameOverScreen.appendChild(gameOverText); gameOverScreen.appendChild(finalScore); gameOverScreen.appendChild(restartButton); document.body.appendChild(gameOverScreen); }