Snake Game HTML CSS

Open In Editor Publish Your Code

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Snake Game</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            margin: 0;
            background-color: #282c34; /* Dark background */
            color: #ffffff;
            font-family: 'Arial', sans-serif;
            overflow: hidden; /* Prevent scrollbars */
        }

h1 {
            color: #61dafb; /* Light blue for title */
            margin-bottom: 20px;
        }

canvas {
            background-color: #1a1a1a; /* Darker background for game area */
            border: 5px solid #61dafb; /* Light blue border */
            display: block; /* Remove extra space below canvas */
        }

#score {
            margin-top: 20px;
            font-size: 1.5em;
            color: #a0a0a0; /* Grey for score */
        }

.game-over-message {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent black overlay */
            padding: 30px;
            border-radius: 10px;
            text-align: center;
            font-size: 2em;
            color: #ff4d4d; /* Red for game over text */
            border: 2px solid #ff4d4d;
            display: none; /* Hidden by default */
            z-index: 10; /* Ensure it's above canvas */
        }

.game-over-message p {
            font-size: 0.8em;
            color: #ffffff;
            margin-top: 10px;
            margin-bottom: 20px;
        }

.game-over-message button {
            padding: 10px 20px;
            font-size: 1em;
            background-color: #61dafb; /* Light blue button */
            color: #1a1a1a; /* Dark text for button */
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

.game-over-message button:hover {
            background-color: #4fa3d7; /* Darker blue on hover */
        }
    </style>
</head>
<body>
    <h1>Snake Game</h1>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <div id="score">Score: 0</div>

<div class="game-over-message" id="gameOverMessage">
        Game Over!
        <p>Your Score: <span id="finalScore">0</span></p>
        <button onclick="window.location.reload()">Play Again</button>
    </div>

// Function to draw a single segment (snake part or food)
        function drawSegment(segment, color) {
            ctx.fillStyle = color;
            ctx.strokeStyle = '#1a1a1a'; // Border for segments
            ctx.fillRect(segment.x, segment.y, segmentSize, segmentSize);
            ctx.strokeRect(segment.x, segment.y, segmentSize, segmentSize);
        }

// Function to draw the entire snake
        function drawSnake() {
            snake.forEach((segment, index) => {
                const color = (index === 0) ? '#4CAF50' : '#8BC34A'; // Head green, body lighter green
                drawSegment(segment, color);
            });
        }

// Function to generate food at a random position
        function generateFood() {
            const maxX = (canvas.width / segmentSize) - 1;
            const maxY = (canvas.height / segmentSize) - 1;

food = {
                x: Math.floor(Math.random() * (maxX + 1)) * segmentSize,
                y: Math.floor(Math.random() * (maxY + 1)) * segmentSize
            };

// Ensure food does not spawn on the snake
            for (let i = 0; i < snake.length; i++) {
                if (food.x === snake[i].x && food.y === snake[i].y) {
                    generateFood(); // Regenerate if overlapping
                    return;
                }
            }
        }

// Function to draw the food
        function drawFood() {
            drawSegment(food, '#FF5722'); // Food color: orange-red
        }

// Function to clear the canvas
        function clearCanvas() {
            ctx.fillStyle = '#1a1a1a'; // Canvas background color
            ctx.fillRect(0, 0, canvas.width, canvas.height);
        }

// Function to move the snake forward
        function advanceSnake() {
            // Create the new head of the snake
            const head = { x: snake[0].x + dx, y: snake[0].y + dy };

// Check for collision before adding the new head
            if (checkCollision(head)) {
                endGame();
                return;
            }

snake.unshift(head); // Add the new head to the beginning of the snake array

// Function to check for collision with walls or itself
        function checkCollision(head) {
            // Check wall collision
            const hitLeftWall = head.x < 0;
            const hitRightWall = head.x >= canvas.width;
            const hitTopWall = head.y < 0;
            const hitBottomWall = head.y >= canvas.height;

if (hitLeftWall || hitRightWall || hitTopWall || hitBottomWall) {
                return true;
            }

// Check self collision (start from 4th segment to avoid immediate collision with neck)
            for (let i = 4; i < snake.length; i++) {
                if (head.x === snake[i].x && head.y === snake[i].y) {
                    return true;
                }
            }
            return false;
        }

// Function to handle direction changes based on arrow key presses
        function changeDirection(event) {
            // Prevent multiple direction changes per game frame
            if (changingDirection) return;
            changingDirection = true;

const keyPressed = event.keyCode;
            const LEFT_KEY = 37;
            const UP_KEY = 38;
            const RIGHT_KEY = 39;
            const DOWN_KEY = 40;

const goingUp = dy === -segmentSize;
            const goingDown = dy === segmentSize;
            const goingRight = dx === segmentSize;
            const goingLeft = dx === -segmentSize;

if (keyPressed === LEFT_KEY && !goingRight) {
                dx = -segmentSize;
                dy = 0;
            }
            if (keyPressed === UP_KEY && !goingDown) {
                dx = 0;
                dy = -segmentSize;
            }
            if (keyPressed === RIGHT_KEY && !goingLeft) {
                dx = segmentSize;
                dy = 0;
            }
            if (keyPressed === DOWN_KEY && !goingUp) {
                dx = 0;
                dy = segmentSize;
            }
        }

// Main game loop
        function mainGameLoop() {
            // If game over message is displayed, stop the game loop
            if (gameOverMessage.style.display === 'block') {
                clearInterval(gameInterval);
                return;
            }

changingDirection = false; // Reset flag for next frame's input
            clearCanvas();
            drawFood();
            advanceSnake();
            drawSnake();
        }

// Function to start the game
        function startGame() {
            generateFood();
            document.addEventListener('keydown', changeDirection);
            gameInterval = setInterval(mainGameLoop, gameSpeed);
        }

// Function to end the game
        function endGame() {
            clearInterval(gameInterval); // Stop the game loop
            finalScoreDisplay.textContent = score; // Display final score
            gameOverMessage.style.display = 'block'; // Show game over message
            document.removeEventListener('keydown', changeDirection); // Stop listening for input
        }

// Initial call to start the game when the page loads
        startGame();

</script>
</body>
</html>

Snake Game HTML CSS

Recommended

Starbucks HTML Website Template

Architecture & Design Website with Tailwind CSS

Responsive CSS Card

HTML

CSS

JS

Recommended

Starbucks HTML Website Template

Architecture & Design Website with Tailwind CSS

Responsive CSS Card

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS