Crea un juego para niños con código Vibe con Gemini y publícalo con Firebase.

1. Introducción

El 25 de marzo de 2025, Google lanzó Gemini 2.5. Uno de los aspectos más memorables de este lanzamiento fue que permitió que todos probaran la función "Codificación avanzada" [video]:

Gemini 2.5: Crea tu propio juego de dinosaurios con una sola instrucción

En este codelab, aprenderás sobre la "programación de ambiente" de una app sencilla para niños, comenzando con una instrucción común y, luego, personalizándola a tu gusto. Probaremos la app en p5.js. Por último, enviaremos estos cambios a Firebase Hosting. Lo más espectacular de todo esto es que toda la pila es gratuita.

Qué aprenderás

• Usa Gemini 2.5 para crear un código de ambiente para una app de juegos.
• Prueba el código en p5js.org
• Cómo iterar y definir mejor tu instrucción o app
• Cómo alojar una aplicación estática en Firebase

Nota: Ten en cuenta que este codelab usa código generado por IA, que no es determinístico, por lo que contiene lineamientos, ya que el autor desconoce tu resultado. Además, NO uses este código en producción.

2. Requisitos previos

Este codelab se divide en dos fases:

1. Desarrollo solo para la Web. Aquí es donde te divertirás más y no se requiere habilidad de programación. Para ello, usaremos nuestra IU de Gemini ( gemini.google.com) y p5.js.
2. Entorno de programación local Aquí es donde se necesita un poco de habilidad de programación o scripting, además de la instalación y el uso de npm o npx y un editor local, como vscode o IntelliJ o cualquier otro. Esta segunda parte es opcional y solo se necesita si quieres conservar tu aplicación para que tus amigos y familiares jueguen con ella desde dispositivos móviles o computadoras.

El único requisito previo para la fase 1 es un navegador y una computadora (una pantalla grande será útil). Sigue leyendo para obtener más información sobre la fase 2.

IU de Gemini

gemini.google.com es una excelente plataforma en la que puedes probar todos los modelos de Gemini más recientes y crear tus propias imágenes y videos. Está potenciado con integraciones de Google, como Google Maps y Hoteles/Vuelos/Opiniones, lo que lo convierte en el compañero ideal para planificar tus próximas vacaciones.

Nota: Si te gusta la programación, considera usar AI Studio, una interfaz similar en la que puedes crear un prototipo de interacción con un LLM (p. ej., crear una imagen) y obtener el código de Python directamente desde la página.

p5.js

p5.js es una biblioteca de JavaScript de código abierto y gratuita que hace que la programación creativa sea accesible e inclusiva para artistas, diseñadores, educadores y cualquier otra persona. Se basa en el lenguaje Processing y simplifica el proceso de creación de contenido visual interactivo con código en el navegador web.

Codificación local [opcional]

Si deseas conservar tu aplicación, se requiere más configuración:

• Un editor de código local ( Visual Studio Code, IntelliJ, etc.)
• Una cuenta de Git ( github, gitlab o bitbucket) en la que conservar tu código
• Un npm instalado de forma local, mejor si está en el espacio del usuario (a través de npx o tecnología equivalente).

Además, configuraremos una cuenta de Firebase más adelante.

También requerimos algunas habilidades de programación, como las siguientes:

• Capacidad para instalar un paquete npm
• Capacidad para interactuar con el sistema de archivos (crear carpetas y archivos)
• Capacidad de interactuar con git (git add, git commit, git push)

Si algo de lo que se menciona aquí te resulta abrumador, recuerda que los LLM son excelentes para ayudarte. Puedes usar el modelo "Gemini 2.0 flash" o uno equivalente, por ejemplo, para obtener sugerencias. Si aún te resulta difícil, puedes omitir la fase 2 por completo. La fase 1 debería ser lo suficientemente gratificante.

3. ¡Creemos nuestro primer juego!

Abre gemini.google.com y elige un modelo capaz de generar código, p. ej., 2.5. Esta elección puede variar según la disponibilidad, el costo y la fecha. Al momento de escribir este artículo, la mejor opción sería la siguiente:

