Crie um jogo infantil com o Vibe Code e publique com o Firebase.

1. Introdução

Em 25 de março de 2025, o Google lançou o Gemini 2.5. Um dos aspectos mais memoráveis desse lançamento foi que ele permitiu que todos testassem o recurso "Programação avançada" [ vídeo]:

Gemini 2.5: crie seu próprio jogo de dinossauros com um comando de uma linha

Neste codelab, você vai aprender sobre a "programação de vibe", um app simples para crianças, começando com um comando comum e personalizando de acordo com suas preferências. Vamos testar o app em p5.js. Por fim, vamos enviar essas mudanças para o Firebase Hosting.O mais espetacular disso é que toda a pilha está sem custo financeiro!

O que você vai aprender

Use o Gemini 2.5 para criar um app de jogo com vibe-code.
Teste o código em p5js.org.
Como iterar e refinar seu comando / app.
Como hospedar um aplicativo estático no Firebase

Observação: este codelab usa código gerado por IA. Como ele não é determinista, este codelab contém diretrizes porque a saída é desconhecida para o autor. Além disso, NÃO use esse código em produção.

2. Pré-requisitos

Este codelab tem duas fases:

Desenvolvimento somente para a Web. É aqui que você vai se divertir mais, e não é preciso ter habilidades de programação. Para isso, vamos usar nossa interface do Gemini ( gemini.google.com) e o p5.js.
Ambiente de programação local. É aqui que é necessário um pouco de habilidade de programação / scripting, além da instalação e uso de npm / npx e um editor local, como vscode, IntelliJ ou qualquer outro. Essa segunda parte é opcional e só é necessária se você quiser manter o aplicativo para que seus amigos e familiares possam jogar com ele em dispositivos móveis ou computadores.

O único pré-requisito para a fase 1 é um navegador e um computador (uma tela grande ajuda). Para a fase 2, continue lendo.

Interface do Gemini

gemini.google.com é uma ótima plataforma para testar todos os modelos mais recentes do Gemini, além de criar suas próprias imagens e vídeos. Ele vem com integrações do Google, como o Google Maps e hotéis/voos/avaliações, o que o torna o companheiro ideal para planejar suas próximas férias.

Dica:se você gosta de programação, também pode usar o AI Studio, uma interface semelhante em que é possível criar um protótipo de interação com um LLM (por exemplo, criar uma imagem) e receber o código Python diretamente na página.

p5.js

p5.js é uma biblioteca JavaScript sem custo financeiro e de código aberto que torna a programação criativa acessível e inclusiva para artistas, designers, educadores e qualquer pessoa. Ele é baseado na linguagem Processing e simplifica o processo de criação de conteúdo visual e interativo usando código no navegador da Web.

Codificação local [opcional]

Se quiser manter o aplicativo, será necessário fazer mais configurações:

Um editor de código local ( Visual Studio Code, IntelliJ etc.)
Uma conta do Git ( github / gitlab / bitbucket) para manter seu código.
Um npm instalado localmente, de preferência no espaço do usuário (via npx ou tecnologia equivalente).

Além disso, vamos configurar uma conta do Firebase mais tarde.

Também exigimos algumas habilidades de programação, como:

Capacidade de instalar um pacote npm
Capacidade de interagir com o sistema de arquivos (criar pastas e arquivos)
Capacidade de interagir com git (git add, git commit, git push).

Se algo aqui for assustador, lembre-se: os LLMs são ótimos para ajudar você. Você pode usar o modelo "Gemini 2.0 flash" ou equivalente, por exemplo, para receber sugestões. Se ainda for muito difícil, pule a fase 2 inteira. A Fase 1 precisa ser recompensadora o suficiente.

3. Vamos criar nosso primeiro jogo!

Abra gemini.google.com e escolha um modelo com capacidade de programação, como o 2.5. Essa escolha pode variar de acordo com a disponibilidade, o custo e a data. No momento da redação, a melhor opção seria:

Gemini 2.5 Flash (iteração mais rápida)
Gemini 2.5 Pro (melhor saída).

