Snake Game JavaScript Canvas Tutorial

Open In Editor Publish Your Code

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

Snake Game JavaScript Canvas Tutorial

Recommended

Level Devil Game HTML Embed Code

Basket Random Game HTML5 Source Code

Snake game

HTML

CSS

JS

Recommended

Level Devil Game HTML Embed Code

Basket Random Game HTML5 Source Code

Snake game

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS