Criar jogo estilo Flappy Bird no Gemini: o clone arcade em 1 hora
Dizem que é na simplicidade que mora o perigo. Criar um jogo de um único botão, onde uma personagem voa por entre obstáculos, parece a tarefa de programação mais básica do mundo. No entanto, equilibrar a gravidade, a força do pulo e garantir que a aplicação não bloqueie o celular do usuário é um autêntico quebra-cabeças de desenvolvimento.
O custo de usar um prompt genérico para gerar jogos 2D na inteligência artificial é a frustração de receber uma física injogável: ou a personagem cai como uma pedra, ou o toque na tela dispara dois saltos ao mesmo tempo (o famoso erro do duplo evento).
Para provar que a IA consegue desenvolver física precisa e expandir um jogo passo a passo, criamos um desafio prático: desenvolver o nosso próprio jogo arcade (o “Sky Hop”) num único arquivo HTML puro, em menos de 1 hora. Copie os comandos exatos que usamos e perceba como evoluir um simples quadrado que pula para um jogo com loja, moedas e clima dinâmico.
Gemini Pro é o LLM avançado do Google, projetado para raciocínio lógico e estruturação rigorosa de código.
Neste desafio, proibimos o uso de motores de jogo clássicos (como Unity ou Phaser) ou imagens externas. Forçamos a IA a desenhar a personagem, os obstáculos e a chuva usando apenas HTML5, CSS3 e Canvas API, provando a sua capacidade nativa de renderização geométrica vetorial.
Neste guia: entenda a lógica de iteração de sistemas, copie os 4 mega prompts utilizados na nossa experiência e baixe o código final do Sky Hop para jogar ou editar.
Resposta curta:
É absolutamente possível criar um clone funcional do Flappy Bird (com loja de skins, moedas e recordes) em 1 hora usando o Gemini. O segredo é ditar regras rigorosas de “Game Loop” no primeiro prompt e pedir as expansões (troféus, loja, mundos) em passos cirúrgicos, instruindo sempre a IA a “não quebrar a física que já funciona”.
Como este guia foi montado: Submetemos o modelo Pro a um teste rigoroso, adicionando níveis de dificuldade a cada iteração. Todo o código gerado foi validado e as imagens presentes neste artigo são prints reais do navegador durante a experiência.
⚡ TL;DR
- Tempo: 10 min (ou pule para os prompts)
- Nível: Intermediário
- O que você vai copiar: 4 mega prompts para desenvolvimento progressivo de jogos
- Resultado: Um jogo arcade completo, com loja de personagens e clima dinâmico
Índice
- As regras do desafio arcade em 1 hora
- Anatomia do mega prompt de jogos casuais
- Os 4 prompts mestres e a evolução do jogo
- O resultado: Baixe o Sky Hop HTML
- Amanda aconselha: a armadilha do Game Loop
- SOS: O meu jogo dispara duplo salto!
- FAQ
As regras do desafio arcade em 1 hora
Regra 1: Arquivo único (HTML nativo)
Para garantir que qualquer pessoa possa jogar sem necessitar de configurar servidores locais ou instalar pacotes NPM, exigimos que toda a lógica (física, gráficos desenhados em vetor e guardado de moedas) fosse empacotada num único documento .html independente.
Regra 2: Originalidade forçada (o Sky Hop)
Pedir à IA para “fazer um Flappy Bird” fá-la-ia tentar invocar sprites e recursos protegidos por direitos autorais, o que inviabilizaria o código no navegador. O nosso prompt forçou a criação da personagem “Pip” e de um ecossistema com mecânica idêntica, mas identidade gráfica totalmente original e desenhada em Canvas.
Regra 3: Escala modular
Em vez de pedirmos tudo de uma vez (o que provocaria o colapso da janela de contexto da IA), estipulamos um desenvolvimento faseado: primeiro a física, depois o sistema de troféus, seguido da loja de skins e, por último, a adição do clima e dos mundos. É assim que se programa software estável.
Anatomia do mega prompt de jogos casuais
| Elemento do prompt | O que faz | O que acontece por dentro | Impacto real | Erro se ignorado |
|---|---|---|---|---|
| Unificação de controles | Exige que mouse, teclado e toque chamem a mesma função (flap()). | O JavaScript previne o comportamento por defeito dos toques duplos. | O celular não faz “zoom na página” acidentalmente ao carregar rápido. | O jogo funciona no PC, mas fica injogável no celular por bugar a tela. |
| Preservação do Game Loop | Proíbe a criação de múltiplos ciclos de renderização. | Obriga a IA a integrar partículas (chuva) no mesmo requestAnimationFrame. | O jogo roda a 60fps lisos sem superaquecer o aparelho. | Ao adicionar chuva, o jogo sofre um lag absurdo e bloqueia. |
| Economia em localStorage | Guarda as “Sky Coins” e as compras na memória passiva. | Injeta lógicas de JSON.stringify no código das moedas. | O usuário mantém as personagens compradas mesmo após fechar o navegador. | Todo o esforço do jogador desaparece a cada refresh (F5). |
💡 O segredo dos especialistas: A física agradável não nasce por acaso. Em vez de pedir “faça um pássaro pular”, exija “gravidade equilibrada, impulso corretivo e rotação angular conforme sobe ou cai”. A IA responde de forma milimétrica às leis da física detalhadas no prompt.
Os 4 prompts para construir o clone arcade (limpos para copiar) 📌
Abaixo estão os prompts estruturais exatos que utilizamos. Limpamos todos os códigos de formatação para que possa copiar apenas a diretiva e enviá-la à inteligência artificial. Acompanhe os resultados de cada fase.
👾 Série dev — O projeto Sky Hop
📸 Prompt 01 — A fundação do jogo
Este comando insere a matemática central da gravidade, colisões, pontuação e interface da tela inicial.
DESAFIO: CRIE UM JOGO DE VOO ARCADE COMPLETO EM UM ÚNICO HTML. Quero criar um jogo simples, viciante e funcional, inspirado na mecânica clássica de tocar para manter um personagem voando entre obstáculos. Nome do projeto: SKY HOP. Não utilizar personagens ou sprites protegidos. Tudo deve ser criado nativamente em CSS/Canvas. MECÂNICA PRINCIPAL: - O personagem "Pip" sofre gravidade constante. - Ao tocar (tela) ou pressionar espaço/W (teclado), ele recebe um impulso (sobe). - Objetivo: passar entre pilares que nascem à direita e vêm para a esquerda. - Passar um obstáculo = +1 PONTO. Bater no chão, teto ou pilar = GAME OVER. CONTROLE TOUCH - PRIORIDADE: O jogo precisa funcionar perfeitamente em celular. Crie uma função central "flap()" que atende touch, mouse e teclado de forma unificada. Evite duplicação de eventos. FÍSICA E GAME LOOP: A física precisa ser agradável, não deixe o personagem pesado demais. Use requestAnimationFrame() para um único game loop limpo. SISTEMAS EXIGIDOS: - Cenário: Parallax básico (céu, nuvens, fundo). - Dificuldade progressiva (obstáculos levemente mais próximos ou rápidos com o tempo). - Botões: Menu, Jogar Novamente e botão de Pausa. - LocalStorage para salvar a Maior Pontuação (Recorde). Entregue TODO o projeto em um ÚNICO ARQUIVO sky-hop.html (HTML + CSS + JS puro).
O que aconteceu no teste 1: Logo à primeira tentativa tivemos um verdadeiro sucesso! O jogo nasceu 100% funcional. Tinha a animação da personagem, contava os obstáculos corretamente, e a morte gerava uma tela de pontuação. A física estava impecável. O sucesso foi tão fácil que decidimos aumentar o risco e adicionar metajogo: troféus de conquista.
👉 Deslize para ver a fase 1: interface, pausa e jogo. Clique para ampliar.
📸 Prompt 02 — O sistema de troféus
Exigimos a adição de um sistema de progresso com medalhas, alertando rigorosamente para não destruir a física conseguida.
ATUALIZAÇÃO SKY HOP - SISTEMA DE TROFÉUS E CONQUISTAS. O jogo base está maravilhoso. NÃO RECONSTRUA A FÍSICA OU O GAME LOOP. Preserve 100% da jogabilidade aprovada. OBJETIVO: Adicionar sistema de TROFÉUS. 1. Crie 10 troféus lógicos com condições (Ex: "Primeiro Voo" ao morrer a primeira vez; "Primeiras Asas" ao passar 5 canos, "Caçador de Recordes" ao bater recorde). 2. Interface de Conquistas: Um botão no Menu que abre a grade de troféus. Troféus bloqueados ficam escuros/com cadeado. Desbloqueados mostram a insígnia. Use SVG inline simples gerado por código para as insígnias. 3. Notificação in-game: Quando atingir o marco, uma pequena notificação visual do troféu deve descer na tela por alguns segundos SEM travar o jogo. 4. Salvar: Use localStorage para guardar o progresso e troféus conquistados. Entregue o código completo num único arquivo html atualizado.
O que aconteceu no teste 2 (o bug visual): A lógica funcionou perfeitamente. Os alertas flutuantes no topo da tela não estorvaram o jogo. A falha: Os ícones dos troféus na galeria não apareceram. Mesmo completando o desafio, a lista de conquistas mostrava apenas um círculo cinzento genérico em vez do *SVG* que pedimos.
👉 Deslize para ver o alerta perfeito e a falha gráfica dos círculos cinzentos.
📸 Prompt 03 — Conserto visual e loja de personagens
Enviamos o conserto do bug no mesmo prompt em que pedimos uma loja, utilizando os pontos ganhos como dinheiro virtual.
ATUALIZAÇÃO SKY HOP - CORREÇÃO DE TROFÉUS + LOJA DE PERSONAGENS. PRESERVE A BASE DO JOGO. A física e jogabilidade estão intocáveis. PARTE 1 - BUG VISUAL DOS TROFÉUS: Ao abrir a tela de troféus, os ícones aparecem como círculos cinzas vazios. Crie SVGs inline reais (estrelas, coroas, asas) injetados via JavaScript quando desbloqueados. PARTE 2 - SKY COINS E LOJA DO CÉU: 1. Moeda: Cada obstáculo ultrapassado concede +1 Sky Coin, contabilizado no final da partida no Game Over. Salve no localStorage. 2. Menu Loja: Crie a "Loja do Céu" no menu. 3. Personagens: Crie 8 skins (Ex: "Solar" custa 15, "Rubi" custa 40, "Lunar" 70...). Cada skin muda a cor e silhueta do personagem no jogo. 4. Lógica de Compra: Verifique saldo, desconte valor, libere botão de "Equipar". O personagem equipado NÃO deve alterar as hitboxes ou a física do jogo, deve ser uma mudança puramente visual (skin). Entregue o código HTML atualizado com a loja funcional e o bug resolvido.
📊 O que aconteceu no teste 3: Um triunfo monumental do modelo! O bug dos troféus cinzentos foi varrido. A “Loja do Céu” apareceu perfeitamente formatada. O jogador ganha dinheiro conforme os obstáculos superados e pode comprar novos “pássaros” que se equipam automaticamente para a próxima partida. Sistemas cruzados em JavaScript funcionando impecavelmente num só documento HTML!
👉 Deslize para ver os ícones corrigidos e o funcionamento fabuloso da Loja. Clique para ampliar.
📸 Prompt 04 — Ambientação e clima (a carga máxima)
Exigimos chuva, vento, cidades e ciclos de tempo, testando até onde o Canvas nativo conseguia renderizar.
ATUALIZAÇÃO FINAL SKY HOP - MUNDOS, CENÁRIOS E SISTEMA DE CLIMA NÃO RECONSTRUA A JOGABILIDADE. PRESERVE A FÍSICA E A LOJA QUE JÁ ESTÃO IMPECÁVEIS. OBJETIVO: Adicionar uma camada de expansão visual sobre o motor existente. 1. Sistema de Cenários: Adicione a opção "Mundos" (Rio de Janeiro, Nova York, Paris, Tóquio). O jogador compra com Sky Coins. 2. Estética Procedural: Gere os prédios ou baías no fundo em parallax, utilizando cores e retângulos via código (NÃO USAR IMAGENS REAIS). O jogador tem de "perceber" que é uma cidade. 3. Clima Dinâmico: Adicione opções climáticas (Chuva, Vento, Noite, Sol). A chuva deve injetar pequenas linhas opacas descendo no canvas; o vento gera folhas/papéis voando de lado. 4. Proteção de Desempenho: Nenhum destes efeitos climáticos pode adicionar detecção de colisão ou quebrar a velocidade do Game Loop. Entregue o código atualizado. Esta é a versão final do jogo!
O resultado final da última camada: O sistema mecânico (o menu de escolha de mundos, o desbloqueio, o efeito das gotas de chuva a descer e a transição dia/noite) ficou sublime e sem falhas de performance. O desapontamento: A nível estético, as cidades ficaram extremamente abstratas. É preciso muita imaginação geométrica para olhar para os polígonos na tela e dizer “aquilo é o Japão”. O HTML Canvas desenhado por código puro tem dificuldades orgânicas na direção artística realista.
👉 Deslize para ver o sistema de escolha de mundos e a chuva funcionando. Clique para ampliar.
O resultado: Baixe o Sky Hop (Worlds Edition) 🕹️
Embora a arte final procedimental das cidades seja rudimentar, a estrutura computacional deste jogo é uma verdadeira aula magistral. Toda a lógica de armazenamento, compra de loja, gestão de partículas climáticas e detecção rígida de colisão convivem num único arquivo com uma estabilidade formidável. Falta apenas uma forma de sincronizar um *save-cloud* se o jogador limpar os cookies locais.
SKY HOP: O clone definitivo
Quer jogar no seu navegador ou analisar o código para ver como a IA ligou as “Sky Coins” com o painel de loja? O projeto está inteiro aqui e pronto a explorar.
👉 Amanda aconselha: a armadilha do Game Loop
- Se pretende usar a IA para vender *minigames*: O limite visual geométrico gerado pela IA num só arquivo HTML (como vimos nos prédios de Tóquio/Nova Iorque) pode ser ultrapassado de uma forma inteligente. Depois de a IA criar o HTML limpo, troque no seu código a função
ctx.fillRect(...)de um obstáculo por uma linha `ctx.drawImage(…)` e carregue um gráfico PNG/SVG lindíssimo da internet. Usa o “cérebro” da IA, com a “pele” de um artista real! - Sobre a preservação de dados (localStorage): Em jogos criados em navegadores sem base de dados, a função do
localStorageé rainha. A sua leitora guardará os *records* e as “Sky Coins” passivamente. Avise sempre, contudo, que se limparem o histórico do browser, o progresso reseta. - O perigo do *Refresh* (chuva e vento): O maior erro ao injetar clima (partículas visuais) em jogos de Canvas é quando a IA cria múltiplos loops paralelos em vez de usar o já existente
requestAnimationFrame. Notou isso no prompt 4? Exigi severamente para não criarem funções sobrepostas de velocidade para proteger a fluidez.
🚨 SOS: O meu celular faz duplo pulo na personagem!
- Causa: No celular, os navegadores reagem simultaneamente aos ouvintes de eventos
touchstarteclicksimulado. O jogo lê ambos os comandos numa fração de milissegundo, e a personagem voa para o teto loucamente. - Correção prática: Não refaça a física. Peça à IA no chat: “Corrija os Input Events (EventListeners). Previna a duplicação no Mobile adicionando
e.preventDefault()aos toques de tela para que não ativem o clique clássico do mouse na mesma cadência.” - Resultado: A resposta da tela será singular, limpa, e o seu Flappy Bird clone responderá com uma leveza tátil exímia.
FAQ: dúvidas reais a serem respondidas 🔍
O código gerado pode ser publicado e monetizado na internet?
Totalmente. Este jogo HTML pode ser envolvido num invólucro Apache Cordova ou publicado num portal da Web com sistemas de anúncios (AdSense de Jogos) implementados por cima, dado que o algoritmo arquitetônico foi gerado autonomamente sem quebrar patentes visuais.
Por que a cidade final ficou visualmente feia ou rudimentar?
O Canvas API sem auxílio gráfico constrói desenhos empilhando formas primitivas (quadrados e círculos) usando código matemático. Desenhar monumentos complexos através de algoritmos longos quebra frequentemente o raciocínio sintático nativo do Gemini.
Se eu fechar o Sky Hop, os troféus que ganhei desaparecem?
Não. Exigimos a integração direta com o ambiente *localStorage* do seu dispositivo através do segundo *prompt*. Enquanto não apagar os cookies e a cache da página no celular/computador, o jogo lembrará que as suas moedas e mundos estão lá.
Consigo compartilhar o jogo apenas enviando o arquivo HTML?
Exatamente! É esse o grande encanto de compactar o projeto com zero dependências externas. Qualquer destinatário que efetuar um clique duplo nesse arquivo via PC ou Mac arranca no navegador pré-definido sem instalação requerida.
Conclusão: A geometria pura da diversão 🙌
O desafio do Sky Hop demonstra na prática uma lei fascinante da tecnologia contemporânea: as fundações arquitetônicas e a fluidez superam amplamente os artifícios visuais nos testes conceptuais de desenvolvimento assistido. O limite atual da IA baseada na web não está na matemática do programa, mas na beleza em traços orgânicos quando proibimos texturas *uploadadas*.
O sistema de conquistas modulares integrado sob a fundação inicial do jogo ensina a lição derradeira sobre construção de aplicações através de “janelas de contexto”: estabilizar o piso 1 antes de erguer sequer as pilastras do piso 2 é garantia de vitória técnica contra alucinações sintáticas.
Prossiga com as suas ideias artísticas, desenhe no Photoshop e substitua estes vetores cinzentos pelos seus, e possuirá produtos completos à distância da lógica conversacional.
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 baixar o HTML, alterá-lo com as suas imagens e desenhar um sucesso independente, publique nos stories e marque o nosso instagram @mktamanda. Estarei na linha da frente a apoiar as suas publicações! :))
ps: obgda por chegar até aqui, é importante para mim.
