Estructura del módulo Pong

1. Registro del juego

El registro asocia un nombre público con una función constructora. La función recibe p y ctx. p contiene la API de p5.js. ctx contiene datos y callbacks entregados por la página contenedora.

window.__gameRegistry = window.__gameRegistry || {};
window.__gameRegistry['pong'] = function(p, ctx) {
    return function() {
        // frame del juego
    };
};

window.__gameRegistry evita depender de variables sueltas. La clave 'pong' identifica el juego. La función retornada se ejecuta en cada frame.

2. Constantes de canvas y entidades

Las constantes definen dimensiones base. No cambian durante la partida. Se separan de las variables de estado para que los tamaños sean fáciles de modificar.

let W = 700, H = 480;
let paddleW = 12, paddleH = 70;
let ballR = 7;

W y H definen el canvas. paddleW y paddleH definen las paletas. ballR define el radio de la pelota y se usa tanto para dibujar como para colisiones.

3. Variables de estado

El estado guarda la situación actual de la partida. Estas variables cambian durante el juego.

let active = false;
let score = 0;
let player, computer, ball;
let serveDir = 1;
let stars = [];
let trail = [];

active indica si el juego debe actualizarse. score alimenta el HUD externo. player, computer y ball se inicializan en reset(). serveDir controla hacia qué lado sale la pelota. stars y trail se usan solo para renderizado.

4. Crear el canvas

El canvas se crea una vez. Luego se inserta en el contenedor recibido en ctx.container.

let cnv = p.createCanvas(W, H);
cnv.parent(ctx.container);
cnv.id('game-canvas');
cnv.tabIndex = 1;
p.textFont('monospace');

p.createCanvas(W, H) crea el área de dibujo. parent() ubica el canvas en el DOM. tabIndex permite foco de teclado. textFont() fija una fuente para textos internos.

5. Limpiar el frame con background()

p.background(10, 10, 26) pinta todo el canvas con un color RGB antes de dibujar el frame. Los tres valores representan rojo, verde y azul. En este caso:

• 10: poca intensidad roja.
• 10: poca intensidad verde.
• 26: azul un poco más alto.

El resultado es un azul muy oscuro. Ese color funciona como fondo de cancha nocturna o fondo espacial.

p.background(10, 10, 26);

Si se quiere una cancha verde, se puede aumentar el canal verde y mantener bajos rojo y azul.

p.background(18, 90, 42);

Si se quiere una cancha roja, se aumenta el canal rojo y se reducen los otros canales.

p.background(95, 22, 26);

6. Esqueleto completo del capítulo

window.__gameRegistry['pong'] = function(p, ctx) {
    let W = 700, H = 480;
    let paddleW = 12, paddleH = 70;
    let ballR = 7;
    let active = false;
    let score = 0;
    let player, computer, ball;
    let serveDir = 1;
    let stars = [];
    let trail = [];

    let cnv = p.createCanvas(W, H);
    cnv.parent(ctx.container);
    cnv.id('game-canvas');
    cnv.tabIndex = 1;
    p.textFont('monospace');

    return function() {
        p.background(10, 10, 26);
    };
};