Juego Web Sin Servidor con WebAssembly y Three.js

En este tutorial aprenderás a construir un juego online de apilar bloques con un frontend en Three.js y TypeScript y un backend serverless en Go desplegado en Taubyte. Todo se desarrolla primero en local con Dream, se integra con GitHub y luego se publica en producción. Además, añadimos un marcador global con base de datos para guardar puntuaciones, un flujo de compilación automatizado y buenas prácticas para llevarlo a la nube.

Prueba el resultado final: Jugar ahora

Pila tecnológica

Frontend: Three.js y TypeScript

Backend: funciones serverless en Go sobre Taubyte

Desarrollo local: Dream de Taubyte con integración GitHub

Paso 1: ejecutar el frontend en local

1. Clona el repositorio: git clone https://github.com/taubyte/example-games-tower-blocks.git

2. Entra en el directorio: cd example-games-tower-blocks

3. Instala dependencias: npm install

4. Inicia el servidor de desarrollo: npm run dev

5. Abre en el navegador: https://localhost:3000. El juego funciona pero aún no guarda puntuaciones.

Paso 2: iniciar Dream, la nube local de Taubyte

1. Instala Dream globalmente: npm install -g @taubyte/dream

2. Crea e inicia una multiverse local: dream new multiverse

Deja esta terminal abierta, ya que ejecuta tu nube local de Taubyte.

Paso 3: conectar con la consola

1. Accede a la consola web en console.taubyte.com

2. Inicia sesión con tu correo y GitHub

3. En el selector de entornos elige Dream blackhole, que es tu nube local

Paso 4: crear aplicaciones y servir el frontend

1. Crea un nuevo proyecto, lo que generará dos repositorios en GitHub para código y configuración

2. Crea dos aplicaciones dentro del proyecto: frontend para alojar la web y backend para la lógica del marcador

3. En la app frontend añade un recurso Website con los parámetros: nombre tower_game, repositorio el fork de tu GitHub, dominio generado por defecto y ruta principal

4. Pulsa el botón de Push para subir la configuración a GitHub

5. Desde otra terminal lanza compilaciones en Dream: dream inject push-all

6. Si quieres compilar un recurso concreto usa: dream inject push-specific --rid ID_RECURSO --fn NOMBRE_COMPLETO_RECURSO. El rid y el full_name los encuentras en la pestaña YAML del recurso

7. Añade tu dominio local al archivo hosts de tu equipo: 127.0.0.1 tu-dominio.blackhole.localtau

8. En la consola, usa el botón de abrir del recurso Website y verifica que el frontend carga en tu dominio local

Paso 5: implementar el backend del marcador

1. Base de datos: dentro de la app backend crea un recurso Database con nombre leaderboard y matcher de ruta slash leaderboard

2. Librería: crea un recurso Library con nombre api_leaderboard en lenguaje Go y usa como referencia el código en GitHub: Repositorio de la librería

3. Funciones HTTP serverless en la pestaña Functions

Función getAll: método GET, ruta slash api slash leaderboard, entry getAll

Función get: método GET, ruta slash api slash score, query param player_name, entry get

Función set: método POST, ruta slash api slash score, entry set

Paso 6: compilar, desplegar en local y probar

1. Lanza compilaciones: dream inject push-all. Si solo cambiaste la librería, usa push-specific

2. Espera a que terminen en la pestaña Builds

3. Prueba cada función con el botón de ejecutar en la consola y revisa las respuestas en vivo

Paso 7: publicar en producción

1. Cierra sesión de la consola de la nube local

2. Asegúrate de tener una nube de Taubyte online

3. Inicia sesión con tu correo y nombre de dominio

4. En lugar de crear un proyecto nuevas, importa el proyecto local desde GitHub usando el desplegable Import

5. Abre el proyecto importado y cambia los dominios generados localmente por dominios de producción desactivando Generate Domain tanto en la app frontend como en backend

6. Haz Push de los cambios para desencadenar la build de configuración

7. Si el proyecto tiene Library o Website, debes registrar el recurso con Auth usando el icono de corazón roto que aparece junto al recurso. Después las builds funcionarán y el juego quedará online con el marcador activo

Resumen

Ahora dispones de un juego web de Three.js servido por Taubyte, con una base de datos y una librería en Go que alimentan tres funciones serverless para el ranking, todo ello probado en local con Dream y listo para desplegar globalmente.

Recursos

Repositorio del juego: GitHub

Librería backend: GitHub

Paquete Dream: NPM

Documentación Taubyte: tau.how

Cómo puede ayudarte Q2BSTUDIO

En Q2BSTUDIO desarrollamos aplicaciones a medida y software a medida para web, móvil y escritorio, integrando motores 3D con Three.js, microservicios serverless, WebAssembly, APIs y CDNs para ofrecer máximo rendimiento y escalabilidad. Si necesitas un partner que construya experiencias interactivas de alto impacto o que modernice tu plataforma con arquitectura nativa de la nube, visita nuestra página de aplicaciones a medida y software a medida.

Nuestro equipo también diseña y opera infraestructuras con servicios cloud AWS y Azure, observabilidad, CI CD y seguridad de extremo a extremo. Podemos ayudarte a desplegar juegos web, backends de baja latencia, analítica y pipelines de datos con máxima disponibilidad. Descubre más en nuestros servicios cloud aws y azure.

Además, somos especialistas en inteligencia artificial y en la creación de agentes IA para empresas, analítica avanzada, power bi y servicios inteligencia de negocio. Combinamos IA para empresas con ciberseguridad, pruebas de pentesting y hardening para proteger cada capa de tu solución. También abordamos automatización de procesos, orquestación y dataops para acelerar el time to market.

Palabras clave orientadas a valor y posicionamiento: aplicaciones a medida, software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, power bi, ia para empresas, agentes IA, automatización de procesos, WebAssembly, Three.js, serverless, Go, Taubyte, Dream, integración GitHub.