Código fuente de juego de ping pong: archivos, física y campaña
Un juego de tenis de mesa en 3D para navegador, abierto archivo por archivo: dónde están la física, la puntuación, la campaña y los escenarios, y qué cambiar primero.
Si necesitas código fuente de un juego de ping pong que puedas alojar y modificar, Sunset Rally es un juego de tenis de mesa en 3D para navegador, terminado, con una campaña de nueve partidos, tres rivales controlados por la computadora, un taller y el proyecto TypeScript completo, por US$ 39 a precio de lista. La carpeta del juego ya viene compilada y sin minificar, así que puedes subirla primero y leerla después.
Los juegos deportivos son más difíciles de adaptar de lo que parecen, porque la diversión está en la física y en los controles, no en los menús. Esta guía muestra dónde vive cada una de esas partes en el proyecto de Sunset Rally, qué puedes cambiar con seguridad y qué deja fuera esta edición.
Cómo se juega el tenis de mesa en Sunset Rally
Los partidos van a siete puntos contra un rival de la computadora. El jugador mueve el puntero o arrastra para controlar la raqueta, y los golpes son automáticos. Hacia arriba da fuerza, hacia un lado coloca la bola, hacia abajo hace una dejada, y cuando la bola sube toca rematar.
Una asistencia opcional, que el jugador activa y desactiva durante el partido, ayuda a la raqueta a encontrar la altura de la bola. Eso cuenta en un sitio abierto al público: quien juega por primera vez en el celular igual puede devolver la bola.
Hay tres rivales de la computadora, cada uno con su estilo: Capi, paciente; Nori, juguetona; y Miso, preciso, en Fácil, Normal o Difícil. En el entrenamiento, tu compañero devuelve todas las bolas. Después del partido, una repetición muestra otra vez el punto decisivo.
Qué trae el código fuente del juego de ping pong
- Una carpeta game/ lista para alojar, ya compilada y sin minificar.
- El código fuente del desarrollador en TypeScript, con la configuración de Vite y los recursos del juego, en source/.
- Manuales ilustrados en inglés y portugués, con capturas reales.
- Fuentes tipográficas y archivos de audio incluidos en el juego.
- Avisos de licencia de terceros e historial de versiones.
La base es TypeScript, Three.js r184, Vite y WebGL2. Los archivos incluyen HTML, CSS, JavaScript, TypeScript y JSON. La interfaz viene en 14 idiomas: inglés, portugués, español, francés, alemán, italiano, neerlandés, polaco, turco, ruso, indonesio, japonés, coreano y chino simplificado. Los manuales solo están en inglés y portugués.
El contenido alrededor de los partidos también es parte del paquete: un circuito de nueve partidos en tres etapas, tres escenarios (el jardín al atardecer, el jardín de cerezos y el café junto al mar) por la mañana, por la tarde, de noche o bajo la lluvia, y un taller donde las monedas de las victorias compran color, goma, forma, mango, madera, cinta del borde y calcomanías de la raqueta, además de estilos de bola y de mesa.
Dónde está cada cosa en el código
El manual relaciona cada parte del juego con un archivo. Esta es la lista para tener abierta mientras trabajas:
- Campaign.ts: los nueve partidos de la campaña y sus metas de estrellas.
- Places.ts: el aspecto de cada escenario.
- physics.ts: la física de la bola y la raqueta.
- match.ts: la puntuación y las reglas del partido.
- i18n.ts: los textos de la interfaz en inglés y portugués; los demás idiomas están en la carpeta locales.
- styles.css: el estilo de los menús y las pantallas.
Cada partido de la campaña da hasta tres estrellas: ganar, acertar las tres esquinas y lograr un peloteo de diez. Son 27 estrellas, y completar cada escenario da un premio para el taller. Como las condiciones de las estrellas están en un solo archivo de campaña, puedes hacer la campaña más fácil o más difícil sin buscar nada en el código.
Qué cambiar primero en una plantilla de ping pong
Te sugerimos este orden, de menor a mayor riesgo.
- Textos de la interfaz y el nombre del juego, en i18n.ts y la carpeta locales.
- Colores y pantallas, en styles.css.
- Estilos de raqueta, bola y mesa del taller, para que el equipo lleve tu marca.
- El aspecto de los escenarios, en Places.ts.
- Partidos de la campaña y metas de estrellas, en Campaign.ts.
- Física y puntuación, en physics.ts y match.ts, solo si necesitas otra sensación de juego.
El manual agrega tres reglas que vale la pena seguir. Mantén estables los ID de desbloqueo, los ID de objetos y las claves de guardado, o los jugadores pierden lo que ganaron. Haz una copia antes de empezar. Cambia una cosa a la vez, para saber qué edición causó qué.
El white label está permitido: tu nombre y tu logo, o los de tu cliente, pueden reemplazar los nuestros.
Recompilar, alojar e insertar
Para jugar no hay que compilar nada. Sube el contenido de game/ a cualquier alojamiento HTTP(S) de archivos estáticos, conserva las rutas relativas y abre la dirección. No necesitas PHP, base de datos ni cuenta.
Para cambiar el código fuente necesitas Node.js (se recomienda 24 LTS) y npm. Edita el TypeScript, recompila con Vite y reemplaza la carpeta game/ alojada por la salida nueva.
El navegador necesita JavaScript, módulos ES y WebGL2. Funciona con pantalla táctil y con mouse, y los controles se adaptan al tamaño de la pantalla. El rendimiento depende del navegador y del dispositivo, así que prueba en los celulares que usan tus jugadores.
- Sube la carpeta game/ a una carpeta de prueba en tu alojamiento.
- Juega un partido en un navegador de computadora y otro en un celular.
- Haz los cambios de texto y estilo en source/ y recompila.
- Reemplaza la carpeta de prueba completa y vuelve a jugar.
- Pásala a la dirección final.
Lo que esta edición no incluye
Esta edición se juega contra la computadora: campaña, partido libre y entrenamiento. El multijugador en línea, las salas en línea, el ranking en línea y las cuentas en la nube no forman parte del paquete, y no hay modo para dos jugadores. No hay SDK ni cuentas de publicidad, y no incluye apps nativas ni alojamiento.
El progreso se queda en el navegador del jugador: estrellas de la campaña, resultados, estadísticas, repeticiones y objetos del taller. No se usa servidor ni cuenta, así que no hay nada que mantener después del lanzamiento.
Si necesitas modo en línea, el SDK de un portal, una versión para tienda de apps o la instalación en tu servidor, eso es un servicio aparte, cotizado por proyecto.
Pedir cotización de trabajo a medida
Licencia, soporte y precio en un párrafo
Una compra da una licencia perpetua y no exclusiva para un producto final, tuyo o de un cliente, que los jugadores pueden usar gratis o con monetización por anuncios. Puedes modificar el código, el arte y el audio dentro de ese producto, pero no puedes revender ni compartir la plantilla, su código fuente o sus recursos por separado. El soporte dura 6 meses, o 12 con la extensión al pagar, y cubre instalar y usar los archivos y corregir defectos reproducibles; la personalización, el alojamiento y la integración con SDKs o portales se cotizan aparte. El precio de lista es US$ 39; hasta el 30 de noviembre de 2026, una promoción de Black Friday descuenta 15% en todas las plantillas, así que Sunset Rally cuesta US$ 33.15, y desde el 1 de diciembre los precios vuelven a los de lista.
Preguntas frecuentes sobre Sunset Rally
¿Tengo que compilar algo para usar este juego de ping pong?
No. La carpeta game/ ya viene compilada. Sube su contenido a un alojamiento de archivos estáticos y abre la dirección. Node.js y npm solo hacen falta si cambias el TypeScript y recompilas.
¿Tiene modo para dos jugadores o en línea?
No. Esta edición se juega contra la computadora, en la campaña, el partido libre y el entrenamiento.
¿Puedo cambiar la campaña y las metas de estrellas?
Sí. Los partidos y las condiciones de las estrellas están en Campaign.ts. Después, recompila con Node.js.
¿Puedo cambiar cómo se comporta la bola?
Sí. La física está en physics.ts y las reglas de puntuación en match.ts. Cambia una cosa a la vez y prueba contra todos los rivales.
¿Funciona en celulares?
Sí, con controles táctiles que se adaptan a la pantalla. Requiere WebGL2, y el rendimiento depende del dispositivo, así que prueba en los celulares de tu público.
¿Dónde se guarda el progreso?
En el navegador del jugador. No se usa servidor ni cuenta.
Otras plantillas deportivas para comparar
Si estás armando una sección de deportes en un sitio, otras dos plantillas combinan bien con Sunset Rally. Velvet Pool es un juego de billar 8-ball con rival de la computadora y modo local para dos jugadores, hecho en JavaScript puro con WebGL2, por US$ 39 a precio de lista. Puttide es un minigolf en 3D con 30 hoyos, hecho con Three.js y Rapier, por US$ 39 a precio de lista. Ambas tienen 14 idiomas en la interfaz.
Sunset Rally encaja con portales y sitios que quieren un juego deportivo de partidos cortos, estudios que entregan un juego con la marca de un cliente y desarrolladores que buscan un proyecto TypeScript y Three.js legible para aprender o ampliar. Si necesitas dos jugadores en el mismo dispositivo, Velvet Pool tiene ese modo y Sunset Rally no.
Ver Velvet Pool, el billar 8-ball
Ver Puttide, el minigolf en 3D
Comprar dos o más plantillas en el mismo pedido baja cada licencia: 5% con dos, 10% con tres, 15% con cuatro y 20% con cinco o más.