3D Shooting Game

Here's a comprehensive setup for an advanced 3D shooting game using Three.js: 3D Shooting Game

Score: 0

Ammo: 30

// Game setup const scene = new THREE.Scene(); scene.background = new THREE.Color(0x111111); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // Controls const controls = new THREE.PointerLockControls(camera, document.body); const blocker = document.getElementById('blocker'); const instructions = document.getElementById('instructions'); // Game state let score = 0; let ammo = 30; let targets = []; let bullets = []; let lastShotTime = 0; const shootDelay = 200; // ms // Crosshair const crosshair = document.getElementById('crosshair'); const scoreDisplay = document.getElementById('score'); const ammoDisplay = document.getElementById('ammo'); // Lighting const ambientLight = new THREE.AmbientLight(0x404040); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5); directionalLight.position.set(1, 1, 1); scene.add(directionalLight); // Player weapon const weapon = new THREE.Group(); const weaponGeometry = new THREE.BoxGeometry(0.3, 0.1, 1); const weaponMaterial = new THREE.MeshPhongMaterial({ color: 0x333333 }); const weaponMesh = new THREE.Mesh(weaponGeometry, weaponMaterial); weaponMesh.position.z = -0.5; weapon.add(weaponMesh); weapon.position.set(0.5, -0.5, -2); camera.add(weapon); scene.add(camera); // Target creation function createTarget() { const geometry = new THREE.BoxGeometry(1, 1, 1); const material = new THREE.MeshPhongMaterial({ color: Math.random() * 0xffffff, transparent: true, opacity: 0.8 }); const target = new THREE.Mesh(geometry, material); // Random position target.position.x = (Math.random() - 0.5) * 20; target.position.y = 1; target.position.z = -10 - Math.random() * 20; // Random velocity target.userData.velocity = new THREE.Vector3( (Math.random() - 0.5) * 0.02, 0, 0 ); scene.add(target); targets.push(target); return target; } // Create initial targets for (let i = 0; i < 10; i++) { createTarget(); } // Bullet creation function shoot() { if (ammo <= 0 || Date.now() - lastShotTime < shootDelay) return; lastShotTime = Date.now(); ammo--; updateAmmoDisplay(); const bulletGeometry = new THREE.SphereGeometry(0.05, 16, 16); const bulletMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 }); const bullet = new THREE.Mesh(bulletGeometry, bulletMaterial); // Start position at camera bullet.position.copy(camera.position); // Direction is camera's forward vector const direction = new THREE.Vector3(0, 0, -1); direction.applyQuaternion(camera.quaternion); bullet.userData.velocity = direction.multiplyScalar(0.5); scene.add(bullet); bullets.push(bullet); } // Check bullet collisions function checkCollisions() { for (let i = bullets.length - 1; i >= 0; i--) { const bullet = bullets[i]; bullet.position.add(bullet.userData.velocity); // Remove if too far if (bullet.position.distanceTo(camera.position) > 50) { scene.remove(bullet); bullets.splice(i, 1); continue; } // Check collision with targets for (let j = targets.length - 1; j >= 0; j--) { const target = targets[j]; if (bullet.position.distanceTo(target.position) < 1) { // Hit! scene.remove(bullet); bullets.splice(i, 1); scene.remove(target); targets.splice(j, 1); score += 10; updateScoreDisplay(); createTarget(); break; } } } } // Update targets function updateTargets() { targets.forEach(target => { target.position.add(target.userData.velocity); // Bounce off walls if (Math.abs(target.position.x) > 10) { target.userData.velocity.x *= -1; } // Random direction changes if (Math.random() < 0.01) { target.userData.velocity.x = (Math.random() - 0.5) * 0.02; } }); } // UI updates function updateScoreDisplay() { scoreDisplay.textContent = `Score: ${score}`; } function updateAmmoDisplay() { ammoDisplay.textContent = `Ammo: ${ammo}`; } // Reload function function reload() { ammo = 30; updateAmmoDisplay(); } // Event listeners document.addEventListener('click', () => { if (controls.isLocked) { shoot(); } else { controls.lock(); } }); document.addEventListener('keydown', (e) => { if (e.key === 'r') { reload(); } }); // Pointer lock controls controls.addEventListener('lock', () => { crosshair.style.display = 'block'; }); controls.addEventListener('unlock', () => { crosshair.style.display = 'none'; }); // Window resize window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); // Game loop function animate() { requestAnimationFrame(animate); if (controls.isLocked) { checkCollisions(); updateTargets(); } renderer.render(scene, camera); } animate();