O jeito mais fácil de fazer um jogo com IA é pedir a um agente de código que escreva um pequeno jogo de navegador com HTML canvas ou Phaser, jogar cada mudança no navegador na hora e ajustar a “sensação” você mesmo, porque essa é a parte que o agente não consegue julgar. Para projetos 2D ou 3D maiores, o Godot é um bom próximo passo. Quando terminar, você pode colocar o jogo no itch.io e compartilhá-lo em minutos.
Este post leva um primeiro jogo de uma pasta vazia até uma página publicada: qual ferramenta eu escolho e por quê, o primeiro prompt que dou ao agente, o game loop, arte e som (incluindo licenças), ajuste do game feel, playtest e itch.io.
Por que jogos combinam tanto com vibe coding
Jogos estão entre as coisas mais divertidas e instrutivas de construir com vibe coding. O resultado é instantâneo: mude um número e o personagem pula mais alto. Um jogo pequeno tem poucos arquivos, então o agente consegue manter tudo no contexto.
Mas há uma armadilha. “Roda” e “é divertido de jogar” estão muito distantes. O agente consegue verificar se o código funciona; não consegue verificar se o jogo é divertido. Essa parte é sua.
Qual ferramenta: canvas, Phaser, Godot ou Unity
| Ferramenta | Linguagem | Bom para | Trabalhando com um agente |
|---|---|---|---|
| HTML canvas | JavaScript | Jogos muito simples, aprendizado | Muito fácil; tudo pode ficar num arquivo só |
| Phaser | JavaScript / TypeScript | Jogos 2D de navegador | Fácil; física, cenas e animação embutidas, muitos exemplos |
| Godot | GDScript (ou C#) | 2D maiores, 3D, exportação para desktop e web | Bom; as cenas são arquivos de texto .tscn |
| Unity | C# | 3D grandes, mobile, consoles | Bom para código, fraco para cenas |
Para um primeiro jogo, recomendo o Phaser. Canvas puro também funciona, mas fazer o agente escrever colisão, animação de sprites e tratamento de entrada do zero leva tempo; o Phaser já traz isso. E tudo é arquivo de texto rodando num navegador, então não existe um editor que o agente não enxerga.
Vá para o Godot quando o jogo crescer: muitas cenas, level design complexo, 3D ou um build para desktop. Os arquivos de cena (.tscn) e de recursos (.tres) do Godot são texto legível, então o agente pode editá-los. Ainda assim, eu monto as cenas no editor e deixo o GDScript com o agente; um errinho num arquivo de cena editado à mão pode impedir o editor de abri-lo.
O Unity é poderoso, mas é a opção mais desajeitada de conduzir com um agente. O agente escreve scripts C# com tranquilidade; cenas, prefabs e configurações do inspector vivem no editor. Se você já conhece Unity, use; para um primeiro jogo, não é a minha escolha.
Passo 1: Configuração
O que você precisa:
- Node.js e um gerenciador de pacotes
- Um agente de código: Claude Code, Codex, Gemini CLI, opencode ou similar
- Git, para sempre poder voltar ao “ontem funcionava”
Comece um projeto com Vite e adicione o Phaser:
npm create vite@latest cactus-run -- --template vanilla-ts
cd cactus-run
npm install
npm install phaser
git init && git add -A && git commit -m "initial scaffold"
npm run dev
O npm run dev mostra um endereço local; abra-o para ver o jogo, e a página recarrega conforme o agente edita os arquivos.
Passo 2: O primeiro prompt
O primeiro prompt importa muito em jogos, porque “faça um jogo” entrega o jogo que o agente imagina. Mantenha o escopo pequeno e concreto:
This is a Vite + TypeScript project with Phaser installed. We're
building a simple endless runner.
Game:
- The player runs left to right and jumps with space or a tap.
- Cacti come in from the right; touching one ends the game.
- Score increases over time and shows in the top right.
- On game over, show "Press space to restart".
Rules:
- Use coloured rectangles instead of art for now.
- Put every tunable number (gravity, jump velocity, game speed,
cactus spacing) in a single object in src/config.ts.
- Use Arcade physics.
- The game is 800x400 and scales to fit the screen.
- npx tsc --noEmit must pass.
- When done, explain the file structure and the values in config.ts.
A regra mais valiosa aqui é o config.ts. Você vai ajustar a sensação brincando com os números desse arquivo; se eles estiverem espalhados pelo código, cada ajuste vira uma volta ao agente.
A regra de “retângulos em vez de arte” também importa. Acerte a jogabilidade primeiro e depois deixe bonito. Um protótipo lindo que não é divertido é o pior resultado.
Passo 3: Entenda o game loop
No coração de todo jogo existe um loop: ler a entrada, atualizar o mundo, desenhar a tela, repetir, dezenas de vezes por segundo. O Phaser roda isso para você e chama o update(time, delta) da sua cena a cada frame. Com canvas puro, você mesmo escreve:
let last = performance.now()
function loop(now) {
const dt = (now - last) / 1000 // seconds since the last frame
last = now
update(dt)
draw()
requestAnimationFrame(loop)
}
requestAnimationFrame(loop)
O único conceito que você precisa saber é o dt: mova as coisas com base no tempo decorrido, não por frame. Às vezes os agentes escrevem x += 5, e aí o jogo roda mais rápido numa tela com taxa de atualização alta. Se você não vê dt no código de movimento, pergunte ao agente.
Passo 4: Jogue, itere, faça commit
O ciclo:
- Jogue por um minuto.
- Descreva o que sentiu, de forma concreta: “O pulo fica tempo demais no ar; desviar dos cactos está fácil demais.”
- Deixe o agente mudar e jogue de novo.
- Faça commit de cada versão que está boa.
Cole os erros do console do navegador (F12) no agente literalmente. Para problemas visuais, mande uma captura de tela.
Um aviso: não faça a lógica do jogo crescer num pedido grande. “Adicione power-ups, uma luta contra chefe e um sistema de fases” embaralha os três. Uma mecânica por vez.
Passo 5: Game feel
O que faz um jogo ser gostoso de jogar geralmente não são grandes funcionalidades, e sim pequenos detalhes. Os agentes não os adicionam sem pedido, mas implementam bem quando você pede:
- Coyote time: permitir um pulo por um breve instante depois de sair de uma plataforma.
- Jump buffering: lembrar um pulo apertado logo antes de aterrissar.
- Altura de pulo variável: cortar a velocidade de subida quando o botão é solto.
- Screen shake e hit stop: congelar por alguns frames no impacto.
- Tweens: a pontuação saltando, um inimigo tremendo ao sumir.
- Som: um som curto de pulo muda a sensação mais do que qualquer coisa na tela.
Este é o tipo de prompt que eu uso:
Improve the jump feel:
- Add 100 ms of coyote time and a 100 ms jump buffer.
- If space is released early, halve the upward velocity.
- On collision, add an 80 ms hit stop and a light screen shake.
Put all durations in config.ts. Don't change any other behaviour.
Depois brinque você mesmo com os números do config.ts. Essa parte não dá para delegar a uma IA; você só sente alguns milissegundos de diferença jogando.
Passo 6: Arte, som e licenças
Quando a jogabilidade estiver boa, troque os retângulos por arte de verdade. O único cuidado é com o licenciamento.
Pacotes prontos:
- Muitos pacotes de fontes como a Kenney são CC0, utilizáveis sem nem precisar de atribuição.
- No OpenGameArt, cada arquivo tem sua própria licença (CC0, CC‑BY, CC‑BY‑SA, GPL…). CC‑BY exige atribuição; CC‑BY‑SA pode exigir que você compartilhe trabalhos derivados sob a mesma licença. Leia a licença de cada arquivo.
- Pacotes de assets pagos e gratuitos no itch.io vêm cada um com sua licença; confira se o uso comercial é permitido.
Mantenha um CREDITS.md ou uma tela de créditos no jogo listando a origem e a licença de cada asset.
Arte gerada por IA é rápida e tentadora, mas tem algumas ressalvas:
- A situação de direitos autorais de conteúdo gerado por IA varia por país, e algumas questões ainda não estão resolvidas.
- Cada ferramenta de imagem tem seus próprios termos de uso; confira o uso comercial.
- Algumas lojas de jogos pedem que você declare conteúdo gerado por IA.
- Também é tecnicamente trabalhoso: consistência de estilo, layout da sprite sheet e frames de animação que combinem muitas vezes exigem limpeza manual.
Minha abordagem: pacotes com licença aberta para o protótipo; para o lançamento, arte feita por mim ou cuja licença eu conheço com certeza.
Existe trabalho com assets que o agente faz bem: carregar uma sprite sheet no Phaser, definir animações, ligar os arquivos de som. Passe os nomes dos arquivos e o tamanho dos frames em vez de deixá-lo adivinhar.
Passo 7: Playtest
Quem construiu o jogo é o pior testador dele; já sabe o que fazer. O mesmo vale para o agente. O que fazer:
- Entregue o jogo a alguém e não explique nada. Observe em silêncio onde a pessoa trava.
- Anote: onde morreu, onde ficou entediada, o que entendeu errado.
- Transforme essas notas em tarefas para o agente: “Os jogadores sempre batem no primeiro cacto; nada de cactos nos primeiros 5 segundos.”
Pequenas partes da lógica do jogo (pontuação, regras de colisão) podem ser verificadas com testes unitários; peça ao agente para escrevê-los. A sensação, só jogando.
Passo 8: Publicando no itch.io
Colocar um jogo de navegador no itch.io leva poucos minutos:
npm run build
cd dist && zip -r ../cactus-run.zip . && cd ..
Depois crie um novo projeto no itch.io, defina o tipo como HTML, faça upload do zip e marque como jogável no navegador. Defina o tamanho da área de exibição (800×400, por exemplo) e o botão de tela cheia. O zip precisa ter o index.html na raiz; com Vite, talvez você precise de base: './' no vite.config.ts para caminhos relativos, o que o agente pode conferir para você.
No Godot, instale o template de exportação Web, exporte para HTML5 e faça upload do mesmo jeito. Se você for atualizar com frequência, a ferramenta de linha de comando butler do itch.io automatiza os uploads.
O que os agentes costumam errar em jogos
- Eles não veem o jogo. O agente escreve código, mas não sabe o que aparece na tela. Capturas de tela ou uma descrição do que você vê são essenciais.
- Números mágicos. Os valores acabam espalhados pelo código. Repita a regra do
config.tsa cada mecânica nova. - Movimento dependente de frame. Sem
dt, o jogo roda em velocidades diferentes em telas diferentes. - APIs desatualizadas. Phaser e Godot mudaram de API entre versões major, e o agente pode escrever código para a antiga. Diga a versão: “Estamos no Godot 4, não escreva sintaxe do Godot 3.”
- Tudo num arquivo só. Conforme o jogo cresce, peça para separar cenas, entidades e configurações em arquivos diferentes.
- Ignorar desempenho. Com centenas de balas ou inimigos, o jogo fica lento. Peça object pooling.
Segurança
Um jogo parece inofensivo, mas as mesmas regras valem:
- Se você adicionar um placar ou um backend multiplayer, guarde as chaves no
.enve coloque o.envno.gitignore. - Tudo num jogo de navegador pode ser lido pelo jogador; chaves secretas nunca vão no código do cliente.
- Não cole chaves de API no chat; diga ao agente qual variável de ambiente ler.
- Leia os comandos que o agente roda antes de aprová-los, principalmente instalações de pacotes e exclusões.
- Não confie em pontuações enviadas pelo cliente; trapacear num placar online é fácil.
Fazendo isso com o AgentVera
Tudo isso funciona com um terminal e um navegador. Em projetos de jogos, eu gosto de rodar alguns agentes lado a lado e ver o resultado na mesma janela, e é por isso que uso o AgentVera:
- Experimentos separados em worktrees separados. Um agente trabalha na sensação do pulo num git worktree enquanto outro adiciona um novo tipo de inimigo em outro; descarte o experimento de que não gostar. O painel Git mostra as branches.
- O navegador do agente. Com o navegador do agente, o agente pode abrir o jogo via Playwright e tirar capturas de tela enquanto você acompanha a aba ao vivo. Isso resolve em parte o “o agente não vê o jogo”; não resolve a sensação.
- Terminal e editor. O
npm run devfica aberto num painel e você edita oconfig.tsvocê mesmo no editor. - Revisão e tokens. O code review verifica cada turno antes do merge, e o uso de tokens fica visível por painel.
O AgentVera não é uma engine de jogos; não substitui o editor do Godot nem o itch.io.
Checklist rápido
- O primeiro jogo é pequeno: uma mecânica, uma tela
- Os números ajustáveis ficam no
config.ts - O movimento usa
dt - Jogabilidade com retângulos primeiro, arte depois
- Origem e licença de cada asset anotadas
- Pelo menos uma pessoa jogou sem explicação
- O zip do itch.io tem o
index.htmlna raiz
Concluindo
Fazer um jogo com IA é um dos usos mais divertidos do vibe coding. Comece pequeno com Phaser no navegador, mantenha os números num arquivo só, acerte a jogabilidade com retângulos, ajuste a sensação com as próprias mãos e fique de olho nas licenças. O agente escreve o código; quem torna o jogo divertido é você. Para rodar experimentos com vários agentes, veja agentes de código em paralelo; para escolher uma ferramenta, veja as melhores ferramentas de CLI para programar com IA.