Criar jogo de corrida 3D no Gemini: o teste limite do HTML em 1 hora
A ambição de qualquer desenvolvedor iniciante é criar o seu próprio “Forza Horizon” ou “Need for Speed”. Um mundo aberto, carros rápidos, liberdade de direção e gráficos imersivos. Historicamente, isso exigia motores gráficos pesados como a Unity ou a Unreal Engine.
Mas o que acontece quando tentamos usar o modelo de linguagem mais avançado do Google para condensar toda a matemática de renderização 3D, física de veículos e iluminação global num único bloco de texto? O custo da ambição desmedida com inteligência artificial geralmente é um colapso técnico total.
Para descobrir o limite exato da ferramenta, criamos um desafio brutal: gerar a base de um jogo de corrida 3D (Velocity Horizon) num único arquivo HTML em menos de 1 hora. Copie os mega prompts usados, veja os resultados visuais impressionantes do primeiro teste e entenda por que o projeto acabou “quebrando” nas iterações seguintes.
Gemini Pro é o LLM avançado do Google, projetado para processar janelas gigantescas de contexto. A renderização 3D nativa no navegador web exige a manipulação complexa do WebGL e da API do Canvas.
Neste experimento extremo, proibimos o uso explícito de motores prontos, forçando a IA a simular um ambiente tridimensional, física veicular e sistema de dia e noite usando HTML, CSS e JavaScript puro.
Neste guia: a anatomia da física 3D em prompts, os 4 comandos massivos testados, e o download da versão mais estável para você tentar consertar o que a IA quebrou.
Resposta curta:
O Gemini consegue criar a base funcional de um jogo de corrida 3D em arquivo HTML único (movimentação, pistas e checkpoints funcionam no prompt 1). Contudo, a renderização 3D e sistemas de iluminação global consomem muito limite de contexto. Ao tentar iterar sombras e luzes dinâmicas, o código colapsa, resultando em “telas pretas” irreversíveis.
Como este guia foi montado: Toda a documentação abaixo reflete um teste real e sem cortes. Documentamos a vitória inicial da IA e o colapso subsequente. Trata-se de uma análise honesta dos limites do desenvolvimento front-end com inteligência artificial.
⚡ TL;DR
- Tempo de leitura: 10 min (ou pule pros prompts)
- Nível: Avançado / Experimental
- Você vai copiar: 4 mega prompts de engenharia de software 3D
- Lição principal: Reconhecer “Context Loss” (amnésia da IA) em códigos enormes
Índice
- As regras do desafio de 1 hora
- Anatomia do mega prompt 3D
- Os 4 prompts mestres e o colapso do sistema
- O resultado: Baixe a versão estável do Velocity Horizon
- Amanda aconselha: o limite do HTML único
- SOS: O contexto 3D sumiu!
- FAQ
As regras do desafio de 1 hora
Regra 1: Arquivo único (o pesadelo do WebGL)
Criar jogos 3D geralmente envolve pastas inteiras para texturas, modelos `.obj` e motores como a Unity. Para este teste, mantivemos a regra sádica: toda a geometria da pista, carro, montanhas e física deve ser gerada por vetores e código num único documento .html.
Regra 2: Originalidade forçada
Pedir “faça um clone do Forza Horizon” resulta em recusas por direitos autorais. O prompt exige a criação de um universo próprio, chamado “Velocity Horizon”, desenhado proceduralmente.
Regra 3: Limite de iteração
O desafio permitia apenas 1 mega prompt base e 3 tentativas de ajustes. Em mundos 3D, um erro de iluminação no ajuste 2 pode comprometer o jogo inteiro, exigindo raciocínio frio na recuperação.
Anatomia do mega prompt de corrida 3D
| Elemento do prompt | O que você faz | O que acontece por dentro | Impacto real | Erro se ignorado |
|---|---|---|---|---|
| Prioridade absoluta | Obriga a IA a focar em física primeiro, visuais depois. | A IA escreve o motor de colisão (Raycasting) antes dos shaders. | O carro movimenta-se corretamente antes do mundo ficar “bonito”. | Jogo lindo com um carro que atravessa o chão e cai no infinito. |
| Controles unificados | Exige que touch e teclado alimentem o mesmo estado de input. | Cria um objeto JS (ex: input.accelerate) lido pelo motor. | Evita bugs de concorrência no celular. | O teclado funciona, mas o touch bloqueia o acelerador. |
| Câmera interpolada | Exige “suavização” na câmera terceira pessoa. | A IA usa função lerp para a câmera seguir o carro com atraso. | Sensação de velocidade e peso cinematográfico. | Câmera estática e robótica que dá enjoo ao jogar. |
💡 O segredo dos especialistas: Em prompts de WebGL (3D), a “Iluminação Global” é o calcanhar de Aquiles. Adicionar múltiplas fontes de luz num único arquivo HTML é a forma mais rápida de estourar a memória gráfica do navegador.
Os 4 prompts de construção e o colapso inevitável (com prints) 📌
Abaixo estão os prompts exatos usados para este teste extremo. Veja a evolução de uma vitória inicial absurda para um colapso técnico de iluminação, e a nossa tentativa desesperada de “ressuscitar” o jogo.
👾 Série dev — O projeto Velocity Horizon
📸 Prompt 01 — O mega prompt 3D de fundação
Este prompt injeta as físicas principais, sistema de HUD, câmera e o ambiente aberto de uma vez.
CRIE UM JOGO DE CORRIDA 3D ORIGINAL EM UM ÚNICO ARQUIVO HTML Crie um jogo de corrida 3D completo, bonito e funcional, inspirado na sensação de liberdade de jogos modernos de corrida em mundo aberto. Nome do jogo: VELOCITY HORIZON - Subtítulo: OPEN ROAD FESTIVAL REGRA PRINCIPAL: Entregar TODO O PROJETO EM APENAS UM ARQUIVO .html. Utilizar HTML, CSS, JavaScript, WebGL/Canvas nativo. NÃO depender de servidor, banco de dados, ou assets externos (imagens, obj). Crie árvores, terrenos, carro e ruas proceduralmente por geometria. PRIORIDADE ABSOLUTA: 1. Controle Funcional 2. Física de Direção 3. Desempenho 4. Suporte Touch 5. Câmera Antes de efeitos gráficos, o carro precisa acelerar, frear, dar ré e virar perfeitamente (Teclado: WASD. Touch: Botões virtuais na tela). Crie física arcade agradável (velocidade, atrito, drift leve). MUNDO E JOGABILIDADE: - Mapa explorável com estradas (asfalto escuro), zonas de grama e relevo simples. - Ciclo de dia e noite visual. - Câmera suave em terceira pessoa seguindo o carro. - Tráfego simples: alguns carros controlados por IA nas ruas. - Sistema de Corridas: Zonas para iniciar eventos com checkpoints, cronômetro e HUD na tela. - Qualidade Gráfica: Permita ajuste (Baixo, Médio, Alto) no menu de pausa para não travar. Não divida o código. Entregue o HTML final 100% jogável.
O que aconteceu no teste 1 (incrível!): O resultado inicial foi espetacular para um único arquivo. O carro move-se em 3D, o sistema de dia e noite alterna cores, os checkpoints funcionam perfeitamente junto ao cronômetro, e até um velocímetro no HUD apareceu. O jogo criou duas zonas: cidade e floresta. O defeito: Durante a noite, ficava tudo absurdamente escuro, impossibilitando ver a estrada ou delimitações da pista.
👉 Deslize para ver os gráficos 3D da primeira iteração. Clique na imagem para ampliar com qualidade.
📸 Prompt 02 — O desastre (iluminação dinâmica)
Quisemos tornar o jogo legível à noite, pedindo faróis e luzes dinâmicas. Esse foi o erro fatal da ambição.
VELOCITY HORIZON - ILUMINAÇÃO NOTURNA + CIDADE MAIS LEGÍVEL Você está trabalhando no código EXISTENTE. NÃO REFAÇA O JOGO DO ZERO. PROBLEMA: À noite está escuro demais. 1. ILUMINAÇÃO AMBIENTAL: A iluminação nunca pode chegar a zero. Crie luz ambiente. 2. FARÓIS DO CARRO: Adicione cones de luz que acompanham a rotação do carro para ver a pista à noite. 3. POSTES DE LUZ E PRÉDIOS: Adicione postes que ligam sozinhos à noite com efeitos de luz (círculos de emissão), e janelas acesas nos prédios procedurais. 4. RUAS MAIS CLARAS: Crie marcações de asfalto (linhas no centro) e uma diferença clara de cor entre a calçada e o meio-fio para o jogador não bater em paredes invisíveis. Testes obrigatórios antes de entregar: A estrada tem de estar visível e os frames não podem travar. Entregue o HTML único com estas adições de luz.
O colapso da IA: A tela ficou inteiramente preta. A janela gráfica de WebGL travou. Quando se pede “faróis, postes de luz dinâmicos e emissividade” num ambiente 3D gerado num único arquivo de texto, a matemática de shaders e iluminação colide e quebra o renderizador do navegador. O jogo foi arruinado.
👉 O resultado trágico: perda do contexto WebGL e quebra total da matriz de luzes.
📸 Prompt 03 — A tentativa de ressurreição
Entramos em modo de contenção de danos. Mandamos a IA recuar na iluminação para resgatar a jogabilidade.
VELOCITY HORIZON - REVISÃO DE ESTABILIDADE E RECUPERAÇÃO DO JOGO A última atualização quebrou o jogo: O CENÁRIO FICOU COMPLETAMENTE ESCURO. REGRA ABSOLUTA: NÃO REFAÇA O JOGO. A prioridade é descobrir o que causou o problema e corrigir APENAS a parte da iluminação problemática. 1. PROTEGER VALORES DE LUZ: Nenhuma variável deve deixar o jogo preto. Crie um `Math.max(valor, minimo_seguro)` para a luz ambiente. 2. REMOVER LUZ DINÂMICA COMPLEXA: Remova luzes reais de faróis e postes se estiverem travando. Crie luzes de postes e janelas como "Efeitos Visuais" (cores claras puras sem gerar cálculo de sombras). 3. TESTE DE RECUPERAÇÃO: O jogo precisa carregar, o carro deve aparecer, a câmera acompanhar, e o ciclo de noite deve ser apenas escuro, e não um buraco negro. Entregue o HTML restaurado.
O que aconteceu no teste 3: Não conseguimos ressuscitar a glória inicial. Uma vez que o loop de renderização 3D nativo num arquivo único se perde, a IA tende a amputar partes vitais para tentar fazer a imagem regressar à tela. Entendemos que iluminação global estava matando a performance.
📸 Prompt 04 — A última substituição (relevos geométricos)
Abandonamos a iluminação complexa e apostamos em alterar a malha 3D (geometria) do chão para dar personalidade.
VELOCITY HORIZON - ATUALIZAÇÃO VISUAL SEGURA SABEMOS QUE ILUMINAÇÃO QUEBRA O JOGO. NÃO TOQUE NA ILUMINAÇÃO GLOBAL. Preserve a física e o renderer base. OBJETIVO: 1. FARÓIS VISUAIS NO CARRO: Crie geometria de cone amarelo translúcido presa ao carro, sem luz real (PointLight etc). APENAS geometria. 2. RELEVO NA ZONA RURAL: Adicione colinas e montanhas distantes usando pequenas elevações de geometria do terreno, mas com curvas suaves para não travar o carro. 3. CIDADE MAIS BONITA: Varie a escala vertical (altura) e largura dos prédios (Baixos, Médios, Altos). 4. SEGURANÇA: Nenhuma dessas adições gráficas pode parar o ciclo `requestAnimationFrame`. Entregue a versão mais estável e final possível do HTML.
📊 O veredito final: O projeto em si não conseguiu voltar à estabilidade imaculada do teste 1, provando que o escopo de gerar “Forza Horizon” num arquivo de bloco de notas sobrecarrega o Gemini Pro no ambiente atual. 3D nativo exige separação de *assets*, matrizes independentes e *shaders* pesados. Contudo, o código gerado é ouro puro de lógica matemática e colisão vetorial.
O resultado: Baixe a versão estável do Velocity Horizon 🕹️
Deixamos aqui o arquivo HTML da versão mais estável que conseguimos estabilizar ao final da saga. É uma base com física de veículo em 3D e controle de ambiente. Baixe-o, estude como a IA estruturou a classe de Raycasting e aceleração, ou até tente limpar as luzes quebradas e salvar o projeto original por conta própria!
VELOCITY HORIZON: O desafio open-source
Quer tentar consertar a iluminação dinâmica ou apenas explorar como a inteligência artificial construiu a física veicular 3D num único arquivo de texto? O código é seu.
👉 Amanda aconselha: o limite brutal do HTML único
- Se você vai criar jogos 3D com IA: Não use a regra do “Arquivo Único de HTML”. Este experimento provou que o peso dos cálculos WebGL sufoca o código. Peça para o Gemini construir *scripts* isolados para a Unity, Godot ou Unreal Engine. A IA fará maravilhas se fornecer apenas a lógica para um motor que já cuida da iluminação nativamente.
- Sobre “Telas Pretas” no WebGL: Quando a tela inteira preteja, geralmente não é um “bug visual”, mas a quebra do Loop Principal (Renderer) devido à injeção de parâmetros indefinidos de Shader (`NaN`, `Undefined`). Retroceda imediatamente para o último backup salvo.
- Contenha a emoção visual: Em projetos de arquitetura generativa, solidifique o core. De que adianta criar árvores balançando ao vento se as físicas de colisão do carro deixaram de ser compiladas por falta de espaço no token de resposta?
🚨 SOS: A tela ficou preta (perda de contexto WebGL)
- Causa: Ao inserir as DirectionalLights e as volumetrias do pôr do sol procedurais, as variáveis de cor e multiplicação de sombra consumiram erros de ponto flutuante, quebrando todo o Canvas.
- Correção prática: Não peça à IA “conserte por que ficou preto”. Volte para o prompt anterior, abra um chat novo, cole o código da V1 (que funcionava) e diga: “Substitua os materiais `MeshStandardMaterial` (que sofrem sombra) por `MeshBasicMaterial` (que ignoram a luz global e não travam o navegador).”
- Resultado: Você perde o realismo da luz física, mas recupera o desempenho do jogo.
FAQ: dúvidas reais sendo respondidas 🔍
O Gemini não consegue fazer jogos 3D?
Pelo contrário, ele escreveu do zero a física matemática de um carro 3D e renderizou terreno num único arquivo. A falha ocorreu no gerenciamento da matriz de iluminação num espaço não modularizado e denso (janela de contexto estourada).
Qual é o melhor ambiente para pedir jogos 3D à IA?
Bibliotecas estruturadas. Peça “Escreva um componente React-Three-Fiber” ou “Gere a classe em C# de Raycasting de veículos para Unity”. O erro fatal é misturar HTML puro com renderização complexa de mundos abertos densos.
Por que a IA remove funções anteriores sozinha?
Chama-se amnésia de contexto. Quando o limite do token de saída é atingido, o LLM começa a amputar o código ou resumi-lo (“o restante permanece igual”). Por isso é que em software, itera-se pedaço a pedaço (modularidade).
Posso baixar a versão estável no celular?
Sim, o código fornecido contém suporte nativo exigido no prompt para joysticks e toques múltiplos (pointerdown/pointerup), rodando direto do Safari ou Chrome mobile de aparelhos recentes.
Conclusão: Saber quando falhar é dominar a tecnologia 🙌
O teste do Velocity Horizon nos ensina muito mais do que os sucessos anteriores. O limite do desenvolvimento web baseado apenas em linguagem neural de inteligência artificial desenha-se na quantidade de sistemas independentes (renderização espacial, iluminação, físicas interligadas) que tentamos amontoar em blocos de texto únicos.
O programador humano atua como o engenheiro de arquitetura modular: separamos a geometria num lado, o som em outro e encarregamos a IA de gerir lógicas curtas e isoladas.
Baixe a nossa experiência inacabada e maravilhe-se com as fundações matemáticas que o modelo formulou e que, certamente, evoluirão nos próximos meses rumo à estabilidade infalível.
Ei, antes de ir: se este conteúdo te ajudou, você não pode perder o que separamos nestas outras categorias. É conhecimento de nível pago, entregue de graça aqui:
Baixe o arquivo, tente salvar o Forza de IA da escuridão! Publique as suas correções e marque nosso instagram @mktamanda. Vou amar repostar a ressurreição deste jogo! :))
ps: obgda por chegar até aqui, é importante pra mim.
