3D Snake Game

Okay, let's create a 3D snake game using Three.js. This version will include the basic 3D setup, snake movement, food collection, and simple particle effects. { "name": "3d-snake-game", "version": "1.0.0", "description": "A 3D snake game with Three.js", "main": "game.js", "scripts": { "start": "vite" }, "dependencies": { "three": "^0.164.1" }, "devDependencies": { "vite": "^5.2.11" } } 3D Snake Game

Score: 0

Use Arrow Keys to move

body { margin: 0; overflow: hidden; background-color: #222; color: white; font-family: sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; } #gameCanvas { display: block; background-color: #000; } #score { position: absolute; top: 10px; left: 10px; font-size: 24px; z-index: 10; } #instructions { position: absolute; bottom: 10px; left: 10px; font-size: 16px; color: #aaa; z-index: 10; } #game-over { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 48px; color: red; background-color: rgba(0, 0, 0, 0.7); padding: 20px; border-radius: 10px; text-align: center; z-index: 20; } import * as THREE from 'three'; // --- Configuration --- const GRID_SIZE = 20; // Number of cells in each direction const BOX_SIZE = 1; // Size of each snake segment/food const GAME_SPEED_MS = 150; // Milliseconds per game tick const CAMERA_DISTANCE = 30; const PARTICLE_COUNT = 50; const PARTICLE_LIFESPAN = 0.5; // seconds // --- Game State --- let scene, camera, renderer, composer; let snake, food, particles; let direction = new THREE.Vector3(1, 0, 0); // Initial direction (right) let nextDirection = new THREE.Vector3(1, 0, 0); let score = 0; let gameInterval; let isGameOver = false; let particlePool = []; let activeParticles = []; // --- DOM Elements --- const scoreElement = document.getElementById('score'); const gameOverElement = document.getElementById('game-over'); const canvas = document.getElementById('gameCanvas'); // --- Initialization --- function init() { // Scene scene = new THREE.Scene(); scene.background = new THREE.Color(0x111111); // Camera const aspect = window.innerWidth / window.innerHeight; camera = new THREE.PerspectiveCamera(75, aspect, 0.1, 1000); camera.position.set(0, CAMERA_DISTANCE * 0.8, CAMERA_DISTANCE); camera.lookAt(scene.position); // Renderer renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); renderer.shadowMap.enabled = true; // Lighting const ambientLight = new THREE.AmbientLight(0x606060); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 1); directionalLight.position.set(5, 10, 7.5); directionalLight.castShadow = true; scene.add(directionalLight); // Grid Helper (optional visual aid) // const gridHelper = new THREE.GridHelper(GRID_SIZE * BOX_SIZE, GRID_SIZE); // scene.add(gridHelper); // Game Elements createSnake(); createFood(); createParticleSystem(); // Event Listeners window.addEventListener('resize', onWindowResize, false); document.addEventListener('keydown', onKeyDown, false); // Start Game Loop startGameLoop(); animate(); } // --- Game Objects --- function createSnake() { snake = []; const headGeometry = new THREE.BoxGeometry(BOX_SIZE, BOX_SIZE, BOX_SIZE); const headMaterial = new THREE.MeshStandardMaterial({ color: 0x00ff00 }); // Green head const bodyMaterial = new THREE.MeshStandardMaterial({ color: 0x00aa00 }); // Darker green body // Initial snake position (3 segments) for (let i = 0; i < 3; i++) { const segment = new THREE.Mesh(headGeometry, i === 0 ? headMaterial : bodyMaterial); segment.position.set((-i + 2) * BOX_SIZE, 0, 0); // Start near center-left segment.castShadow = true; segment.receiveShadow = true; scene.add(segment); snake.push(segment); } } function createFood() { const foodGeometry = new THREE.SphereGeometry(BOX_SIZE / 2, 16, 16); const foodMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000, // Red emissive: 0x550000, // Slight glow }); food = new THREE.Mesh(foodGeometry, foodMaterial); food.castShadow = true; positionFood(); scene.add(food); } function positionFood() { let newPos; let collision; const halfGrid = Math.floor(GRID_SIZE / 2) * BOX_SIZE; do { collision = false; const x = Math.floor(Math.random() * GRID_SIZE - GRID_SIZE / 2) * BOX_SIZE; const z = Math.floor(Math.random() * GRID_SIZE - GRID_SIZE / 2) * BOX_SIZE; newPos = new THREE.Vector3(x, 0, z); // Keep food on the ground plane (y=0) // Check collision with snake for (const segment of snake) { if (segment.position.equals(newPos)) { collision = true; break; } } } while (collision); food.position.copy(newPos); } // --- Particle System --- function createParticleSystem() { const particleGeometry = new THREE.BufferGeometry(); const positions = new Float32Array(PARTICLE_COUNT * 3); particleGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); const particleMaterial = new THREE.PointsMaterial({ color: 0xff4444, size: 0.3, transparent: true, opacity: 0.8, blending: THREE.AdditiveBlending, // Nice glow effect sizeAttenuation: true, depthWrite: false, // Prevent particles obscuring things incorrectly }); particles = new THREE.Points(particleGeometry, particleMaterial); particles.visible = false; // Initially hidden scene.add(particles); // Pre-allocate particle objects for reuse for (let i = 0; i < PARTICLE_COUNT; i++) { particlePool.push({ position: new THREE.Vector3(), velocity: new THREE.Vector3(), life: 0, isActive: false, }); } } function triggerParticles(position) { particles.position.copy(position); // Center the particle system at the food location particles.visible = true; let particlesSpawned = 0; for (let i = 0; i < particlePool.length && particlesSpawned < PARTICLE_COUNT; i++) { const p = particlePool[i]; if (!p.isActive) { p.position.set(0, 0, 0); // Relative to particles.position p.velocity.set( (Math.random() - 0.5) * 3, (Math.random() - 0.5) * 3 + 1, // Slight upward bias (Math.random() - 0.5) * 3 ); p.life = PARTICLE_LIFESPAN; p.isActive = true; activeParticles.push(p); particlesSpawned++; } } } function updateParticles(deltaTime) { if (activeParticles.length === 0) { if (particles.visible) particles.visible = false; return; } const positions = particles.geometry.attributes.position.array; let activeCount = 0; for (let i = activeParticles.length - 1; i >= 0; i--) { const p = activeParticles[i]; p.life -= deltaTime; if (p.life <= 0) { p.isActive = false; activeParticles.splice(i, 1); // Remove from active list // Hide the point by moving it far away (or use BufferAttribute.updateRange) positions[activeCount * 3] = 10000; positions[activeCount * 3 + 1] = 10000; positions[activeCount * 3 + 2] = 10000; } else { p.position.addScaledVector(p.velocity, deltaTime); // Apply some gravity/drag p.velocity.y -= 2.0 * deltaTime; // Gravity p.velocity.multiplyScalar(0.98); // Drag positions[activeCount * 3] = p.position.x; positions[activeCount * 3 + 1] = p.position.y; positions[activeCount * 3 + 2] = p.position.z; activeCount++; } } particles.geometry.attributes.position.needsUpdate = true; // Optional: Optimize drawing only active particles // particles.geometry.setDrawRange(0, activeCount); if (activeCount === 0) { particles.visible = false; } } // --- Game Loop --- function startGameLoop() { if (gameInterval) clearInterval(gameInterval); gameInterval = setInterval(updateGame, GAME_SPEED_MS); } function updateGame() { if (isGameOver) return; moveSnake(); checkCollisions(); } function moveSnake() { direction.copy(nextDirection); // Update direction only at the start of the move const head = snake[0]; const newHeadPos = head.position.clone().add(direction.clone().multiplyScalar(BOX_SIZE)); // Move body segments for (let i = snake.length - 1; i > 0; i--) { snake[i].position.copy(snake[i - 1].position); } // Move head head.position.copy(newHeadPos); } function checkCollisions() { const head = snake[0]; const halfGridWorld = (GRID_SIZE / 2) * BOX_SIZE; // Boundary Collision if ( head.position.x >= halfGridWorld || head.position.x < -halfGridWorld || head.position.z >= halfGridWorld || head.position.z < -halfGridWorld ) { endGame(); return; } // Self Collision for (let i = 1; i < snake.length; i++) { if (head.position.equals(snake[i].position)) { endGame(); return; } } // Food Collision if (head.position.distanceTo(food.position) < BOX_SIZE * 0.8) { // Use distance check for sphere eatFood(); } } function eatFood() { score++; scoreElement.textContent = `Score: ${score}`; // Trigger particles triggerParticles(food.position); // Add new segment const tail = snake[snake.length - 1]; const newSegment = tail.clone(); // Position it initially where the tail was (it will be updated next frame) newSegment.position.copy(tail.position); scene.add(newSegment); snake.push(newSegment); // Reposition food positionFood(); } function endGame() { isGameOver = true; clearInterval(gameInterval); gameOverElement.style.display = 'block'; console.log('Game Over! Score:', score); } function restartGame() { isGameOver = false; gameOverElement.style.display = 'none'; score = 0; scoreElement.textContent = `Score: ${score}`; direction.set(1, 0, 0); nextDirection.set(1, 0, 0); // Remove old snake snake.forEach(segment => scene.remove(segment)); snake = []; // Remove old food scene.remove(food); // Reset particles activeParticles = []; particlePool.forEach(p => p.isActive = false); if (particles) particles.visible = false; // Create new game elements createSnake(); createFood(); // Restart loop startGameLoop(); } // --- Animation Loop --- const clock = new THREE.Clock(); function animate() { requestAnimationFrame(animate); const deltaTime = clock.getDelta(); // Simple food pulse animation const pulseScale = 1.0 + Math.sin(clock.elapsedTime * 5) * 0.1; if (food) { food.scale.set(pulseScale, pulseScale, pulseScale); } // Update particles if (particles) { updateParticles(deltaTime); } // Smooth camera follow (optional) // const targetPos = snake[0].position.clone().add(new THREE.Vector3(0, CAMERA_DISTANCE * 0.8, CAMERA_DISTANCE)); // camera.position.lerp(targetPos, 0.05); // camera.lookAt(snake[0].position); // Look at snake head renderer.render(scene, camera); } // --- Event Handlers --- function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } function onKeyDown(event) { if (isGameOver) { if (event.key === 'r' || event.key === 'R') { restartGame(); } return; } const currentDir = direction; let requestedDir = null; switch (event.key) { case 'ArrowUp': case 'w': requestedDir = new THREE.Vector3(0, 0, -1); // Move forward (negative Z) break; case 'ArrowDown': case 's': requestedDir = new THREE.Vector3(0, 0, 1); // Move backward (positive Z) break; case 'ArrowLeft': case 'a': requestedDir = new THREE.Vector3(-1, 0, 0); // Move left (negative X) break; case 'ArrowRight': case 'd': requestedDir = new THREE.Vector3(1, 0, 0); // Move right (positive X) break; } // Prevent immediate 180-degree turns if (requestedDir && currentDir.dot(requestedDir) === 0) { nextDirection.copy(requestedDir); } } // --- Start --- init(); import { defineConfig } from 'vite'; export default defineConfig({ server: { // Configure server options if needed, e.g., port // port: 3000, open: true // Automatically open in browser }, build: { // Configure build options if needed } }); Next steps: 1. Install the dependencies: `npm install` 2. Start the development server: `npm start` This will set up the basic 3D snake game. You can control the snake with the arrow keys. Eating the red sphere increases your score and the snake's length, triggering a particle burst. Colliding with the boundaries or yourself ends the game. Press 'R' to restart.