3D FPS Game

Score: 0 | Health: 100

Game Over

import * as THREE from 'three'; import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js'; import { createLevel } from './level.js'; import { Player } from './player.js'; import { Enemy } from './enemy.js'; import { Weapon } from './weapon.js'; import { GameState } from './gameState.js'; // Initialize game state const gameState = new GameState(); // Create scene const scene = new THREE.Scene(); scene.background = new THREE.Color(0x87ceeb); scene.fog = new THREE.Fog(0x87ceeb, 0, 750); // Create camera const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.y = 1.6; // Eye level // Create renderer const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); renderer.shadowMap.enabled = true; document.body.appendChild(renderer.domElement); // Create controls const controls = new PointerLockControls(camera, document.body); // Create player const player = new Player(camera, controls, scene); // Create weapon const weapon = new Weapon(scene, camera); // Create level const { floor, walls } = createLevel(scene); // Add lighting const ambientLight = new THREE.AmbientLight(0x404040, 1.5); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 1); directionalLight.position.set(5, 10, 7.5); directionalLight.castShadow = true; directionalLight.shadow.mapSize.width = 1024; directionalLight.shadow.mapSize.height = 1024; scene.add(directionalLight); // Create enemies const enemies = []; const spawnEnemy = () => { if (enemies.length < gameState.maxEnemies) { const enemy = new Enemy(scene, player); enemies.push(enemy); } }; // Initial enemy spawn for (let i = 0; i < 5; i++) { spawnEnemy(); } // Set up game UI const scoreElement = document.getElementById('score'); const healthElement = document.getElementById('health'); const gameOverElement = document.getElementById('gameOver'); const restartButton = document.getElementById('restartButton'); // Handle window resize window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); // Handle pointer lock document.addEventListener('click', () => { if (!gameState.gameOver) { controls.lock(); } }); controls.addEventListener('lock', () => { gameState.controlsActive = true; }); controls.addEventListener('unlock', () => { gameState.controlsActive = false; }); // Handle restart restartButton.addEventListener('click', () => { gameState.restart(); player.reset(); // Remove all enemies for (const enemy of enemies) { enemy.remove(); } enemies.length = 0; // Spawn new enemies for (let i = 0; i < 5; i++) { spawnEnemy(); } // Update UI updateUI(); gameOverElement.style.display = 'none'; // Lock controls controls.lock(); }); // Handle shooting document.addEventListener('mousedown', (event) => { if (event.button === 0 && gameState.controlsActive && !gameState.gameOver) { weapon.shoot(); // Check for enemy hits const raycaster = new THREE.Raycaster(); raycaster.setFromCamera(new THREE.Vector2(), camera); for (let i = enemies.length - 1; i >= 0; i--) { const enemy = enemies[i]; const intersects = raycaster.intersectObject(enemy.mesh); if (intersects.length > 0) { enemy.takeDamage(25); if (enemy.health <= 0) { enemy.remove(); enemies.splice(i, 1); gameState.score += 10; spawnEnemy(); // Increase difficulty every 50 points if (gameState.score % 50 === 0) { gameState.maxEnemies++; spawnEnemy(); } } break; // Only hit one enemy at a time } } } }); // Update UI const updateUI = () => { scoreElement.textContent = gameState.score; healthElement.textContent = player.health; }; // Game over const gameOver = () => { gameState.gameOver = true; gameOverElement.style.display = 'block'; controls.unlock(); }; // Animation loop const clock = new THREE.Clock(); function animate() { requestAnimationFrame(animate); if (gameState.controlsActive && !gameState.gameOver) { const delta = clock.getDelta(); // Update player player.update(delta, walls); // Update weapon weapon.update(); // Update enemies for (const enemy of enemies) { enemy.update(delta, walls); // Check if enemy hits player if (enemy.mesh.position.distanceTo(camera.position) < 1.5) { player.takeDamage(10); enemy.resetPosition(); if (player.health <= 0) { gameOver(); } } } // Update UI updateUI(); } renderer.render(scene, camera); } animate(); import * as THREE from 'three'; export class Player { constructor(camera, controls, scene) { this.camera = camera; this.controls = controls; this.scene = scene; this.moveSpeed = 5; this.velocity = new THREE.Vector3(); this.direction = new THREE.Vector3(); this.health = 100; // Movement keys this.keys = { forward: false, backward: false, left: false, right: false, sprint: false }; // Set up key listeners document.addEventListener('keydown', this.onKeyDown.bind(this)); document.addEventListener('keyup', this.onKeyUp.bind(this)); // Player collision this.height = 1.6; this.radius = 0.5; } onKeyDown(event) { switch (event.code) { case 'KeyW': this.keys.forward = true; break; case 'KeyS': this.keys.backward = true; break; case 'KeyA': this.keys.left = true; break; case 'KeyD': this.keys.right = true; break; case 'ShiftLeft': this.keys.sprint = true; break; } } onKeyUp(event) { switch (event.code) { case 'KeyW': this.keys.forward = false; break; case 'KeyS': this.keys.backward = false; break; case 'KeyA': this.keys.left = false; break; case 'KeyD': this.keys.right = false; break; case 'ShiftLeft': this.keys.sprint = false; break; } } update(delta, walls) { // Apply friction this.velocity.x -= this.velocity.x * 10.0 * delta; this.velocity.z -= this.velocity.z * 10.0 * delta; // Get movement direction this.direction.z = Number(this.keys.forward) - Number(this.keys.backward); this.direction.x = Number(this.keys.right) - Number(this.keys.left); this.direction.normalize(); // Calculate speed const speed = this.keys.sprint ? this.moveSpeed * 1.5 : this.moveSpeed; // Move forward/backward if (this.keys.forward || this.keys.backward) { this.velocity.z -= this.direction.z * speed * delta; } // Move left/right if (this.keys.left || this.keys.right) { this.velocity.x -= this.direction.x * speed * delta; } // Update controls this.controls.moveRight(-this.velocity.x * delta); this.controls.moveForward(-this.velocity.z * delta); // Check wall collisions this.checkWallCollisions(walls); } checkWallCollisions(walls) { const position = this.camera.position.clone(); position.y = 1; // Check at player's center for (const wall of walls) { const wallBox = new THREE.Box3().setFromObject(wall); const playerBox = new THREE.Box3(); // Create player bounding box playerBox.min.set( position.x - this.radius, position.y - this.height / 2, position.z - this.radius ); playerBox.max.set( position.x + this.radius, position.y + this.height / 2, position.z + this.radius ); // Check collision if (playerBox.intersectsBox(wallBox)) { // Simple collision response - push player away const wallCenter = new THREE.Vector3(); wallBox.getCenter(wallCenter); const direction = new THREE.Vector3() .subVectors(position, wallCenter) .normalize(); // Move player away from wall this.camera.position.x += direction.x * 0.1; this.camera.position.z += direction.z * 0.1; // Stop velocity in collision direction if (Math.abs(direction.x) > Math.abs(direction.z)) { this.velocity.x = 0; } else { this.velocity.z = 0; } } } } takeDamage(amount) { this.health = Math.max(0, this.health - amount); } reset() { this.health = 100; this.camera.position.set(0, 1.6, 0); this.velocity.set(0, 0, 0); } } import * as THREE from 'three'; export class Enemy { constructor(scene, player) { this.scene = scene; this.player = player; this.health = 100; this.speed = 2; // Create enemy mesh const geometry = new THREE.CapsuleGeometry(0.5, 1, 4, 8); const material = new THREE.MeshPhongMaterial({ color: 0xff0000 }); this.mesh = new THREE.Mesh(geometry, material); this.mesh.castShadow = true; this.mesh.receiveShadow = true; // Position enemy randomly this.resetPosition(); // Add to scene scene.add(this.mesh); } resetPosition() { // Position enemy randomly away from player let x, z; do { x = (Math.random() - 0.5) * 40; z = (Math.random() - 0.5) * 40; } while ( Math.sqrt(x * x + z * z) < 10 // Ensure enemy is at least 10 units away from origin ); this.mesh.position.set(x, 1, z); } update(delta, walls) { // Get direction to player const direction = new THREE.Vector3(); direction.subVectors(this.player.camera.position, this.mesh.position).normalize(); // Move towards player const moveDistance = this.speed * delta; const newPosition = this.mesh.position.clone(); newPosition.x += direction.x * moveDistance; newPosition.z += direction.z * moveDistance; // Check wall collisions before moving if (!this.checkWallCollision(newPosition, walls)) { this.mesh.position.copy(newPosition); } // Make enemy face player this.mesh.lookAt(this.player.camera.position); } checkWallCollision(position, walls) { // Create enemy bounding box const enemyBox = new THREE.Box3(); enemyBox.min.set( position.x - 0.5, position.y - 1, position.z - 0.5 ); enemyBox.max.set( position.x + 0.5, position.y + 1, position.z + 0.5 ); // Check collision with each wall for (const wall of walls) { const wallBox = new THREE.Box3().setFromObject(wall); if (enemyBox.intersectsBox(wallBox)) { return true; // Collision detected } } return false; // No collision } takeDamage(amount) { this.health -= amount; // Change color based on health const healthPercent = this.health / 100; this.mesh.material.color.setRGB(1, healthPercent * 0.5, healthPercent * 0.5); } remove() { this.scene.remove(this.mesh); } } import * as THREE from 'three'; export class Weapon { constructor(scene, camera) { this.scene = scene; this.camera = camera; // Create weapon model this.createWeaponModel(); // Shooting properties this.isShooting = false; this.recoil = 0; // Muzzle flash this.createMuzzleFlash(); } createWeaponModel() { // Gun body const gunGeometry = new THREE.BoxGeometry(0.1, 0.1, 0.5); const gunMaterial = new THREE.MeshPhongMaterial({ color: 0x333333 }); this.gunMesh = new THREE.Mesh(gunGeometry, gunMaterial); // Gun barrel const barrelGeometry = new THREE.CylinderGeometry(0.03, 0.03, 0.6, 16); const barrelMaterial = new THREE.MeshPhongMaterial({ color: 0x222222 }); this.barrelMesh = new THREE.Mesh(barrelGeometry, barrelMaterial); this.barrelMesh.rotation.x = Math.PI / 2; this.barrelMesh.position.z = -0.3; // Create weapon group this.weaponGroup = new THREE.Group(); this.weaponGroup.add(this.gunMesh); this.weaponGroup.add(this.barrelMesh); // Position weapon this.weaponGroup.position.set(0.3, -0.2, -0.5); // Add to camera this.camera.add(this.weaponGroup); } createMuzzleFlash() { const flashGeometry = new THREE.SphereGeometry(0.05, 8, 8); const flashMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00, transparent: true, opacity: 0 }); this.muzzleFlash = new THREE.Mesh(flashGeometry, flashMaterial); this.muzzleFlash.position.z = -0.6; this.weaponGroup.add(this.muzzleFlash); } shoot() { if (!this.isShooting) { this.isShooting = true; this.recoil = 0.05; // Show muzzle flash this.muzzleFlash.material.opacity = 1; // Hide muzzle flash after a short delay setTimeout(() => { this.muzzleFlash.material.opacity = 0; }, 50); // Reset shooting flag setTimeout(() => { this.isShooting = false; }, 250); } } update() { // Apply and recover from recoil if (this.recoil > 0) { this.weaponGroup.position.z += this.recoil; this.recoil -= 0.01; } else if (this.weaponGroup.position.z > -0.5) { this.weaponGroup.position.z -= 0.01; if (this.weaponGroup.position.z < -0.5) { this.weaponGroup.position.z = -0.5; } } // Add subtle weapon sway const time = Date.now() * 0.0015; this.weaponGroup.position.y = -0.2 + Math.sin(time) * 0.01; this.weaponGroup.rotation.z = Math.sin(time * 0.5) * 0.05; } } import * as THREE from 'three'; export function createLevel(scene) { const objects = []; // Floor const floorGeometry = new THREE.PlaneGeometry(100, 100); const floorMaterial = new THREE.MeshPhongMaterial({ color: 0x999999, side: THREE.DoubleSide }); const floor = new THREE.Mesh(floorGeometry, floorMaterial); floor.rotation.x = -Math.PI / 2; floor.receiveShadow = true; scene.add(floor); objects.push(floor); // Create walls const walls = []; // Wall material const wallMaterial = new THREE.MeshPhongMaterial({ color: 0x8888aa }); // Outer walls const createWall = (width, height, depth, x, y, z) => { const wallGeometry = new THREE.BoxGeometry(width, height, depth); const wall = new THREE.Mesh(wallGeometry, wallMaterial); wall.position.set(x, y, z); wall.castShadow = true; wall.receiveShadow = true; scene.add(wall); walls.push(wall); return wall; }; // Outer walls createWall(100, 5, 1, 0, 2.5, -50); // North createWall(100, 5, 1, 0, 2.5, 50); // South createWall(1, 5, 100, -50, 2.5, 0); // West createWall(1, 5, 100, 50, 2.5, 0); // East // Inner walls createWall(20, 5, 1, -15, 2.5, -20); createWall(20, 5, 1, 15, 2.5, 20); createWall(1, 5, 20, -20, 2.5, 15); createWall(1, 5, 20, 20, 2.5, -15); // Create some boxes as obstacles const boxGeometry = new THREE.BoxGeometry(2, 2, 2); const boxMaterial = new THREE.MeshPhongMaterial({ color: 0x8866aa }); for (let i = 0; i < 20; i++) { const box = new THREE.Mesh(boxGeometry, boxMaterial); box.position.x = (Math.random() - 0.5) * 80; box.position.y = 1; box.position.z = (Math.random() - 0.5) * 80; box.castShadow = true; box.receiveShadow = true; scene.add(box); walls.push(box); } // Create some pillars const pillarGeometry = new THREE.CylinderGeometry(1, 1, 5, 16); const pillarMaterial = new THREE.MeshPhongMaterial({ color: 0x888888 }); for (let i = 0; i < 8; i++) { const angle = (i / 8) * Math.PI * 2; const x = Math.cos(angle) * 30; const z = Math.sin(angle) * 30; const pillar = new THREE.Mesh(pillarGeometry, pillarMaterial); pillar.position.set(x, 2.5, z); pillar.castShadow = true; pillar.receiveShadow = true; scene.add(pillar); walls.push(pillar); } return { floor, walls }; } export class GameState { constructor() { this.score = 0; this.gameOver = false; this.controlsActive = false; this.maxEnemies = 5; } restart() { this.score = 0; this.gameOver = false; this.maxEnemies = 5; } } I've created a 3D FPS game using Three.js with the following features: - First-person controls with mouse look and WASD movement - Weapon system with shooting mechanics and visual effects - Enemy AI that follows and attacks the player - Health and scoring system - Game over state with restart functionality - Procedurally generated level with walls and obstacles To play the game: 1. Click anywhere on the screen to lock your mouse pointer 2. Use WASD to move and mouse to look around 3. Left-click to shoot enemies 4. Hold Shift to sprint 5. Defeat enemies to earn points and increase difficulty The code is organized into modular components for better maintainability, with separate files for player, enemy, weapon, level generation, and game state management.