Modern Snake Game

Okay, let's build a modern Snake game with HTML, CSS, and JavaScript. Modern Snake Game

Score: 0

Modern Snake

body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #1a1a2e, #16213e); margin: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: #e0e0e0; overflow: hidden; /* Prevent scrollbars */ } .game-container { position: relative; border-radius: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); background-color: #0f172a; padding: 20px; display: flex; flex-direction: column; align-items: center; } .score-board { font-size: 1.5em; margin-bottom: 15px; color: #a0aec0; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } #score { font-weight: bold; color: #48bb78; /* Green */ } canvas { border: 5px solid #2d3748; background-color: #1a202c; display: block; border-radius: 10px; box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5); } .game-over, .start-screen { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(15, 23, 42, 0.9); /* #0f172a with opacity */ padding: 30px 40px; border-radius: 10px; text-align: center; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); z-index: 10; color: #e2e8f0; } .game-over h2, .start-screen h2 { margin-top: 0; color: #f56565; /* Red */ margin-bottom: 10px; } .start-screen h2 { color: #48bb78; /* Green */ } .game-over p { margin-bottom: 20px; font-size: 1.2em; } #finalScore { font-weight: bold; color: #48bb78; /* Green */ } button { padding: 12px 25px; font-size: 1em; color: #fff; background: linear-gradient(135deg, #4299e1, #3182ce); /* Blue gradient */ border: none; border-radius: 8px; cursor: pointer; transition: background 0.3s ease, transform 0.1s ease; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); } button:hover { background: linear-gradient(135deg, #3182ce, #2b6cb0); } button:active { transform: scale(0.98); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .hidden { display: none; } const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); const scoreElement = document.getElementById('score'); const gameOverScreen = document.getElementById('gameOver'); const finalScoreElement = document.getElementById('finalScore'); const restartButton = document.getElementById('restartButton'); const startScreen = document.getElementById('startScreen'); const startButton = document.getElementById('startButton'); const gridSize = 20; const canvasSize = 400; const tileCount = canvasSize / gridSize; let snake = [{ x: 10, y: 10 }]; // Start position let food = { x: 15, y: 15 }; let dx = 0; // Direction x let dy = 0; // Direction y let score = 0; let changingDirection = false; let gameSpeed = 120; // Milliseconds per frame update let gameLoopTimeout; let isGameOver = false; let isGameStarted = false; // --- Drawing Functions --- function drawRect(x, y, width, height, color) { ctx.fillStyle = color; ctx.fillRect(x * gridSize, y * gridSize, width, height); } function drawSnakePart(part, index) { const headGradient = ctx.createLinearGradient( part.x * gridSize, part.y * gridSize, (part.x + 1) * gridSize, (part.y + 1) * gridSize ); headGradient.addColorStop(0, '#48bb78'); // Lighter green headGradient.addColorStop(1, '#38a169'); // Darker green const bodyGradient = ctx.createLinearGradient( part.x * gridSize, part.y * gridSize, (part.x + 1) * gridSize, (part.y + 1) * gridSize ); bodyGradient.addColorStop(0, '#68d391'); // Lighter body green bodyGradient.addColorStop(1, '#48bb78'); // Darker body green ctx.fillStyle = index === 0 ? headGradient : bodyGradient; ctx.strokeStyle = '#2f855a'; // Dark green border ctx.lineWidth = 2; // Rounded rectangle effect const cornerRadius = 5; const xPos = part.x * gridSize; const yPos = part.y * gridSize; const size = gridSize; ctx.beginPath(); ctx.moveTo(xPos + cornerRadius, yPos); ctx.lineTo(xPos + size - cornerRadius, yPos); ctx.quadraticCurveTo(xPos + size, yPos, xPos + size, yPos + cornerRadius); ctx.lineTo(xPos + size, yPos + size - cornerRadius); ctx.quadraticCurveTo(xPos + size, yPos + size, xPos + size - cornerRadius, yPos + size); ctx.lineTo(xPos + cornerRadius, yPos + size); ctx.quadraticCurveTo(xPos, yPos + size, xPos, yPos + size - cornerRadius); ctx.lineTo(xPos, yPos + cornerRadius); ctx.quadraticCurveTo(xPos, yPos, xPos + cornerRadius, yPos); ctx.closePath(); ctx.fill(); ctx.stroke(); } function drawSnake() { snake.forEach(drawSnakePart); } function drawFood() { const gradient = ctx.createRadialGradient( (food.x + 0.5) * gridSize, (food.y + 0.5) * gridSize, gridSize * 0.1, (food.x + 0.5) * gridSize, (food.y + 0.5) * gridSize, gridSize * 0.5 ); gradient.addColorStop(0, '#fbd38d'); // Light orange/yellow gradient.addColorStop(1, '#f56565'); // Red ctx.fillStyle = gradient; ctx.strokeStyle = '#c53030'; // Dark red border ctx.lineWidth = 1; // Draw a slightly rounded square for food const cornerRadius = 3; const xPos = food.x * gridSize; const yPos = food.y * gridSize; const size = gridSize; ctx.beginPath(); ctx.moveTo(xPos + cornerRadius, yPos); ctx.lineTo(xPos + size - cornerRadius, yPos); ctx.quadraticCurveTo(xPos + size, yPos, xPos + size, yPos + cornerRadius); ctx.lineTo(xPos + size, yPos + size - cornerRadius); ctx.quadraticCurveTo(xPos + size, yPos + size, xPos + size - cornerRadius, yPos + size); ctx.lineTo(xPos + cornerRadius, yPos + size); ctx.quadraticCurveTo(xPos, yPos + size, xPos, yPos + size - cornerRadius); ctx.lineTo(xPos, yPos + cornerRadius); ctx.quadraticCurveTo(xPos, yPos, xPos + cornerRadius, yPos); ctx.closePath(); ctx.fill(); ctx.stroke(); } // --- Game Logic --- function moveSnake() { const head = { x: snake[0].x + dx, y: snake[0].y + dy }; snake.unshift(head); // Add new head // Check if food is eaten if (head.x === food.x && head.y === food.y) { score += 10; scoreElement.textContent = score; placeFood(); // Optionally increase speed slightly // gameSpeed = Math.max(50, gameSpeed - 2); } else { snake.pop(); // Remove tail if no food eaten } } function placeFood() { let newFoodPosition; do { newFoodPosition = { x: Math.floor(Math.random() * tileCount), y: Math.floor(Math.random() * tileCount) }; } while (snake.some(part => part.x === newFoodPosition.x && part.y === newFoodPosition.y)); // Ensure food isn't on snake food = newFoodPosition; } function checkCollision() { const head = snake[0]; // Wall collision if (head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount) { return true; } // Self collision (check against parts other than the head) for (let i = 4; i < snake.length; i++) { if (head.x === snake[i].x && head.y === snake[i].y) { return true; } } return false; } function changeDirection(event) { if (changingDirection || !isGameStarted || isGameOver) return; changingDirection = true; const keyPressed = event.key; const goingUp = dy === -1; const goingDown = dy === 1; const goingLeft = dx === -1; const goingRight = dx === 1; if ((keyPressed === 'ArrowLeft' || keyPressed === 'a') && !goingRight) { dx = -1; dy = 0; } else if ((keyPressed === 'ArrowUp' || keyPressed === 'w') && !goingDown) { dx = 0; dy = -1; } else if ((keyPressed === 'ArrowRight' || keyPressed === 'd') && !goingLeft) { dx = 1; dy = 0; } else if ((keyPressed === 'ArrowDown' || keyPressed === 's') && !goingUp) { dx = 0; dy = 1; } else { // If invalid key or reversing direction, don't change changingDirection = false; // Allow next input immediately if invalid } } function clearCanvas() { ctx.fillStyle = '#1a202c'; // Background color matching CSS ctx.fillRect(0, 0, canvasSize, canvasSize); } function gameOver() { isGameOver = true; clearTimeout(gameLoopTimeout); // Stop the game loop finalScoreElement.textContent = score; gameOverScreen.classList.remove('hidden'); canvas.style.opacity = '0.5'; // Dim the canvas } function resetGame() { snake = [{ x: 10, y: 10 }]; food = { x: 15, y: 15 }; dx = 0; dy = 0; score = 0; scoreElement.textContent = score; changingDirection = false; isGameOver = false; isGameStarted = false; // Reset start flag gameSpeed = 120; gameOverScreen.classList.add('hidden'); startScreen.classList.remove('hidden'); // Show start screen again canvas.style.opacity = '1'; clearCanvas(); // Clear canvas for the start screen view drawFood(); // Draw initial food for visual cue if needed (optional) // Don't draw snake until game starts } function gameLoop() { if (isGameOver) return; // Reset changingDirection flag after a short delay or based on game speed // This allows changing direction once per game tick/frame setTimeout(() => { changingDirection = false; }, gameSpeed / 2); clearCanvas(); drawFood(); moveSnake(); if (checkCollision()) { gameOver(); return; // Stop loop execution on game over } drawSnake(); // Schedule next game loop iteration gameLoopTimeout = setTimeout(gameLoop, gameSpeed); } function startGame() { if (isGameStarted) return; // Prevent multiple starts isGameStarted = true; isGameOver = false; // Ensure game over is false dx = 1; // Start moving right by default dy = 0; startScreen.classList.add('hidden'); canvas.style.opacity = '1'; placeFood(); // Place initial food gameLoop(); // Start the main game loop } // --- Event Listeners --- document.addEventListener('keydown', changeDirection); restartButton.addEventListener('click', resetGame); startButton.addEventListener('click', startGame); // --- Initial Setup --- // Show start screen initially clearCanvas(); // Clear canvas for a clean start view // Optionally draw initial food on start screen // drawFood(); Now you have the basic structure. Open the `index.html` file in your browser. Click "Start Game" and use the arrow keys (or WASD) to control the snake. Eat the food to grow and increase your score. The game ends if you hit the wall or yourself. Click "Restart" to play again.

Game Over!

Modern Snake