• Gemini 2.5 Flash (iteración más rápida)
• Gemini 2.5 Pro (mejor salida)

Puedes encontrar más información sobre nuestros modelos de Gemini aquí.

Nuestra primera instrucción de juego

Como puedes observar en este video, una instrucción inicial puede ser tan simple como la siguiente:

Make me a captivating endless runner game. Key instructions on the screen.
p5js scene, no HTML. I like pixelated dinosaurs and interesting backgrounds.

Puedes personalizarlo un poco:

• Entornos medievales, futuristas o cyberpunk
• ¿Está lleno de emojis o de un emoji en particular?
• Te encanta el color amarillo o varios tonos de morado.
• Quizás a tu hijo o hija le encanten los unicornios, los dinosaurios o los Pokémon.

Una vez que pegues la instrucción en tu navegador, deberías observar a Gemini pensando.Así es, Gemini 2.5 es un modelo de pensamiento, por lo que iniciará varias tareas que podrás observar cómo cambian con el tiempo. Puedes hacer clic en el menú desplegable cambiante para ver qué sucede o simplemente esperar el resultado:

Al final, deberías tener un código JavaScript que funcione.

Ahora puedes hacer clic en el botón de copiar que se encuentra en la parte superior:

Cómo probar el juego en p5.js

Ahora es momento de probar el juego.

• Abre el editor de p5.js aquí: https://editor.p5js.org/
• Selecciona y borra el código existente de sketch.js.
• Pegar tu código

Tu página debería verse así:

Por último, puedes presionar el botón REPRODUCIR.

Ahora pueden ocurrir dos cosas: tu código funciona o falla. Sigue las instrucciones según cada caso:

1. Tu código falla
2. Tu código funciona al primer intento.

En los siguientes dos párrafos, veremos cómo controlar ambas condiciones.

(Caso 1) Mi código falla

Si recibes un error como este, puedes copiarlo y pegarlo en Gemini. ¡Deja que corrija el código por ti!

(Caso 2) Mi código funciona

Si el código funciona, deberías ver un juego visual en el extremo derecho de la página.

👏 ¡Felicitaciones! Ejecutaste tu primer juego de IA.

Nota: Si bien tienes el código, la app solo funciona en tu navegador. Si quieres mostrar la app a tu familia y amigos, necesitas una solución de hosting. Por suerte, tenemos una excelente opción para ti. Sigue leyendo.

Ahora estás listo para el próximo capítulo.

Otras iteraciones

Ahora es momento de guardar tu código en algún lugar, en caso de que lo rompas. Si quieres, puedes iterar una vez. Por ejemplo, al autor le gusta mucho el doble salto de Super Mario, por lo que podrías agregar algo como lo siguiente:

The game is great, thanks! Please allow for my character to double jump.

Puedes modificar lo que quieras, ¡no hay límites! Quizás quieras guardar el nombre del personaje para obtener puntuaciones más altas o aumentar la velocidad con el tiempo para que sea más difícil, etcétera. El idioma inglés es el límite de tu instrucción.

Nota: Gemini suele brindarte solo el cambio que necesitas aplicar (p. ej., este es el cambio para la función XYZ). Es posible que quieras configurar la instrucción para que te proporcione el código actualizado completo, con algo como

"Please give me the entire updated code, not just the changed function"

. Esto te facilitará la experiencia de cortar y pegar.

Advertencias

Advertencia: Es posible que el juego funcione a la perfección en la pantalla, pero que no puedas jugarlo en un dispositivo sin teclado, como un teléfono celular. Lo veremos más adelante.

Advertencia: https://editor.p5js.org/ tiene una capacidad limitada para guardar varias iteraciones de tu código. Si te gusta lo que generó Gemini y no quieres perder la enésima iteración, ve al siguiente paso (git es tu amigo).

Es posible que quieras agregar a favoritos tu chat de Gemini. Quizás quieras cambiarle el nombre a "p5js mi primer juego" o anotar el vínculo permanente en Gemini, como " https://gemini.google.com/app/abcdef123456789" para más tarde.

