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

29 minutos restantes

Sobre este codelab

Último mai. 13, 2025 atualizado

Escrito por Riccardo Carlesso

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 linha única

Neste codelab, você vai aprender sobre a "vibe coding", um app simples para crianças, começando com uma solicitação comum e depois personalizando de acordo com sua preferência. Vamos testar o app no p5.js. Por fim, vamos enviar essas mudanças para o Firebase Hosting. O mais incrível é que toda a pilha é sem custo financeiro.

O que você vai aprender

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

Observação: este codelab usa código gerado por IA. Isso não é determinístico, então este codelab contém diretrizes porque sua saída é desconhecida pelo autor. Além disso, NÃO use esse código na produção.

Se você gostou deste codelab, confira o 🔥 Firebase Studio, que oferece uma experiência de programação integrada e elegante.

2. Pré-requisitos

Este codelab tem duas fases:

Desenvolvimento somente para a Web. É aqui que você vai se divertir mais e não é necessário ter habilidade com programação. Para isso, vamos usar a interface do Gemini ( gemini.google.com) e o p5.js.
Ambiente de programação local. É necessário ter um pouco de habilidade em programação / script, além de instalar e usar npm / npx e um editor local, como vscode ou 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 nele pelo celular ou computador.

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

Gemini UI

gemini.google.com é uma plataforma incrível para testar todos os modelos mais recentes do Gemini e criar suas próprias imagens e vídeos. Ele vem com várias integrações do Google, como o Google Maps e a pesquisa de 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, experimente também o AI Studio, uma interface semelhante em que é possível criar protótipos de uma interação de LLM (por exemplo, criar uma imagem) e receber o código Python diretamente da página.

p5.js

A 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 outra 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 você quiser manter seu 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 armazenar seu código.
Um npm instalado localmente, melhor se no espaço do usuário (usando 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)
Saber 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 estiver muito difícil, pule a fase 2. A fase 1 deve ser recompensadora o suficiente.

3. Vamos criar nosso primeiro jogo!

Acesse gemini.google.com e escolha um modelo compatível com o código, por exemplo, 2.5. Essa escolha pode variar de acordo com a disponibilidade, o custo e a data. No momento da escrita, a melhor escolha seria:

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

Confira mais informações sobre nossos modelos do Gemini neste link.

Nossa primeira proposta 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
Com muitos emojis ou apenas um emoji específico?
Você adora a cor amarela ou várias tonalidades de roxo.
Talvez a criança goste de unicórnios, dinossauros ou Pokémon.

Depois de colar o comando no navegador, observe o pensamento do Gemini.Isso mesmo, o Gemini 2.5 é um modelo de pensamento, então ele vai iniciar várias tarefas que você pode observar mudando ao longo do tempo. Clique no menu suspenso para saber 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:

Como testar o jogo no 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, pressione o botão PLAY.

Agora, duas coisas podem acontecer: o código funciona ou falha. Vamos seguir as instruções de acordo com os dois casos:

Seu código falha
O código funciona na primeira tentativa.

Vamos conferir nos próximos dois parágrafos como gerenciar as duas condições.

(Caso 1) Meu código falha.

Se você receber um erro como esse, 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 no lado direito da página.

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

Observação:enquanto você tiver o código, o app só vai funcionar no navegador. Se você quiser mostrar o app para familiares e amigos, vai precisar de uma solução de hospedagem. Felizmente, temos uma ótima opção para você. Continue lendo.

Agora você está pronto para o próximo capítulo.

Outras iterações

Agora é hora de salvar seu código em algum lugar, caso você o quebre. Se quiser, você pode iterar uma vez. Por exemplo, o autor gosta muito do salto duplo do Super Mario. Você pode adicionar algo como isto:

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 ao longo do tempo para dificultar o jogo, e assim por diante. O inglês é o limite para sua proposta!

Dica:o Gemini tende a fornecer apenas a mudança que você precisa aplicar, por exemplo, a mudança para a função XYZ. Talvez você queira definir o comando para que ele forneça o código completo atualizado, 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

Você pode adicionar um marcador à sua conversa no Gemini. Talvez você queira renomear para "p5js my first game" ou anotar o link permanente para o Gemini, como " https://gemini.google.com/app/abcdef123456789" para mais tarde.

4. Vamos executar esse código localmente

Neste ponto, você deve ter:

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

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

Instalar dependências

Se npm e node estiverem ausentes, a melhor opção é instalar npm usando algum gerenciador de versões, como nvm . Siga as instruções de instalação do seu sistema operacional.

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

Configurar o ambiente local

