Capítulo 10

Loop final integrado

Objetivo: cerrar el tutorial conectando estados, actualización y renderizado en el orden real del juego.

1. Inicio del juego

Preparación inicial

reset();
ctx.onScore(0);

Antes del primer frame jugable, el módulo inicializa la partida y comunica score cero al contenedor.

2. Orden definitivo del frame

Tres caminos posibles del frame

Loop real devuelto

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

El orden es intencional. En pausa, el juego conserva la escena visible y dibuja drawPaused(), pero no actualiza posiciones. En derrota, conserva la escena y dibuja drawGameOver(). En juego activo, primero cambia el estado con update() y después representa el resultado con drawGame().

3. Qué queda conectado

Con este loop, todas las piezas anteriores quedan coordinadas: teclado, movimiento de nave, disparos, formación enemiga, colisiones, partículas, shake, score, vidas, nivel, pausa, reinicio y overlays. El archivo completo no necesita clases ni framework; la persistencia de variables dentro de la función registrada mantiene el estado entre frames.