Código fuente de juego de estacionamiento: un puzle de tráfico 3D por dentro
Qué trae el paquete de Beep Out, cómo está organizado su proyecto en TypeScript y qué suele cambiar primero quien lo compra.
Si buscas código fuente de un juego de estacionamiento, la respuesta corta es esta: Beep Out es un puzle de tráfico en 3D para navegador, terminado, con 30 niveles, una versión lista para subir y el proyecto en TypeScript editable que la genera, por US$ 35. Esta guía abre el paquete y explica para qué sirve cada parte.
Los juegos de atasco parecen sencillos, y por eso uno flojo se descubre rápido. Las reglas tienen que entenderse de un vistazo, el orden de los niveles tiene que enseñar y el código tiene que dejarte crear tus propios tableros sin romper los anteriores. Eso es lo que revisamos aquí, junto con el alojamiento, la licencia y lo que la edición no incluye.
Qué trae el paquete del código fuente del juego de estacionamiento
Beep Out se vende como Local Browser Edition, versión 1.1.0. La descarga tiene dos mitades: un juego que puedes alojar hoy y un proyecto que puedes modificar.
- Una carpeta game/ lista para subir, con los 30 niveles.
- JavaScript, CSS y datos del runtime legibles, para ver lo que ejecuta el navegador.
- El código fuente del desarrollador en TypeScript, con los recursos del juego y pruebas.
- Un manual ilustrado en inglés y portugués con instalación, mapa de archivos, personalización, solución de problemas y preguntas frecuentes.
- Avisos de licencia de las dependencias y de las fuentes tipográficas.
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. El manual, en cambio, solo está en inglés y portugués, algo que importa si tu desarrollador no lee ninguno de los dos.
Abrir la página de Beep Out y probar la demo
Cómo funciona el puzle de tráfico, regla por regla
Cada vehículo lleva en el techo una flecha que indica su salida. Toca o haz clic en un auto con el camino libre y se va. Si eliges uno bloqueado, choca con el tráfico, así que el orden de las jugadas decide el nivel.
Desde el nivel 4, una fila de pasajeros espera en la parada del autobús. Un vehículo solo puede salir cuando su color coincide con el siguiente pasajero. Un auto libre del color equivocado se estaciona en un cajón y sale solo cuando llega el turno de su pasajero. El estacionamiento es pequeño: demasiados colores equivocados lo llenan, así que hay que planear varias jugadas por adelantado. Esa segunda capa convierte un atasco común en un puzle de secuencia.
La pantalla de juego tiene pista, deshacer y reiniciar. Terminar un nivel sin toques bloqueados, sin pistas y sin deshacer da un Clean Clear, y un mejor tiempo opcional por nivel se guarda en el navegador. Los niveles superados desbloquean cinco pinturas en el Garaje. Las pinturas son solo estéticas: todos los autos se juegan igual.
Cómo está organizado el código
Hay dos lugares de trabajo, y conviene no mezclarlos. La carpeta game/ es el resultado ya compilado: la subes y funciona. El proyecto del desarrollador es donde se hacen los cambios: niveles, ajustes, textos, logos y archivos de audio. Después de un cambio recompilas y reemplazas la carpeta game/ alojada por la salida nueva completa.
La base es TypeScript, Three.js y WebGL2, compilado con Vite. Los archivos incluyen HTML, CSS, JavaScript, TypeScript y JSON. Recompilar requiere Node.js 22.12 o posterior y npm. Para jugar no hace falta nada de eso.
El proyecto incluye cuatro comandos, y el manual explica cada uno:
- npm run levels revisa los archivos de niveles antes de compilar.
- npm test ejecuta las pruebas.
- npm run typecheck detecta errores de tipos en el TypeScript.
- npm run build genera la nueva carpeta del juego.
Un verificador de niveles vale más de lo que parece. Los puzles de estacionamiento fallan en silencio: un tablero sin solución, un pasajero sin auto de su color. Correr la revisión antes de cada compilación sale más barato que enterarte por los jugadores.
Qué cambiar primero en una plantilla de juego de estacionamiento
Te sugerimos empezar por estos cuatro cambios, en este orden.
1. Nombre, logo y marca
El título del HTML y los ajustes de marca están en el proyecto fuente, con los archivos de logo en public/ y el audio en su propia carpeta. Reemplaza los archivos conservando las mismas rutas y recompila. El white label está permitido: tu marca o la de tu cliente reemplaza la nuestra.
2. Niveles
Los archivos para crear niveles están en source/. Edítalos, valídalos con npm run levels, recompila y sube. El manual trae el mapa de archivos, así que no tienes que buscar un tablero entre el código.
3. Textos de la interfaz e idiomas
Los textos de la interfaz están en archivos de idioma. Si tu público habla uno de los 14 idiomas, lee cada pantalla una vez en ese idioma; casi siempre conviene ajustar algunas palabras al tono de la marca.
4. Ajustes del juego
Los ajustes del juego están en archivos de configuración, no repartidos por el código. Cambia un valor a la vez y juega algunos niveles después de cada cambio.
- Guarda una copia del paquete original.
- Cambia los archivos de marca, conservando las rutas.
- Edita o crea niveles y ejecuta npm run levels.
- Ejecuta npm test y npm run build.
- Reemplaza la carpeta game/ alojada completa, no archivos sueltos.
- Prueba en los celulares y navegadores que usan tus jugadores.
Alojamiento, inserción y tiendas de apps
Sube el contenido de game/ a cualquier alojamiento HTTP(S) de archivos estáticos y abre su dirección. No necesitas PHP, base de datos, cuenta ni servidor Node.js para jugar. Funciona en una subcarpeta o dentro de un iframe en tu propia página, y el manual incluye un ejemplo de iframe. Dale suficiente altura al iframe y deja activo el almacenamiento del navegador si el progreso debe sobrevivir a una recarga.
Abrir el index.html directo desde el disco no funciona; hay que servirlo por HTTP(S). El navegador necesita JavaScript, módulos ES y WebGL2. Los jugadores tocan en pantallas táctiles y hacen clic en la computadora, y los Ajustes tienen un modo de gráficos Bajo que ahorra batería en celulares más viejos.
El paquete no incluye un proyecto de app nativa. Si quieres el juego en una tienda de apps, conectado al SDK de un portal o instalado en tu servidor, eso es un servicio aparte que cotizamos por proyecto.
Pedir cotización de cambios, alojamiento o versión en app
Lo que esta edición deja fuera
Beep Out es para un jugador, con datos locales. El progreso, los récords y los ajustes se quedan en el navegador del jugador. No hay multijugador en línea, ranking en línea ni récords en la nube, ni SDK de publicidad ni SDK de portal. Las apps nativas, el alojamiento y los servicios alojados no forman parte del paquete.
Para muchos sitios esa es la forma correcta: nada que mantener en un servidor y ningún dato del jugador que salga del navegador. Si necesitas ranking o anuncios, planea ese trabajo antes del lanzamiento y no después.
Licencia, soporte y precio en un párrafo
Una compra da una licencia perpetua y no exclusiva para usar la edición en un producto final, tuyo o de un cliente. Los jugadores pueden acceder gratis o con monetización por anuncios. Puedes modificar el código, el arte y el audio dentro de ese producto y cambiar nuestro nombre y logo, 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. El precio de lista es US$ 35; hasta el 30 de noviembre de 2026, una promoción de Black Friday descuenta 15% en todas las plantillas, así que Beep Out cuesta US$ 29.75, y desde el 1 de diciembre los precios vuelven a los de lista.
Leer los términos completos de licencia y soporte
Preguntas frecuentes sobre el código fuente de Beep Out
¿Necesito un servidor o una base de datos?
No. Sube el contenido de game/ a un alojamiento HTTP(S) de archivos estáticos y abre el index.html desde esa dirección. El progreso y los récords se guardan en el navegador del jugador.
¿Puedo crear mis propios niveles de estacionamiento?
Sí. Edita los archivos de niveles en source/, valídalos con npm run levels, recompila y reemplaza la carpeta game/ alojada por la salida nueva.
¿El puzle de tráfico funciona en celulares?
Sí. En el celular se tocan los vehículos y en la computadora se hace clic. El navegador debe soportar WebGL2, y el modo de gráficos Bajo ayuda en equipos más viejos. Prueba en tus propios celulares antes de lanzar.
¿Puedo poner el juego dentro de mi página?
Sí. Alójalo en cualquier carpeta e insértalo con un iframe. El manual incluye un ejemplo.
¿Incluye anuncios o ranking en línea?
No. La edición no tiene SDK de publicidad, ranking en línea ni multijugador. Agregarlos es trabajo a medida, cotizado por proyecto.
¿Puedo usar una licencia para dos clientes?
No. Una licencia cubre un producto final. Un segundo cliente necesita una segunda licencia, y varias plantillas en el mismo pedido tienen descuento por paquete.
Plantillas de puzle parecidas
Si a tu público le gusta más ordenar colores que el tráfico, Mochi Monsters es un puzle de ordenar colores con 60 niveles en tres mundos y un modo infinito, por US$ 39 a precio de lista. Si buscas partidas más cortas, Gridspark es un puzle de bloques de 8×8 con el movimiento ZAP y un desafío diario, por US$ 29 a precio de lista. Ambos traen código legible y 14 idiomas en la interfaz.
Ver Mochi Monsters, el puzle de ordenar colores
Ver Gridspark, el puzle de bloques
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.