Pong: un juego con JavaScript
Pong es un juego de dos palas y una pelota. Tú controlas la pala azul de la izquierda;
el ordenador controla la naranja. Devuelve la pelota y consigue 3 tantos antes que
el rival. Cada partida tiene un máximo de 60 segundos de juego activo.
Tu primera victoria suma 5 puntos. Puedes perder y volver a intentarlo tantas veces
como quieras. Después de conseguir la recompensa puedes seguir jugando, pero las
victorias siguientes no añaden puntos. Para obtenerlos debes iniciar sesión.
Una responsabilidad por archivo #
El juego está dividido en módulos ES: cada archivo exporta las funciones que los demás
necesitan. Esta separación facilita entenderlo y cambiar una parte sin mezclarlo todo.
| Archivo | Responsabilidad |
|---|---|
config.js | Define las medidas, velocidades y condiciones de finalización. |
paddle.js | Crea las palas, limita su movimiento y detecta contactos. |
ball.js | Mueve la pelota y calcula sus rebotes. |
game.js | Coordina las reglas, el rival y el marcador. No depende del DOM. |
input.js | Convierte los controles en una dirección: -1, 0 o 1. |
renderer.js | Dibuja el estado actual en un canvas, sin modificarlo. |
main.js | Conecta los módulos con la página independiente y su bucle de animación. |
index.html y style.css | Presentan el campo y los controles de la versión independiente. |
La actividad de esta plataforma utiliza los mismos módulos de reglas, entrada y dibujo.
Su integración con React añade el visor de archivos y el registro de puntos.
Cómo avanza una partida #
createGame()crea un objeto con las palas, la pelota, el marcador y el tiempo.- Los controles producen una dirección para la pala del jugador.
stepGame()actualiza el estado en pasos de 1/60 de segundo.drawGame()dibuja ese estado utilizando la API Canvas 2D.- El bucle se detiene al ganar, perder o agotar el tiempo.
requestAnimationFrame() coordina el dibujo con la pantalla. La física utiliza pasos
fijos para que sus reglas no dependan de la frecuencia de refresco del dispositivo.
El rival se mueve más despacio y no sigue la pelota continuamente: puedes vencerlo
cambiando el ángulo del rebote al golpear con los extremos de tu pala.
Ejecutarlo en tu ordenador #
Descarga los nueve archivos del visor en una misma carpeta llamada pong.
No necesitas librerías ni un proceso de compilación. Como usamos módulos ES, sirve
la carpeta con un servidor HTTP local en lugar de abrir el HTML con doble clic.
Si tienes Python 3 instalado, abre una terminal dentro de la carpeta y ejecuta:
1python3 -m http.server 8000
Después abre http://localhost:8000. Esta versión independiente permite jugar y
experimentar; los puntos del curso solo se registran desde la plataforma.
Experimenta con el código #
Prueba a aumentar paddleHeight en config.js, cambiar los colores en renderer.js
o variar la velocidad del rival en game.js. ¿Qué cambio hace el juego más fácil?
¿Qué ocurre con el ángulo cuando golpeas la pelota cerca del centro de la pala?