Introducción
Pong es un juego simple, entretenido y adictivo. Su mecánica principal se basa en dos jugadores que controlan una paleta. Cada paleta solo puede moverse en sentido vertical y lo hace con una velocidad fija.
El área de juego representa una mesa de ping-pong vista desde arriba. La cancha está dividida en dos mitades: una para cada jugador. Los bordes superior e inferior forman parte de la cancha; cuando la pelota toca uno de esos bordes, rebota y continúa avanzando. Los bordes izquierdo y derecho tienen otra función: si la pelota cruza uno de esos lados, el jugador contrario gana un punto.
La regla central del juego es impedir que la pelota sobrepase la paleta propia e intentar que sobrepase la paleta rival.
Desde el punto de vista de programación, esto se traduce en varios elementos concretos:
- Una pelota con posición, velocidad y dirección.
- Dos paletas con posición vertical y velocidad fija.
- Una cancha con límites superiores e inferiores que provocan rebote.
- Dos bordes laterales que generan puntos.
- Una regla de colisión entre pelota y paletas.
- Un marcador.
- Un ciclo de actualización que mueve los objetos y resuelve las reglas del juego.
En este tutorial se construirá Pong paso a paso en una página web usando JavaScript y p5.js.
Objetivo del tutorial
El objetivo es construir una versión funcional de Pong y, al mismo tiempo, entender las técnicas básicas que permiten programar juegos arcade en navegador.
Al terminar el tutorial, el juego tendrá:
- Canvas de juego con p5.js.
- Paleta del jugador.
- Paleta controlada por CPU.
- Pelota en movimiento.
- Rebote contra bordes superior e inferior.
- Colisión entre pelota y paletas.
- Cálculo del ángulo de salida según el punto de impacto.
- Marcador del jugador y de la CPU.
- Reinicio de pelota después de cada punto.
- Pausa y reinicio de partida.
- Integración con una página contenedora.