Tutorial de JavaScript Canvas para el juego de la serpiente

541 0 villarrealalan243 Seguir

Remix Abrir en el editor Pantalla completa Comentar Publica tu código

Tutorial de JavaScript Canvas para el juego de la serpiente

Recomendado

10 March 2026

Golpe de muñeco de trapo

12 June 2025

Un código de diomankeita001

16 October 2025

Pantalla de carga animada CSS con efecto de código

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>

CSS

Comments 0

…