Criar jogo Hill Climb no Gemini: o limite da física 2D em 1 hora
Jogos onde um jipe salta por colinas acidentadas parecem simples na tela do celular, mas escondem um pesadelo matemático. Calcular a gravidade, a rotação dos eixos, a tração dos pneus num terreno irregular e a colisão do chassis exige um motor de física implacável. Historicamente, os estúdios indie usam ferramentas como a Unity ou o Box2D para resolver este problema.
O custo de tentar ditar toda esta física matemática para uma inteligência artificial através de um prompt é uma montanha-russa de falhas lógicas: carros que atravessam o chão, viaturas que nascem de pernas para o ar ou rodas que flutuam magicamente acima do asfalto.
Para descobrirmos até onde vai o raciocínio físico do modelo Pro, desenhamos um desafio brutal: recriar a mecânica de um jogo de subida e física automóvel (o “Offroad Climb”) num único arquivo HTML, em menos de 1 hora. Copie os comandos exatos da nossa experiência, divirta-se com os bugs hilariantes de colisão e baixe o código que levou a IA ao colapso.
Gemini Pro é o LLM avançado do Google, com uma gigantesca janela de contexto capaz de gerar código lógico e matemático.
Neste desafio de *Game Design*, forçamos a IA a desenhar a geometria dos carros, gerar colinas proceduralmente e processar reações físicas (gravidade e tração) usando única e exclusivamente HTML5, CSS3 e JavaScript puro (Canvas API), sem qualquer biblioteca facilitadora.
Neste guia: a dissecação da física gerada por IA, os 4 comandos massivos do projeto e o código open-source para tentar consertar a tragédia matemática.
Resposta curta:
O Gemini consegue montar a estrutura periférica de um jogo (menus, oficinas de *upgrade* e conquistas) instantaneamente num arquivo HTML. Contudo, a criação nativa de um motor de física de colisão em terrenos irregulares consome demasiado limite de contexto. Após 3 iterações de correções cirúrgicas (o carro caía no abismo ou nascia de cabeça para baixo), tentar adicionar novos cenários causou a falha total da renderização.
Como este guia foi montado: Submetemos o Gemini Pro a um teste real. Os prompts abaixo foram inseridos sequencialmente, e as imagens exibem as falhas de código (como as rodas a afundarem na terra) exatas que presenciamos. É um estudo de caso honesto sobre a frustração e o fascínio de programar com IA.
⚡ TL;DR
- Tempo: 12 min (ou pule para os prompts)
- Nível: Avançado / Depuração de código
- O que você vai copiar: 4 mega prompts de arquitetura física 2D
- Resultado: O arquivo de um jogo de jipes que colapsou (Offroad Climb)
Índice
- As regras do desafio de física 2D
- Anatomia do mega prompt mecânico
- Os 4 prompts mestres e os “bugs” de colisão
- O resultado: Baixe o Offroad Climb
- Amanda aconselha: a armadilha do Canvas 2D
- SOS: O meu carro voa em vez de andar!
- FAQ
As regras do desafio de física 2D
Regra 1: Arquivo único (zero motores de física)
O desafio estrutural aqui era punitivo: não permitir o uso de bibliotecas de física prontas (como o Matter.js). O jogo inteiro, incluindo a equação matemática que impede as rodas de afundarem na relva, teve de ser codificado num documento .html independente.
Regra 2: Originalidade forçada (Offroad Climb)
Se pedíssemos “um clone de Hill Climb Racing”, o modelo tentaria importar texturas da internet, resultando em telas brancas. O nosso prompt forçou a construção de um ambiente totalmente original, desenhado por geometria programada.
Regra 3: Limite de iteração
Estabelecemos 1 prompt base de fundação e 3 atualizações. A física é uma teia de aranha de código: se tentarmos consertar o amortecedor de um jipe, é muito provável que a IA acabe por estragar a gravidade da lua.
Anatomia do mega prompt mecânico
| Elemento do prompt | O que faz | O que acontece por dentro | Impacto real | Erro se ignorado |
|---|---|---|---|---|
| Geração procedural limitada | Pede colinas, mas avisa para “evitar terrenos impossíveis”. | A IA aplica restrições matemáticas no algoritmo de ruído (Noise) do cenário. | A pista não se transforma numa parede vertical intransponível ao fim de 10 metros. | Geração de montanhas com 90º de inclinação bloqueando o jogo. |
| Colisão de duplo eixo | Força a IA a calcular o embate nas duas rodas simultaneamente. | O código mede a altura do terreno no Eixo X da Roda 1 e da Roda 2. | Permite ao carro inclinar-se corretamente quando uma roda está mais alta que a outra. | O carro flutua magicamente com apenas uma roda a tocar no chão. |
| Proibição de scroll | Bloqueia o comportamento natural do dedo na tela. | Injeta comandos e.preventDefault() nos botões de acelerar. | A página da Web fica estática, atuando como uma App verdadeira. | Ao tentar travar, o usuário arrasta acidentalmente a página para baixo. |
💡 O segredo dos especialistas: As sombras visuais geradas por código muitas vezes confundem o motor de colisão da IA, fazendo o carro “tropeçar” no seu próprio desenho. A separação estrita entre a “camada de física” e a “camada gráfica” no *prompt* é vital.
Os 4 prompts de construção e a guerra matemática 📌
Abaixo apresentamos os comandos massivos exatamente como os utilizamos (limpos de erros de formatação para facilitar a sua cópia). Acompanhe a transformação visual fantástica, os bugs caricatos e a quebra final do projeto.
👾 Série dev — O projeto Offroad Climb
📸 Prompt 01 — A fundação do jogo
Injetamos todos os requisitos mecânicos: menus fantásticos, lojas, mas com o aviso claro de que a física do terreno era a prioridade.
DESAFIO: CRIAR UM JOGO DE SUBIDA E FÍSICA EM UM ÚNICO HTML Quero criar um jogo mobile de corrida e física inspirado na ideia de jogos de subida em terrenos acidentados, mas com identidade completamente ORIGINAL. Nome do jogo: OFFROAD CLIMB. Subtítulo: DOMINE A SUBIDA. CONTROLE O CARRO. REGRA PRINCIPAL: Tudo precisa estar dentro de um único arquivo HTML contendo HTML, CSS e JavaScript puro (Canvas API). Não depender de servidor, banco de dados, APIs externas ou imagens. CONCEITO E OBJETIVO: O jogador controla um veículo tentando atravessar terrenos acidentados para avançar o máximo possível, coletar moedas, manter o equilíbrio e não capotar. Se o veículo virar de cabeça para baixo e parar: "CAPOTOU" e reiniciar no último checkpoint. CONTROLES MOBILE FIRST: Botões grandes na tela (Direita = Acelerar, Esquerda = Frear/Ré). Devem funcionar com pointerdown/up e permitir segurar o toque. FÍSICA (A PRIORIDADE): Criar sistema de física próprio em JS. O veículo deve ter velocidade, gravidade, suspensão visual e rotação. O carro precisa reagir ao terreno e as duas rodas devem participar da física de contato. TERRENO E PROGRESSÃO: Terreno procedural infinito (subidas, rampas, vales). A câmera acompanha o carro. Começa na "Floresta" e desbloqueia "Deserto", "Gelo" e "Vulcão". Sistema de combustível (espalhar galões) e Integridade do veículo. GARAGEM E ECONOMIA: Menu de garagem para comprar melhorias (Motor, Suspensão, Pneus, Tanque) usando as moedas coletadas na fase. Salvar progresso no localStorage. Entregue o código completo num único arquivo, priorizando a estabilidade da física do veículo com o chão.
O que aconteceu no teste 1: Podemos dizer que foi inconclusivo! A nível de gestão de interfaces (Menu, Loja de Conquistas e Sistemas), a IA gerou uma tela brilhante. No entanto, o defeito fatal: o carro passava direto pelo chão como um fantasma, sendo impossível jogar. O visual estava extremamente rudimentar e escuro quando comparado a um jogo moderno.
👉 Deslize para ver os menus que funcionaram bem, seguidos do bug fatal do carro “fantasma”.
📸 Prompt 02 — O carro de pernas para o ar
Exigimos a revisão estrita da matemática do terreno para impedir que o veículo se afundasse, além de melhorias visuais.
SEGUNDA RODADA: O resultado foi INCONCLUSIVO. O veículo atravessa o chão e o visual está rudimentar. REGRA: NÃO REFAÇA DO ZERO. Preserve menu, loja, upgrades, HUD e mobile. 1. PRIORIDADE ABSOLUTA: CORRIGIR O TERRENO E COLISÃO O veículo DEVE permanecer apoiado no terreno. Calcule a altura do solo exatamente abaixo de cada roda, impeça a interpenetração e corrija a rotação baseada na inclinação. 2. MELHORAR VISUAL DO TERRENO E PARALLAX Quero camadas visuais para profundidade. Fundo (céu/montanhas), Meio (vegetação) e Chão (camada de grama em cima, terra em baixo). Dê vida ao cenário. 3. EVOLUÇÃO DO CARRO Não use apenas caixas cinzas. Desenhe carroceria, vidros, detalhes e rodas que girem visualmente. Adicione pequenos efeitos de fumaça ao acelerar. A prioridade é o carro andar sobre a terra corretamente. Entregue o código unificado.
O que aconteceu no teste 2 (o bug hilariante): Alcançamos algumas vitórias críticas! O terreno deixou de engolir o carro, e os fundos ganharam cor, profundidade e design parallax. No entanto, o carro passou a iniciar o jogo virado de cabeça para baixo. Curiosamente, mesmo de pernas para o ar, ele conseguia andar para a frente! Desconfiamos de que a “sombra” gráfica inserida pela IA estava a confundir a geometria central de peso do veículo.
👉 Deslize para ver os cenários lindíssimos, mas com o jipe preso numa “cambalhota” eterna.
📸 Prompt 03 — A cirurgia à sombra
Enviamos uma análise clínica à IA: dissemos especificamente para isolar a arte gráfica do motor de física.
TERCEIRA RODADA: CORREÇÃO CIRÚRGICA. O veículo já NÃO atravessa o terreno, isso é ótimo! Mas o carro começa a partida de PONTA-CABEÇA. NÃO REFAÇA O SISTEMA DE COLISÃO NEM O TERRENO. 1. CORRIGIR ORIENTAÇÃO INICIAL: A rotação inicial deve ser 0 graus. O carro deve nascer com rodas para baixo apoiadas no terreno gerado. 2. INVESTIGAR A SOMBRA: Tenho a suspeita de que a sombra desenhada embaixo do veículo está alterando a bounding box ou a colisão, forçando o carro a virar. A sombra deve ser 100% VISUAL e não interferir em nenhuma matemática de física. 3. SEPARAR FÍSICA DO VISUAL: A física usa apenas posição X/Y e raio das rodas. A renderização de sombras e estética do carro não deve ter influência de contato. Entregue a versão ajustada para garantir que ele nasce na posição natural.
📉 O que aconteceu no teste 3: Vencemos parcialmente! O carro já iniciava a partida direito, com as rodas assentes na terra, e avançava sem problemas. No entanto, as rodas ainda aparentavam estar ligeiramente a flutuar (não perfaziam o encaixe total com o chão) e os colecionáveis (pedras minerais) não estavam a adicionar saldo ao nosso banco. O jogo ainda parecia vazio.
👉 A imagem da nossa meia-vitória. Direitos, mas ainda sem a física de fricção perfeita e coleta inativa.
📸 Prompt 04 — O colapso (a última ambição)
Tentamos consertar a flutuação das rodas e, em simultâneo, forçamos a IA a criar 4 mapas densos. A sobrecarga rebentou o código.
QUARTA RODADA: AJUSTES FINAIS E EXPANSÃO DE CONTEÚDO PRESERVE tudo que já funciona. Não refaça do zero. 1. RODAS FLUTUANTES: O carro está orientado, mas as rodas flutuam uns pixels acima da grama. Ajuste o cálculo de altura exato do terreno abaixo das rodas para o toque ser preciso. 2. ECONOMIA E PEDRAS: Conserte o sistema de coleta. O veículo passa pelas pedras mas não recolhe. Dê ao jogador +2000 pedras iniciais apenas na primeira sessão (via localStorage) para testarmos a Garagem. 3. EXPANDIR O MAPA (4 AMBIENTES): Crie 4 ambientes completos: Floresta, Deserto, Praia e Montanha, cada um com parallax e paleta de cores própria. O jogador deve escolher os mapas no menu. 4. LIMITE DO MAPA: Certifique-se de que, na progressão infinita, a geração procedural não quebre ou pare de gerar pedras e chão. Entregue o arquivo final pronto para teste massivo.
📊 O resultado final (a tragédia do código): O nosso Offroad Climb tornou-se injogável. Fomos demasiado exigentes num ambiente de arquivo único. Ao tentar integrar as texturas geradas proceduralmente para 4 mapas distintos, a par de corrigir a detecção milimétrica de fricção nos pneus, a IA simplesmente perdeu a coesão da janela de renderização. A tela “partiu”, e o projeto ficou num estado que exigiria um programador humano para ser resgatado manualmente do bloco de notas.
👉 Perdemos o jogo. A sobrecarga de dados matemáticos em 4 cenários bloqueou as rotinas do Canvas API.
O resultado: Baixe o Offroad Climb e repare as peças 🕹️
Embora a ambição nos tenha custado um jogo liso e finalizado, a “mecânica avariada” que restou deste projeto é um laboratório formidável de engenharia de IA. Tentar consolidar um engine de física contínua junto de menus, lojas em cache e terrenos geométricos num só documento de texto HTML foi puxar a plataforma aos limites da atual geração.
OFFROAD CLIMB: Laboratório quebrado
Quer aceitar o desafio? Baixe o arquivo original arruinado pela IA, abra o código e tente encontrar os blocos que faltam nas funções de colisão para devolver a jogabilidade.
👉 Amanda aconselha: a armadilha do Canvas 2D
- Se procura uma aplicação comercial final em jogos de física: A nossa insistência no “zero dependências externas” ditou a falha do código. A IA escreve rotinas excelentes na estruturação, mas não faz sentido pedir a um *chatbot* que reinvente a roda quadrada da gravidade num Canvas HTML isolado, quando pode simplesmente enviar o prompt solicitando que integre o arquivo ao famoso e levíssimo Box2D ou *Matter.js* para física sem falhas.
- Contenha o “síndroma do Diretor de Arte”: O Teste 4 ruiu porque pedimos mecânicas estéticas (4 Biomas ricos de Design, Parallax denso) em simultâneo com a correção fulcral do sistema das molas do pneu. Separe rigidamente os seus envios no Chat: as sessões de beleza visual das sessões de reparação de bugs físicos.
- A importância cirúrgica do Reset: Guardou uma cópia do código funcional que andava para a frente? Excelente. Sempre que as IA corrompem interfaces devido à amnésia das janelas longas, abra um terminal novo e regresse aos códigos robustos antigos, não exigindo reestruturações sucessivas num Chat sobrecarregado.
🚨 SOS: O meu carro voa para as nuvens em vez de andar!
- Causa: Nos motores generativos escritos de raiz, o conflito dos botões ocorre quando as setas do teclado colidem com os temporizadores `requestAnimationFrame` que multiplicam os fotogramas de aceleração perigosamente, causando uma “super gravidade invertida”.
- Correção prática: Tal como mostramos na nossa dissecação do Bug da Sombra, não descarte tudo nem force correções de mecânica no código inteiro. Aborde a IA num Chat virgem e exiba apenas o pedaço da variável
velocity.ye do input das teclas solicitando: “A reatividade das teclas está sem Limite Máximo Terminal (Terminal Velocity); injete um limite fixo para impedir o carro de levitar infinitamente.” - Resultado: A resposta estabiliza o código isolado para o poder sobrepor ao seu editor nativo HTML.
FAQ: dúvidas reais a serem respondidas 🔍
O Gemini falhou porque o formato HTML5 não suporta física complexa?
O formato HTML nativo permite cálculos espantosos. O “colapso” sucedeu devido à nossa imposição estrita no “Mega Prompt” em desenhar toda a física relacional num documento exíguo, somado à carga brutal das texturas topográficas no mesmo ecrã de processamento.
Como evito que a IA se confunda na próxima vez?
Não solicite interfaces e físicas na mesma frase de evolução. Prossiga incrementalmente, salvaguardando a estabilidade base e exigindo, na etapa seguinte, módulos independentes (apenas adicionar menus sem tocar no ecrã de movimento).
Por que o carro iniciou de “ponta-cabeça” na segunda alteração?
É o clássico erro de interpretação vetorial do Canvas provocado pela simbiose dos nossos pedidos: a inserção de uma sombra gráfica invadiu a caixa de *Bounding Box* (o polígono limite invisível) colidindo em conflito com o relvado, alterando subitamente o ponto zero de gravidade e virando a viatura.
Consigo reverter a avaria final deste código em casa?
Indubitavelmente. O desígnio de libertar este laboratório falhado online serve exatamente essa premissa. Extraia o arquivo, procure as linhas do `Renderer` de Mapas 3/4 e elimine-os para avaliar a estabilidade do motor originário regressar subitamente.
Conclusão: Respeitar os limites ensina mais do que vencer fácil 🙌
O teste brutal efetuado pelo Offroad Climb elucida sem medos a barreira das arquiteturas assistidas baseadas em inteligência generativa. Apesar de perdermos o projeto devido a uma sobrecarga infeliz na grade do cenário aliada a retificações físicas intensas no nosso derradeiro prompt, a estruturação prévia de toda uma oficina contável baseada numa matriz virtual permanece notável.
O programador interage como um orquestrador minucioso: cada módulo deve obedecer à estabilidade individual (garantindo as vitórias isoladas) antes de colidir a matemática do carro num cenário procedural caótico num editor genérico.
Extraia este projeto de laboratório falhado, explore-o nas minudências do texto em código puro e aprenda as nuances exatas a nunca repetir nos seus *prompts* estéticos de desenvolvimento gráfico!
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 “amassado” e ressuscitá-lo numa pista coerente de asfalto liso, compartilhe esta reviravolta nos *stories* do Instagram, marcando o perfil @mktamanda. Asseguro desde já o seu repost orgulhoso! :))
ps: obgda por chegar até aqui, é importante para mim.
