Criar o Angry Birds no Gemini: o limite da física num único HTML
Hoje pensei em trazer um jogo simples que qualquer pessoa consegue replicar. Nada muito complicado, certo? O Angry Birds revolucionou o mercado mobile com uma mecânica incrivelmente divertida e elementar: lançar pássaros com um estilingue contra casas de porcos.
Mas, ao tentar replicar essa experiência através da inteligência artificial do Gemini, esbarramos num dos maiores desafios da programação pura: a física. Quando removemos as bibliotecas prontas (como o Matter.js) e exigimos que a IA construa um motor de gravidade, inércia e colisão num único arquivo HTML, as coisas tornam-se imprevisíveis.
Neste laboratório da série “Desafiando a IA”, ordenamos ao Gemini que construísse um clone do Angry Birds. Usamos 3 mega prompts. Descubra como a máquina tentou reinventar as leis da gravidade no navegador e baixe o código fonte do nosso “Birds in Space”.
A fragilidade matemática da IA em HTML puro:
Criar uma “página web” ou um “fórum” é lidar com organização de dados (DOM). Criar o Angry Birds é exigir cálculos matemáticos contínuos (Physics Engine) a 60 frames por segundo para determinar como um teto deve desmoronar quando uma coluna de madeira é destruída, tudo em JavaScript puro, sem bibliotecas externas para ajudar.
Neste guia: a dissecação da física em HTML, os 3 prompts que transformaram o jogo num cenário espacial e o código fonte do “Birds in Space” pronto para testar.
Resposta curta:
A IA consegue estruturar o jogo, desenhar o estilingue e criar a mecânica de lançar. No entanto, sofre imenso para calcular o “suporte estrutural” — prever que um telhado deve cair quando a coluna abaixo dele for destruída. O resultado é um jogo perfeitamente jogável e divertido, mas com uma física mais elástica e flutuante do que o clássico original.
⚡ TL;DR
- O que tentamos criar: Clone de Angry Birds num único arquivo.
- A dificuldade principal: O cálculo de reações em cadeia na destruição de blocos.
- O que você vai copiar: 3 mega prompts avançados de lógica em Canvas e gravidade.
- Resultado: Um jogo funcional (“Birds in Space”) que prova que a IA precisa de bibliotecas para dominar a física complexa.
Índice
- Os 3 Mega Prompts do Angry Birds Espacial
- O veredito do laboratório: baixe o código HTML
- Amanda Aconselha: o perigo da física manual
Os 3 Mega Prompts de desenvolvimento de física 📌
Abaixo estão os prompts estruturais exatos que utilizamos para forçar o Gemini a codificar este motor de jogo. Estão totalmente limpos de formatações html ocultas (tabelas e listas), prontos para copiar e colar na sua interface de IA.
👾 Laboratório dev — O projeto Birds in Space
📸 Prompt 01 — O motor base do estilingue
Este comando ordena à IA que crie a arena, as estruturas, a gravidade e o estilingue funcional, recusando a criação de “pseudo-jogos” estáticos.
Quero que você aceite um desafio de programação: TENTE RECRIAR A EXPERIÊNCIA DE ANGRY BIRDS USANDO APENAS HTML, CSS E JAVASCRIPT. Crie um jogo completo e jogável em um único arquivo HTML, sem frameworks e sem necessidade de instalação. Não quero uma landing page explicando o jogo. Quero o JOGO FUNCIONANDO. OBJETIVO: Crie um jogo de estilingue inspirado na mecânica clássica de Angry Birds. O jogador deve controlar um pássaro usando um estilingue, lançar o pássaro contra estruturas e tentar derrubar os inimigos. MECÂNICA PRINCIPAL: Crie: estilingue, pássaro, trajetória de lançamento, física de arremesso, gravidade, colisões, estruturas destrutíveis, inimigos, chão, sistema de pontuação e níveis. O jogador deve conseguir clicar ou tocar no pássaro, puxá-lo para trás, visualizar aproximadamente a trajetória, soltar, atingir estruturas e derrubar inimigos. O jogo precisa funcionar tanto no computador (mouse) quanto no celular (toque). FÍSICA E ESTRUTURAS: Implemente uma física simples, mas convincente. Os objetos devem possuir posição, velocidade, gravidade, massa aproximada, colisão e rotação. Crie estruturas formadas por diferentes objetos (madeira, pedra, vidro). Cada material deve possuir resistência diferente. INIMIGOS E PÁSSAROS: Crie inimigos verdes visualmente originais. Crie pelo menos 3 tipos de pássaros visualmente originais (ex: vermelho básico, veloz e explosivo). Crie a arte usando CSS/SVG/canvas. Não dependa de imagens oficiais do Angry Birds. TRAJETÓRIA E PONTUAÇÃO: Enquanto o jogador puxa o pássaro, mostre uma trajetória prevista usando pequenos pontos. Crie sistema de pontuação e pelo menos 5 níveis diferentes, com dificuldade progressiva. CENÁRIO E DESEMPENHO: Crie um cenário visualmente bonito e casual. O jogo deve rodar de forma fluida. Utilize requestAnimationFrame() para o loop principal. Não utilize setInterval() para controlar a física principal. Entregue somente o código HTML completo. Tudo deve estar em um único arquivo index.html. Não utilize backend. Não exija instalação. Não dependa de bibliotecas externas.
O que aconteceu no teste 1: Tivemos um jogo funcional de estilingue! Mas os problemas da “física feita à mão” se revelaram: o pássaro não aparecia posicionado na ponta elástica, os porcos “morriam” de susto assim que a fase iniciava por causa de colisões fantasmas e a gravidade fazia os objetos deslizarem erraticamente pelo chão.
👉 Deslize. A base funcional do estilingue. A trajetória e as caixas colidiam, mas de forma instável.
📸 Prompt 02 — Estabilidade física e tema espacial
Injetamos imagens de planetas para não perder tempo com cenários em CSS e exigimos que a IA travasse os blocos e porcos no início do nível.
O jogo já está funcionando. Quero apenas corrigir alguns problemas específicos de gameplay e substituir o cenário por imagens. Preserve o código e físicas que já estão funcionando. 1. POSIÇÃO INICIAL DO PÁSSARO: O pássaro precisa começar exatamente na ponta do estilingue. 2. PRÓXIMO PÁSSARO: Quando lanço um pássaro, crie uma fila. O próximo pássaro deve ser colocado na posição do estilingue com um delay de 500-800ms após o primeiro ser lançado. 3. ESTABILIDADE INICIAL: Quando o nível começa, os porcos aparentemente caem e morrem antes do jogador fazer algo. A estrutura inicial precisa ser estável. porco = parado. 4. ZONA DE MORTE: Um porco não deve morrer simplesmente porque caiu alguns pixels. Crie uma deathZone bem abaixo da área jogável. 5. CENÁRIO ESPACIAL: Utilize as imagens externas abaixo como background (object-fit: cover) e mude a identidade para "BIRDS IN SPACE". https://img.magnific.com/vetores-gratis/design-de-jogo-de-terra-de-cratera-roxa_1284-34894.jpg?semt=ais_hybrid&w=740&q=80 https://img.magnific.com/vetores-gratis/fundo-de-desenho-animado-de-jogo-de-planeta-espacial-alienigena-roxo_107791-19696.jpg 6. CAMADA DO JOGO: O background deve ficar atrás de tudo. GAME OBJECTS ficam no meio. UI na frente. 7. GRAVIDADE VARIÁVEL: Como o tema é espacial, permita que níveis tenham multiplicadores de gravidade diferentes. Não adicione novos sistemas (sem loja ou pontuação complexa). Foque na FÍSICA e FLUXO. Entregue o HTML completo.
O que aconteceu no teste 2: A transição visual para o espaço funcionou maravilhosamente e escondeu as imperfeições estéticas. As estruturas estabilizaram no início. No entanto, notamos uma falha fatal para a diversão: os blocos colidiam, mas não reagiam em cascata. Se destruíssemos a perna de uma estrutura, o telhado dessa mesma estrutura continuava a flutuar magicamente sem desmoronar.
👉 A adição das fotografias espaciais deu identidade e ajudou o Gemini a aplicar gravidade reduzida local.
📸 Prompt 03 — A reação em cadeia e alturas reais
Este foi o teste de fogo para as competências matemáticas da IA: exigir cálculo vetorial contínuo para que as casas perdessem o suporte e caíssem organicamente umas em cima das outras.
O jogo já está funcionando. Agora vamos entrar na fase de melhorar o gameplay e a física. Preserve a identidade espacial, trajetória e tudo que já funciona. 1. 5 PÁSSAROS: Cada nível deve disponibilizar 5 pássaros para lançamento, organizados numa fila visual. Se gastar os 5 e sobrarem porcos = NÍVEL PERDIDO. 2. FÍSICA ESTRUTURAL (REAÇÃO EM CADEIA): Agora quero melhorar a física das construções. Se o jogador atingir a coluna base de uma casa, o teto deve perder sustentação e cair. 3. SISTEMA DE SUPORTE: Não quero que os blocos simplesmente flutuem. Estruturas apoiadas no chão permanecem. Se a peça abaixo for destruída, calcule a falta de suporte e permita que a peça acima caia (gravidade). 4. CONSTRUÇÕES COMPLEXAS: Adicione diferentes construções tipo "castelo" ou "torres altas" com pontos fracos evidentes para que o jogador tenha estratégia. 5. VARIAÇÃO DE ALTURA: Varie bastante a posição vertical do estilingue entre os níveis. Crie níveis onde o castelo esteja acima (num morro) ou abaixo (numa ravina) do estilingue. 6. PORCOS PROTEGIDOS: Coloque os porcos dentro ou abaixo da estrutura, forçando a destruição da casa. Mantenha o HTML num único arquivo. Foco total em Reação em Cadeia.
O limite técnico atingido: Tivemos os 5 pássaros e a fila funcionou graciosamente. Conseguimos variações de altura. O obstáculo derradeiro foi, incontestavelmente, a arquitetura orgânica de castelos. Sem o planejamento visual prévio e limitando-se a coordenadas no HTML, a IA gerou os blocos, mas a gravidade da cascata revelou-se pesada demais para os seus próprios cálculos internos sem um “Engine”, tornando a construção ligeiramente desajeitada, ainda que muito divertida de implodir.
👉 Deslize. 5 Pássaros, variações de altura e castelos. O desafio final superado de forma caótica mas genial.
O veredito: Baixe o jogo Birds in Space 🕹️
Considero este teste uma das mais gloriosas “falhas com sucesso” desta série. A IA do Gemini provou que consegue manipular o objeto HTML <canvas> para escutar toques, projetar parábolas matemáticas em frações de segundo e gerir o fluxo da partida.
O que ela não conseguiu fazer — e que é justíssimo — foi reinventar a roda da física sólida (onde caixas empurradas partem de forma realista num eixo de 360 graus) sem recorrer a motores especializados gratuitos, como o Matter.js. O resultado final, o nosso “Birds in Space”, tem uma física um pouco “macia” ou elástica, mas o estilingue é deliciosamente divertido e o jogo é uma base excelente para qualquer entusiasta explorar e alterar parâmetros.
BIRDS IN SPACE: O código final
Quer jogar no seu navegador e destruir os porcos espaciais ou até mexer no código de gravidade? Clique abaixo para abrir o documento gerado em laboratório.
👉 Amanda aconselha: o perigo da física manual
- O erro de exigir física a cru: Quando você quer que o Gemini crie um jogo com colisões em tempo real (como Angry Birds, Pinball ou Bilhar), NUNCA obrigue a máquina a usar apenas “HTML/JS puro sem bibliotecas” se quiser um produto profissional. A IA vai ter de inventar funções de deteção de eixos poligonais que vão falhar ou consumir a memória do seu celular num minuto.
- A solução inteligente: Se eu refizesse este prompt com o objetivo de ter um produto comercial rápido, o comando inicial seria: “Crie o clone do Angry Birds carregando exclusivamente a biblioteca leve Matter.js pela tag CDN no Header.” O Matter.js assumiria a perfeição da física da gravidade, e a IA limitar-se-ia a desenhar os pássaros e a gerir o fluxo, com resultados impecáveis.
- Sobrecarregar a “mente” da IA: Reparou que ao longo do Prompt 3 eu tive de perder tempo desenhando com caracteres de texto as casinhas para que a IA entendesse o formato de uma torre? As IAs textuais têm imensa dificuldade em entender distâncias vetoriais abstratas. Se quer edifícios bonitos num jogo como este, deve fornecer coordenadas rigorosas na sua matriz mental, ou a IA empilhará tijolos ao acaso.
Ei, antes de ir: se este mergulho na codificação lhe interessou, não pode perder o que separamos nestas outras categorias. É conhecimento de laboratório entregue de graça:
ps: obrigada por chegar até aqui, é importante para mim.
