Snake

Open In Editor Video Publish Your Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snake.io Clone</title>
<style>
    body {
        margin: 0;
        background: #111;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        color: white;
        font-family: Arial, sans-serif;
    }
    canvas {
        background: #222;
        border: 2px solid #555;
    }
    #score {
        position: absolute;
        top: 10px;
        left: 10px;
        font-size: 20px;
    }
</style>
</head>
<body>
<div id="score">Score: 0</div>
<canvas id="gameCanvas" width="600" height="400"></canvas>

const gridSize = 20; // size of each cell
    let snake = [{ x: 10, y: 10 }];
    let direction = { x: 1, y: 0 };
    let food = spawnFood();
    let score = 0;
    let speed = 150; // ms per frame
    let lastTime = 0;

// Spawn food at random position
    function spawnFood() {
        return {
            x: Math.floor(Math.random() * (canvas.width / gridSize)),
            y: Math.floor(Math.random() * (canvas.height / gridSize))
        };
    }

// Game loop
    function gameLoop(timestamp) {
        if (timestamp - lastTime > speed) {
            update();
            draw();
            lastTime = timestamp;
        }
        requestAnimationFrame(gameLoop);
    }

// Update snake position
    function update() {
        const head = {
            x: snake[0].x + direction.x,
            y: snake[0].y + direction.y
        };

// Wrap around edges (Snake.io style)
        if (head.x < 0) head.x = canvas.width / gridSize - 1;
        if (head.x >= canvas.width / gridSize) head.x = 0;
        if (head.y < 0) head.y = canvas.height / gridSize - 1;
        if (head.y >= canvas.height / gridSize) head.y = 0;

// Check collision with self
        for (let segment of snake) {
            if (segment.x === head.x && segment.y === head.y) {
                resetGame();
                return;
            }
        }

snake.unshift(head);

// Check if food eaten
        if (head.x === food.x && head.y === food.y) {
            score++;
            scoreEl.textContent = "Score: " + score;
            food = spawnFood();
            // Increase speed slightly
            if (speed > 50) speed -= 5;
        } else {
            snake.pop();
        }
    }

// Draw snake and food
    function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw food
        ctx.fillStyle = "red";
        ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize, gridSize);

// Draw snake
        ctx.fillStyle = "lime";
        for (let segment of snake) {
            ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize, gridSize);
        }
    }

// Reset game
    function resetGame() {
        snake = [{ x: 10, y: 10 }];
        direction = { x: 1, y: 0 };
        score = 0;
        speed = 150;
        scoreEl.textContent = "Score: 0";
        food = spawnFood();
    }

// Handle keyboard input
    window.addEventListener("keydown", e => {
        switch (e.key) {
            case "ArrowUp":
                if (direction.y === 0) direction = { x: 0, y: -1 };
                break;
            case "ArrowDown":
                if (direction.y === 0) direction = { x: 0, y: 1 };
                break;
            case "ArrowLeft":
                if (direction.x === 0) direction = { x: -1, y: 0 };
                break;
            case "ArrowRight":
                if (direction.x === 0) direction = { x: 1, y: 0 };
                break;
        }
    });

requestAnimationFrame(gameLoop);
})();
</script>
</body>
</html>

Snake

Recommended

HTML Snake Game Code Example

Muhammad Atif.Snake game

Snake game

HTML

CSS

JS

Recommended

HTML Snake Game Code Example

Muhammad Atif.Snake game

Snake game

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS