Serpiente

190 Lspath940

Abrir en el editor Publica tu código

Recomendado

21 May 2024

juego de serpiente

10 December 2025

Código fuente de JavaScript del juego de la serpiente HTML Canvas

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