How to Make a Snake Game Using HTML, CSS, and JavaScript?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Retro Snake</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
    <div class="game-container">
        <h1 class="game-title">Retro Snake Game</h1>
        <div class="info-bar">
            <button id="startBtn" onclick="start(this);">Start Game</button>
            <button onclick="game.toggle(this);">Pause</button>
            <div class="score-info">Level: <b id="level">0</b></div>
            <div class="score-info">Score: <b id="score">0</b></div>
        </div>
        <div id="gboard"></div>

<div id="gameOverModal" class="modal">
            <div class="modal-content">
                <h2>Game Over!</h2>
                <p id="finalScore"></p>
                <button onclick="hideGameOverModal()">Play Again</button>
            </div>
        </div>
    </div>

for (let i = 0; i < this.size * this.size; i++) {
                    const elem = document.createElement('div');
                    this.node.appendChild(elem);
                }
                // Set grid template columns dynamically based on size
                this.node.style.gridTemplateColumns = `repeat(${this.size}, 1fr)`;
            },
            // Applies a class to a specific cell
            applyClassToPoint: function (x, y, className) {
                if (x >= 0 && x < this.size && y >= 0 && y < this.size) {
                    this.node.childNodes[(y * this.size) + x].classList.add(className);
                }
            },
            // Removes a class from a specific cell
            removeClassFromPoint: function (x, y, className) {
                if (x >= 0 && x < this.size && y >= 0 && y < this.size) {
                    this.node.childNodes[(y * this.size) + x].classList.remove(className);
                }
            },
            // Displays a "glow" (snake body) point
            glowPoint: function (x, y) {
                this.applyClassToPoint(x, y, "snake-body");
            },
            // Hides a point (removes all snake-related classes)
            hidePoint: function (x, y) {
                const cell = this.node.childNodes[(y * this.size) + x];
                if (cell) {
                    cell.className = ""; // Remove all classes
                }
            },
            // Displays the food point
            foodPoint: function (x, y) {
                // Remove previous food class if it exists
                if (this.pointFood.x !== 0 || this.pointFood.y !== 0) {
                    this.removeClassFromPoint(this.pointFood.x, this.pointFood.y, "food");
                }
                this.applyClassToPoint(x, y, "food");
                this.pointFood.x = x;
                this.pointFood.y = y;
            },
            // Generates a new random food point
            newFoodPoint: function () {
                let x, y;
                let isPresentInSnake = true;
                while (isPresentInSnake) {
                    x = Math.floor(Math.random() * this.size);
                    y = Math.floor(Math.random() * this.size);
                    isPresentInSnake = snake.path.some(pt => pt.x === x && pt.y === y);
                }
                this.foodPoint(x, y);
            },
            // Clears all snake and food points from the board
            clear: function () {
                // Clear all cells
                for (let i = 0; i < this.size * this.size; i++) {
                    this.node.childNodes[i].className = "";
                }
            }
        };

// Snake Object
        var snake = {
            path: [],
            direction: 0, // 0=right, 1=down, 2=left, 3=up
            init: function () {
                this.direction = 0;
                // Initial position in the center-left of the board
                const x = Math.floor(gameBoard.size / 4);
                const y = Math.floor(gameBoard.size / 2);
                this.path = [
                    { x: x, y: y },
                    { x: x + 1, y: y },
                    { x: x + 2, y: y },
                    { x: x + 3, y: y },
                    { x: x + 4, y: y }
                ];
                this.renderSnake();
            },
            // Renders the entire snake path on the board
            renderSnake: function () {
                this.path.forEach((p, index) => {
                    if (index === this.path.length - 1) { // This is the head
                        gameBoard.applyClassToPoint(p.x, p.y, "snake-head");
                        gameBoard.removeClassFromPoint(p.x, p.y, "snake-body"); // Ensure head is not also body
                    } else { // This is a body segment
                        gameBoard.applyClassToPoint(p.x, p.y, "snake-body");
                        gameBoard.removeClassFromPoint(p.x, p.y, "snake-head"); // Ensure body is not also head
                    }
                });
            },
            // Calculates the next position of the snake's head
            nextPosition: function () {
                const curr = this.path[this.path.length - 1]; // Current head position
                const next = { x: curr.x, y: curr.y };
                switch (this.direction) {
                    case 0: next.x++; break; // Right
                    case 1: next.y++; break; // Down
                    case 2: next.x--; break; // Left
                    case 3: next.y--; break; // Up
                }
                return next;
            },
            // Moves the snake to the next position
            moveSnake: function (nxtPt, isFood = false) {
                // Clear the old head's class to become a body segment
                if (this.path.length > 0) {
                    const oldHead = this.path[this.path.length - 1];
                    gameBoard.removeClassFromPoint(oldHead.x, oldHead.y, "snake-head");
                    gameBoard.applyClassToPoint(oldHead.x, oldHead.y, "snake-body");
                }

if (!isFood) {
                    const tail = this.path.shift(); // Remove tail if no food eaten
                    gameBoard.hidePoint(tail.x, tail.y);
                }
                this.path.push(nxtPt); // Add new head
                gameBoard.applyClassToPoint(nxtPt.x, nxtPt.y, "snake-head"); // Mark new head
            }
        };

