Webleb - UI Elements

HTML

<!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>

CSS

JS

Snake

Recommended