Estado y reinicio de partida

1. Paletas como objetos

Cada paleta necesita posición y marcador propio. La coordenada x es fija. La coordenada y cambia durante el juego.

player = { x: 24, y: H / 2 - paddleH / 2, score: 0 };
computer = { x: W - 24 - paddleW, y: H / 2 - paddleH / 2, score: 0 };

player.x ubica la paleta izquierda. computer.x ubica la paleta derecha. Ambas usan H / 2 - paddleH / 2 para quedar centradas verticalmente.

2. Pelota como objeto

La pelota necesita posición y velocidad. vx controla movimiento horizontal. vy controla movimiento vertical.

ball = {
    x: W / 2,
    y: H / 2,
    vx: 4 * serveDir,
    vy: p.random(-2, 2)
};

x e y colocan la pelota al centro. serveDir vale 1 o -1, por lo que decide si la pelota sale hacia la derecha o izquierda. p.random(-2, 2) evita que todos los saques tengan el mismo ángulo.

3. reset()

reset() reinicia una partida completa. Debe recrear paletas, pelota, score y efectos visuales temporales.

function reset() {
    player = { x: 24, y: H / 2 - paddleH / 2, score: 0 };
    computer = { x: W - 24 - paddleW, y: H / 2 - paddleH / 2, score: 0 };
    ball = { x: W / 2, y: H / 2, vx: 4 * serveDir, vy: p.random(-2, 2) };
    score = 0;
    trail = [];
    ctx.onScore(0);
}

trail = [] elimina posiciones anteriores de la pelota. ctx.onScore(0) sincroniza el HUD externo con el nuevo estado.

4. resetBall()

Después de un punto no se debe reiniciar toda la partida. Solo se recentra la pelota y se limpia la estela.

function resetBall() {
    ball = {
        x: W / 2,
        y: H / 2,
        vx: 4 * serveDir,
        vy: p.random(-2, 2)
    };
    trail = [];
}

resetBall() conserva player.score y computer.score. Solo reinicia la pelota para iniciar el siguiente saque.

5. Llamada inicial

Luego de declarar reset(), se llama una vez para asegurar que todas las entidades existan antes del primer frame.

reset();