Como criar um jogo da memória com IA no navegador
Como criar um jogo da memória com IA no navegador
Descreva a grade de cartas viradas para baixo, a regra de virar duas por vez, o que acontece quando o par bate e o que acontece quando não bate. O Zugo gera o jogo em 2D para navegador, testa o projeto antes de entregar e publica em seu-slug.zugo.run. A construção custa 6 créditos.
É o gênero mais simples de descrever da lista de jogos, e mesmo assim tem dois detalhes que separam um protótipo de um jogo agradável: o tempo que a carta errada fica visível e o bloqueio do clique durante a animação.
Como o jogo da memória funciona por dentro?
Uma grade com um número par de cartas, cada figura repetida duas vezes, posições sorteadas a cada partida. O jogador vira uma carta, vira outra, e o jogo compara. Par igual fica aberto para sempre. Par diferente volta a ficar de costas depois de um instante.
A comparação em si é trivial. O que dá trabalho é o estado intermediário, aquele meio segundo em que duas cartas erradas estão viradas e o jogo ainda não devolveu as duas para a posição original.
Se nada bloquear a tela nesse intervalo, o jogador consegue clicar numa terceira carta e o jogo entra num estado que ninguém previu: três cartas abertas, comparação errada, par fantasma. É o bug número um do gênero e ele aparece em praticamente toda primeira versão que não pede o bloqueio explicitamente.
O que sai da primeira construção?
Uma grade que se embaralha ao carregar, cartas que viram com animação, detecção de par, contador de jogadas e uma mensagem de fim quando todos os pares foram encontrados. Isso já é jogável e já dá para mandar o link para alguém.
O que costuma faltar é o botão de recomeçar sem recarregar a página. Parece bobagem, mas é o que a pessoa procura no segundo em que termina a partida, e não achar quebra o ritmo.
Também falta, quase sempre, o comportamento em tela de celular. A grade sai com o tamanho pensado para monitor e no telefone as cartas ficam minúsculas ou a última fileira some abaixo da dobra. Vale abrir no celular antes de decidir qualquer outra edição.
Quantas cartas colocar na grade?
Depende de quem vai jogar, e essa é uma decisão de conteúdo que a ferramenta não toma por você. Uma grade grande demais para criança pequena vira frustração, e uma pequena demais para adulto acaba em trinta segundos.
| Público | Grade | Pares | Sensação |
|---|---|---|---|
| Criança até seis anos | 4 por 3 | seis | Vence quase sempre, e isso é o objetivo |
| Criança maior e família | 4 por 4 | oito | Partida curta, boa para repetir |
| Adulto casual | 6 por 4 | doze | Exige atenção real sem cansar |
| Quem quer desafio | 6 por 6 | dezoito | Partida longa, precisa de placar |
A grade não precisa ser fixa. Peça três botões de dificuldade no primeiro prompt e você ganha os três tamanhos de uma vez, sem gastar edição depois para cada um.
Um detalhe que ajuda muito em sala de aula: peça que o número de colunas se ajuste à largura da tela. Assim o mesmo link funciona no projetor e no celular do aluno.
Por que as cartas viram rápido demais?
Porque o tempo padrão que sai de um prompt sem número é curto: em torno de meio segundo, o suficiente para o código funcionar e insuficiente para a memória humana registrar duas figuras novas.
Peça o valor explicitamente. Algo entre um segundo e um segundo e meio funciona para adulto, e perto de dois segundos funciona para criança. Escrever o número no prompt evita duas ou três edições de tentativa e erro.
No mesmo pedido, inclua o bloqueio: enquanto duas cartas erradas estiverem viradas, nenhum clique é aceito. Essa frase resolve o bug das três cartas abertas e custa a mesma edição que o ajuste de tempo, então não faz sentido separar os dois.
O terceiro ajuste é o feedback do acerto. Um par correto merece algo além de ficar parado: uma leve pulsação, uma cor de borda, um som curto. Sem isso, acertar e errar parecem a mesma coisa. Os limites gerais de um jogo gerado por texto estão em a IA consegue fazer um jogo?.
Dá para usar minhas próprias imagens nas cartas?
Dá, e é o que transforma o jogo genérico em material útil. As figuras podem ser fotos de produtos, bandeiras, obras de arte, palavras em outro idioma ou rostos da equipe da empresa.
Vale pensar no par como um conceito, não como duas cópias iguais. Um jogo da memória que combina a foto do animal com o nome escrito ensina alguma coisa, enquanto o que combina duas imagens idênticas só exercita memória visual.
Só tome cuidado com o peso: dezoito fotos grandes deixam o carregamento lento no celular em rede móvel, e essa lentidão aparece justo no primeiro contato. O passo a passo de subir arquivos está em dá para usar minhas próprias imagens?.
Como transformar isso em desafio de verdade?
Com três camadas que se pedem separadamente, na ordem em que a dificuldade aparece.
A primeira é o cronômetro. Contar o tempo muda completamente o comportamento do jogador: ele deixa de virar cartas ao acaso e começa a memorizar posição. Peça também o registro do melhor tempo por dificuldade.
A segunda é o limite de jogadas. Em vez de tempo, você dá um orçamento de tentativas, e o jogo acaba quando ele se esgota. Combina melhor com criança, porque não gera a pressão do relógio correndo.
A terceira é o modo para dois jogadores no mesmo aparelho: cada um vira duas cartas, quem acerta joga de novo, ganha quem fizer mais pares. É uma edição sozinha e costuma ser a mais divertida do projeto, especialmente em evento presencial com um tablet na mesa.
Quanto custa em créditos deixar o jogo pronto?
| Ação | Créditos |
|---|---|
| Construir o jogo | 6 |
| Uma edição | 3 |
| Construção no modo Hi-Fi | 12 |
| Edição no modo Hi-Fi | 6 |
O jogo da memória é dos mais baratos de terminar porque a lista de correções é curta. Uma construção mais quatro edições (tempo e bloqueio, layout de celular, imagens próprias, cronômetro) já entrega algo que você mostra sem pedir desculpas. Dá dezoito créditos.
O Pro custa $25 por mês com 200 créditos, cerca de 33 construções ou 66 edições. O Business custa $99 por mês com 800 créditos. O Free tem 5 créditos, o que não fecha nem uma construção, então ele existe para você ver a ferramenta funcionando e não para entregar um projeto.
O que esse formato não entrega?
O jogo é 2D e vive no navegador. Isso é ótimo para mandar um link no grupo da escola ou colocar um QR code no estande da feira, e é ruim se o seu plano era publicar na loja de aplicativos com notificação e compra dentro do app.
Ranking compartilhado entre pessoas diferentes não sai de um prompt sozinho: precisa de conta de usuário e banco de dados, ou seja, conectar o Supabase. Enquanto isso não existir, o melhor tempo fica salvo apenas no navegador de quem jogou.
E vale dizer o óbvio: escolher as figuras, escrever os textos e decidir o que o jogo ensina continua sendo trabalho humano. A ferramenta monta a mecânica, não o conteúdo. Para um produto complexo, o Zugo não substitui um time de desenvolvimento. Se o seu objetivo é ensinar algo, um jogo de perguntas e respostas costuma render mais do que a memória pura.
O que colocar no primeiro prompt?
Cinco frases: tamanho da grade (ou os três níveis de dificuldade), o que cada carta mostra, quanto tempo o par errado fica visível, o bloqueio de clique durante esse intervalo e o que aparece quando todos os pares saem.
Assim que abrir, jogue uma partida inteira no celular. Se as cartas couberem na tela, o tempo estiver confortável e o clique estiver bloqueado na hora certa, o resto é enfeite. Comece em Zugo.