// Game Object
        var game = {
            speed: 250, // Slightly slower initial speed for better control and visibility
            level: 0,
            food: 0,
            intervalId: null,
            state: 0, // 0: not started, 1: running, 2: paused, 3: game over
            init: function () {
                this.speed = 250;
                this.level = 0;
                this.food = 0;
                this.state = 0;
                gameBoard.levelNode.textContent = 0;
                gameBoard.scoreNode.textContent = 0;
                snake.init();
                gameBoard.newFoodPoint();
                document.addEventListener("keydown", this.eventHandler);
                this.start();
            },
            // Main game loop function
            on: function () {
                const nextPt = snake.nextPosition();

// Check for collision with walls or self
                if (
                    nextPt.x < 0 || nextPt.x >= gameBoard.size ||
                    nextPt.y < 0 || nextPt.y >= gameBoard.size ||
                    snake.path.some((pt, index) => index < snake.path.length - 1 && pt.x === nextPt.x && pt.y === nextPt.y) // Collision with body (excluding current head)
                ) {
                    game.over();
                    return;
                }

// Check for food collision
                if (nextPt.x === gameBoard.pointFood.x && nextPt.y === gameBoard.pointFood.y) {
                    snake.moveSnake(nextPt, true); // Snake eats food
                    game.updateScore();
                    gameBoard.newFoodPoint();
                } else {
                    snake.moveSnake(nextPt); // Snake moves normally
                }
            },
            // Updates score and adjusts game speed/level
            updateScore: function () {
                this.food++;
                if (this.food > 5) { // Eat 6 food to level up
                    this.level++;
                    this.food = 0;
                    this.speed = Math.max(50, this.speed - 20); // Increase speed, but not faster than 50ms
                    gameBoard.levelNode.textContent = this.level;
                    clearInterval(this.intervalId);
                    this.intervalId = setInterval(this.on, this.speed);
                }
                gameBoard.scoreNode.textContent = (this.level * 1000) + (this.food * 100); // More points per food
            },
            // Handles game over state
            over: function () {
                clearInterval(this.intervalId);
                document.removeEventListener("keydown", this.eventHandler);
                const score = (this.level * 1000) + (this.food * 100);
                showGameOverModal(score); // Show custom game over modal
                document.getElementById("startBtn").disabled = false;
                this.state = 3;
            },
            // Pauses the game
            pause: function () {
                clearInterval(this.intervalId);
                this.state = 2;
            },
            // Starts/resumes the game
            start: function () {
                this.intervalId = setInterval(this.on, this.speed);
                this.state = 1;
            },
            // Toggles pause/play
            toggle: function (btn) {
                if (this.state === 0 || this.state === 3) return; // Cannot pause if not started or game over

if (this.state === 1) {
                    this.pause();
                    btn.textContent = "Play";
                } else if (this.state === 2) {
                    this.start();
                    btn.textContent = "Pause";
                }
            },
            // Handles keyboard input for snake direction
            eventHandler: function (e) {
                // Prevent default scrolling for arrow keys
                if ([37, 38, 39, 40].includes(e.keyCode)) {
                    e.preventDefault();
                }

const currentDirection = snake.direction;
                let newDirection = currentDirection;

switch (e.keyCode) {
                    case 37: // Left
                        if (currentDirection !== 0) newDirection = 2; // Can't go left if currently going right
                        break;
                    case 38: // Up
                        if (currentDirection !== 1) newDirection = 3; // Can't go up if currently going down
                        break;
                    case 39: // Right
                        if (currentDirection !== 2) newDirection = 0; // Can't go right if currently going left
                        break;
                    case 40: // Down
                        if (currentDirection !== 3) newDirection = 1; // Can't go down if currently going up
                        break;
                }
                // Only update if it's a valid non-opposite direction change
                if (newDirection !== currentDirection) {
                    snake.direction = newDirection;
                }
            }
        };

