Movimiento de paletas

1. Función update()

update() contiene la lógica que cambia el estado del juego. En este capítulo solo modificará la posición vertical de las paletas.

function update() {
    updatePlayerPaddle();
    updateComputerPaddle();
}

updatePlayerPaddle() modifica la paleta izquierda. updateComputerPaddle() modifica la paleta derecha. Ambas funciones cambian la propiedad y de su paleta correspondiente.

2. Paleta del jugador

La paleta del jugador tiene movimiento vertical. En la representación siguiente, el zoom muestra solo el sector izquierdo de la cancha. La paleta sube y baja dentro de los límites verticales.

function updatePlayerPaddle() {
    if (p.keyIsDown(p.UP_ARROW) || p.keyIsDown(87)) {
        player.y -= 5;
    }
    if (p.keyIsDown(p.DOWN_ARROW) || p.keyIsDown(83)) {
        player.y += 5;
    }
    player.y = p.constrain(player.y, 0, H - paddleH);
}

p.keyIsDown() detecta una tecla mantenida. player.y -= 5 mueve hacia arriba. player.y += 5 mueve hacia abajo. p.constrain(player.y, 0, H - paddleH) impide que la paleta salga del canvas.

3. Paleta de la CPU

La CPU calcula una posición objetivo a partir de la pelota. La paleta no se teletransporta; se acerca gradualmente al objetivo.

function updateComputerPaddle() {
    let target = ball.y - paddleH / 2;
    let diff = target - computer.y;
    computer.y += diff * 0.06;
    computer.y = p.constrain(computer.y, 0, H - paddleH);
}

target representa la posición vertical que centraría la paleta con la pelota. diff mide la distancia entre la posición actual y el objetivo. diff * 0.06 aplica una corrección parcial por frame.

4. update() integrado

La versión integrada mantiene ambas reglas dentro de una sola función. Es útil cuando el juego todavía es pequeño.

function update() {
    if (p.keyIsDown(p.UP_ARROW) || p.keyIsDown(87)) player.y -= 5;
    if (p.keyIsDown(p.DOWN_ARROW) || p.keyIsDown(83)) player.y += 5;
    player.y = p.constrain(player.y, 0, H - paddleH);

    let target = ball.y - paddleH / 2;
    let diff = target - computer.y;
    computer.y += diff * 0.06;
    computer.y = p.constrain(computer.y, 0, H - paddleH);
}

Este bloque deja listas las paletas. La pelota se incorpora en el capítulo siguiente.