É nesse momento que você pode 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 informaçã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 do chat do Gemini e a página de destino do app quando ela for lançada.
PROMPT.md ← Aqui, você pode adicionar todas as instruções, separadas por um parágrafo H2. Se você quiser explicar por que deu uma determinada instrução, inclua-a entre três chaves invertidas ( 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 uma das seguintes opções:

# 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 você tiver problemas, siga os documentos públicos.

Inicialização do Firebase

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

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

$ ls 
PROMPT.md
README.md
public/

[step 1] No console, digite: firebase init

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

Observação: se você já tiver um projeto do Cloud, talvez ele não seja um projeto do Firebase. Os projetos do Firebase são um subconjunto dos projetos do GCP. Você precisa de mais trabalho para torná-los um projeto do Firebase, e é para isso que serve a opção 3.
Se você não souber o que escolher, use a opção "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ê o substituir, o novo index.html será incompatível com o p5.js.

Se tudo funcionar, você vai ver isto:

Essas ações devem ter criado alguns arquivos:

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

Especificamente, .firebaserc precisa ter o ID do projeto, que pode ser extraído de forma programática com este código: cat .firebaserc | jq .projects.default -r

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

Teste local

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

Para isso, você pode testar o poderoso pacote de CLI da equipe do Firebase. Exemplo:

$ firebase emulators:start

deve iniciar 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 vão ficar assim:

$ 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 mostrar 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 corrigir, com uma mensagem como esta:

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. Continue fazendo perguntas até ficar satisfeito com os resultados.

É importante observar algumas coisas:

O loop de iteração é muito mais rápido no Gemini > p5.js > loop do Gemini do que no Gemini > host local > implantar para execução na nuvem > testar o app no navegador (pressione "Atualizar").
Use o git para fazer a versão do prompt e do código. Talvez você queira voltar ao comando N e ao código N. Você quer fazer o commit de cada sketch.js que envia, porque bugs podem estar ocultos e não detectados.

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

6. Dicas de comandos

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

Controle da versão do comando

É provável que você encontre erros na instrução original. Ter uma versão git dela. Há alguns caminhos de código aqui:

Se você gostar do que vê e quiser iterar com o Gemini e as próximas sugestões, pode ser interessante acompanhar tudo em algum lugar (sugestão 1,2,3 - exemplo 1 de 3 fotos - example2).
Se você não se importar com o app criado pelo comando1, poderá aperfeiçoar o comando, descartar o código e reiniciar com o código modificado (comando 1 v1, comando1 v2, comando1 v3 etc.).

É possível misturar as duas abordagens.

Funcionalidade para dispositivos móveis

Dependendo do jogo que você criar, talvez seja necessário interagir com o usuário. Essa interação precisa de um teclado? Ou ele pode ser usado apenas tocando na tela (por exemplo, com um dispositivo móvel)? Deixe isso bastante claro no comando. Talvez seja necessário criar alguns botões no teclado. Confira meu exemplo de Tetris 3D. Consulte também dungemoji para saber mais sobre a compatibilidade com dispositivos móveis.

Feedback de erros de JavaScript / capturas de tela diretamente no Gemini

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

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 fácil para manter e compartilhar seu jogo com outras pessoas.

O que vimos

Crie um jogo usando o Gemini 2.5.
Implantar no Firebase

Agora é hora de 👥 se gabar! Por que você não compartilha seu jogo mais recente (your-project.web.app) no LinkedIn ou no Twitter com a hashtag #VibeCodeAGameWithGemini (e talvez marque o autor no LinkedIn)? Isso vai nos permitir saber o quanto este codelab é interessante e, talvez, escrever mais desse tipo.

Quero mais!

Se você estiver procurando outros recursos, confira estes jogos e instruções:

Programe cinco jogos infantis com o Gemini 2.5 e o p5.js em um fim de semana! Este artigo vai 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 prompt): Tetris, Pac-Man, Connect 4 e até um Rogue clone para os nostálgicos. Ele contém as instruções de todos esses jogos. Escolha sua música favorita, adapte a proposta e curta o momento!

Se o que você fez hoje parece muito esforço, também pode usar o 🔥 Firebase Studio, em que a ideia > instrução > código > ciclo do app está tudo contido em uma única janela do navegador.

Confira alguns exemplos de jogos que você pode criar:

O jogo final pode ficar assim:

Um Tetris 3D
Um jogo de idiomas
Um clone não autorizado
Um clone de Pac-Man.

Novamente, o inglês é o limite!

🎉 Aproveite os códigos!

Informar um erro