Código fuente de juego HTML5: abrimos un paquete para ver qué trae
Un recorrido por paquetes reales del Marketplace Polar Games: carpetas, archivos, compilación, licencias y las preguntas que conviene hacer antes de pagar.
El código fuente de un juego HTML5 puede significar tres cosas muy distintas: una versión lista para subir, los archivos de desarrollo que tú editas, o un proyecto que solo abre en un editor concreto. Una plantilla de juego HTML5 con código fuente de nuestro marketplace trae las dos primeras juntas, en archivos web normales, y esta guía abre paquetes reales para mostrar cómo se ve eso.
Vendemos estas plantillas, así que léela como un recorrido por nuestros propios paquetes, no como un estudio neutral del mercado. Revisamos varias ediciones, sobre todo Velvet Pool, Puttide y Sunset Rally, leímos sus manuales públicos y los términos de la tienda, y anotamos qué hay en la caja, qué necesitas para correrlo y qué no viene. Cada manual tiene su enlace en la página del artículo, así que puedes comprobar cada línea antes de pagar.
Qué puede significar “código fuente de juego HTML5”
Quien vende usa la expresión código fuente con bastante holgura. Tres preguntas separan lo que de verdad se está vendiendo.
¿Versión lista, código de desarrollo o las dos?
La versión lista (el build) es el juego terminado tal como lo carga el navegador: un index.html, scripts, imágenes y archivos de sonido. Se puede alojar tal cual. El código de desarrollo es la versión hecha para que la gente la edite, con los archivos separados por función. Un paquete con solo el build lo puedes subir, pero difícilmente cambiar. Un paquete con solo código puede exigir herramientas antes de que corra algo. Las ediciones de esta guía traen las dos en un mismo ZIP: por lo general una carpeta game/ para publicar y una carpeta source/ para editar (en Ricopop, la propia game/ es el código fuente).
¿Legible o minificado?
Minificar aprieta el script en pocas líneas densas, con nombres cortos: se descarga más rápido y es horrible de leer. La ofuscación va más lejos y revuelve los nombres a propósito. Ninguna de las dos estorba a un sitio en línea. Las dos estorban si compraste el código para cambiarlo. Antes de pagar, abre un script de la demo en línea con las herramientas de desarrollo del navegador y fíjate si podrías seguirlo.
¿Archivos normales o proyecto de editor?
Algunas plantillas llegan como proyecto de un editor de juegos concreto, y solo se abren ahí. Otras son archivos web normales, que abre cualquier editor de código. Las ediciones de esta guía son del segundo tipo: HTML, CSS, JavaScript y JSON, con TypeScript en algunas.
Qué trae un paquete de Polar Games
Tomemos Velvet Pool, nuestra edición de billar 8-ball. Su manual describe cuatro carpetas dentro del ZIP:
- game/ es la edición lista para subir y la única carpeta que publicas.
- source/ es el mismo juego como edición de desarrollo editable, con README, package.json y pruebas.
- documentation/ guarda la guía ilustrada y sus imágenes.
- THIRD-PARTY-LICENSES/ guarda los textos de licencia de las fuentes y un resumen en README.txt.
En tu biblioteca, el mismo paquete aparece en dos descargas: el paquete completo (código y manual) o solo el juego, listo para alojar.
game/ y source/ tienen la misma estructura. En Velvet Pool el manual indica editar los archivos en source/ y copiar los modificados a la misma ruta en game/. En medio no se compila nada.
Por dentro de Velvet Pool: el mapa de archivos
Un mapa de archivos es la forma más barata de evaluar un código antes de comprarlo. Este es el del manual de Velvet Pool, con rutas relativas a source/ o game/:
- src/core/physics.js: simulación de las bolas, efecto y respuesta de las bandas.
- src/core/rules.js: reglas de la bola 8 y decisiones de falta.
- src/core/ai.js: cómo elige el tiro la computadora.
- src/game/controls.js: puntería, fuerza y efecto.
- src/game/progress.js: logros, paños, tacos y puntuación de la partida.
- src/game/i18n.js: los textos en 14 idiomas.
- src/game/localRecords.js: el historial local de puntuaciones.
- src/game/audio.js: efectos de sonido y reproducción de música.
- css/style.css y css/fonts.css: tema, diseño adaptable y declaración de fuentes.
- assets/: arte, audio y fuentes, con una subcarpeta logo/.
Fíjate en la división. Reglas, física y computadora viven en src/core. Controles, partidas guardadas, textos y sonido viven en src/game. El manual pide cambiar una función a la vez, y este diseño lo vuelve realista: ajustar la banda y corregir una traducción tocan archivos distintos.
El manual también afirma que el código de source/src y game/src es JavaScript normal y formateado, sin archivos minificados ni empaquetados. Velvet Pool es Vanilla JavaScript con WebGL2 y no usa ninguna biblioteca de código, ni siquiera Three.js. El historial de versiones lo respalda: la 1.0.1 dividió cadenas largas de una sola línea (audio, traducciones y shaders) en líneas legibles, sin cambiar el comportamiento.
Puttide: la misma estructura, más bibliotecas
Puttide, nuestra edición de minigolf 3D, usa las mismas cuatro carpetas y añade una cosa: dos bibliotecas de terceros que el juego necesita. Three.js r186 (MIT) y Rapier 3D 0.21.0 (Apache-2.0) están en lib/three/ y lib/rapier/, y el import map de index.html le dice al navegador dónde encontrarlas. La FAQ de Puttide afirma que nada se carga desde un CDN, así que el juego solo necesita tu propio alojamiento. El manual añade que los archivos de las bibliotecas están formateados para poder leerse, con el comportamiento sin cambios.
Su mapa de archivos, de nuevo relativo a source/ o game/:
- src/course/courses.js: orden de los campos y requisitos de desbloqueo.
- src/course/holes.js: geometría, par y obstáculos del campo Ruinas. pier.js, ice.js, lava.js y sky.js guardan los otros cuatro.
- src/sim/constants.js: ajuste de la física.
- src/game/economy.js: definiciones y precios de pelotas, estelas y atuendos.
- src/ui/i18n.js y tres archivos de diccionario más: los textos de los idiomas.
- css/style.css: colores de la interfaz, fuentes y estilos adaptables.
- fonts/ y music/: las fuentes web con sus licencias y dos pistas de música.
La receta del manual para crear un hoyo nuevo: duplica una definición en el archivo del campo correcto, ponle un id único, define el par y las posiciones del tee y del hoyo, agrégalo al campo y luego añade su nombre y su consejo a los diccionarios de idiomas. Lee una receta así antes de comprar. Si te parece un trabajo que sabes hacer, el paquete te sirve.
Cuando el código fuente necesita compilación
“Sin compilación” vale para algunas ediciones y para otras no, así que revisa la edición, no la tienda. Aquí van cinco de las nuestras lado a lado, con sus precios de lista. Nuestra propia tienda muestra hoy un 10% de descuento sobre el precio de lista, la oferta directa del estudio en cada página de artículo: Velvet Pool, por ejemplo, aparece en US$ 35.10 en lugar de US$ 39.
- Velvet Pool, precio de lista US$ 39: módulos JavaScript normales con WebGL2. Edita source/ y copia a game/. Node.js 20+ solo para las pruebas opcionales.
- Puttide, US$ 39: módulos JavaScript normales, con Three.js y Rapier en lib/. Sin compilación. Node.js es opcional y sirve solo para gestionar las versiones de las bibliotecas.
- Ricopop, US$ 39: HTML, CSS y módulos JavaScript normales, y la propia carpeta game/ es el código fuente. Herramientas opcionales (Node.js 20+): servidor local, verificador de niveles y pruebas.
- Pinloop, US$ 24: TypeScript con Vite. La carpeta game/ trae JavaScript y CSS legibles. Node.js 22.12+ y npm solo para editar y recompilar el código.
- Sunset Rally, US$ 39: TypeScript con Three.js r184 y Vite. La carpeta game/ ya viene compilada y sin minificar. Node.js solo si recompilas.
En Sunset Rally el manual recomienda Node.js 24 LTS. Dentro de source/ corres npm ci, npm run typecheck y npm run build, y publicas solo el contenido de dist/. También pide mantener minify y cssMinify desactivados al recompilar, porque el código entregado está formateado para leerse. Sube el resultado, nunca node_modules/.
Alojarlo: qué significa “estático” en la práctica
Alojamiento estático significa que el servidor solo entrega archivos. Los manuales de Velvet Pool y Puttide dan la instalación completa en tres pasos:
- Extrae el ZIP.
- Sube todo lo que hay dentro de game/ a una carpeta de tu sitio, por ejemplo public_html/velvet-pool/, por FTP o con el administrador de archivos de tu hosting, conservando las subcarpetas.
- Abre esa dirección en el navegador.
No intervienen npm, terminal, compilación, PHP, base de datos ni cuenta. Lo que sí hace tropezar a la gente, según los mismos manuales:
- No abras index.html con doble clic. Los navegadores bloquean los módulos del juego en file://. Para probar en tu computadora, corre python -m http.server 8765 dentro de game/ y abre http://localhost:8765/.
- Tu servidor debe enviar los archivos .js con tipo MIME de JavaScript y los .wasm como application/wasm. Un MIME equivocado se manifiesta como un error de módulo rechazado.
- Usa HTTPS en el alojamiento público.
- El progreso pertenece al origen del navegador (protocolo, host y puerto). Si mueves el juego a otro dominio, los jugadores empiezan de cero.
- Una carga nueva de la página sigue necesitando tu alojamiento, así que no es una app instalable que funcione sin conexión.
Dónde viven el logo, los colores, las reglas y las traducciones
Cada manual tiene una sección de personalización, y lo que cubre cambia de una edición a otra. Esto es lo que dice cada uno.
Velvet Pool
- Logo y marca: reemplaza los archivos de assets/logo/ y ajusta las dimensiones correspondientes en el CSS.
- Paños y tacos: sus definiciones están en progress.js. Mantén estables los ID para que los cosméticos guardados sigan funcionando.
- Comportamiento de la computadora en ai.js, física en physics.js. Después de cambiar reglas o física, corre las pruebas de bola 8.
- Traducciones: src/game/i18n.js, con la lista de idiomas en LANGS.
Puttide
- Colores y fuentes: css/style.css.
- Física: src/sim/constants.js. Precios de los cosméticos: src/game/economy.js, conservando los ID existentes.
- Música: copia un archivo con licencia a music/ y actualiza el mapeo de pistas en src/audio/audio.js.
- Hoyos, par y desbloqueos: los archivos de campo descritos arriba.
Gridspark y Sunset Rally
En Gridspark, según la FAQ de su ficha, el texto de la interfaz está en src/locales.js, las constantes de reglas y la paleta en src/config.js, y las reglas del rompecabezas en game.js, board.js, generator.js y shapes.js. En Sunset Rally las partidas de la campaña y las condiciones de estrellas están en Campaign.ts, los lugares en Places.ts, la física en physics.ts y la puntuación en match.ts. Sus textos en inglés y portugués están en src/i18n.ts, y los otros 12 idiomas en src/locales/.
Fíjate en lo que los manuales dejan fuera. El manual de Puttide cubre colores, física, hoyos, precios y música, pero no trae un paso para cambiar el logo, y el de Sunset Rally no tiene una sección propia de marca. Si cambiar la marca es lo primero que harás, pregunta antes de comprar.
Pruebas automáticas: qué revisan y qué no
La carpeta source/ de Velvet Pool incluye un conjunto de pruebas. Con Node.js 20 o más reciente, abre una terminal dentro de source/ y corre npm test, que equivale a node tests/run.js. No hace falta instalar dependencias. Según el manual, las pruebas revisan la física, las reglas de la bola 8, las partidas de la computadora y la coherencia de las claves de traducción, y no sustituyen probar en navegadores y en dispositivos reales.
Revisar las claves de traducción es el tipo de prueba que necesita un juego con 14 idiomas: agregas una clave en un idioma, olvidas otro, y una persona puede tardar semanas en notarlo.
No todas las ediciones tienen pruebas. El manual de Puttide no describe ninguna, solo revisiones manuales. Pinloop y Beep Out listan npm test entre sus comandos de desarrollo, y las herramientas de Ricopop incluyen un verificador de niveles.
Licencia, avisos de terceros e historial de versiones
Según los términos de la tienda, cada compra da una licencia perpetua y no exclusiva para usar la edición en un producto final, tuyo o de un cliente. Puedes modificar el código, el arte y el audio dentro de él, y los jugadores pueden acceder gratis o con monetización por anuncios. No puedes revender, compartir ni redistribuir la plantilla, su código fuente o sus recursos por separado, como plantilla, kit o paquete de recursos, ni dentro de otro producto hecho para desarrolladores. La licencia no vence cuando termina el soporte.
Las partes de terceros mantienen sus propias licencias, y tú conservas sus avisos junto con tu producto. En Velvet Pool son dos fuentes, Manrope y Fraunces, bajo la SIL Open Font License 1.1, con los textos en THIRD-PARTY-LICENSES/ y junto a las fuentes. En Puttide la lista suma Three.js (MIT), Rapier (Apache-2.0) y las fuentes Rubik y Fredoka (OFL 1.1).
El historial de versiones muestra cómo se cuida un paquete. Velvet Pool 1.0.1 (18 de octubre de 2026) dividió cadenas largas en líneas legibles y reunió los avisos de licencia en una carpeta única. La versión 1.1.0 (22 de octubre de 2026) llevó la interfaz a 14 idiomas. Esas entradas están en la página del artículo. Los términos dicen que las actualizaciones de la misma edición, cuando se publican, aparecen en tu biblioteca, sin promesa de actualizaciones por un plazo fijo.
Cómo leer el código de un juego que compraste en una hora
Este es un plan sugerido, no un tiempo prometido. Sigue la estructura de Velvet Pool y usa solo lo que el paquete te da.
- Minutos 0 a 10: extrae el ZIP, échale un vistazo al README de source/ y al mapa de archivos del manual. Abre index.html y mira qué scripts y estilos carga.
- Minutos 10 a 20: corre npm test dentro de source/ (Node.js 20+) para tener una base en verde.
- Minutos 20 a 35: lee src/core antes que src/game. Empieza por rules.js, luego ai.js, luego physics.js. Eso es el juego en sí. Controles, progreso, textos y sonido son la tubería alrededor.
- Minutos 35 a 40: anota que los ID de los elementos y las claves de guardado deben mantenerse estables, o los jugadores pierden los cosméticos guardados.
- Minutos 40 a 55: haz un cambio pequeño, como una definición de paño en progress.js. Copia el archivo a la misma ruta en game/, sirve game/ con python -m http.server 8765 y mira el resultado. Nunca lo abras por file://.
- Minutos 55 a 60: corre las pruebas otra vez.
Los módulos ES dicen lo que necesitan en sus líneas de import, así que puedes seguir la cadena desde el primer script que carga la página. Por eso una edición de archivos normales se puede leer a este ritmo.
Preguntas que hacer antes de comprar código fuente
- ¿Puedo leer el manual y jugar una demo antes de pagar? En nuestras ediciones, ambos tienen enlace en la página del artículo.
- ¿Hay una versión lista para alojar y un código de desarrollo aparte?
- ¿El código es legible o está minificado? Abre un script y míralo.
- ¿Necesito Node.js, npm, PHP o base de datos, y de qué versiones?
- ¿El juego carga algo desde un CDN o desde otro sitio?
- ¿Qué bibliotecas de terceros trae y con qué licencias?
- ¿En cuántos proyectos puedo usarlo y puedo redistribuirlo?
- ¿Cuánto dura el soporte y qué cubre? El nuestro es de 6 meses, o 12 con la extensión elegida al comprar, y cubre dudas sobre instalar y usar los archivos y defectos reproducibles.
- ¿Qué se quedó fuera?
- ¿Hay un historial de versiones y un lanzamiento reciente?
- ¿Cuál es la regla de reembolso? La nuestra: las plantillas son productos digitales, así que solo reembolsamos si aún no has descargado la plantilla o si tiene un defecto que no podemos corregir. Lo pides escribiendo al estudio con tu número de licencia.
Lo que estas ediciones no incluyen
Algunas ediciones traen extras opcionales. Ricopop y Zabum incluyen un marcador en PHP de un solo archivo, apagado por defecto. Es un marcador casual compartido que guarda las puntuaciones en un archivo: no es un ranking a prueba de trampas ni multijugador en vivo.
El soporte cubre dudas sobre instalar y usar los archivos entregados y la corrección de defectos reproducibles del juego entregado. Es un límite, y es mejor conocerlo desde el primer día.
Preguntas frecuentes sobre el código fuente de juegos HTML5
¿Cuál es la diferencia entre la carpeta game y la carpeta source?
game/ es la versión que subes a tu alojamiento. source/ es la edición de desarrollo editable del mismo juego. En Velvet Pool y Puttide tienen la misma estructura, así que un archivo que editas en source/ se copia a la misma ruta en game/. En las ediciones en TypeScript, como Sunset Rally, source/ es un proyecto que recompilas, y publicas el resultado nuevo.
¿Necesito npm o Node.js para usar el juego?
Para alojarlo, no. Node.js aparece solo en las pruebas opcionales de Velvet Pool (20 o más reciente) o para recompilar las ediciones en TypeScript, como Sunset Rally (24 LTS recomendado) y Pinloop (22.12 o más reciente).
¿El código fuente viene minificado?
No en las ediciones que tratamos aquí. Velvet Pool y Puttide son JavaScript normal y formateado, y la versión 1.0.1 de ambos dividió cadenas largas de una sola línea en líneas legibles. El código entregado de Sunset Rally viene formateado, con la minificación desactivada.
¿Puedo usar una compra en varios proyectos o clientes?
La licencia cubre un producto final, tuyo o de un cliente. Un segundo producto queda fuera de ella.
¿Puedo revender o compartir el código fuente?
No: ni por separado, ni como plantilla, kit o paquete de recursos, ni dentro de otro producto hecho para desarrolladores. Sí puedes modificar el código, el arte y el audio dentro de tu propio producto final.
¿Puedo leer el manual antes de comprar?
Sí. Cada página de artículo enlaza su manual y una demo jugable de la misma edición.
Abre un paquete antes de comprar uno
Elige una edición, abre su manual desde la página del artículo, juega la demo y lee el mapa de archivos con las preguntas de arriba a la mano. Si el manual las responde, el paquete también debería. Si no las responde, escríbele al estudio antes de pagar.