Tutorial de JavaScript Canvas para el juego de la serpiente

39 villarrealalan243

Abrir en el editor Publica tu código

Tutorial de JavaScript Canvas para el juego de la serpiente

Recomendado

6 June 2023

Formulario de inicio de sesión/registro

15 September 2025

Ejemplo de animación de cuadrícula CSS

30 November 2024

Arte de texto

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Lombriz Pro - El Socio</title>
    <style>
        body {
            background-color: #050505;
            margin: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            color: #00ff00;
            font-family: 'Courier New', Courier, monospace;
        }
        canvas {
            border: 5px solid #111;
            box-shadow: 0 0 20px rgba(0, 255, 0, 0.1);
            background-color: #000;
            image-rendering: pixelated;
        }
        h2 { margin-bottom: 10px; text-shadow: 0 0 10px #00ff00; }
    </style>
</head>
<body>

<h2>PUNTOS: <span id="score">0</span></h2>
    <canvas id="snakeGame" width="400" height="400"></canvas>
    <p>Usá las FLECHAS o WASD para moverte</p>

const box = 20; // Tamaño de cada segmento de la lombriz
        let score = 0;
        let gameSpeed = 100; // Velocidad inicial (ms)

// La lombriz es un array de objetos (posiciones)
        let snake = [];
        snake[0] = { x: 9 * box, y: 10 * box }; // Posición inicial

let food = {
            x: Math.floor(Math.random() * 19 + 1) * box,
            y: Math.floor(Math.random() * 19 + 1) * box
        };

let d; // Dirección

// Capturar controles
        document.addEventListener("keydown", direction);

function direction(event) {
            let key = event.keyCode;
            // Flechas o WASD (evitando que la lombriz retroceda sobre sí misma)
            if((key == 37 || key == 65) && d != "RIGHT") d = "LEFT";
            else if((key == 38 || key == 87) && d != "DOWN") d = "UP";
            else if((key == 39 || key == 68) && d != "LEFT") d = "RIGHT";
            else if((key == 40 || key == 83) && d != "UP") d = "DOWN";
        }

// Función para detectar choque contra el propio cuerpo
        function collision(head, array) {
            for(let i = 0; i < array.length; i++) {
                if(head.x == array[i].x && head.y == array[i].y) return true;
            }
            return false;
        }

function draw() {
            // Fondo
            ctx.fillStyle = "black";
            ctx.fillRect(0, 0, canvas.width, canvas.height);

// Dibujar Lombriz
            for(let i = 0; i < snake.length; i++) {
                // La cabeza es verde brillante, el cuerpo más oscuro
                ctx.fillStyle = (i == 0) ? "#00FF00" : "#008800";
                ctx.strokeStyle = "black";
                ctx.fillRect(snake[i].x, snake[i].y, box, box);
                ctx.strokeRect(snake[i].x, snake[i].y, box, box);
                
                // Efecto de brillo en la cabeza
                if(i == 0) {
                    ctx.shadowBlur = 15;
                    ctx.shadowColor = "#00FF00";
                } else {
                    ctx.shadowBlur = 0;
                }
            }

// Dibujar Comida (un punto rojo neón)
            ctx.shadowBlur = 10;
            ctx.shadowColor = "red";
            ctx.fillStyle = "red";
            ctx.fillRect(food.x, food.y, box, box);
            ctx.shadowBlur = 0; // Reset brillo

// Posición actual de la cabeza
            let snakeX = snake[0].x;
            let snakeY = snake[0].y;

// Mover la cabeza según la dirección
            if( d == "LEFT") snakeX -= box;
            if( d == "UP") snakeY -= box;
            if( d == "RIGHT") snakeX += box;
            if( d == "DOWN") snakeY += box;

// ¿La lombriz come?
            if(snakeX == food.x && snakeY == food.y) {
                score++;
                scoreElement.innerHTML = score;
                // Generar nueva comida
                food = {
                    x: Math.floor(Math.random() * 19 + 1) * box,
                    y: Math.floor(Math.random() * 19 + 1) * box
                };
                // No quitamos la cola, así crece
            } else {
                // Quitar la cola (movimiento normal)
                snake.pop();
            }

// Nueva cabeza
            let newHead = { x: snakeX, y: snakeY };

// Reglas de Game Over
            if(snakeX < 0 || snakeX >= canvas.width || snakeY < 0 || snakeY >= canvas.height || collision(newHead, snake)) {
                clearInterval(game);
                alert("GAME OVER\nTu lombriz llegó a medir: " + score);
                location.reload(); // Reiniciar
            }

snake.unshift(newHead);
        }

// Bucle del juego
        let game = setInterval(draw, gameSpeed);

</script>
</body>
</html>

Recomendado

Formulario de inicio de sesión/registro

Ejemplo de animación de cuadrícula CSS

Arte de texto

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS