Classic Retro Snake Game (HTML, CSS, JS)

Snake on a fixed grid. Arrow keys steer, food adds a segment, and hitting a wall or your own tail ends the run.

The snake is stored as an array of coordinates. Each tick pushes a new head onto the front and pops the tail off the back, unless food was just eaten. That one trick handles movement and growth together, without tracking segments separately.

Speed is a setInterval delay near the top of the script, so lower it for a harder game. Food placement retries until it lands on a square the snake is not already sitting on.

881

#javascript

#html

#css

#snake game

#retro game

#classic game

#arcade game

#2d game

#canvas game

#online game

#browser game

#simple game

#keyboard controls

Run /HTML *CSS ()JS Output Console0 Live Updates Focus

/* ==== 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
        if (snake !== undefined) snake.forEach(segment => drawRect(segment.x, segment.y, gridSize - 1, gridSize - 1, SNAKE_COLOR));

// Draw food
        if (food !== undefined) 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
});

Classic Retro Snake Game (HTML, CSS, JS)

Share Code Snippet