Criar jogo HTML no Gemini: o mega prompt e o desafio de 1 hora
Criar um jogo do zero costumava exigir meses de programação, planejamento de física e design de assets. Hoje, a barreira não é mais o código, mas a capacidade de pedir exatamente o que você deseja para a ferramenta certa.
O custo de um prompt genérico na criação de código é a frustração de receber um jogo quebrado, com física travada, telas de erro e dependências que não funcionam. Você passa mais tempo corrigindo bugs do que criando.
Para provar a capacidade do modelo Pro, desenhamos um desafio prático: criar um jogo de plataformas 2D completo (estilo Mario), em um único arquivo HTML, com limite de tempo de 1 hora e apenas 3 iterações de correção. Copie os prompts exatos que usamos e veja como iterar código com a IA.
Gemini Pro é o LLM avançado do Google, projetado para raciocínio complexo, lógica e programação de alto nível. Diferencia-se pela capacidade de processar janelas de contexto gigantescas, permitindo a ingestão de regras de desenvolvimento inteiras de uma só vez.
Neste desafio, usamos a sua capacidade para gerar HTML5, CSS3 e JavaScript (Canvas API) integrados, sem depender de bibliotecas externas ou assets de imagem.
Neste guia: entenda o método de iteração, copie os 3 mega prompts usados no desafio, veja os prints reais do processo e baixe a versão final que a IA construiu.
Resposta curta:
É possível criar um jogo funcional em 1 hora usando o Gemini Pro. O segredo é usar um prompt inicial extremamente detalhado (definindo regras rígidas de arquivo único e física) e usar os prompts seguintes não para criar coisas novas, mas para isolar e corrigir bugs específicos (debug iterativo).
Como este guia foi montado: Submetemos o Gemini Pro a um teste real com limite de tempo. Todo o código gerado foi testado no navegador. As imagens e os prompts documentados aqui são as versões exatas e sem cortes geradas durante a nossa 1 hora de experiência.
⚡ TL;DR
- Tempo: 8 min (ou pule para os prompts)
- Nível: Intermediário
- O que você vai copiar: 3 mega prompts de engenharia de software
- Economia: Dezenas de horas de programação e QA
Índice
- As regras do desafio de 1 hora
- Anatomia do mega prompt estrutural
- Os 3 prompts mestres e os prints da evolução
- O resultado: Baixe o Lumino agora
- Amanda aconselha: como debugar com IA
- SOS: O personagem travou!
- FAQ
As regras do desafio de 1 hora
Regra 1: Arquivo único (zero dependências)
O maior erro ao pedir código à IA é deixá-la separar o projeto em vários arquivos (HTML, CSS, JS separados) ou usar imagens externas. Para este teste, a regra de ouro foi: o jogo inteiro (física, visual, controles) deve rodar em um único arquivo .html usando o Canvas API.
Regra 2: Originalidade forçada
Pedir “faça um clone do Mario” faz a IA tentar puxar assets ou lógicas protegidas por direitos autorais que não vão renderizar. O prompt forçou a criação de um universo próprio, chamado “Lumino”, com inimigos desenhados via código geométrico.
Regra 3: Limite de iteração
No desenvolvimento com IA, você pode passar a vida inteira pedindo ajustes. O desafio estipulou 1 mega prompt inicial de fundação + apenas 2 prompts de ajuste fino (debug). Total: 3 interações.
Anatomia do mega prompt de desenvolvimento
| Elemento do prompt | O que faz | O que acontece por dentro | Impacto real | Erro se ignorado |
|---|---|---|---|---|
| Arquitetura cravada | Exige uso estrito de HTML5, CSS3, Vanilla JS e Canvas. | Bloqueia a IA de sugerir React, Phaser ou importar bibliotecas pesadas. | O código roda instantaneamente no navegador com duplo clique. | A IA gera dependências Node.js que o leigo não saberá rodar. |
| Parâmetros de física | Define gravidade, Coyote Time, Jump Buffer e aceleração. | A IA programa as fórmulas matemáticas específicas de game design moderno. | O jogo fica responsivo e divertido, fugindo da sensação de “gelo”. | O personagem fica travado, cai como uma pedra ou não pula direito. |
| Detalhamento de escopo | Lista tipos de inimigos, UI, HP, checkpoints e chefes. | Força a IA a criar funções separadas para cada entidade no código. | Gera um jogo completo, não apenas um boneco andando em uma tela vazia. | A IA entrega um protótipo inacabado de 50 linhas dizendo “adicione o resto”. |
💡 O segredo dos especialistas: A IA não sabe o que é “bom”. Se não pedir Coyote Time (o atraso que permite pular 1 segundo após cair da borda), o seu jogo de plataformas será odiado por qualquer jogador.
Os 3 prompts para construção e debug do jogo (com prints) 📌
Abaixo estão os prompts exatos, limpos e otimizados, usados para desafiar o Gemini, e os resultados visuais que obtivemos a cada iteração. Copie o prompt 1 primeiro, deixe a IA gerar o código completo e, em seguida, aplique os prompts 2 e 3 para ver a evolução na prática.
👾 Série dev — O desafio Lumino
📸 Prompt 01 — A fundação (o mega prompt)
Este prompt é massivo de propósito. Ele insere todo o GDD (Game Design Document) no cérebro da IA de uma só vez.
Crie um jogo completo de plataforma 2D inspirado na sensação divertida e precisa dos grandes clássicos do gênero, mas com identidade 100% ORIGINAL. NÃO copie personagens existentes, Nintendo, músicas, cenários ou itens. OBJETIVO: Crie um jogo chamado "LUMINO: A JORNADA DOS CRISTAIS". O protagonista é Lumino, um explorador que precisa recuperar Cristais da Aurora. O jogo deve ter movimentação fluida, exploração, inimigos, coleta de itens, checkpoints, plataformas e chefes. REGRA DE ENTREGA OBRIGATÓRIA: Entregue TODO o projeto em UM ÚNICO ARQUIVO HTML. O arquivo deve conter o HTML, o CSS e o JavaScript. NÃO use imagens externas, bibliotecas, frameworks ou CDN. Tudo deve ser desenhado via código usando Canvas API (formas, cores, pixels simulados). ESTILO VISUAL: Pixel art colorido, alegre e detalhado. Cenários com profundidade (parallax de 3 camadas). Lumino tem cabelo azul brilhante, mochila e cachecol, com animações procedurais via código (correr, pular, parar, dano). CONTROLES E MOVIMENTO: - Teclado: WASD ou Setas para mover. Espaço ou W para pular. Shift para ação. - Mecânicas OBRIGATÓRIAS: Aceleração gradual, desaceleração (fricção), pulo variável (pula mais alto se segurar o botão), Coyote Time, Jump Buffer, controle no ar e gravidade pesada (não flutuante). SISTEMAS DO JOGO: - Vida: Lumino começa com 3 corações. Dano gera knockback e invencibilidade temporária piscando. Game Over com opção de voltar ao mapa. - Coleta: Fragmentos de Luz (a cada 100 recupera 1 vida) e Cristais da Aurora escondidos (0 a 3 por fase). - Inimigos: Crie 5 tipos de inimigos originais via código (ex: Bolha Saltitante, Besouro de Pedra). Alguns são mortos pulando em cima, outros exigem o poder do "Orbe de Plasma". - Plataformas: Crie chãos sólidos, plataformas móveis, plataformas que caem e obstáculos como espinhos. - Mapa de Mundos: Crie 4 mundos conceituais. Mundo 1 precisa ter 5 fases. Salve o progresso das fases no localStorage. - Menus: Tela inicial animada, botão "Como Jogar" e configurações. - HUD: Mostre corações, fragmentos e tempo na tela principal. - Áudio: Use Web Audio API para gerar beeps simples de pulo e dano (sem arquivos). QUALIDADE DO CÓDIGO: Estruture o JS com padrões de classe ou objetos (Game, Player, Enemy, LevelManager, Input). O jogo deve ser perfeitamente responsivo (desktop e mobile com controles na tela). Priorize um movimento excelente e detecção de colisão impecável. Entregue apenas o código HTML final completo e funcional.
O que aconteceu no teste 1: Logo de início, o Gemini trouxe um resultado muito interessante. O menu e a escolha de fases ficaram impressionantes, o HUD das moedas apareceu e as plataformas foram bem posicionadas. O protagonista até recebeu texturas e animações. Mas nem tudo foi perfeito: o fundo ficou escuro e pouco atrativo, e o pulo não era alto o suficiente para alcançar as plataformas. Além disso, seria interessante poder escolher explicitamente entre teclado ou touch.
👉 Deslize para ver todas as telas do 1º teste. Clique na imagem para ampliar com qualidade.
📸 Prompt 02 — O ajuste de física e direção de arte
Aqui não pedimos um jogo novo, apenas atuamos como diretores de arte e QA.
PEGUE O JOGO HTML JÁ CRIADO E MELHORE O CÓDIGO EXISTENTE. Mantenha toda a estrutura atual. Faça apenas as melhorias abaixo e entregue todo o arquivo HTML novamente. 1. MELHORAR O FUNDO E CENÁRIO (DIA CLARO): O jogo deve acontecer de DIA. Crie um céu com gradiente azul, nuvens, montanhas distantes, florestas e cenário próximo (5 camadas de parallax). A sensação deve ser de uma aventura na natureza, colorida e vibrante. 2. CORRIGIR A ALTURA DO PULO E FÍSICA: O pulo atual não alcança as plataformas. Recalcule a física de pulo vs gravidade. O personagem deve conseguir alcançar TODAS as plataformas obrigatórias com o pulo normal. Mantenha o Coyote time e o pulo variável (pressionar rápido = pulo curto). NÃO adicione pulo duplo por padrão. 3. REORGANIZAR PLATAFORMAS: Garanta que não há saltos impossíveis ou buracos injustos nas fases iniciais. 4. SELEÇÃO DE CONTROLES: Crie na tela inicial a opção: "TECLADO", "TOUCH" ou "AUTOMÁTICO". Se escolher teclado, esconda totalmente os botões da tela. Se Touch, mostre direcionais esquerdos, pulo e ataque na tela, grandes e com suporte a multitouch (pular e andar ao mesmo tempo). Salve a preferência no localStorage. Entregue o código completo, sem omitir funções, mantendo o nome lumino-jogo.html.
O que aconteceu no teste 2 (vitória e derrota): Agora tínhamos como escolher entre os controles e todo o jogo ficou muito mais bonito (dia claro). O pulo também estava mais alto. Mas… agora o personagem não queria ir nem para a frente nem para trás, o que impossibilitou jogar. O provável culpado foi a lógica de detecção do joystick que entrou em conflito com o teclado.
👉 Deslize para ver o novo cenário e os controles. Clique para ampliar.
📸 Prompt 03 — A última oportunidade (bugfix estrutural)
Quando a IA quebra algo que funcionava, é preciso isolar a variável. Não peça para “fazer de novo”, diga a ela para onde olhar.
CORRIJA O JOGO HTML EXISTENTE. IMPORTANTE: O CENÁRIO ATUAL FICOU MUITO BOM. NÃO altere absolutamente nada do visual, do pulo ou do cenário. O principal problema agora é: LUMINO NÃO CONSEGUE ANDAR PARA A ESQUERDA OU PARA A DIREITA. 1. DIAGNÓSTICO: Revise o fluxo do InputManager. O problema ocorre porque o estado (input.left / input.right) não está atualizando a velocidade horizontal (vx), ou a colisão está zerando o vx a cada frame indevidamente. 2. SISTEMA DE INPUT CONFIÁVEL: Centralize o controle. Teclado (keydown/keyup) e Touch (pointerdown/pointerup) devem alterar o mesmo objeto de estado "input". O Player lê esse estado a cada frame. Garanta que eventos de touchup de um lado não desliguem o outro, e que o multitoque funcione. 3. VERIFICAÇÃO FÍSICA: Se a velocidade for muito baixa, zere o vx. Se houver input, aplique aceleração até maxSpeed. NÃO zere o vx se o InputManager já calculou o movimento (salvo colisão real com paredes). Entregue o código HTML completo novamente, com o movimento lateral devidamente restaurado, mas preservando toda a beleza e a física do pulo conquistadas na iteração anterior.
📊 O resultado final (funcionou!): Com o terceiro prompt, a lógica de evento foi consertada. O personagem ganhou fricção real, suporte a multitouch no celular, cenários parallax fantásticos e checkpoints funcionais. O Gemini não recebeu prompts simples, mas entendeu a precisão mecânica solicitada e entregou um produto jogável.
👉 Deslize para ver o resultado final e os inimigos. Clique para ver em tela cheia.
O resultado: Baixe o Lumino agora 🕹️
Aqui está a recompensa. Hospedamos o arquivo exato gerado pela IA, sem nenhuma alteração manual da nossa parte. Teste o pulo, os inimigos e os gráficos que foram integralmente desenhados via código.
LUMINO: A jornada dos cristais
Veja com os seus próprios olhos o que o Gemini Pro construiu em 1 hora. O código HTML está completo e sem fios soltos.
👉 Amanda aconselha:
- Se vai criar código grande com IA: Não peça “refaça tudo” quando der um erro. A IA sofre de “esquecimento” e pode perder as funções visuais ao focar-se no erro lógico. Isole o bug no prompt (como fizemos no prompt 03).
- Se não entende de programação: Forçar o formato “HTML único” (HTML + CSS + Canvas API) é a maneira mais segura de conseguir testar o resultado. Basta abrir o bloco de notas, colar, salvar como .html e clicar duas vezes.
- Se quer criar level design perfeito: O que faltou no nosso jogo foi um level design impecável. É interessante desenhar o cenário em um papel e enviar a foto (esboço) para o Gemini para ter a certeza de que o posicionamento das plataformas vai funcionar perfeitamente, evitando quedas cegas.
🚨 SOS: O personagem caiu e a tela ficou preta
- Causa: Falha na câmera (camera boundary). A IA não estipulou limites para a câmera parar de descer quando o jogador cai no buraco (game over).
- Correção: Diga à IA: “A câmera está seguindo o personagem para o infinito quando ele cai. Limite a posição Y da câmera à altura máxima do canvas e ative a tela de tentar novamente em 1 segundo após a queda.”
- Resultado: A câmera trava no limite da fase e a UI de morte funciona corretamente.
FAQ: dúvidas reais a serem respondidas 🔍
Como testo o código que o Gemini gerou?
Copie todo o código, cole no bloco de notas ou VS Code, clique em “salvar como”, nomeie como “jogo.html” (certifique-se de salvar como todos os arquivos) e dê dois cliques no arquivo para abrir no Chrome.
Posso vender um jogo feito com código de IA?
Sim. Desde que siga a nossa regra 2 do prompt (forçar originalidade total e não usar assets de outras empresas), o código gerado é livre e a propriedade intelectual da mecânica original será sua.
Por que o personagem trava de vez em quando?
Isto acontece por conflitos de eventos de input na IA (keydown vs touch). Use sempre um prompt de ajuste focado em unificar o estado do input, como mostrado no prompt 3.
O jogo vai rodar no celular?
Sim, porque exigimos no mega prompt a criação de botões virtuais na tela e suporte a “multitouch” usando a pointer API do JavaScript nativo.
Conclusão: O programador virou diretor de arte 🙌
O desafio de 1 hora com o Gemini Pro prova uma grande mudança de paradigma. A barreira para construir interações complexas na web, jogos HTML ou ferramentas deixou de ser a sintaxe do código e passou a ser a sua lógica de comando.
Nesta experiência, economizamos semanas de configuração de motor e física matemática, gastando apenas energia cognitiva para estruturar as regras e iterar os bugs isolados. O redator vira programador; o programador vira diretor técnico.
Se você tem uma ideia complexa engavetada, está na hora de estruturar o seu próprio mega prompt e testar no navegador.
Ei, antes de ir: se este conteúdo ajudou, não pode perder o que separamos nestas outras categorias. É conhecimento de nível pago, entregue de graça aqui:
Se for jogar, baixar, mexer ou usar os códigos para criar a sua versão, publique nos stories e marque o nosso instagram @mktamanda. Vamos ficar super felizes em compartilhar! :))
ps: obgda por chegar até aqui, é importante para mim.