Saiba mais sobre nossos modelos do Gemini neste link.

Nosso primeiro comando de jogo

Como você pode observar neste vídeo, um comando inicial pode ser tão simples quanto este:

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

Personalize um pouco:

Cenários medievais / futuristas / cyberpunk
Cheio de emojis ou um emoji específico?
Você gosta da cor amarela ou de vários tons de roxo.
Talvez a criança goste de unicórnios, dinossauros ou Pokémon.

Depois de colar o comando no navegador, você vai observar o Gemini pensando. Isso mesmo, o Gemini 2.5 é um modelo de pensamento. Por isso, ele vai iniciar várias tarefas que você pode observar mudar com o tempo. Clique no menu suspenso em mudança para ver o que está acontecendo ou aguarde o resultado:

No final, você terá um JavaScript funcionando.

Agora você pode clicar no botão de cópia na parte de cima:

Testar o jogo em p5.js

Agora é hora de testar o jogo.

Abra o editor p5.js aqui: https://editor.p5js.org/
Selecione e exclua o código sketch.js atual.
Cole seu código

Sua página vai ficar assim:

Por fim, clique no botão TOCAR.

Agora duas coisas podem acontecer: seu código funciona ou falha. Siga as instruções de acordo com cada caso:

Seu código falha
Seu código funciona na primeira tentativa!

Nos próximos dois parágrafos, vamos ver como gerenciar as duas condições.

(caso 1) Meu código falha!

Se você receber um erro como este, basta copiar e colar no Gemini. Deixe que ele corrija o código para você!

(caso 2) Meu código funciona!

Se o código funcionar, um jogo visual vai aparecer na extremidade direita da página.

👏 Parabéns, você está jogando seu primeiro jogo de IA!

Observação:enquanto você tiver o código, o app vai funcionar apenas no seu navegador. Se quiser mostrar o app para sua família e amigos, você precisa de uma solução de hospedagem. Felizmente, temos uma ótima opção para você. Continue lendo.

Agora você está pronto para a próxima etapa.

Outras iterações

Agora é hora de salvar seu código em algum lugar, caso ele seja corrompido. Se quiser, você pode iterar uma vez. Por exemplo, o autor gosta muito do pulo duplo do Super Mario. Então, você pode adicionar algo assim:

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

Você pode ajustar o que quiser. O céu é o limite! Talvez você queira salvar o nome do personagem para pontuações mais altas ou aumentar a velocidade com o tempo para dificultar o jogo, entre outras opções. O inglês é o limite do seu comando!

Dica:o Gemini costuma dar apenas a mudança que você precisa aplicar (por exemplo, esta é a mudança para a função XYZ). Você pode definir o comando para que ele forneça o código atualizado inteiro, com algo como

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

. Isso vai facilitar a experiência de cortar e colar.

Advertências

Talvez você queira adicionar sua conversa no Gemini aos favoritos. Talvez você queira renomear para "p5js meu primeiro jogo" ou anotar o link permanente do Gemini, como " https://gemini.google.com/app/abcdef123456789" para mais tarde.

4. Vamos executar esse código localmente

Neste momento, você precisa ter:

Uma janela do navegador Gemini aberta com algum código funcional.
Uma janela do navegador p5.js aberta com um jogo funcionando
Um ambiente de programação local com o npm instalado.

Esta é a parte mais difícil do codelab. É necessário ter alguma experiência básica em programação.

Instalar dependências

Se você não tiver npm e node, a melhor opção é instalar npm usando um gerenciador de versões, como o nvm . Siga as instruções de instalação para seu sistema operacional.

Também presumimos que você está usando um IDE de programação. Vamos usar o código do Visual Studio nas nossas capturas de tela e exemplos, mas qualquer coisa funciona.

Configure o ambiente local

Este é o momento de criar sua própria estrutura de arquivos.

Um script de configuração é fornecido para fins ilustrativos. Você pode fazer isso manualmente criando pastas e arquivos:

# 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

A estrutura final da pasta vai ficar assim:

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

Você também pode encontrar essa opção aqui.

Agora abra seu editor de código favorito (por exemplo, code my-first-vibecoding-project/) e comece a colar o conteúdo de editor.p5js.org nos três arquivos em public/:

README.md ← Aqui você pode colocar o link permanente da conversa no Gemini e aqui você vai colocar a página de destino do app quando ele for lançado.
PROMPT.md ← Aqui, você pode adicionar todos os comandos, separados por um parágrafo H2. Se quiser explicar por que você deu um determinado comando, coloque-o entre três crases ( exemplo).
**public/index.html** ← copie seu código HTML aqui
**public/sketch.js** ← copie seu código JS aqui
**public/style.css** ← copie seu código CSS aqui

A pasta pública pode hospedar outros recursos, como um PNG personalizado.

5. Configurar e implantar no Firebase

Configurar o Firebase (somente na primeira vez)

Verifique se o npm está instalado na sua máquina.

Em um terminal, digite um dos seguintes comandos (qualquer um 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

Agora você pode chamar o comando firebase. Se tiver problemas, siga a documentação pública.

Inicialização do Firebase

Nesta seção, vamos configurar o Firebase Hosting. Esse é um fluxo muito simples, mas pode levar um tempo para se familiarizar com ele na primeira vez.

Verifique se você está no diretório diretamente acima do public/, que contém seus arquivos. A listagem (ls -al ou dir) vai mostrar algo assim:

$ ls 
PROMPT.md
README.md
public/

[Etapa 1] No console, digite: firebase init

Navegue com os cursores para baixo até "Hospedagem: .." e digite ESPAÇO e ENTER. Por quê? Como é uma múltipla escolha, você precisa selecionar e ir para a próxima página.
[Etapa 2] Agora você pode escolher um projeto atual (opção 1) ou criar um novo (opção 2):

Observação: se você já tiver um projeto do Cloud, ele pode não ser um projeto do Firebase. Os projetos do Firebase são um subconjunto dos projetos do GCP. Você precisa de mais trabalho para transformá-los em projetos do Firebase, que é para isso que serve a opção 3.
Se não tiver certeza, use "Criar um novo projeto" e adicione um nome como "p5js-SEUNOME-SEUAPP" (por exemplo, "p5js-riccardo-tetris").

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

[step 4] ? What do you want to use as your public directory? (public)
Pressione ENTER. Configuramos public/ de propósito.

[step 5] ? Configure as a single-page app (rewrite all urls to /index.html)? No
pressione ENTER (não)

[step 6] ? Set up automatic builds and deploys with GitHub? No
Pressione ENTER - NÃO

[step 7] ? File public/index.html already exists. Overwrite? (y/N)
Pressione ENTER (não).
AVISO: isso pode causar erros. Se você substituir o arquivo, o novo index.html será incompatível com p5js.

Se tudo funcionar, você vai ver isto:

Essas ações criaram alguns arquivos:

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

Em particular, .firebaserc precisa ter o ID do seu projeto, que pode ser extraído programaticamente com este comando: cat .firebaserc | jq .projects.default -r

Aviso:verifique o index.html. Se ele tiver mais de 16 linhas e/ou a palavra "firebase", você substituiu os arquivos p5js por engano. Sem problemas, basta recuperar o index.html antigo do git ou do editor p5js.

Teste local

Para reduzir a latência do ciclo de feedback, tente fazer as coisas localmente primeiro.

Para isso, tente o poderoso pacote de CLI da equipe do Firebase. Exemplo:

$ firebase emulators:start

inicia um servidor da Web na porta 5000 ( http://127.0.0.1:5000/ ) para que você possa testar localmente antes de enviar.

Implantar no Firebase

Agora, é hora do comando final:

$ firebase deploy

Isso vai acionar várias ações. As últimas linhas devem ser parecidas com esta:

$ 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

Isso vai fornecer o URL de hospedagem. Faça um teste

Se a implantação for bem-sucedida, mas você observar uma página em branco ou uma implantação corrompida, faça o seguinte:

Abra as "Ferramentas para desenvolvedores" do navegador, encontre o erro e peça ao Gemini para ajudar a corrigi-lo com um comando 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 ]

♾️ Itere!

Você pode repetir essas etapas quantas vezes quiser. Você pode continuar pedindo até ficar satisfeito com os resultados.

É importante observar algumas coisas:

O loop de iteração é muito mais rápido em Gemini > p5.js > loop do Gemini do que em Gemini > host local > implantação no Cloud Run > teste do app no navegador (atualize).
Use o git para controle de versões de comandos e códigos. Talvez você queira voltar ao comando N e ao código N. Em especial, faça um git commit de cada sketch.js que você enviar, já que pode haver bugs ocultos.

Alguns jogos funcionam bem com um teclado, mas não com um mouse ou toque no smartphone. Este é um ótimo momento para melhorar o código.

6. Dicas de comandos

Algumas dicas de quem já criou vários jogos.

Controlar a versão do comando

Você provavelmente vai encontrar erros no comando original. Ter uma versão git. Há alguns caminhos de código aqui:

Se você gostar do que vê e quiser iterar com o Gemini usando outros subcomandos, pode ser interessante rastrear todos eles em algum lugar (comando 1, 2, 3: exemplo de 3 disparos 1, example2).
Se você não se importar com o app criado pelo comando 1, talvez queira aperfeiçoar o comando, descartar o código e reiniciar com o código modificado (comando 1 v1, comando 1 v2, comando 1 v3 etc.).

É claro que você pode misturar as duas abordagens.

Funcionalidade móvel

Dependendo do jogo que você criar, talvez seja necessário ter alguma interação com o usuário. Essa interação precisa de um teclado? Ou é possível usar apenas tocando na tela (por exemplo, com um dispositivo móvel)? Deixe isso claro no comando. Talvez seja necessário criar alguns botões no teclado (confira meu exemplo de Tetris 3D). Consulte também o problema de compatibilidade com dispositivos móveis do dungemoji.

Enviar feedback sobre erros de JavaScript / capturas de tela diretamente para o Gemini

Como o Gemini não consegue ver sua interação com o p5js, cole no Gemini todos os erros de JavaScript. O Gemini é multimodal. Portanto, se você tiver mudanças na interface (como diminuir o título ou reduzir a pontuação), também poderá anexar capturas de tela do jogo. Nunca foi tão divertido receber feedback sobre programação!

7. Parabéns!

🎉 Parabéns por concluir o codelab.

Vimos como é fácil criar um jogo com o Gemini e como o Firebase oferece uma solução de hospedagem simples para manter e compartilhar seu jogo com outras pessoas.

O que vimos

Crie um jogo com o Gemini 2.5.
Implantar no Firebase

Agora é hora de 👥 se gabar! Que tal compartilhar seu jogo mais recente (your-project.web.app) no LinkedIn ou no Twitter com a hashtag #VibeCodeAGameWithGemini (e talvez marcar o autor no LinkedIn)? Assim, vamos saber se este codelab é interessante e talvez escrever mais conteúdo desse tipo!

Quero mais!

Se você quiser mais recursos, confira estes jogos e comandos:

Programe cinco jogos infantis com o Gemini 2.5 e o p5.js em um fim de semana! Neste artigo, vamos orientar você no processo de programação de um jogo com seis exemplos.
palladius/genai-googlecloud-scripts (repositório do GitHub com cerca de 10 apps: código e comando): Tetris, Pacman, Conecte 4 e até um clone Rogue para os nostálgicos! Ele contém os comandos de todos esses jogos. Escolha seu favorito, adapte o comando e aproveite!

Alguns exemplos de jogos que você pode criar:

O jogo final pode ficar assim:

Um Tetris em 3D.
Um jogo de linguagem
Um clone desonesto
Um clone do Pacman.

Mais uma vez, o inglês é o limite!

🎉 Até a próxima!