Car Chase Game

Use Arrow Keys to Move
Avoid the Red Cars!

body { margin: 0; overflow: hidden; background-color: #111; color: white; font-family: sans-serif; } canvas { display: block; } #info { position: absolute; top: 10px; left: 10px; background: rgba(0, 0, 0, 0.5); padding: 10px; border-radius: 5px; } #game-over { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 4em; color: red; text-shadow: 2px 2px 5px black; background: rgba(0, 0, 0, 0.7); padding: 20px; border-radius: 10px; text-align: center; } import * as THREE from 'three'; export class PlayerCar { constructor(scene) { this.speed = 0.15; this.turnSpeed = 0.05; this.velocity = new THREE.Vector3(); this.direction = new THREE.Vector3(0, 0, -1); // Initial direction const geometry = new THREE.BoxGeometry(1, 0.5, 2); const material = new THREE.MeshStandardMaterial({ color: 0x0077ff }); // Blue color this.mesh = new THREE.Mesh(geometry, material); this.mesh.position.y = 0.25; // Lift slightly off the ground scene.add(this.mesh); // Add headlights (simple point lights) this.headlightLeft = new THREE.SpotLight(0xffffff, 5, 10, Math.PI / 6, 0.5); this.headlightLeft.position.set(-0.4, 0.3, -1); this.headlightLeft.target.position.set(-0.4, 0.3, -5); this.mesh.add(this.headlightLeft); this.mesh.add(this.headlightLeft.target); this.headlightRight = new THREE.SpotLight(0xffffff, 5, 10, Math.PI / 6, 0.5); this.headlightRight.position.set(0.4, 0.3, -1); this.headlightRight.target.position.set(0.4, 0.3, -5); this.mesh.add(this.headlightRight); this.mesh.add(this.headlightRight.target); this.keys = { ArrowUp: false, ArrowDown: false, ArrowLeft: false, ArrowRight: false, }; window.addEventListener('keydown', (e) => this.onKey(e, true)); window.addEventListener('keyup', (e) => this.onKey(e, false)); } onKey(event, pressed) { if (this.keys.hasOwnProperty(event.key)) { this.keys[event.key] = pressed; } } update(deltaTime) { let moveForward = 0; let turn = 0; if (this.keys.ArrowUp) moveForward += 1; if (this.keys.ArrowDown) moveForward -= 0.5; // Slower reverse if (this.keys.ArrowLeft) turn += 1; if (this.keys.ArrowRight) turn -= 1; // Apply rotation based on turn input (only when moving) if (moveForward !== 0) { this.mesh.rotation.y += turn * this.turnSpeed * deltaTime * 60; // Adjust turn speed based on delta } // Update direction vector based on current rotation const rotationMatrix = new THREE.Matrix4(); rotationMatrix.makeRotationY(this.mesh.rotation.y); this.direction.set(0, 0, -1).applyMatrix4(rotationMatrix); // Calculate velocity based on direction and speed this.velocity.copy(this.direction).multiplyScalar(moveForward * this.speed * deltaTime * 60); // Adjust speed based on delta // Apply movement this.mesh.position.add(this.velocity); // Simple damping (optional) // this.velocity.multiplyScalar(0.95); } getPosition() { return this.mesh.position; } getBoundingBox() { return new THREE.Box3().setFromObject(this.mesh); } } import * as THREE from 'three'; export class EnemyCar { constructor(scene, initialPosition = new THREE.Vector3(0, 0.25, 0)) { this.speed = 0.08; // Slower than player this.turnSpeed = 0.04; const geometry = new THREE.BoxGeometry(1, 0.5, 2); const material = new THREE.MeshStandardMaterial({ color: 0xff0000 }); // Red color this.mesh = new THREE.Mesh(geometry, material); this.mesh.position.copy(initialPosition); this.mesh.position.y = 0.25; // Lift slightly off the ground scene.add(this.mesh); } update(deltaTime, playerPosition) { const directionToPlayer = new THREE.Vector3().subVectors(playerPosition, this.mesh.position); directionToPlayer.y = 0; // Ignore vertical difference directionToPlayer.normalize(); // Calculate target angle const targetAngle = Math.atan2(directionToPlayer.x, directionToPlayer.z); // Smoothly interpolate current angle towards target angle let angleDifference = targetAngle - this.mesh.rotation.y; // Normalize angle difference to [-PI, PI] while (angleDifference < -Math.PI) angleDifference += Math.PI * 2; while (angleDifference > Math.PI) angleDifference -= Math.PI * 2; // Apply rotation this.mesh.rotation.y += angleDifference * this.turnSpeed * deltaTime * 60; // Adjust turn speed based on delta // Move forward in the current direction const moveDirection = new THREE.Vector3(0, 0, 1).applyQuaternion(this.mesh.quaternion); this.mesh.position.add(moveDirection.multiplyScalar(this.speed * deltaTime * 60)); // Adjust speed based on delta } getPosition() { return this.mesh.position; } getBoundingBox() { return new THREE.Box3().setFromObject(this.mesh); } dispose(scene) { if (this.mesh) { scene.remove(this.mesh); this.mesh.geometry.dispose(); // Check if material is shared before disposing if (this.mesh.material.map) this.mesh.material.map.dispose(); this.mesh.material.dispose(); } } } import * as THREE from 'three'; import { PlayerCar } from './PlayerCar.js'; import { EnemyCar } from './EnemyCar.js'; export class Game { constructor(scene) { this.scene = scene; this.player = new PlayerCar(scene); this.enemies = []; this.enemySpawnTimer = 0; this.enemySpawnInterval = 3; // Spawn enemy every 3 seconds this.maxEnemies = 5; this.gameState = 'running'; // 'running', 'gameOver' this.gameOverElement = document.getElementById('game-over'); this.clock = new THREE.Clock(); // Use clock for delta time } spawnEnemy() { if (this.enemies.length >= this.maxEnemies) return; const spawnRadius = 30; const angle = Math.random() * Math.PI * 2; const x = Math.cos(angle) * spawnRadius; const z = Math.sin(angle) * spawnRadius; const spawnPosition = new THREE.Vector3(x, 0.25, z); // Ensure spawn is not too close to the player initially if (spawnPosition.distanceTo(this.player.getPosition()) > 15) { const enemy = new EnemyCar(this.scene, spawnPosition); this.enemies.push(enemy); } } checkCollisions() { if (this.gameState !== 'running') return; const playerBox = this.player.getBoundingBox(); for (let i = this.enemies.length - 1; i >= 0; i--) { const enemy = this.enemies[i]; const enemyBox = enemy.getBoundingBox(); if (playerBox.intersectsBox(enemyBox)) { this.gameOver(); break; // Only need one collision to end the game } } } gameOver() { this.gameState = 'gameOver'; this.gameOverElement.style.display = 'block'; console.log("Game Over!"); // Add explosion effect or fade out later } update() { if (this.gameState !== 'running') return; const deltaTime = this.clock.getDelta(); // Update Player this.player.update(deltaTime); // Update Enemies const playerPosition = this.player.getPosition(); this.enemies.forEach(enemy => { enemy.update(deltaTime, playerPosition); }); // Spawn Enemies this.enemySpawnTimer += deltaTime; if (this.enemySpawnTimer >= this.enemySpawnInterval) { this.spawnEnemy(); this.enemySpawnTimer = 0; } // Check Collisions this.checkCollisions(); } getPlayerPosition() { return this.player.getPosition(); } } import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.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 { Game } from './src/Game.js'; // Scene setup const scene = new THREE.Scene(); scene.background = new THREE.Color(0x101020); // Dark blueish background scene.fog = new THREE.Fog(0x101020, 20, 60); // Add fog // Camera setup const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(0, 15, 20); // Higher angle view // Renderer setup const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); renderer.shadowMap.enabled = true; // Enable shadows renderer.shadowMap.type = THREE.PCFSoftShadowMap; document.body.appendChild(renderer.domElement); // Post-processing (Bloom) const renderScene = new RenderPass(scene, camera); const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.0, 0.4, 0.85); // Adjust parameters for desired glow // bloomPass.threshold = 0; // bloomPass.strength = 0.5; // Lower strength // bloomPass.radius = 0.8; const composer = new EffectComposer(renderer); composer.addPass(renderScene); composer.addPass(bloomPass); // Lighting const ambientLight = new THREE.AmbientLight(0x404040, 1); // Soft ambient light scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 1.5); directionalLight.position.set(10, 20, 10); directionalLight.castShadow = true; directionalLight.shadow.mapSize.width = 1024; directionalLight.shadow.mapSize.height = 1024; directionalLight.shadow.camera.near = 0.5; directionalLight.shadow.camera.far = 50; directionalLight.shadow.camera.left = -30; directionalLight.shadow.camera.right = 30; directionalLight.shadow.camera.top = 30; directionalLight.shadow.camera.bottom = -30; scene.add(directionalLight); // Ground Plane const groundGeometry = new THREE.PlaneGeometry(100, 100); const groundMaterial = new THREE.MeshStandardMaterial({ color: 0x333333, // Dark grey ground metalness: 0.1, // Slight metallic sheen roughness: 0.8, // Less reflective }); const ground = new THREE.Mesh(groundGeometry, groundMaterial); ground.rotation.x = -Math.PI / 2; ground.receiveShadow = true; scene.add(ground); // Game Instance const game = new Game(scene); // Orbit Controls (Optional, for debugging/viewing) // const controls = new OrbitControls(camera, renderer.domElement); // controls.enableDamping = true; // controls.target.copy(game.getPlayerPosition()); // Initial target // Camera Follow Logic const cameraOffset = new THREE.Vector3(0, 10, 12); // Offset from player car function updateCamera() { if (game.gameState === 'running') { const playerPosition = game.getPlayerPosition(); const targetPosition = new THREE.Vector3().copy(playerPosition).add(cameraOffset); camera.position.lerp(targetPosition, 0.05); // Smooth camera follow camera.lookAt(playerPosition); } // Optional: Add different camera behavior on game over } // Handle window resize window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); composer.setSize(window.innerWidth, window.innerHeight); // Update composer size bloomPass.resolution.set(window.innerWidth, window.innerHeight); // Update bloom pass resolution }); // Animation loop function animate() { requestAnimationFrame(animate); game.update(); // Update game logic (player, enemies, collisions) updateCamera(); // Update camera position // controls.update(); // Update controls if enabled // renderer.render(scene, camera); // Use composer instead composer.render(); // Render scene with post-processing } // Initial enemy spawn game.spawnEnemy(); game.spawnEnemy(); animate();