// Function to start a new game
        function start(btn) {
            gameBoard.init(); // Re-initialize game board (clears all)
            game.init();
            btn.disabled = true;
            document.querySelector('.info-bar button:nth-of-type(2)').textContent = "Pause"; // Reset Pause button text
        }

// Functions for the custom Game Over Modal
        function showGameOverModal(score) {
            document.getElementById('finalScore').textContent = 'Your Score: ' + score;
            document.getElementById('gameOverModal').style.display = 'flex';
        }

function hideGameOverModal() {
            document.getElementById('gameOverModal').style.display = 'none';
        }

// Initialize the game board on page load
        document.addEventListener('DOMContentLoaded', () => {
            gameBoard.init();
        });
    </script>
    
</body>
</html>

/* Basic Reset and Global Styles */
body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #2c3e50, #34495e); /* Darker, more sophisticated background */
    color: #ecf0f1;
    overflow: hidden; /* Prevent scrolling if board is slightly larger than viewport */
}

.game-container {
    background-color: #2b2b2b; /* Darker container background */
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 0 5px rgba(0, 0, 0, 0.2); /* Enhanced shadow */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    border: 2px solid #555;
    transform: scale(0.95); /* Slightly scale down for a more compact look */
    transition: transform 0.3s ease-in-out;
}

.game-container:hover {
    transform: scale(1); /* Slight hover effect */
}

.game-title {
    font-size: 2.5em;
    color: #e74c3c; /* Vibrant title color */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
    margin-bottom: 15px;
    letter-spacing: 2px;
}

/* Info bar styling */
.info-bar {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    font-size: 1.2em;
    background-color: #34495e;
    border-radius: 8px;
    padding: 10px 20px;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.3);
}

.info-bar button {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 1em;
    cursor: pointer;
    background: linear-gradient(145deg, #2ecc71, #27ae60); /* Green gradient for buttons */
    color: white;
    font-weight: bold;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    outline: none;
}

.info-bar button:hover {
    background: linear-gradient(145deg, #27ae60, #2ecc71);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

.info-bar button:active {
    transform: translateY(1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.info-bar button:disabled {
    background: #555;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.score-info {
    color: #f1c40f; /* Yellow for score/level */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* Game board container */
#gboard {
    width: 600px; /* Adjust size to fit 30x30 cells * 20px/cell */
    height: 600px;
    display: grid;
    border: 5px solid #2980b9; /* Stronger border for the game area */
    border-radius: 10px;
    overflow: hidden; /* Ensures snake/food stay within bounds */
    background-color: #212121; /* Darker grid background */
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.6);
}

/* Game board cells */
#gboard div {
    width: 100%; /* Make cells fill the grid space */
    height: 100%;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.03); /* Subtle grid lines */
    border: 0.5px solid rgba(0, 0, 0, 0.1); /* Even subtler dark border */
    transition: background-color 0.1s ease-in-out, transform 0.1s ease-in-out;
}

/* Snake body segment */
#gboard div.snake-body {
    background-color: #27ae60; /* A pleasant green */
    border-radius: 3px; /* Slightly rounded corners for body segments */
    transform: scale(0.9); /* Slightly smaller to give a gap effect */
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
}

/* Snake head segment */
#gboard div.snake-head {
    background-color: #e74c3c; /* Red for the head */
    border-radius: 50%; /* Fully round head */
    transform: scale(0.95); /* Slightly larger than body */
    box-shadow: 0 0 10px #e74c3c, inset 0 0 5px rgba(255, 255, 255, 0.5);
    position: relative; /* For eyes or other head details */
    animation: head-pulse 0.8s infinite alternate;
}