4. Ejecutemos este código de forma local

En este punto, deberías tener lo siguiente:

• Una ventana abierta del navegador de Gemini con código en funcionamiento.
• Una ventana del navegador p5.js abierta con un juego en funcionamiento
• Un entorno de programación local con npm instalado

Esta es la parte más difícil del codelab. Se requiere cierta experiencia básica en programación.

Instale dependencias

Si te faltan npm y node, lo mejor es que instales npm a través de algún administrador de versiones, como nvm . Sigue las instrucciones de instalación para tu sistema operativo.

También suponemos que usas un IDE de programación. Usaremos el código de Visual Studio en nuestras capturas de pantalla y ejemplos, pero cualquier editor funcionará.

Configura el entorno local

Este es el momento en el que puedes crear tu propia estructura de archivos.

Se proporciona un guion de configuración con fines ilustrativos. Para hacerlo de forma manual, crea carpetas y archivos:

# This works for Mac and Linux. For Windows, please use other tools.
mkdir my-first-vibecoding-project/
cd my-first-vibecoding-project/
git init 
touch README.md PROMPT.md 
mkdir public/
cd public/ 
touch index.html sketch.js style.css
git add .
# Skipping quotes which can be tricky
git commit -a -m committing_empty_skeleton

La estructura de carpetas final debería verse así:

my-first-vibecoding-project/
├── PROMPT.md
├── README.md
└── public
    ├── index.html
    ├── sketch.js
    └── style.css

También deberías poder encontrarlo aquí.

Ahora, abre tu editor de código favorito (p. ej., code my-first-vibecoding-project/) y comienza a pegar el contenido de editor.p5js.org en los 3 archivos de public/:

• README.md ← Aquí puedes colocar el vínculo permanente del chat de Gemini y aquí colocarás la página de destino de la app cuando esté disponible.
• PROMPT.md ← Aquí puedes agregar todas tus instrucciones, separadas por un párrafo H2. Si quieres explicar por qué diste una instrucción determinada, puedes incluirla entre 3 comillas inversas ( ejemplo).
• **public/index.html** ← copia tu código HTML aquí
• **public/sketch.js** ← copia tu código JS aquí
• **public/style.css** ← copia tu código CSS aquí

La carpeta pública puede alojar recursos adicionales, como un archivo PNG personalizado.

5. Configura Firebase y realiza la implementación

Configura Firebase (solo la primera vez)

Asegúrate de tener npm instalado en tu máquina.

En una terminal, escribe una de las siguientes opciones (cualquiera funciona):

# to install on the machine (requires privilege)
npm install -g firebase-tools
# to install locally (low privilege needed but might need to repeat a few times)
npm install firebase-tools

Ahora deberías poder llamar al comando firebase. Si tienes problemas, consulta la documentación pública.

Nota: Firebase CLI requiere Node.js 18.0.0 o versiones posteriores. Si no puedes actualizar el nodo (p. ej., no tienes privilegios de administrador), considera usar nvm para controlar las versiones de nodo y npm.

Inicialización de Firebase

En esta sección, configuraremos Firebase Hosting. Este es un flujo muy simple, pero puede llevarte un tiempo familiarizarte con él la primera vez.

Asegúrate de estar en el directorio inmediatamente superior al directorio public/ que contiene tus archivos. La ficha (ls -al o dir) debería mostrar algo similar a lo siguiente:

$ ls 
PROMPT.md
README.md
public/

• [Paso 1] En la consola, escribe: firebase init

