Capítulo 01

Entrada de p5 y loop del juego

Objetivo: entender cómo el launcher entra al módulo, qué significan p y ctx, y por qué el archivo devuelve una función.

1. Registro del módulo

El juego se registra dentro de window.__gameRegistry. El launcher no necesita conocer funciones internas como update() o drawGame(); solo busca la clave space-invaders y ejecuta la función asociada.

Registro real del juego

window.__gameRegistry = window.__gameRegistry || {};
window.__gameRegistry['space-invaders'] = function(p, ctx) {

p es la instancia de p5.js. Desde ahí salen funciones como p.createCanvas(), p.background(), p.random(), p.millis(), p.keyIsDown() y p.text(). ctx pertenece al sitio y permite conectar el juego con el contenedor, el marcador externo y el estado activo.

2. Refresco por frames

p5 trabaja redibujando el canvas muchas veces por segundo. En este proyecto, el módulo devuelve una función que el sistema llama en cada frame. Esa función decide si la partida está pausada, terminada o activa.

Cada frame actualiza y redibuja

Función devuelta al launcher

return function() {
    if (!active) { drawGame(); drawPaused(); return; }
    if (gameOver) { drawGame(); drawGameOver(); return; }
    update();
    drawGame();
};

Cuando active es falso, el juego dibuja la escena y encima el overlay de pausa, pero no llama a update(). Cuando gameOver es verdadero, dibuja la escena y encima el overlay de derrota. Solo en una partida activa se ejecuta update() antes de drawGame().

3. Update no es render

update() modifica el estado: posiciones, balas, enemigos, colisiones, vidas, score y partículas. drawGame() representa ese estado en pantalla. Separar estas dos ideas evita confundir reglas de juego con dibujo.