Three.js Drifting Game

Coins: 0

body { margin: 0; overflow: hidden; background-color: #77b5fe; /* Sky blue background */ font-family: sans-serif; } canvas { display: block; } #ui { position: absolute; top: 10px; left: 10px; color: white; text-shadow: 1px 1px 2px black; } #score { font-size: 24px; } #game-over { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.7); color: white; padding: 40px; border-radius: 10px; text-align: center; font-size: 2em; } #game-over h1 { margin-bottom: 20px; } #restart-button { padding: 10px 20px; font-size: 1em; cursor: pointer; border: none; border-radius: 5px; background-color: #4CAF50; color: white; } #restart-button:hover { background-color: #45a049; } import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { PlayerCar } from './src/playerCar.js'; import { Road } from './src/road.js'; import { Environment } from './src/environment.js'; import { InputHandler } from './src/inputHandler.js'; import { EnemyManager } from './src/enemyManager.js'; import { CoinManager } from './src/coinManager.js'; // --- Basic Setup --- const scene = new THREE.Scene(); scene.background = new THREE.Color(0x77b5fe); // Sky blue scene.fog = new THREE.Fog(0x77b5fe, 50, 150); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 200); camera.position.set(0, 5, 10); // Positioned behind and slightly above the car const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('game-canvas'), antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; // --- Lighting --- const ambientLight = new THREE.AmbientLight(0xffffff, 0.6); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 1.5); directionalLight.position.set(10, 20, 10); directionalLight.castShadow = true; directionalLight.shadow.mapSize.width = 2048; directionalLight.shadow.mapSize.height = 2048; directionalLight.shadow.camera.near = 0.5; directionalLight.shadow.camera.far = 100; directionalLight.shadow.camera.left = -50; directionalLight.shadow.camera.right = 50; directionalLight.shadow.camera.top = 50; directionalLight.shadow.camera.bottom = -50; scene.add(directionalLight); // const shadowHelper = new THREE.CameraHelper(directionalLight.shadow.camera); // scene.add(shadowHelper); // --- Game Elements --- const inputHandler = new InputHandler(); const road = new Road(scene); const environment = new Environment(scene, road.roadWidth); const playerCar = new PlayerCar(scene, inputHandler); const enemyManager = new EnemyManager(scene, road.roadWidth); const coinManager = new CoinManager(scene, road.roadWidth); // --- UI Elements --- const scoreElement = document.getElementById('score'); const gameOverElement = document.getElementById('game-over'); const restartButton = document.getElementById('restart-button'); // --- Game State --- let score = 0; let isGameOver = false; const clock = new THREE.Clock(); let cameraTarget = new THREE.Vector3(); // For smooth camera follow // --- Functions --- function updateScore(newScore) { score = newScore; scoreElement.textContent = `Coins: ${score}`; } function gameOver() { isGameOver = true; gameOverElement.style.display = 'block'; // Simple explosion placeholder: scale the car down quickly playerCar.mesh.scale.set(0.1, 0.1, 0.1); // Stop enemy spawning and movement (optional, could let them continue) enemyManager.stopSpawning(); } function restartGame() { isGameOver = false; gameOverElement.style.display = 'none'; updateScore(0); playerCar.reset(); enemyManager.reset(); coinManager.reset(); clock.start(); // Restart clock if stopped animate(); // Restart animation loop if stopped } restartButton.addEventListener('click', restartGame); // --- Animation Loop --- function animate() { if (isGameOver) return; // Stop animation loop on game over requestAnimationFrame(animate); const deltaTime = clock.getDelta(); // Update game elements playerCar.update(deltaTime); road.update(playerCar.speed); // Move road based on player speed environment.update(playerCar.speed); // Move environment based on player speed enemyManager.update(deltaTime, playerCar.mesh.position); coinManager.update(deltaTime, playerCar.mesh.position); // --- Collision Detection --- // Enemies vs Player enemyManager.checkCollision(playerCar, gameOver); // Coins vs Player const collectedCount = coinManager.checkCollision(playerCar); if (collectedCount > 0) { updateScore(score + collectedCount); } // --- Camera Follow --- const cameraOffset = new THREE.Vector3(0, 5, 10); // Offset from car const desiredPosition = playerCar.mesh.position.clone().add(cameraOffset); // Smoothly interpolate camera position camera.position.lerp(desiredPosition, deltaTime * 5.0); // Smoothly interpolate camera target (lookAt) const desiredTarget = playerCar.mesh.position.clone().add(new THREE.Vector3(0, 2, 0)); cameraTarget.lerp(desiredTarget, deltaTime * 5.0); camera.lookAt(cameraTarget); renderer.render(scene, camera); } // --- Event Listeners --- window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); // --- Start Game --- updateScore(0); // Initialize score display animate(); import * as THREE from 'three'; export class PlayerCar { constructor(scene, inputHandler) { this.scene = scene; this.inputHandler = inputHandler; // Car geometry (simple box for now) const carWidth = 1.8; const carHeight = 0.8; const carLength = 4; const geometry = new THREE.BoxGeometry(carWidth, carHeight, carLength); const material = new THREE.MeshPhongMaterial({ color: 0xff0000 }); // Red car this.mesh = new THREE.Mesh(geometry, material); this.mesh.position.set(0, carHeight / 2, 0); // Start at center, slightly above ground this.mesh.castShadow = true; this.mesh.receiveShadow = false; // Car itself doesn't receive shadows from itself this.scene.add(this.mesh); // Physics properties this.maxSpeed = 50; this.acceleration = 30; this.braking = 60; this.steeringSpeed = 2.5; // Radians per second this.friction = 0.98; // Multiplier for velocity decay this.driftFactor = 0.6; // How much velocity direction aligns with car direction (lower = more drift) this.turnFriction = 0.95; // Extra friction when turning this.velocity = new THREE.Vector3(); this.angularVelocity = 0; this.speed = 0; // Magnitude of forward velocity // Bounding Box for collisions this.boundingBox = new THREE.Box3().setFromObject(this.mesh); } update(deltaTime) { let accelerate = 0; let steer = 0; // Get input if (this.inputHandler.isPressed('ArrowUp') || this.inputHandler.isPressed('w')) { accelerate = 1; } if (this.inputHandler.isPressed('ArrowDown') || this.inputHandler.isPressed('s')) { accelerate = -0.5; // Slower reverse } if (this.inputHandler.isPressed('ArrowLeft') || this.inputHandler.isPressed('a')) { steer = 1; } if (this.inputHandler.isPressed('ArrowRight') || this.inputHandler.isPressed('d')) { steer = -1; } // --- Movement Physics --- // 1. Steering (Angular Velocity) // Only allow steering if moving const steeringEffectiveness = Math.min(1, this.velocity.length() / (this.maxSpeed * 0.2)); // Less steering at low speed this.angularVelocity = steer * this.steeringSpeed * steeringEffectiveness; // Apply angular velocity to rotation this.mesh.rotation.y += this.angularVelocity * deltaTime; // 2. Acceleration/Braking const forwardVector = new THREE.Vector3(0, 0, -1); // Car's local forward forwardVector.applyQuaternion(this.mesh.quaternion); // Rotate to world space if (accelerate !== 0) { const accelerationForce = forwardVector.clone().multiplyScalar(this.acceleration * accelerate * deltaTime); this.velocity.add(accelerationForce); } // 3. Friction & Drift // Apply base friction this.velocity.multiplyScalar(this.friction); // Apply extra friction when turning if (steer !== 0) { this.velocity.multiplyScalar(this.turnFriction); } // Drift: Gradually align velocity vector with car's forward vector const forwardSpeed = this.velocity.dot(forwardVector); const forwardVelocity = forwardVector.clone().multiplyScalar(forwardSpeed); const sidewaysVelocity = this.velocity.clone().sub(forwardVelocity); // Dampen sideways velocity (this creates the drift effect) sidewaysVelocity.multiplyScalar(this.driftFactor); // Recombine velocities this.velocity.copy(forwardVelocity.add(sidewaysVelocity)); // 4. Clamp Speed if (this.velocity.length() > this.maxSpeed) { this.velocity.normalize().multiplyScalar(this.maxSpeed); } // 5. Apply Velocity to Position this.mesh.position.add(this.velocity.clone().multiplyScalar(deltaTime)); // Calculate forward speed for external use (e.g., road movement) this.speed = forwardSpeed; // Use the dot product result // Keep car within rough road bounds (simple clamp) const roadHalfWidth = 5; // Should match road width / 2 this.mesh.position.x = THREE.MathUtils.clamp(this.mesh.position.x, -roadHalfWidth, roadHalfWidth); // Update bounding box this.boundingBox.setFromObject(this.mesh); } getBoundingBox() { // Ensure the bounding box is up-to-date before returning this.boundingBox.setFromObject(this.mesh); return this.boundingBox; } reset() { this.mesh.position.set(0, this.mesh.geometry.parameters.height / 2, 0); this.mesh.rotation.set(0, 0, 0); this.mesh.scale.set(1, 1, 1); // Reset scale after potential explosion effect this.velocity.set(0, 0, 0); this.angularVelocity = 0; this.speed = 0; } } import * as THREE from 'three'; export class Road { constructor(scene) { this.scene = scene; this.roadWidth = 12; this.segmentLength = 100; // Length of each road segment this.numSegments = 3; // Number of segments to create the loop this.segments = []; const textureLoader = new THREE.TextureLoader(); const roadTexture = textureLoader.load('https://threejs.org/examples/textures/hardwood2_diffuse.jpg'); // Placeholder texture roadTexture.wrapS = THREE.RepeatWrapping; roadTexture.wrapT = THREE.RepeatWrapping; roadTexture.repeat.set(1, this.segmentLength / this.roadWidth); // Repeat texture along the length const roadMaterial = new THREE.MeshPhongMaterial({ map: roadTexture, color: 0x444444, // Dark grey road }); const roadGeometry = new THREE.PlaneGeometry(this.roadWidth, this.segmentLength); for (let i = 0; i < this.numSegments; i++) { const segment = new THREE.Mesh(roadGeometry, roadMaterial); segment.rotation.x = -Math.PI / 2; // Lay flat // Position segments one after another along Z segment.position.set(0, 0, -i * this.segmentLength + this.segmentLength / 2); segment.receiveShadow = true; this.scene.add(segment); this.segments.push(segment); } } update(playerSpeed) { // Move segments towards the player based on player's forward speed const movement = playerSpeed * (1 / 60); // Approximate movement based on assumed 60fps delta this.segments.forEach(segment => { segment.position.z += movement; // Check if segment has moved past the camera + one segment length // Reposition it to the front to create the infinite loop effect if (segment.position.z > this.segmentLength) { segment.position.z -= this.numSegments * this.segmentLength; } }); } } import * as THREE from 'three'; export class Environment { constructor(scene, roadWidth) { this.scene = scene; this.roadWidth = roadWidth; this.segmentLength = 100; // Match road segment length this.numSegments = 3; // Match road segments // --- Floor --- this.floorSegments = []; const floorSize = 200; // Large enough floor plane const floorGeometry = new THREE.PlaneGeometry(floorSize, this.segmentLength); const floorMaterial = new THREE.MeshPhongMaterial({ color: 0x55aa55 }); // Green grass for (let i = 0; i < this.numSegments; i++) { const floor = new THREE.Mesh(floorGeometry, floorMaterial); floor.rotation.x = -Math.PI / 2; floor.position.set(0, -0.05, -i * this.segmentLength + this.segmentLength / 2); // Slightly below road floor.receiveShadow = true; this.scene.add(floor); this.floorSegments.push(floor); } // --- Trees --- this.treeGroups = []; // Store groups of trees for each segment const treeCountPerSegment = 30; // Number of trees alongside one segment length const treeSpread = 80; // How far out trees can spawn from the road edge const treeMinDistFromRoad = 3; // Minimum distance from the road edge // Simple tree geometry const trunkHeight = 3; const trunkRadius = 0.2; const foliageHeight = 4; const foliageRadius = 1.5; const trunkGeometry = new THREE.CylinderGeometry(trunkRadius, trunkRadius, trunkHeight); const trunkMaterial = new THREE.MeshPhongMaterial({ color: 0x8B4513 }); // Brown const foliageGeometry = new THREE.ConeGeometry(foliageRadius, foliageHeight, 8); const foliageMaterial = new THREE.MeshPhongMaterial({ color: 0x228B22 }); // Forest green for (let i = 0; i < this.numSegments; i++) { const treeGroup = new THREE.Group(); treeGroup.position.z = -i * this.segmentLength + this.segmentLength / 2; // Position group with segment for (let j = 0; j < treeCountPerSegment; j++) { const side = Math.random() < 0.5 ? -1 : 1; // Left or right side const xPos = side * (this.roadWidth / 2 + treeMinDistFromRoad + Math.random() * treeSpread); const zPosOffset = (Math.random() - 0.5) * this.segmentLength; // Spread along segment length // Create tree mesh const trunk = new THREE.Mesh(trunkGeometry, trunkMaterial); trunk.position.set(xPos, trunkHeight / 2, zPosOffset); trunk.castShadow = true; trunk.receiveShadow = true; const foliage = new THREE.Mesh(foliageGeometry, foliageMaterial); foliage.position.set(xPos, trunkHeight + foliageHeight / 2, zPosOffset); foliage.castShadow = true; foliage.receiveShadow = true; treeGroup.add(trunk); treeGroup.add(foliage); } this.scene.add(treeGroup); this.treeGroups.push(treeGroup); } } update(playerSpeed) { const movement = playerSpeed * (1 / 60); // Approximate movement // Update floor segments this.floorSegments.forEach(floor => { floor.position.z += movement; if (floor.position.z > this.segmentLength) { floor.position.z -= this.numSegments * this.segmentLength; } }); // Update tree groups this.treeGroups.forEach(group => { group.position.z += movement; if (group.position.z > this.segmentLength) { // Reposition the entire group to the front group.position.z -= this.numSegments * this.segmentLength; // Optional: Could re-randomize tree positions within the group here } }); } } export class InputHandler { constructor() { this.keys = {}; window.addEventListener('keydown', (e) => this.onKeyChange(e, true)); window.addEventListener('keyup', (e) => this.onKeyChange(e, false)); } onKeyChange(event, isPressed) { // Normalize key codes (e.g., handle both 'w' and 'W') const key = event.key.toLowerCase(); this.keys[key] = isPressed; this.keys[event.code] = isPressed; // Store by code as well (e.g., 'ArrowUp') } isPressed(key) { return this.keys[key.toLowerCase()] || false; } } import * as THREE from 'three'; export class EnemyCar { constructor(scene, startPos) { this.scene = scene; // Simple box geometry for enemy const carWidth = 1.8; const carHeight = 0.8; const carLength = 4; const geometry = new THREE.BoxGeometry(carWidth, carHeight, carLength); const material = new THREE.MeshPhongMaterial({ color: 0x0000ff }); // Blue enemy this.mesh = new THREE.Mesh(geometry, material); this.mesh.position.copy(startPos); this.mesh.position.y = carHeight / 2; // Place on ground this.mesh.castShadow = true; this.mesh.receiveShadow = false; this.scene.add(this.mesh); this.speed = 20 + Math.random() * 10; // Vary enemy speed slightly this.chaseSpeedFactor = 1.2; // How much faster they move when directly behind this.turnSpeed = 1.5; // How quickly they turn towards the player this.boundingBox = new THREE.Box3().setFromObject(this.mesh); } update(deltaTime, playerPosition) { const directionToPlayer = playerPosition.clone().sub(this.mesh.position); const distanceToPlayer = directionToPlayer.length(); directionToPlayer.normalize(); // --- Basic Chase AI --- // 1. Steering: Turn towards the player's X position const targetX = playerPosition.x; const currentX = this.mesh.position.x; const steerDirection = Math.sign(targetX - currentX); const distanceX = Math.abs(targetX - currentX); // Simple steering: Move directly towards player's X if (distanceX > 0.1) { // Only steer if not already aligned this.mesh.position.x += steerDirection * this.turnSpeed * deltaTime; } // Basic look towards player (optional, makes them face forward mostly) // this.mesh.lookAt(playerPosition.x, this.mesh.position.y, playerPosition.z); // 2. Speed: Move forward, slightly faster if player is ahead let currentSpeed = this.speed; if (playerPosition.z < this.mesh.position.z) { // Player is ahead currentSpeed *= this.chaseSpeedFactor; } this.mesh.position.z -= currentSpeed * deltaTime; // Move forward (negative Z) // Update bounding box this.boundingBox.setFromObject(this.mesh); } getBoundingBox() { this.boundingBox.setFromObject(this.mesh); return this.boundingBox; } dispose() { this.scene.remove(this.mesh); this.mesh.geometry.dispose(); this.mesh.material.dispose(); } } import * as THREE from 'three'; import { EnemyCar } from './enemyCar.js'; export class EnemyManager { constructor(scene, roadWidth) { this.scene = scene; this.roadWidth = roadWidth; this.enemies = []; this.spawnTimer = 0; this.spawnInterval = 3; // Seconds between spawns this.maxEnemies = 5; this.spawnDistance = -100; // How far ahead enemies spawn this.despawnDistance = 20; // How far behind enemies despawn this.canSpawn = true; } update(deltaTime, playerPosition) { if (this.canSpawn) { this.spawnTimer += deltaTime; if (this.spawnTimer >= this.spawnInterval && this.enemies.length < this.maxEnemies) { this.spawnEnemy(playerPosition); this.spawnTimer = 0; // Slightly randomize next spawn time this.spawnInterval = 2 + Math.random() * 2; } } // Update existing enemies and remove ones far behind for (let i = this.enemies.length - 1; i >= 0; i--) { const enemy = this.enemies[i]; enemy.update(deltaTime, playerPosition); // Despawn if too far behind player if (enemy.mesh.position.z > playerPosition.z + this.despawnDistance) { enemy.dispose(); this.enemies.splice(i, 1); } } } spawnEnemy(playerPosition) { const spawnX = (Math.random() - 0.5) * (this.roadWidth * 0.8); // Spawn within road bounds const spawnZ = playerPosition.z + this.spawnDistance; const startPos = new THREE.Vector3(spawnX, 0, spawnZ); const newEnemy = new EnemyCar(this.scene, startPos); this.enemies.push(newEnemy); } checkCollision(playerCar, gameOverCallback) { const playerBox = playerCar.getBoundingBox(); for (const enemy of this.enemies) { const enemyBox = enemy.getBoundingBox(); if (playerBox.intersectsBox(enemyBox)) { gameOverCallback(); // Trigger game over return; // Stop checking after first collision } } } stopSpawning() { this.canSpawn = false; } reset() { this.enemies.forEach(enemy => enemy.dispose()); this.enemies = []; this.spawnTimer = 0; this.canSpawn = true; } } import * as THREE from 'three'; export class Coin { constructor(scene, startPos) { this.scene = scene; const radius = 0.5; const height = 0.2; const geometry = new THREE.CylinderGeometry(radius, radius, height, 16); const material = new THREE.MeshPhongMaterial({ color: 0xffff00, // Yellow emissive: 0xaaaa00, // Make it glow slightly shininess: 80 }); this.mesh = new THREE.Mesh(geometry, material); this.mesh.position.copy(startPos); this.mesh.position.y = radius; // Place slightly above ground this.mesh.rotation.x = Math.PI / 2; // Lay flat initially if desired this.mesh.castShadow = true; this.scene.add(this.mesh); this.rotationSpeed = Math.PI * 1.5; // Radians per second // Use a sphere for simpler collision detection with coins this.boundingSphere = new THREE.Sphere(this.mesh.position, radius * 1.2); // Slightly larger sphere } update(deltaTime) { // Make coins rotate for visual appeal this.mesh.rotation.z += this.rotationSpeed * deltaTime; // Rotate around its local Y (which is world Z if rotation.x is PI/2) // Update bounding sphere position this.boundingSphere.center.copy(this.mesh.position); } getBoundingSphere() { // Ensure sphere center is updated this.boundingSphere.center.copy(this.mesh.position); return this.boundingSphere; } dispose() { this.scene.remove(this.mesh); this.mesh.geometry.dispose(); this.mesh.material.dispose(); } } import * as THREE from 'three'; import { Coin } from './coin.js'; export class CoinManager { constructor(scene, roadWidth) { this.scene = scene; this.roadWidth = roadWidth; this.coins = []; this.spawnTimer = 0; this.spawnInterval = 1.5; // Spawn coins more frequently than enemies this.maxCoins = 15; this.spawnDistance = -80; // How far ahead coins spawn this.despawnDistance = 20; // How far behind coins despawn } update(deltaTime, playerPosition) { this.spawnTimer += deltaTime; if (this.spawnTimer >= this.spawnInterval && this.coins.length < this.maxCoins) { this.spawnCoin(playerPosition); this.spawnTimer = 0; this.spawnInterval = 1 + Math.random() * 1; // Randomize next spawn slightly } // Update existing coins and remove ones far behind for (let i = this.coins.length - 1; i >= 0; i--) { const coin = this.coins[i]; coin.update(deltaTime); // Despawn if too far behind player if (coin.mesh.position.z > playerPosition.z + this.despawnDistance) { coin.dispose(); this.coins.splice(i, 1); } } } spawnCoin(playerPosition) { const spawnX = (Math.random() - 0.5) * (this.roadWidth * 0.9); // Spawn within road bounds const spawnZ = playerPosition.z + this.spawnDistance * (1 + Math.random() * 0.5); // Vary spawn distance const startPos = new THREE.Vector3(spawnX, 0, spawnZ); const newCoin = new Coin(this.scene, startPos); this.coins.push(newCoin); } checkCollision(playerCar) { const playerBox = playerCar.getBoundingBox(); let collectedCount = 0; for (let i = this.coins.length - 1; i >= 0; i--) { const coin = this.coins[i]; const coinSphere = coin.getBoundingSphere(); // Use intersectsSphere for coin collision (simpler than box vs cylinder) if (playerBox.intersectsSphere(coinSphere)) { coin.dispose(); this.coins.splice(i, 1); collectedCount++; // Add sound effect or particle effect here later } } return collectedCount; } reset() { this.coins.forEach(coin => coin.dispose()); this.coins = []; this.spawnTimer = 0; } } // Basic AABB (Axis-Aligned Bounding Box) collision check // Note: THREE.Box3 already has an intersectsBox method, // so this file might not be strictly necessary for simple box collisions. // It's kept here as a placeholder for potentially more complex collision logic later. export function checkCollision(boxA, boxB) { return boxA.intersectsBox(boxB); } // You could add other collision functions here, e.g., // - Sphere vs Box // - OBB (Oriented Bounding Box) vs OBB (more complex, handles rotation better)

Game Over