3D Snake Game

Score: 0

body { margin: 0; overflow: hidden; background-color: #111; color: white; font-family: sans-serif; } canvas { display: block; } #score { position: absolute; top: 10px; left: 10px; font-size: 24px; } #game-over { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 48px; text-align: center; color: red; background-color: rgba(0, 0, 0, 0.7); padding: 20px; border-radius: 10px; } import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { Game } from './game.js'; // Scene setup const scene = new THREE.Scene(); scene.background = new THREE.Color(0x111111); // Camera setup const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(0, 25, 20); // Positioned above the game area // Renderer setup const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); document.body.appendChild(renderer.domElement); // Lights const ambientLight = new THREE.AmbientLight(0xffffff, 0.6); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); directionalLight.position.set(5, 10, 7.5); scene.add(directionalLight); // Orbit Controls (optional, for debugging/viewing) const controls = new OrbitControls(camera, renderer.domElement); controls.target.set(0, 0, 0); // Look at the center of the game area controls.enableDamping = true; controls.enabled = false; // Disable by default, enable if needed for debugging // Game instance const game = new Game(scene); // Handle window resize window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); // Animation loop let lastTime = 0; const gameTickRate = 150; // milliseconds per game update function animate(time) { requestAnimationFrame(animate); const deltaTime = time - lastTime; if (deltaTime > gameTickRate) { lastTime = time - (deltaTime % gameTickRate); // Adjust lastTime game.update(); } game.animateParticles(deltaTime / 1000); // Update particles every frame controls.update(); // Update controls if enabled renderer.render(scene, camera); } animate(0); // Start the loop import * as THREE from 'three'; import { Snake } from './snake.js'; import { Food } from './food.js'; import { ParticleSystem } from './particles.js'; import { setupControls } from './controls.js'; const GRID_SIZE = 20; // Size of the game area (GRID_SIZE x GRID_SIZE) const CELL_WIDTH = 1; // Size of each grid cell export class Game { constructor(scene) { this.scene = scene; this.gridSize = GRID_SIZE; this.cellWidth = CELL_WIDTH; this.isPlaying = true; this.score = 0; this.scoreElement = document.getElementById('score'); this.gameOverElement = document.getElementById('game-over'); this.setupGrid(); this.snake = new Snake(this.scene, this.gridSize, this.cellWidth); this.food = new Food(this.scene, this.gridSize, this.cellWidth); this.particleSystem = new ParticleSystem(this.scene); this.food.spawn(this.snake.getBodyPositions()); // Initial food spawn setupControls(this.snake, this); // Pass 'this' (game instance) for restart } setupGrid() { const gridHelper = new THREE.GridHelper(this.gridSize * this.cellWidth, this.gridSize); gridHelper.position.y = -0.5 * this.cellWidth; // Position slightly below snake/food this.scene.add(gridHelper); // Optional: Add boundary walls visually const boundaryMaterial = new THREE.MeshStandardMaterial({ color: 0x444444, transparent: true, opacity: 0.5 }); const wallThickness = 0.5; const wallHeight = 2; const halfGridWorldSize = (this.gridSize * this.cellWidth) / 2; const wallTop = new THREE.Mesh(new THREE.BoxGeometry(this.gridSize * this.cellWidth + wallThickness, wallHeight, wallThickness), boundaryMaterial); wallTop.position.set(0, wallHeight / 2 - 0.5 * this.cellWidth, -halfGridWorldSize - wallThickness / 2); this.scene.add(wallTop); const wallBottom = new THREE.Mesh(new THREE.BoxGeometry(this.gridSize * this.cellWidth + wallThickness, wallHeight, wallThickness), boundaryMaterial); wallBottom.position.set(0, wallHeight / 2 - 0.5 * this.cellWidth, halfGridWorldSize + wallThickness / 2); this.scene.add(wallBottom); const wallLeft = new THREE.Mesh(new THREE.BoxGeometry(wallThickness, wallHeight, this.gridSize * this.cellWidth + wallThickness), boundaryMaterial); wallLeft.position.set(-halfGridWorldSize - wallThickness / 2, wallHeight / 2 - 0.5 * this.cellWidth, 0); this.scene.add(wallLeft); const wallRight = new THREE.Mesh(new THREE.BoxGeometry(wallThickness, wallHeight, this.gridSize * this.cellWidth + wallThickness), boundaryMaterial); wallRight.position.set(halfGridWorldSize + wallThickness / 2, wallHeight / 2 - 0.5 * this.cellWidth, 0); this.scene.add(wallRight); } update() { if (!this.isPlaying) return; this.snake.move(); // Check collisions if (this.snake.checkWallCollision() || this.snake.checkSelfCollision()) { this.gameOver(); return; } // Check food collision const headPos = this.snake.getHeadPosition(); const foodPos = this.food.getPosition(); if (headPos.x === foodPos.x && headPos.z === foodPos.z) { this.snake.grow(); this.score++; this.updateScoreDisplay(); this.particleSystem.createFoodEatEffect(this.food.mesh.position); // Trigger particle effect this.food.spawn(this.snake.getBodyPositions()); } } animateParticles(deltaTime) { this.particleSystem.update(deltaTime); } updateScoreDisplay() { this.scoreElement.textContent = `Score: ${this.score}`; } gameOver() { this.isPlaying = false; this.gameOverElement.style.display = 'block'; console.log("Game Over! Score:", this.score); // Optional: Stop snake animation, show game over message } restart() { if (this.isPlaying) return; // Don't restart if already playing // Clear existing elements this.snake.reset(); this.food.removeFromScene(); // Ensure old food mesh is gone this.particleSystem.reset(); // Clear active particles // Reset game state this.score = 0; this.updateScoreDisplay(); this.gameOverElement.style.display = 'none'; this.isPlaying = true; // Re-initialize snake and food this.snake = new Snake(this.scene, this.gridSize, this.cellWidth); this.food = new Food(this.scene, this.gridSize, this.cellWidth); this.food.spawn(this.snake.getBodyPositions()); // Re-setup controls for the new snake instance setupControls(this.snake, this); console.log("Game Restarted"); } } import * as THREE from 'three'; const DIRECTIONS = { UP: new THREE.Vector3(0, 0, -1), DOWN: new THREE.Vector3(0, 0, 1), LEFT: new THREE.Vector3(-1, 0, 0), RIGHT: new THREE.Vector3(1, 0, 0), }; export class Snake { constructor(scene, gridSize, cellWidth) { this.scene = scene; this.gridSize = gridSize; this.cellWidth = cellWidth; this.halfGridWorldSize = (gridSize * cellWidth) / 2 - cellWidth / 2; this.geometry = new THREE.BoxGeometry(cellWidth * 0.9, cellWidth * 0.9, cellWidth * 0.9); this.headMaterial = new THREE.MeshPhongMaterial({ color: 0x00ff00 }); // Green head this.bodyMaterial = new THREE.MeshPhongMaterial({ color: 0x00aa00 }); // Darker green body this.reset(); } reset() { // Clear previous body if any if (this.body) { this.body.forEach(segment => this.scene.remove(segment)); } // Initial position and direction this.gridPosition = new THREE.Vector3(0, 0, 0); // Start at center this.direction = DIRECTIONS.RIGHT; // Initial direction this.pendingDirection = DIRECTIONS.RIGHT; // Snake body (array of meshes) this.body = []; this.bodyGridPositions = []; // Store grid positions for collision checks // Create initial snake (head + 2 body segments) this.grow(); // Head this.grow(); this.grow(); // Update mesh positions based on initial grid positions this.updateMeshPositions(); } changeDirection(newDirectionKey) { let newDirection; switch (newDirectionKey) { case 'ArrowUp': newDirection = DIRECTIONS.UP; break; case 'ArrowDown': newDirection = DIRECTIONS.DOWN; break; case 'ArrowLeft': newDirection = DIRECTIONS.LEFT; break; case 'ArrowRight': newDirection = DIRECTIONS.RIGHT; break; default: return; // Ignore other keys } // Prevent reversing direction directly if (!this.direction.equals(newDirection) && !this.direction.equals(newDirection.clone().negate())) { this.pendingDirection = newDirection; } } move() { this.direction = this.pendingDirection; const newHeadGridPos = this.bodyGridPositions[0].clone().add(this.direction); // Move body segments: last segment moves to where the second-to-last was, etc. for (let i = this.body.length - 1; i > 0; i--) { this.bodyGridPositions[i].copy(this.bodyGridPositions[i - 1]); } // Update head position this.bodyGridPositions[0].copy(newHeadGridPos); this.updateMeshPositions(); } updateMeshPositions() { for (let i = 0; i < this.body.length; i++) { const segment = this.body[i]; const gridPos = this.bodyGridPositions[i]; segment.position.set( (gridPos.x * this.cellWidth), 0, // Keep snake on the grid plane (y=0) (gridPos.z * this.cellWidth) ); // Simple animation: scale pulse on head if (i === 0) { const scale = 1 + Math.sin(Date.now() * 0.01) * 0.05; segment.scale.set(scale, scale, scale); } else { segment.scale.set(1, 1, 1); // Reset scale for body parts } } } grow() { const isHead = this.body.length === 0; const material = isHead ? this.headMaterial : this.bodyMaterial; const segment = new THREE.Mesh(this.geometry, material); let newSegmentGridPos; if (isHead) { // First segment (head) starts at the initial grid position newSegmentGridPos = this.gridPosition.clone(); } else { // Add new segment at the position of the last segment before the move // If we just grew, the 'last' segment is now the second to last actual mesh const tailGridPos = this.bodyGridPositions[this.bodyGridPositions.length - 1]; newSegmentGridPos = tailGridPos.clone(); // It will be updated correctly in the next move } // Add mesh to scene and body array this.scene.add(segment); this.body.unshift(segment); // Add new segment to the front (it becomes the new head visually) // Add grid position to the front of the positions array this.bodyGridPositions.unshift(newSegmentGridPos); // If it wasn't the head, update the previous head's material if (!isHead && this.body.length > 1) { this.body[1].material = this.bodyMaterial; // The old head becomes a body part } // Update mesh positions immediately after growing this.updateMeshPositions(); } checkWallCollision() { const headPos = this.bodyGridPositions[0]; const halfGrid = this.gridSize / 2; return headPos.x >= halfGrid || headPos.x < -halfGrid || headPos.z >= halfGrid || headPos.z < -halfGrid; } checkSelfCollision() { const headPos = this.bodyGridPositions[0]; for (let i = 1; i < this.bodyGridPositions.length; i++) { if (headPos.equals(this.bodyGridPositions[i])) { return true; } } return false; } getHeadPosition() { return this.bodyGridPositions[0]; } getBodyPositions() { // Return copies to prevent external modification return this.bodyGridPositions.map(pos => pos.clone()); } } import * as THREE from 'three'; export class Food { constructor(scene, gridSize, cellWidth) { this.scene = scene; this.gridSize = gridSize; this.cellWidth = cellWidth; this.halfGridSize = Math.floor(gridSize / 2); this.geometry = new THREE.BoxGeometry(cellWidth * 0.7, cellWidth * 0.7, cellWidth * 0.7); // Slightly smaller this.material = new THREE.MeshPhongMaterial({ color: 0xff0000, emissive: 0x550000 }); // Red, slightly glowing this.mesh = new THREE.Mesh(this.geometry, this.material); this.gridPosition = new THREE.Vector3(); } getRandomGridPosition() { const x = Math.floor(Math.random() * this.gridSize) - this.halfGridSize; const z = Math.floor(Math.random() * this.gridSize) - this.halfGridSize; return new THREE.Vector3(x, 0, z); } spawn(occupiedPositions) { // Simple animation: pulsing scale const scale = 1 + Math.sin(Date.now() * 0.005) * 0.1; this.mesh.scale.set(scale, scale, scale); let newPos; let positionOccupied; do { positionOccupied = false; newPos = this.getRandomGridPosition(); // Check if the new position overlaps with the snake's body for (const snakePos of occupiedPositions) { if (newPos.x === snakePos.x && newPos.z === snakePos.z) { positionOccupied = true; break; } } } while (positionOccupied); this.gridPosition.copy(newPos); this.mesh.position.set( newPos.x * this.cellWidth, 0, // Place food on the grid plane newPos.z * this.cellWidth ); // Add to scene if not already added if (!this.mesh.parent) { this.scene.add(this.mesh); } } getPosition() { // Return a copy of the grid position return this.gridPosition.clone(); } removeFromScene() { if (this.mesh.parent) { this.scene.remove(this.mesh); } } } import * as THREE from 'three'; const MAX_PARTICLES = 500; const PARTICLE_LIFETIME = 1.0; // seconds export class ParticleSystem { constructor(scene) { this.scene = scene; this.particlePool = []; this.activeParticles = []; // Use BufferGeometry for efficiency this.geometry = new THREE.BufferGeometry(); this.positions = new Float32Array(MAX_PARTICLES * 3); this.colors = new Float32Array(MAX_PARTICLES * 3); // Add color attribute this.lifetimes = new Float32Array(MAX_PARTICLES); this.geometry.setAttribute('position', new THREE.BufferAttribute(this.positions, 3)); this.geometry.setAttribute('color', new THREE.BufferAttribute(this.colors, 3)); // Set color attribute // Use PointsMaterial with vertexColors enabled this.material = new THREE.PointsMaterial({ size: 0.3, vertexColors: true, // Enable vertex colors transparent: true, opacity: 0.8, depthWrite: false, // Prevent particles obscuring important things blending: THREE.AdditiveBlending, // Nice glow effect }); this.points = new THREE.Points(this.geometry, this.material); this.points.frustumCulled = false; // Ensure particles are always rendered this.scene.add(this.points); this.particleIndex = 0; // To cycle through the buffer attributes } createFoodEatEffect(position) { const count = 30; // Number of particles for this effect const baseColor = new THREE.Color(0xffaa00); // Orange/Yellow sparks for (let i = 0; i < count; i++) { const pIndex = this.particleIndex % MAX_PARTICLES; // Position (start at food location) this.positions[pIndex * 3] = position.x; this.positions[pIndex * 3 + 1] = position.y; this.positions[pIndex * 3 + 2] = position.z; // Color this.colors[pIndex * 3] = baseColor.r; this.colors[pIndex * 3 + 1] = baseColor.g; this.colors[pIndex * 3 + 2] = baseColor.b; // Lifetime this.lifetimes[pIndex] = PARTICLE_LIFETIME * (0.5 + Math.random() * 0.5); // Randomize lifetime slightly // Velocity (explode outwards) const velocity = new THREE.Vector3( (Math.random() - 0.5) * 5, (Math.random() - 0.5) * 5, (Math.random() - 0.5) * 5 ); // Store active particle info (reuse objects if possible) if (!this.activeParticles[pIndex]) { this.activeParticles[pIndex] = { velocity: new THREE.Vector3(), initialLifetime: 0 }; } this.activeParticles[pIndex].velocity.copy(velocity); this.activeParticles[pIndex].initialLifetime = this.lifetimes[pIndex]; this.particleIndex++; } this.geometry.attributes.position.needsUpdate = true; this.geometry.attributes.color.needsUpdate = true; } update(deltaTime) { let activeCount = 0; for (let i = 0; i < MAX_PARTICLES; i++) { if (this.lifetimes[i] > 0) { this.lifetimes[i] -= deltaTime; if (this.lifetimes[i] <= 0) { // Particle died, hide it (move far away or set scale to 0 if using InstancedMesh) this.positions[i * 3 + 1] = -10000; // Move far away this.lifetimes[i] = 0; // Ensure it stays dead } else { // Update position based on velocity const velocity = this.activeParticles[i]?.velocity; if (velocity) { this.positions[i * 3] += velocity.x * deltaTime; this.positions[i * 3 + 1] += velocity.y * deltaTime; this.positions[i * 3 + 2] += velocity.z * deltaTime; // Optional: Add gravity or drag // velocity.y -= 9.8 * deltaTime; // Gravity example // velocity.multiplyScalar(0.98); // Drag example // Fade out effect by reducing color intensity or alpha (if material supports it) const lifeRatio = this.lifetimes[i] / this.activeParticles[i].initialLifetime; // Example: Fade color to black (or another color) // this.colors[i * 3] *= lifeRatio; // this.colors[i * 3 + 1] *= lifeRatio; // this.colors[i * 3 + 2] *= lifeRatio; // Note: Opacity modification requires shader material or careful handling of PointsMaterial properties } activeCount++; } } } // Only update geometry attributes if particles were active if (activeCount > 0 || this.particleIndex > 0) { // Check particleIndex too for initial spawn this.geometry.attributes.position.needsUpdate = true; // this.geometry.attributes.color.needsUpdate = true; // Uncomment if colors change over time this.geometry.computeBoundingSphere(); // Important for frustum culling if enabled } // Reset index if it gets too large to avoid potential issues, // though modulo should handle it. if (this.particleIndex >= MAX_PARTICLES * 10) { this.particleIndex = 0; } } reset() { // Clear all active particles for (let i = 0; i < MAX_PARTICLES; i++) { this.lifetimes[i] = 0; this.positions[i * 3 + 1] = -10000; // Move far away } this.geometry.attributes.position.needsUpdate = true; this.activeParticles = []; // Clear velocity/other data this.particleIndex = 0; } } export function setupControls(snake, game) { window.addEventListener('keydown', (event) => { if (game.isPlaying) { snake.changeDirection(event.key); } else if (event.key === 'r' || event.key === 'R') { game.restart(); } }); }