Criar jogo Candy Crush no Gemini: o clone de Match-3 em 1 hora
Para quem joga no celular nos tempos livres, a mecânica de juntar três doces seguidos parece a coisa mais simples do mundo. Mas tente programar a lógica de uma “cascata” (quando as peças caem, formam novas combinações sozinhas, destroem blocos adjacentes e calculam combos matemáticos)… e verá o pesadelo lógico que é o desenvolvimento de jogos *Match-3*.
O custo de tentar ditar toda esta arquitetura de uma só vez a uma inteligência artificial através de um prompt apressado é receber um tabuleiro estático, cheio de emojis que não se movem, ou botões que não registam toques.
Para descobrirmos se o modelo Pro consegue organizar matrizes lógicas bidimensionais perfeitamente, lançamos o desafio: criar um jogo completo estilo Candy Crush (o “Candy Bloom”) num único arquivo HTML, em menos de 1 hora. Copie os comandos exatos que usamos, assista à evolução dos bugs e baixe a versão final estabilizada.
Gemini Pro é o LLM avançado do Google, dotado de uma janela de processamento gigante e de grande raciocínio lógico-matemático.
Neste desafio vetorial, forçamos a IA a processar verificações contínuas de coordenadas para detetar combinações em tempo real, gerir lojas e vidas, utilizando exclusivamente HTML5, CSS3 e JavaScript puro, sem importar bibliotecas gráficas ou imagens externas.
Neste guia: entenda como priorizar “Mecânicas sobre Gráficos”, copie os 4 mega prompts listados para o seu projeto e baixe o arquivo HTML do jogo funcional.
Resposta curta:
O Gemini é fenomenal a construir jogos matemáticos (*Match-3*), mas exige paciência arquitetônica e iteração. O segredo revelado neste teste é garantir primeiro o motor do jogo (a troca e eliminação de peças) e só depois, noutros prompts isolados, pedir as animações fluidas, os obstáculos de gelo/chocolate e a progressão de dezenas de fases.
Como este guia foi montado: Submetemos a IA a um teste rigoroso com progressão de dificuldade. As imagens documentadas abaixo exibem as falhas de compilação iniciais e as recuperações exatas através dos 4 comandos que utilizamos. Limpamos todos os códigos residuais dos textos para que possa simplesmente copiar e colar.
⚡ TL;DR
- Tempo de leitura: 15 min (ou pule para os prompts)
- Nível: Avançado / Lógica matricial
- O que você vai copiar: 4 mega prompts de engenharia para gerar o jogo
- Resultado: O arquivo *open-source* do Candy Bloom gerado
Índice
- As regras do desafio Match-3 em 1 hora
- Anatomia do mega prompt lógico
- Os 4 prompts mestres e o processo de debug
- O resultado: Baixe o Candy Bloom
- Amanda aconselha: a arte de não quebrar o motor
- SOS: O meu jogo desapareceu!
- FAQ
As regras do desafio Match-3 em 1 hora
Regra 1: Arquivo único (zero motores visuais)
Jogos de combinar elementos costumam contar com motores complexos para gerir a física das peças. Neste teste restrito, proibimos o Phaser ou o React. Toda a verificação matemática, loja de “moedas” e níveis tiveram de habitar dentro de um único arquivo .html estático sem ligação externa a imagens.
Regra 2: Originalidade forçada (o Candy Bloom)
Se pedíssemos “um clone de Candy Crush”, a IA recusaria gerar recursos proprietários da King. O nosso prompt forçou a construção de um ambiente totalmente original, desenhado por emojis nativos do teclado.
Regra 3: Escala modular
Foi estipulado 1 prompt base massivo para criar o conceito e até 3 atualizações. O objetivo era separar a mecânica visual das lógicas de colisão para provar o poder de iteração algorítmica.
Anatomia do mega prompt lógico
| Elemento do prompt | O que faz | O que acontece por dentro | Impacto real | Erro se ignorado |
|---|---|---|---|---|
| Cascatas recursivas | Obriga a IA a continuar a ler o tabuleiro após a primeira queda. | A função de *Match* entra num *loop* validatório contínuo. | Gera combos automáticos e multiplicadores de pontos naturais. | O jogo exige que o usuário mova peças manualmente para cada eliminação sucessiva. |
| Dano de proximidade | Obriga a IA a identificar obstáculos laterais (“Chocolate/Gelo”). | Deduz -1 de “Vida” do bloco `[X+1]` sempre que um *Match* acontece em `[X]`. | Cria desafios geográficos reais no tabuleiro. | As pedras tornam-se paredes intransponíveis inquebráveis. |
| Proibição de tabuleiros mortos | Exige pré-validação antes da jogada. | A IA embaralha secretamente o quadro (`shuffle()`) se detetar zero opções. | A partida flui e não encrava por azar geográfico. | O jogador entra no nível e não tem nenhum movimento legal possível. |
💡 O segredo dos especialistas: A IA comete deslizes gigantes ao tentar juntar o “motor do jogo” e a “loja de itens” no mesmo pedido inicial. A diretiva de “salvação” mais eficaz é proibir a IA de tocar na mecânica central sempre que for pedir a adição de um nível ou animação nova.
Os 4 prompts de construção e a guerra matricial 📌
Abaixo apresentamos os comandos massivos exatamente como os utilizamos e testamos (já limpos de formatações em HTML para que os possa copiar como texto simples). Acompanhe o nascimento, a queda e a estabilização deste clone espetacular.
👾 Série dev — O projeto Candy Bloom
📸 Prompt 01 — O mega prompt de fundação
Injetamos todos os requisitos lógicos complexos de imediato: a loja, a economia local, o menu nostálgico e as regras do tabuleiro.
DESAFIO: CRIE MEU PRÓPRIO JOGO MATCH-3 EM HTML Quero que você desenvolva um jogo completo de Match-3 casual, inspirado na experiência geral de Candy Crush, mas com identidade original chamada CANDY BLOOM. REGRAS ABSOLUTAS: Crie tudo em UM ÚNICO ARQUIVO .HTML (HTML, CSS e JavaScript puro). Sem bibliotecas ou imagens externas. Não quero pseudocódigo. Entregue o projeto completo. 1. CONCEITO: Temática de doces, frutas e cores vibrantes. Peças desenhadas com emojis (Morango, Limão, Uva, Bala, etc). 2. MECÂNICA: Tabuleiro 8x8. O jogador pode trocar peças adjacentes por toque/swipe (mobile) ou mouse (desktop). 3. COMBINAÇÕES: Detectar 3 iguais (elimina); 4 iguais (Bala que elimina linha ou coluna); 5 iguais (Bomba poderosa). Combinações de especiais devem gerar reações em cadeia. 4. CASCATAS: Peças eliminadas fazem as de cima cair, novas peças aparecem e novas combinações são verificadas automaticamente até estabilizar. 5. SISTEMAS: Crie pontuação, sistema de níveis (ex: Nível 1 - 10 combinações, Nível 2 - 5000 pontos em 25 movimentos), obstáculos progressivos (Gelo, Chocolate). 6. ECONOMIA E PROGRESSÃO: Moedas, loja de skins, sistema de 5 vidas com recarga via relógio local. Dar bônus de 2000 moedas no primeiro acesso e salvar TUDO no localStorage. 7. INTERFACE: Colorido, lúdico, com menu principal, tela de mapa, configurações de som (Web Audio API) e vibração. Responsivo. 8. REGRA DE OURO: GAMEPLAY PRIMEIRO. Garanta que o tabuleiro gera, troca, elimina, cai e pontua perfeitamente. Evite tabuleiros impossíveis (embaralhe se travar).
O que aconteceu no teste 1: Uma ironia amarga! A IA foi espetacular a criar as estruturas de *menu*. As opções de Loja, Configurações, Botões e HUD nasceram perfeitamente polidas. O erro fatal: o jogo em si (o tabuleiro) simplesmente não carregou. A lógica da matriz de jogo cedeu perante o peso de criar menus e lojas em simultâneo no primeiro *prompt*.
👉 Deslize para ver os menus perfeitos do 1º teste… e a total ausência do tabuleiro de jogo.
📸 Prompt 02 — O resgate do tabuleiro
Travamos a fundo. Proibimos novas melhorias e ordenamos que a atenção da IA recaísse única e exclusivamente na recuperação do tabuleiro matriz.
PRIORIDADE MÁXIMA: FAZER O JOGO FUNCIONAR O projeto já possui Menu, Loja e Sistemas. NÃO MEXA NESSAS PARTES. O único problema é: O JOGO NÃO APARECE. O tabuleiro Match-3 não renderiza e não é jogável. REGRA ABSOLUTA: NÃO adicione nenhuma funcionalidade nova, não melhore o visual, não mexa no mapa ou vidas. Queremos apenas FAZER O MATCH-3 APARECER E FUNCIONAR. 1. TABULEIRO: Force a renderização de um grid CSS 8x8 visível na tela de jogo com 6 emojis simples como peças. Contraste suficiente, nenhuma célula invisível. 2. MATCH-3 BÁSICO: Detecte apenas 3 peças iguais (horizontal e vertical). Sequência: JOGADOR TROCA -> VERIFICA MATCH -> SE SIM, ELIMINA -> PEÇAS CAEM -> NOVAS PEÇAS -> REPETE CASCATA. Se não houver match, desfaz a troca. 3. OBJETIVO TESTE: Limite a 20 movimentos. O jogador precisa atingir 1000 pontos. Vitória e Game Over devem funcionar. Não coloque especiais, efeitos pesados ou obstáculos agora. 4. RENDERIZAÇÃO: Se o código de renderização do grid quebrou no JS, substitua apenas o módulo de renderização por um HTML/CSS Grid dinâmico simples e confiável. Entregue o HTML corrigido.
O que aconteceu no teste 2 (o despertar): Vitória cirúrgica! A IA focou os seus esforços na matriz e subitamente o Candy Bloom ganhou vida. Os doces deslizaram para o espaço 8×8 e a eliminação de peças tornou-se perfeitamente fluida e responsiva no mouse. O único senão foi um erro residual: um comentário em HTML mal encerrado que aparecia flutuando no ecrã como texto morto.
👉 Deslize para ver a recuperação do tabuleiro jogável e o comentário de código vazado.
📸 Prompt 03 — A escala de níveis
Já com o motor afinado, fomos remover o comentário de ecrã e injetar parâmetros para a construção de 30 fases progressivas.
CANDY BLOOM — CORREÇÃO + NOVAS FASES
O jogo Match-3 AGORA ESTÁ FUNCIONANDO.
REGRA PRINCIPAL: NÃO ALTERE O MOTOR DO MATCH-3. Não altere a queda das peças ou a física.
1. CORRIGIR TEXTO VAZADO: Há um comentário HTML/texto solto aparecendo visualmente na tela de jogo. Procure por tags fechadas incorretamente no body e remova-o. O tabuleiro deve preencher o espaço limpo.
2. ADICIONAR 30 FASES: Usando a lógica atual, crie uma array de configuração de 30 níveis (Ex: const levels = [{id:1, difficulty: "easy", targetScore: 1000, moves: 25}]).
3. PROGRESSÃO: Divida em FÁCIL (1-10: metas fáceis, muitos movimentos), MÉDIO (11-20: metas maiores, menos movimentos) e DIFÍCIL (21-30).
4. MAPA DE FASES: O mapa visual deve mostrar os níveis em blocos (1-10 Fácil, 11-20 Médio...). Níveis futuros aparecem com cadeado e são liberados ao concluir o anterior, gerando as tradicionais 3 estrelas de pontuação.
Entregue o arquivo HTML completo com as 30 fases acopladas à base funcional.O que aconteceu no teste 3 (escalabilidade): Absolutamente estável. A IA limpou os erros visuais na sintaxe, o mapa de progressão apareceu lindamente e podíamos efetivamente fechar o separador e o nosso avanço seria gravado. A fundação de código da IA suportou as 30 fases. Faltava a injeção do caos: os obstáculos especiais.
👉 Deslize para ver o escalonamento das fases no mapa. Clique para ampliar.
📸 Prompt 04 — Efeitos, obstáculos e contra-relógio
O teste final à capacidade do motor. Exigimos o sistema de danos laterais (“quebrar pedras de gelo”).
CANDY BLOOM — EVOLUÇÃO DO GAMEPLAY
NÃO REFAÇA O MOTOR DO MATCH-3. As novas funcionalidades devem ser adicionadas em cima da estrutura existente. Se algo quebrar, priorize corrigir a mecânica base.
1. ANIMAÇÕES SUAVES: A eliminação de peças deve ter um efeito "POP -> BRILHO -> DESAPARECE" (150ms). A queda das peças deve usar easing em vez de teletransporte. As cascatas devem mostrar notificações "COMBO x2".
2. OBSTÁCULO 1 - CHOCOLATE: Ocupa 1 célula e trava a peça. Precisa de Match-3 AO LADO dele para perder "vida" (tem 2 pontos de vida).
3. OBSTÁCULO 2 - GELO: Prende uma peça visível, impedindo a sua troca. Um Match-3 adjacente quebra o gelo e liberta a peça. As Fases 1-5 não têm obstáculos, as Fases 6-15 introduzem-nos aos poucos.
4. FASES CONTRA O TEMPO: Adicione Fases Especiais (Ex: Fase 12 e 17) onde o limite não são "movimentos", mas um relógio regressivo de 60 segundos. O relógio pausa se abrir o menu. Crie no HUD um contador claro do Objetivo ("Destrua 10 chocolates").
Entregue o arquivo HTML completo e finalizado com a gameplay evoluída.📊 O resultado final (a glória do casual): A animação gráfica e o cálculo colateral (*splash damage* ao lado dos obstáculos de gelo) entraram de forma impecável no jogo. Os doces deslizam com elegância em quedas gravitacionais, as pontuações acumulam *combos*, e o ecrã regressivo de tempo adiciona uma camada de tensão fantástica. O Gemini produziu, de facto, o seu próprio motor *Match-3* robusto a partir do zero.
👉 Deslize para ver a elegância dos obstáculos em ação. Clique para ver em tela cheia.
O resultado: Baixe o Candy Bloom HTML 🕹️
Deixamos aqui o repositório da obra. O código fonte, livre de imagens pesadas (renderizando integralmente via CSS e Canvas), prova que uma lógica verbal estrita pode orquestrar videojogos independentes robustos de forma autodescritiva.
CANDY BLOOM: A sua versão arcade
Quer explorar como o Gemini programou a destruição em cadeia dos blocos de gelo na vizinhança geométrica da matriz 8×8? A aplicação inteira está aqui e é sua.
👉 Amanda aconselha: a arte de não quebrar o motor
- Se quer construir minigames comerciais via IA: O projeto “Candy Bloom” demonstrou que o segredo do Match-3 é a gestão de promessas. Quando pedir a queda em cascata à IA, proíba o uso excessivo de
setTimeoutem cadeia solta e exija uma lógica de revalidação sequencial (“quando as de cima caírem, validar se novas 3 peças se encontram e só depois interromper a animação”). - A geometria de colisão vetorial: Ao pedir obstáculos passivos como o “Bloco de Gelo”, enfatize perante o LLM a diferença clara entre “Células Bloqueadas Permanentes” e “Peças Congeladas que não podem ser movidas mas contam como alvos”. Muitas vezes a IA confunde a mecânica e oblitera o doce que está preso no gelo antes de se efetuar a combinação, bloqueando o tabuleiro.
- O perigo dos pedidos duplos: O Teste 1 não gerou o jogo devido à gulodice de informações. Evite exigir num primeiro *prompt* que o jogo possua menus de personalização de volume, de ecrã gigante de compra de Skins e de tabelas de lideranças, quando o tabuleiro nem sabe ainda como destruir três morangos alinhados. O motor vem sempre em primeiro lugar.
🚨 SOS: O meu ecrã ficou limpo sem jogo algum!
- Causa: No decorrer das sucessivas atualizações para as 30 Fases, a inteligência geradora muitas vezes corta e abandona os fragmentos do laço temporal da função de abrir a `div` nativa (um simples erro de *array* não terminada ou falha na invocação da classe principal
initGame()). - Correção prática: Tal como exibido na iteração de Resgate do Tabuleiro (Prompt 02), limite as suas queixas a um facto cru. “A arquitetura parece excelente, mas a área de renderização quebrou e ficou invisível; elimine as novidades das camadas inferiores e injete o tabuleiro nativo novamente debaixo do CSS do Body.”
- Resultado: A resposta devolve o âmago estrutural isolado do lixo semântico acidental e a janela recomeça a brilhar.
FAQ: dúvidas reais a serem respondidas 🔍
O jogo registra o meu avanço de forma permanente?
Indiscutivelmente. Impusemos ao modelo a retenção contínua da progressão na memória passiva nativa do seu browser (`localStorage`). Se bater a fase 15 e fechar a aba de separador, na sua reabertura a sua conquista das 3 estrelas persistirá incólume.
Qual foi o erro sintático inicial em produzir o ecrã vazio?
O famigerado esgotamento de *Tokens* nas IAs LLMs. Requisitamos mecânicas astronômicas de personalizações comerciais; e consequentemente o motor limitou a sua “memória” de curto prazo em elaborar os Menus da loja e excluiu o motor do Match-3 por exaustão limite na compilação nativa.
É viável usar SVG e gráficos 3D estonteantes no clone?
Plenamente. Baixe o código fonte finalizado puro gerado e troque, via blocos de notas, os descritores de *emojis* por caminhos fotográficos reais ou exportações artísticas suas de PNG com alfa transparente e obterá grafismos assombrosos.
Esta IA desenvolve o Candy Bloom na arquitetura WebGL pesada?
Evitamos inteligentemente a escuridão abissal de consumos do Canvas WebGL 3D num *prompt* 2D. Direcionamos o Gemini para orquestrar o ecrã numa malha naturalística estrita de HTML/CSS de 64 *slots*, rentabilizando o processamento para dispositivos móveis nativos mais rudimentares e humildes.
Conclusão: As engrenagens ocultas da diversão nativa 🙌
O monumental desafio do “Candy Bloom” demonstrou peremptoriamente que os cérebros neurais nativos como o Gemini alcançaram um cume altíssimo em algoritmos bidimensionais lúdicos. O LLM conservou a matriz algorítmica constante [X][Y] e perseguiu a colisão e as combinações com um encadeamento causal formidável.
Qual foi a rasteira mais dolorosa da jornada? A nossa vontade impulsiva de englobar *designers* plásticos e envernizamentos *Cyber* demasiado prematuros no motor estático. O modelo distraiu-se a edificar os balcões e telhados sem colocar sequer tijolos ou cabos de cimento.
O princípio que prevalece para a engenharia modular através de *prompts*: force o desenho das canalizações primárias até que verta água cristalina, antes de planear edificar murais renascentistas nas abóbodas. Se a física estiver correta e firme, toda a expansão prosperará imaculada sob a base do código!
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 a experiência instigou as suas habilidades arquitetônicas para depurar matrizes HTML através de IA, baixe o repositório anexado, consiga chegar intocado até ao *Level* 30 e exalte-se nos *stories*, rotulando corajosamente o nosso Instagram @mktamanda. Todo o pódio ser-lhe-á honrosamente consagrado! :))
ps: obgda por chegar até aqui, é importante para mim.
