12. El Bucle principal del Juego

12: Bucles e Intervalos en Juegos HTML5 con JavaScript

¡Muy buenas y bienvenidos a la sesión número 12 del curso de Programación de Videojuegos HTML5 con JavaScript! 🎮

En sesiones anteriores vimos los bucles for, while y do...while, pero hoy toca un bucle especial en el desarrollo de juegos: los intervalos.

🔄 ¿Por qué intervalos en juegos?

Imagina que quieres mover un enemigo por pantalla. Con un bucle for, podrías dibujarlo, borrarlo y actualizar su posición, pero... ¿qué pasa si necesitas que otras cosas ocurran simultáneamente?

¿Que el escenario cambie?
¿Que el personaje se mueva?
¿Que la música suene?

¡Necesitas ejecutar múltiples acciones a la vez! Ahí entran los intervalos.

⏱️ ¿Qué es un intervalo?

Es una instrucción que ejecuta una función cada X tiempo, creando el bucle principal del juego. Este bucle se repite en cada fotograma (frame) y gestiona:

Posición de enemigos.
Dibujado de gráficos.
Reproducción de música.
Cálculos internos.

¡Y todo sin detenerse aunque el jugador no pulse ninguna tecla!

🛠️ Implementación práctica

Vamos a crear un bucle principal con setInterval:

1️⃣ Definimos los FPS (Fotogramas por segundo):

const FPS = 10; // Velocidad de refresco (ej: 10 veces/segundo)

2️⃣ Función principal (bucle del juego):

function principal() {
    console.log("Fotograma"); // Ejemplo: aquí iría toda la lógica del juego
}

3️⃣ Iniciamos el intervalo:

setInterval(principal, 1000 / FPS); // Ejecuta "principal" 10 veces/segundo

🎮 Ejemplo: Movimiento de escenario

Imagina un juego runner donde el fondo se mueve automáticamente:

let xEscenario = 0;

function mueveEscenario() {
    xEscenario += 1;
    console.log(`Escenario en X: ${xEscenario}`);
}

function principal() {
    mueveEscenario(); // ¡El fondo se mueve solo!
}

setInterval(principal, 1000 / FPS);

Mientras tanto, el jugador puede atacar sin detener el movimiento:

function atacar() {
    console.log("¡Has atacado!");
}

// Ejemplo: botón que llama a "atacar"
document.getElementById("botonAtaque").addEventListener("click", atacar);

📢 Próximo paso

En la siguiente sesión, capturaremos eventos de teclado para controlar al personaje directamente, ¡sin inputs manuales!

🔗 ¿Te gustó? ¡Comparte tus dudas o proyectos en los comentarios!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rectángulo Amarillo Móvil</title>
</head>
<body onload="inicializa()">
    <canvas id="canvas" width="500" height="300" style="border:2px solid #000"></canvas>

<script>
let canvas, ctx;
let FPS = 50;

// Clase Personaje (rectángulo amarillo)
class Personaje {
    constructor(x, y) {
        this.x = x;
        this.y = y;
        this.direccion = 1; // 1 para derecha, -1 para izquierda
    }

    dibuja() {
        ctx.fillStyle = "#fff000"; // Amarillo
        ctx.fillRect(this.x, this.y, 50, 50); // Rectángulo de 50x50
    }

    mueve() {
        this.x += 2 * this.direccion;

        // Cambiar dirección al alcanzar el borde
        if (this.x <= 0 || this.x >= canvas.width - 50) {
            this.direccion *= -1;
        }
    }
}

// Inicialización
function inicializa() {
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    
    let personaje = new Personaje(50, 50); // Solo un personaje

    function principal() {
        ctx.clearRect(0, 0, canvas.width, canvas.height); // Limpiar canvas
        personaje.dibuja();
        personaje.mueve();
    }

    setInterval(principal, 1000 / FPS);
}
</script>
</body>
</html>

Buscar este blog

javascript-juego-uno