/* Optional: Add snake eyes for more character */
#gboard div.snake-head::before,
#gboard div.snake-head::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background-color: white;
    border-radius: 50%;
    top: 30%; /* Adjust based on cell size */
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

/* Position eyes based on direction (example for right-facing) */
#gboard div.snake-head { /* Default eyes for right direction */
    transform: rotate(0deg);
}

/* You'd need JS to dynamically add a class like .direction-left, .direction-up etc. to rotate the head */
/* For simplicity, I'm omitting dynamic eye rotation for now, but it's possible with JS */

#gboard div.snake-head::before {
    left: 20%;
}
#gboard div.snake-head::after {
    right: 20%;
}

@keyframes head-pulse {
    0% { transform: scale(0.95); }
    100% { transform: scale(1.05); }
}

/* Food cell */
#gboard div.food {
    background-color: #f1c40f; /* Vibrant yellow */
    border-radius: 50%; /* Perfectly round food */
    animation: food-pulse 1s infinite alternate, food-grow 0.5s ease-out forwards; /* Two animations */
    box-shadow: 0 0 15px #f1c40f; /* Glow effect */
    position: relative;
    z-index: 10; /* Ensure food is on top */
}

/* Food pulsing animation */
@keyframes food-pulse {
    0% {
        opacity: 0.7;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Food "pop-in" animation when it appears */
@keyframes food-grow {
    from { transform: scale(0); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Custom Modal for Game Over */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: #34495e; /* Darker blue background */
    margin: auto;
    padding: 40px;
    border: 5px solid #e74c3c; /* Red border */
    border-radius: 20px;
    width: 80%;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
    animation: modal-pop 0.3s ease-out;
}

.modal-content h2 {
    color: #f1c40f;
    font-size: 2.5em;
    margin-bottom: 20px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

.modal-content p {
    font-size: 1.5em;
    color: #ecf0f1;
    margin-bottom: 30px;
}

.modal-content button {
    padding: 12px 25px;
    border: none;
    border-radius: 10px;
    font-size: 1.2em;
    cursor: pointer;
    background: linear-gradient(145deg, #2ecc71, #27ae60);
    color: white;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    outline: none;
}

.modal-content button:hover {
    background: linear-gradient(145deg, #27ae60, #2ecc71);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
}

.modal-content button:active {
    transform: translateY(1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .game-container {
        padding: 20px;
        width: 95%;
    }

.game-title {
        font-size: 2em;
    }

.info-bar {
        flex-direction: column;
        gap: 10px;
        padding: 10px;
    }

.info-bar button {
        width: 100%;
        margin-bottom: 5px;
    }

#gboard {
        width: 90vw; /* Use viewport width for responsiveness */
        height: 90vw; /* Keep it square */
        max-width: 400px; /* Set a max width for smaller screens */
        max-height: 400px;
    }

.modal-content {
        width: 90%;
        padding: 25px;
    }

.modal-content h2 {
        font-size: 2em;
    }

.modal-content p {
        font-size: 1.2em;
    }
}

@keyframes modal-pop {
    from {
        transform: scale(0.7);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

Live Preview

Ready Ln 1, Col 1

UTF-8 HTML/JS

Are you looking to learn web game development? Or perhaps you want to build a classic Snake game that rivals the nostalgia of the original Nokia version, right in your web browser? You’ve come to the right place! This comprehensive guide will walk you through creating your own Snake game using HTML, CSS, and JavaScript.

This isn’t just a tutorial; it’s an interactive learning experience. We’ve provided the full, runnable code directly within this post. You can check the code for learning free, make edits or change anything there, and see the changes in the code preview section. Even better, if you just want to play this game here, you can do so free of cost!

Why Develop a Snake Game with Front-End Technologies?

Building a Snake game is an excellent front-end game development project for aspiring developers. It brilliantly demonstrates core web development concepts:

HTML Structure for Games: Understanding how to lay out the game board and information displays.
CSS Game Styling: Transforming basic HTML elements into a visually engaging game environment.
JavaScript Game Logic: Implementing the game’s rules, movement, collision detection, and score tracking.
DOM Manipulation for Interactive Games: Dynamically updating the webpage in response to game events.
Event Handling in JavaScript: Capturing user input (like keyboard presses) for game control.

This project not only helps you learn game development with JavaScript but also solidifies your understanding of how HTML, CSS, and JavaScript work together in real-world applications.

Essential Components for Your Web-Based Snake Game

Every great web-based game starts with a solid foundation. Here’s what we’ll cover to code your Snake game:

HTML Structure: The Foundation of Your Retro Snake Game

The index.html file acts as the blueprint for our game. It sets up the main container, the actual grid where the snake will move, and dedicated sections for displaying the player’s score and level. We’ve also included user-friendly buttons for game control and a custom “Game Over” message for a better player experience.

CSS Styling: Bringing Your Classic Snake Game to Life

The style.css file is where we inject visual flair into our HTML5 Snake game. We’ll use modern CSS techniques to:

Style the Snake: Create distinct, visually appealing segments for the snake’s body and a special look for its head, making movement appear smoother.
Design the Food: Make the food item pop with vibrant colors and engaging animations.
Craft the Game Board: Implement a visually pleasing grid background and border for the playing area.
Enhance UI Elements: Style the “Start Game” and “Pause” buttons with modern aesthetics, including gradients and hover effects.
Ensure Responsiveness: Optimize the game’s layout for seamless play across various devices, from desktops to mobile phones.

This CSS is crucial for a colorful and attractive Snake game experience, moving far beyond a basic, plain layout.

JavaScript Logic: Making Your Snake Game Playable

The JavaScript code is the engine behind our interactive Snake game. Embedded within index.html, it manages all the core game mechanics:

Game Initialization: Setting up the snake’s initial position and generating the first food item.
Snake Movement: Handling directional changes and moving the snake across the grid.
Collision Detection: Crucial logic to determine if the snake hits the game boundaries or itself, leading to a “Game Over.”
Score and Level Management: Updating the player’s score and increasing the game’s difficulty (speed) as more food is eaten.
Game State Control: Allowing players to start, pause, and resume the game.
Custom Game Over Screen: Displaying a personalized end-game message with the final score.

This robust JavaScript ensures your Snake game is not just functional but also engaging and challenging.

Ready to Code and Play? Your Interactive Snake Game Awaits!

We’ve provided the complete source code for our enhanced Snake game right here. This setup is perfect for both learning web development hands-on and simply enjoying a round of Snake.

You’ll find the HTML and JavaScript combined in one tab, and the CSS in another.

`index.html` (HTML Structure & JavaScript Logic)

`style.css` (CSS Styling)

Experience the Game Live:

Now for the best part! You can play this classic Snake game online free and see all the code’s effects firsthand.

(Here, the interactive preview will be displayed, as in the image provided by the user.)

Don’t just play – experiment!

Explore the Code: Dive into the HTML/JS and CSS tabs to see exactly how every part of the game is built.
Modify and Learn: Change the snake’s colors, adjust the game speed, or even alter the game board size directly in the code editor. Watch your modifications instantly appear in the “Live Preview.” This hands-on approach is fantastic for learning HTML, CSS, and JavaScript for games.
Play Instantly: Hit the “Start Game” button and enjoy your free Snake game right in your browser!

Conclusion: Your Journey into Web Game Development Starts Here

Building a Snake game is more than just a fun coding exercise; it’s a practical way to grasp essential front-end development skills. By working through this project, you’ve gained valuable experience in HTML, CSS, and JavaScript that you can apply to countless other web applications and games.

We hope this interactive guide has been helpful in your journey to create web games. Keep coding, keep experimenting, and happy snaking!

This code was created by Free Of Costs.

Snake Game Using HTML, CSS, and JavaScript.

Published on August 14, 2025, featuring interactive HTML, advanced CSS styling, and dynamic JavaScript functionality.

This code is licensed under MIT. Free to use for personal and commercial projects. No warranty included.

All code on Freeofcosts.com is reviewed before publishing. We may add comments to help users understand better. Each post includes a live code editor with real-time preview, so you can experiment and learn by doing. Most code is open-source and free to use or modify under respective licenses.