Capítulo 09

Pausa, game over e integración

Objetivo: explicar los estados que detienen la actualización sin dejar el canvas vacío.

1. Overlay de pausa

drawPaused()

function drawPaused() {
    p.fill(10, 10, 26, 170); p.noStroke(); p.rect(0, 0, W, H);
    p.fill(167, 139, 250); p.textAlign(p.CENTER, p.CENTER); p.textSize(32);
    p.text('PAUSED', W / 2, H / 2 - 10);
    p.fill(100, 100, 140); p.textSize(13);
    p.text('Click para reanudar', W / 2, H / 2 + 22);
}

Este overlay se dibuja encima de la escena. La partida no avanza porque el loop final no llama a update() cuando active es falso.

2. Overlay de derrota

Escena congelada con overlay encima

drawGameOver()

function drawGameOver() {
    p.fill(10, 10, 26, 170); p.noStroke(); p.rect(0, 0, W, H);
    p.fill(255, 80, 80); p.textAlign(p.CENTER, p.CENTER); p.textSize(38);
    p.text('GAME OVER', W / 2, H / 2 - 18);
    p.fill(140, 130, 220); p.textSize(14);
    p.text('Score: ' + score + '  —  Press R to restart', W / 2, H / 2 + 24);
}

3. Teclado e integración externa

Pausa, reinicio y API del contenedor

if (p.key === 'p' || p.key === 'P') {
    active = !active;
    ctx.onStateChange(active, score);
    return false;
}
if ((p.key === 'r' || p.key === 'R') && gameOver) {
    reset();
    active = true;
    ctx.onStateChange(true, score);
    return false;
}

P alterna pausa y avisa al launcher. R solo reinicia si ya hay derrota. Las funciones p.__activateGame y p.__deactivateGame permiten que el contenedor active o pause este módulo sin conocer su código interno.

Activación externa

p.__activateGame = function() { active = true; };
p.__deactivateGame = function() { active = false; };