Classic Retro Snake Game (HTML, CSS, JS)

Build your own iconic Classic Retro Snake game with this comprehensive HTML, CSS, and JavaScript code snippet. This tutorial example provides all the source code needed to develop the timeless arcade experience where players guide a snake to eat food and grow. Ideal for learning basic game mechanics and canvas rendering in JavaScript.

#javascript

#html

#css

#snake game

#retro game

#classic game

#arcade game

#2d game

#canvas game

#online game

#browser game

#simple game

#keyboard controls

/HTML *CSS ()JS Output Live Updates

/* ==== Retro Snake Game Styles ==== */
body.rsg-active-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-family: "Press Start 2P", cursive, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: #1a1a2e; /* Dark blue retro background */
  color: #e0e0e0;
  margin: 0;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
  image-rendering: pixelated; 
}

/* Import Retro Font */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

.rsg-game-container {
  background-color: #0d0d1a;
  padding: 20px;
  border-radius: 8px;
  border: 3px solid #303050;
  box-shadow: 0 0 20px rgba(70, 70, 200, 0.4), inset 0 0 10px rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rsg-title {
  font-size: 2.2rem;
  color: #66ff66; /* Bright green */
  margin-top: 0;
  margin-bottom: 15px;
  text-shadow: 3px 3px #008000;
}

.rsg-info-bar {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 400px; /* Canvas width */
  margin-bottom: 10px;
  font-size: 0.9rem;
  color: #dddddd;
}

.rsg-score-display, .rsg-high-score-display {
  padding: 5px 10px;
  background-color: rgba(40,40,70,0.5);
  border-radius: 4px;
}

#rsgGameCanvas {
  background-color: #000000;
  border: 2px solid #66ff66;
  /* Dimensions will be set by JavaScript */
}

.rsg-button {
  background-color: #4CAF50; /* Green button */
  color: #ffffff;
  border: 2px solid #81C784;
  padding: 12px 25px;
  font-family: "Press Start 2P", cursive;
  font-size: 1rem;
  cursor: pointer;
  margin-top: 20px;
  text-transform: uppercase;
  transition: background-color 0.2s, box-shadow 0.2s;
  box-shadow: 0 0 8px rgba(76, 175, 80, 0.6);
}

.rsg-button:hover {
  background-color: #66BB6A;
  box-shadow: 0 0 12px rgba(102, 187, 106, 0.8);
}

.rsg-button:active {
  background-color: #388E3C;
  transform: translateY(1px);
}

.rsg-instructions {
  font-size: 0.8rem;
  color: #bbbbff;
  margin-top: 15px;
}

.rsg-game-over-message {
  font-size: 1.8rem;
  color: #ff4444; /* Red for game over */
  margin-top: 15px;
  font-weight: bold;
  text-shadow: 2px 2px #aa0000;
}

document.addEventListener('DOMContentLoaded', function() {
    const canvas = document.getElementById('rsgGameCanvas');
    const ctx = canvas.getContext('2d');
    const startButton = document.getElementById('rsgStartButton');
    const scoreEl = document.getElementById('rsgScore');
    const highScoreEl = document.getElementById('rsgHighScore');
    const gameOverMessageEl = document.getElementById('rsgGameOverMessage');
    const instructionsEl = document.getElementById('rsgInstructions');

// Add class to body for specific page styling
    if (document.querySelector('.rsg-game-container')) {
        document.body.classList.add('rsg-active-page');
    }

const gridSize = 20; // Size of each grid cell (and snake segment/food)
    canvas.width = 400;
    canvas.height = 400;
    const tileCountX = canvas.width / gridSize;
    const tileCountY = canvas.height / gridSize;

let snake, food, score, highScore, dx, dy, gameLoopTimeout, gameRunning;
    const SNAKE_COLOR = '#33cc33';
    const FOOD_COLOR = '#ff6347'; // Tomato red
    const INITIAL_SPEED = 150; // Milliseconds per update, lower is faster
    let currentSpeed = INITIAL_SPEED;

function initGame() {
        snake = [{ x: Math.floor(tileCountX / 2), y: Math.floor(tileCountY / 2) }]; // Start in middle
        dx = 1; // Initial direction: right
        dy = 0;
        score = 0;
        currentSpeed = INITIAL_SPEED;
        highScore = localStorage.getItem('rsgHighScore') || 0;
        updateScoreDisplay();
        spawnFood();
        gameRunning = true;
        gameOverMessageEl.style.display = 'none';
        startButton.textContent = 'Restart Game';
        startButton.style.display = 'none'; // Hide during gameplay
        instructionsEl.style.display = 'block';
        if (gameLoopTimeout) clearTimeout(gameLoopTimeout);
        gameLoop();
    }

function updateScoreDisplay() {
        scoreEl.textContent = score;
        highScoreEl.textContent = highScore;
    }

function drawRect(x, y, w, h, color) {
        ctx.fillStyle = color;
        ctx.fillRect(x * gridSize, y * gridSize, w, h);
    }

function drawGame() {
        // Clear canvas
        ctx.fillStyle = '#000000';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

// Draw snake
        snake.forEach(segment => drawRect(segment.x, segment.y, gridSize - 1, gridSize - 1, SNAKE_COLOR));

// Draw food
        drawRect(food.x, food.y, gridSize -1 , gridSize -1, FOOD_COLOR);
    }

function moveSnake() {
        const head = { x: snake[0].x + dx, y: snake[0].y + dy };
        snake.unshift(head); // Add new head

// Check if snake ate food
        if (head.x === food.x && head.y === food.y) {
            score++;
            if (score > highScore) {
                highScore = score;
                localStorage.setItem('rsgHighScore', highScore);
            }
            updateScoreDisplay();
            spawnFood();
            // Increase speed slightly
            if (currentSpeed > 60) currentSpeed -= 3; // Speed up, but cap it
        } else {
            snake.pop(); // Remove tail if no food eaten
        }
    }

function gameOver() {
        gameRunning = false;
        gameOverMessageEl.style.display = 'block';
        startButton.textContent = 'Play Again';
        startButton.style.display = 'block';
        instructionsEl.style.display = 'none';
    }

function gameLoop() {
        if (!gameRunning) return;

moveSnake();
        if (checkCollision()) {
            gameOver();
            return;
        }
        drawGame();

gameLoopTimeout = setTimeout(gameLoop, currentSpeed);
    }

startButton.addEventListener('click', initGame);

// Initialize display of high score on page load
    highScoreEl.textContent = localStorage.getItem('rsgHighScore') || 0;
    drawGame(); // Draw initial empty board or placeholder state
});