Tutoriel JavaScript Canvas pour le jeu du serpent

204 villarrealalan243

Ouvrir dans l'éditeur Publiez votre code

Tutoriel JavaScript Canvas pour le jeu du serpent

Recommandé

21 October 2024

Effets du menu déroulant

8 February 2025

Cercle de sélection de couleurs

21 October 2024

Jeu de correspondance d'Halloween

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