• Navega con los cursores hacia abajo hasta "Hosting: ..", escribe ESPACIO y, luego, presiona INTRO. (¿Por qué? Como es una opción múltiple, debes seleccionar y pasar a la página siguiente.
• [Paso 2] Ahora puedes elegir un proyecto existente (opción 1) o crear uno nuevo (opción 2):

• Nota: Si tienes un proyecto de Cloud existente, es posible que no sea un proyecto de Firebase. Los proyectos de Firebase son un subconjunto de los proyectos de GCP. Debes realizar pasos adicionales para que se conviertan en proyectos de Firebase, que es para lo que sirve la opción 3.
• Si no te decides, usa la opción "Crear un proyecto nuevo" y agrega un nombre como "p5js-TU NOMBRE-TU APP" (p. ej., "p5js-riccardo-tetris").

Precaución: Los IDs de los proyectos son únicos en Google Cloud. Elígelos con cuidado, ya que no podrás cambiarlos después.

• [paso 3] What would you like to call your project? (defaults to your project ID) (p5js-riccardo-tetris)
• Presiona INTRO.

• [paso 4] ? What do you want to use as your public directory? (public)
• Presiona INTRO (configuramos public/ a propósito).

• [Paso 5] ? Configure as a single-page app (rewrite all urls to /index.html)? No
• presiona INTRO (no)

• [Paso 6] ? Set up automatic builds and deploys with GitHub? No
• Presiona INTRO.

• [Paso 7] ? File public/index.html already exists. Overwrite? (y/N)
• Presiona INTRO (no).
• ADVERTENCIA Esto podría generar errores. Si lo sobrescribes, el nuevo archivo index.html será incompatible con p5.js.

Si todo funciona bien, deberías ver lo siguiente:

Estas acciones deberían haber creado algunos archivos:

.firebaserc
.gitignore
firebase.json
public/404.html

En particular, .firebaserc debe tener el ID de tu proyecto, que puedes extraer de forma programática con este comando: cat .firebaserc | jq .projects.default -r

Advertencia: Verifica el archivo index.html. Si tiene más de 16 líneas o incluye la palabra firebase, significa que sobrescribiste por error los archivos de p5js. No hay problema. Solo recuerda recuperar el archivo index.html anterior de Git o del editor de p5js.

Pruebas locales

Para reducir la latencia del ciclo de retroalimentación, te recomendamos que primero pruebes las cosas de forma local.

Para ello, puedes probar el potente conjunto de herramientas de CLI del equipo de Firebase. Por ejemplo:

$ firebase emulators:start

debería iniciar un servidor web en el puerto 5000 ( http://127.0.0.1:5000/) para que puedas realizar pruebas de forma local antes de enviar los cambios.

Cómo implementar en Firebase

Ahora es el momento del comando final:

$ firebase deploy

Esto debería activar varias acciones. Las últimas líneas deberían verse de la siguiente manera:

$ firebase deploy
[...]
✔  hosting[YOUR_PROJECT]: release complete 
✔  Deploy complete! 

Project Console: https://console.firebase.google.com/project/YOUR_PROJECT/overview
Hosting URL: https://YOUR_PROJECT.web.app

Esto debería proporcionarte la URL de hosting. ¡Pruébalo!

Precaución: Si la implementación falla con algún tipo de error de autenticación (por ejemplo, "No se pudo crear el proyecto"), es posible que nunca te hayas conectado a Firebase. Debes navegar a la consola de Firebase y aceptar las Condiciones del Servicio. Esto solo se debe hacer una vez por cuenta de correo electrónico.

Si la implementación se realiza correctamente, pero observas una página en blanco o una implementación dañada, puedes hacer lo siguiente:

• Abre las "Herramientas para desarrolladores" de tu navegador, busca el error y pídele a Gemini que te ayude a corregirlo con una instrucción como la siguiente:

I've deployed the script correctly with Firebase, but I now see a blank page with this error:

[ paste detailed JS console error ]

Nota: El error debe contener la línea de JavaScript para sketch.js, que Gemini conoce bien. Esto significa que Gemini tiene todo el contexto que necesita para corregirlo. Asegúrate de usar el mismo chat que produjo el código.

♾️ ¡Itera!

Puedes repetir estos pasos tantas veces como quieras. Puedes seguir dando instrucciones hasta que estés conforme con los resultados.

Es importante tener en cuenta algunos aspectos:

1. El bucle de iteración es mucho más rápido en el bucle de Gemini > p5.js > Gemini que en el bucle de Gemini > host local > implementación en Cloud Run > prueba de la app en el navegador (presiona actualizar).
2. Usa Git para controlar las versiones de las instrucciones y el código. Es posible que quieras volver a la instrucción N y al código N. En particular, te recomendamos que hagas un git commit de cada sketch.js que envíes, ya que es posible que haya errores ocultos allí.

Ten en cuenta que algunos juegos funcionan bien con un teclado, pero no con un mouse o con toques en el teléfono celular. Este es un buen momento para mejorar el código.

6. Sugerencias para escribir instrucciones

Algunas sugerencias basadas en la experiencia de haber creado varios juegos.

Crea una versión de tu instrucción

Es probable que encuentres errores en la instrucción original. Tener una versión git de ella Aquí hay algunas rutas de código:

1. Si te gusta lo que ves y quieres iterar con Gemini con instrucciones secundarias posteriores, puede ser interesante hacer un seguimiento de todas en algún lugar (instrucción 1,2,3 - ejemplo de 3 turnos1 - example2).
2. Si no te importa la app creada por la instrucción 1, es posible que desees perfeccionar la instrucción, descartar el código y reiniciar con el código modificado (instrucción 1, versión 1; instrucción 1, versión 2; instrucción 1, versión 3; y así sucesivamente).

Por supuesto, puedes combinar los 2 enfoques.

Funcionalidad para dispositivos móviles

Según el juego que crees, es posible que necesites cierta interacción con el usuario. ¿Esta interacción requiere un teclado? ¿O se puede usar con solo presionar la pantalla (p. ej., con un dispositivo móvil)? Asegúrate de ser explícito al respecto en la instrucción. Es posible que debas crear algunos botones en el teclado (consulta mi ejemplo de Tetris 3D). Consulta también el problema de dungemoji para la compatibilidad con dispositivos móviles.

Envía comentarios sobre errores de JavaScript o capturas de pantalla directamente a Gemini

Como Gemini no puede ver tu interacción con p5js, asegúrate de pegar en Gemini cualquier error de JavaScript. Ten en cuenta que Gemini es multimodal, por lo que, si realizas cambios en la IU (como reducir el tamaño del título o bajar la puntuación), también puedes adjuntar capturas de pantalla del juego. El aspecto del feedback de programación nunca había sido tan divertido.

7. ¡Felicitaciones!

🎉 Felicitaciones por completar el codelab.

Vimos lo fácil que es crear un juego con Gemini y cómo Firebase proporciona una solución de hosting sencilla para conservar y compartir tu juego con otras personas.

Temas abordados

• Crea un juego con Gemini 2.5.
• Cómo implementar en Firebase

Ahora es el momento de 👥 presumir. ¿Por qué no compartes tu juego más reciente (your-project.web.app) en LinkedIn o Twitter con el hashtag #VibeCodeAGameWithGemini (y, tal vez, etiquetes a el autor en LinkedIn)? Esto nos permitirá saber qué tan atractivo es este codelab y, posiblemente, escribir más de este tipo.

¡Quiero más!

Si buscas recursos adicionales, consulta estos juegos y mensajes:

• ¡Programa cinco juegos para niños con Gemini 2.5 y p5.js en un fin de semana! En este artículo, se te guiará por el proceso de codificación de la atmósfera de un juego con 6 ejemplos.
• palladius/genai-googlecloud-scripts (repositorio de GitHub con alrededor de 10 apps: código y mensajes): Tetris, Pacman, Connect 4 y hasta un clon de Rogue para los nostálgicos Contiene las instrucciones de todos estos juegos. Elige tu favorita, adapta la instrucción y disfruta.

Estos son algunos ejemplos de juegos que puedes crear:

El juego final podría verse de la siguiente manera:

• Un Tetris en 3D
• Un juego de idiomas
• Una clonación no autorizada
• Un clon de Pac-Man.

Una vez más, el límite es el inglés.

🎉 ¡Feliz programación!