Tutoriel JavaScript Canvas pour le jeu du serpent

542 0 Jeux villarrealalan243 Suivre

Remixer Ouvrir dans l'éditeur Plein écran Discuter Publiez votre code

Tutoriel JavaScript Canvas pour le jeu du serpent

Recommandé

28 August 2024

Animation de défilement parallaxe

23 February 2026

Jeu Unity WebGL Swordfight intégré

14 September 2024

Calculatrice simple

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

…