Retro Snake

HTML

CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: #1a1a2e;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    color: #fff;
}

.game-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.score-board {
    display: flex;
    justify-content: space-between;
    width: 400px;
    margin-bottom: 15px;
}

.score-box {
    background-color: #16213e;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 1.1rem;
    font-weight: bold;
    border: 1px solid #0f3460;
}

canvas {
    background-color: #0f3460;
    border: 4px solid #e94560;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

#game-over-message {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(233, 69, 96, 0.95);
    padding: 15px 25px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 1.2rem;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: opacity 0.3s ease;
}

.hidden {
    display: none !important;
}

JS

const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
const currentScoreDoc = document.getElementById("current-score");
const highScoreDoc = document.getElementById("high-score");
const gameOverMessage = document.getElementById("game-over-message");

// Grid and game dimensions
const gridSize = 20; 
const tileCount = canvas.width / gridSize;

// Game state variables
let snake = [];
let food = { x: 0, y: 0 };
let dx = gridSize; // horizontal velocity
let dy = 0;        // vertical velocity
let score = 0;
let highScore = localStorage.getItem("snakeHighScore") || 0;
let gameInterval;
let isGameOver = false;
let changingDirection = false; // Prevents fast double-taps from reversing into self

highScoreDoc.textContent = highScore;

// Initialize and start the game
resetGame();

function gameLoop() {
    if (hasGameEnded()) {
        isGameOver = true;
        gameOverMessage.classList.remove("hidden");
        clearInterval(gameInterval);
        if (score > highScore) {
            highScore = score;
            localStorage.setItem("snakeHighScore", highScore);
            highScoreDoc.textContent = highScore;
        }
        return;
    }

changingDirection = false;
    clearCanvas();
    drawFood();
    moveSnake();
    drawSnake();
}

function clearCanvas() {
    ctx.fillStyle = "#0f3460";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
}

function drawSnake() {
    snake.forEach((part, index) => {
        // Head is neon green, body segments are slightly lighter green
        ctx.fillStyle = index === 0 ? "#4e9f3d" : "#1e5128";
        ctx.strokeStyle = "#0f3460";
        ctx.fillRect(part.x, part.y, gridSize, gridSize);
        ctx.strokeRect(part.x, part.y, gridSize, gridSize);
    });
}

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

// Check if snake ate the food
    const hasEatenFood = snake[0].x === food.x && snake[0].y === food.y;
    if (hasEatenFood) {
        score += 10;
        currentScoreDoc.textContent = score;
        generateFood();
    } else {
        // Remove the tail if it didn't eat food to maintain length
        snake.pop();
    }
}

function generateFood() {
    // Pick random coordinates within grid
    food.x = Math.floor(Math.random() * tileCount) * gridSize;
    food.y = Math.floor(Math.random() * tileCount) * gridSize;

// Reposition if food spawns directly on top of the snake body
    snake.forEach(part => {
        const hasCollision = part.x === food.x && part.y === food.y;
        if (hasCollision) generateFood();
    });
}

function drawFood() {
    ctx.fillStyle = "#e94560";
    ctx.fillRect(food.x, food.y, gridSize, gridSize);
}

function handleKeyDown(event) {
    const keyPressed = event.key;

// Restart game with Spacebar on Game Over
    if (isGameOver && keyPressed === " ") {
        resetGame();
        return;
    }

if (changingDirection) return;

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

if ((keyPressed === "ArrowLeft" || keyPressed === "a") && !goingRight) {
        dx = -gridSize;
        dy = 0;
        changingDirection = true;
    }
    if ((keyPressed === "ArrowUp" || keyPressed === "w") && !goingDown) {
        dx = 0;
        dy = -gridSize;
        changingDirection = true;
    }
    if ((keyPressed === "ArrowRight" || keyPressed === "d") && !goingLeft) {
        dx = gridSize;
        dy = 0;
        changingDirection = true;
    }
    if ((keyPressed === "ArrowDown" || keyPressed === "s") && !goingUp) {
        dx = 0;
        dy = gridSize;
        changingDirection = true;
    }
}

document.addEventListener("keydown", handleKeyDown);

function hasGameEnded() {
    // Check self-collision
    for (let i = 4; i < snake.length; i++) {
        if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) return true;
    }

// Check wall collisions
    const hitLeftWall = snake[0].x < 0;
    const hitRightWall = snake[0].x >= canvas.width;
    const hitToptWall = snake[0].y < 0;
    const hitBottomWall = snake[0].y >= canvas.height;

return hitLeftWall || hitRightWall || hitToptWall || hitBottomWall;
}

Recommended

Comments 1