Snake Game HTML CSS

Open In Editor Publish Your Code Need a Website?

<!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

HTML CSS Contact Form

Free Simple HTML Login Form

CSS Radio Button Navigation Menu

HTML

CSS

JS

Recommended

HTML CSS Contact Form

Free Simple HTML Login Form

CSS Radio Button Navigation Menu

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS