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

Quedan 29 minutos

Acerca de este codelab

Última actualización: may 13, 2025

Escrito por Riccardo Carlesso

Se usó la API de Cloud Translation para traducir esta página.

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 a partir de una instrucción de una sola línea

En este codelab, aprenderás a “codificar con estilo” una app simple para niños, a partir de una instrucción común y, luego, personalizarla a tu gusto. Probaremos la app en p5.js. Por último, enviaremos estos cambios a Firebase Hosting. Lo más espectacular de esto es que, actualmente, toda la pila es gratuita.

Qué aprenderás

Usa Gemini 2.5 para codificar una app de juego con Vibe.
Prueba el código en p5js.org.
Cómo iterar y definir mejor tu propuesta o app
Cómo alojar una aplicación estática en Firebase

Ten en cuenta que este codelab usa código generado por IA, que no es determinista, por lo que contiene lineamientos, ya que el autor no conoce el resultado. Además, NO uses este código en producción.

Si te gusta este codelab, asegúrate de probar 🔥 Firebase Studio, que ofrece una experiencia de programación de Vibe integrada y elegante.

2. Requisitos previos

Este codelab consta de dos fases:

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

El único requisito previo para la fase 1 es un navegador y una computadora (una pantalla grande será de ayuda). Para la fase 2, sigue leyendo.

IU de Gemini

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

Sugerencia: Si te gusta la programación, considera también jugar con AI Studio, una interfaz similar en la que puedes crear prototipos de una interacción de 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 gratuita y de código abierto que hace que la programación creativa sea inclusiva y accesible 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 e 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étera)
Una cuenta de git ( github, gitlab o bitbucket) en la que persistir tu código
Un npm instalado de forma local, mejor si está en el espacio del usuario (a través de npx o una 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 de interactuar con el sistema de archivos (crear carpetas y archivos)
Capacidad de interactuar con git (git add, git commit, git push)

Si algo de esto te parece abrumador, recuerda que los LLM son una gran ayuda. Por ejemplo, puedes usar "Gemini 2.0 flash" o un modelo equivalente para obtener sugerencias. Si aún es demasiado 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 compatible con código, p. ej., 2.5. Esta opción puede variar según la disponibilidad, el costo y la fecha. En el 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 resultado).

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

Nuestra primera propuesta de juego

Como puedes observar en este video, una consigna inicial puede ser tan simple como esta:

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

No dudes en personalizarlo un poco:

Entornos medievales, futuristas o cyberpunk
¿Está lleno de emojis o de uno en particular?
Te encanta el color amarillo o varios tonos de morado.
Tal vez a tu hijo o hija le encantan los unicornios, los dinosaurios o los Pokémon.

Una vez que pegues la instrucción en tu navegador, deberías observar que Gemini piensa.Así es, Gemini 2.5 es un modelo de pensamiento, por lo que iniciará una serie de tareas que podrás observar a lo largo del 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 copia 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 sketch.js existente.
Pegar tu código

Tu página debería verse así:

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

Ahora pueden suceder dos cosas: tu código funciona o falla. Sigue las instrucciones según ambos casos:

Tu código falla
¡Tu código funciona a la primera!

Veamos en los siguientes dos párrafos cómo administrar ambas condiciones.

(caso 1) Mi código falla

Si recibes un error como este, simplemente cópialo y pégalo en Gemini. Permite 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! Estás ejecutando tu primer juego de IA.

Nota: Mientras tengas el código, la app solo funcionará en tu navegador. Si quieres mostrar la app a tu familia y amigos, necesitas una solución de alojamiento. Afortunadamente, tenemos una excelente opción para ti. Sigue leyendo.

Ya puedes pasar al siguiente capítulo.

Más iteraciones

Es hora de guardar tu código en algún lugar, en caso de que lo rompas. Si lo deseas, 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 todo lo que quieras, ¡el cielo es el límite! Tal vez 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 mostrarte solo el cambio que debes aplicar (p. ej., este es el cambio para la función XYZ). Te recomendamos que configures la instrucción para que te muestre el código completo actualizado, con algo como

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

. Esto facilitará la experiencia de cortar y pegar.

Advertencias

Te recomendamos que agregues a favoritos tu chat de Gemini. Tal vez quieras cambiarle el nombre a "p5js mi primer juego" o anotar el vínculo permanente a Gemini, como " https://gemini.google.com/app/abcdef123456789" para usarlo más adelante.

4. Ejecutemos este código de forma local

En este punto, deberías tener lo siguiente:

Ventana del navegador Gemini abierta con un código que funciona
Ventana del navegador p5.js abierta con un juego en funcionamiento
Un entorno de codificación local con npm instalado

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

Instala dependencias

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

También suponemos que usas un IDE de programación. Usaremos Visual Studio Code en nuestras capturas de pantalla y ejemplos, pero cualquier editor funciona.

Configura el entorno local.

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

Se proporciona una secuencia de comandos de configuración a modo de ejemplo. Para ello, crea carpetas y archivos de forma manual:

# 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 encontrar esta información 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 de chat de Gemini y aquí colocarás la página de destino de la app cuando llegue.
PROMPT.md ← Aquí te recomendamos que agregues todas tus instrucciones, separadas por un párrafo H2. Si quieres explicar por qué diste una instrucción determinada, puedes encerrarla entre 3 acentos graves ( 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 PNG personalizado.

5. Configura y, luego, realiza la implementación en Firebase

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 de ellas 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, sigue los documentos públicos.

Inicialización de Firebase

En esta sección, configuraremos Firebase Hosting. Este es un flujo muy simple, pero es posible que debas tomarte un tiempo para familiarizarte con él la primera vez.

Asegúrate de estar en el directorio directamente sobre el 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/

[step 1] En la consola, escribe lo siguiente: firebase init

Navega con los cursores hasta "Hosting: .." y escribe ESPACIO y, luego, INTRO. (¿Por qué? Dado que se trata de una opción de selección múltiple, debes seleccionarla 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 convertirlos en proyectos de Firebase, que es para lo que sirve la opción 3.
Si no lo tienes decidido, usa "Create a new project" y agrega un nombre como "p5js-TU NOMBRE-TUAPP" (p. ej., "p5js-riccardo-tetris").

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

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

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

[step 6] ? Set up automatic builds and deploys with GitHub? No
Presiona INTRO para NO hacerlo.

[step 7] ? File public/index.html already exists. Overwrite? (y/N)
Presiona INTRO (no).
ADVERTENCIA Es posible que esto sea propenso a errores. Si lo reemplazas, el nuevo index.html no será compatible con p5js.

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 lo siguiente: cat .firebaserc | jq .projects.default -r

Advertencia: Verifica el archivo index.html. Si tiene más de 16 líneas o contiene la palabra firebase, significa que reemplazaste por error los archivos p5js. No hay problema, solo recuerda volver a tomar el index.html anterior de git o del editor de p5js.

Pruebas locales

Para reducir la latencia del bucle de reacción, te recomendamos que primero pruebes las opciones de forma local.

Para ello, puedes probar el potente paquete 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 enviarlas.

Cómo implementar en Firebase

Ahora es el momento del último comando:

$ firebase deploy

Esto debería activar varias acciones. Las últimas líneas deberían decir algo como lo siguiente:

$ 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

Se debería mostrar la URL de hosting. ¡Pruébalo!

Si la implementación tiene éxito, 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 solucionarlo con un mensaje como este:

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

[ paste detailed JS console error ]

♾️ ¡Itera!

Puedes iterar estos pasos todas las veces que quieras. Puedes seguir haciendo preguntas hasta que estés conforme con los resultados.

Es importante tener en cuenta lo siguiente:

El bucle de iteración es mucho más rápido en Gemini > p5.js > bucle de Gemini que en Gemini > host local > implementar en Cloud Run > probar app en el navegador (presiona Actualizar).
Usa git para controlar la versión de la instrucción y el código. Es posible que quieras volver a la instrucción N y codificar N. En particular, debes confirmar con git cada sketch.js que envíes, ya que es posible que haya errores sin detectar.

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

6. Sugerencias para las instrucciones

Algunas sugerencias después de crear bastantes juegos.

Crea una versión de tu instrucción

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

Si te encanta lo que ves y quieres iterar con gemini con instrucciones secundarias posteriores, podría ser interesante hacer un seguimiento de todas en algún lugar (instrucciones 1,2,3 - ejemplo1 de 3 tomas - example2).
Si no te importa la app creada por la instrucción 1, te recomendamos que perfecciones la instrucción, descartes el código y reinicies con el código modificado (instrucción 1 v1, instrucción 1 v2, instrucción 1 v3, etcétera).

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 necesita un teclado? ¿O se puede usar con solo presionar la pantalla (p. ej., con un dispositivo móvil)? Asegúrate de ser explícito en la instrucción. Es posible que debas crear algunos botones en el teclado (consulta mi ejemplo de Tetris 3D). Consulta también la molestia de dungemoji para la compatibilidad con dispositivos móviles.

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

Dado que 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 hacer que el título sea más pequeño o bajar la puntuación), también puedes adjuntar capturas de pantalla del juego. El aspecto de los comentarios de codificación nunca fue 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 alojamiento 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 de ello. ¿Por qué no compartes tu juego más reciente (your-project.web.app) en LinkedIn o Twitter con el hashtag #VibeCodeAGameWithGemini (y tal vez etiquetas al 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 consignas:

Crea cinco juegos infantiles con Gemini 2.5 y p5.js en un fin de semana. En este artículo, se te guiará a través del proceso de pensamiento para codificar un juego con 6 ejemplos.
palladius/genai-googlecloud-scripts (repositorio de GitHub con ~10 apps: código y mensaje): Tetris, Pacman, Connect 4 y hasta un Rogue clone para los nostálgicos. Contiene las instrucciones de todos estos juegos. Elige tu favorito, adapta la propuesta y disfruta.

Si lo que hiciste hoy te parece demasiado esfuerzo, también puedes probar 🔥 Firebase Studio, en el que el ciclo idea > instrucción > código > app se encuentra en una sola ventana del navegador.

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 lenguaje
Un clon no autorizado
Un clon de Pac-Man.

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

🎉 ¡Diviértete programando!

Informar de un error