Criar Tamagotchi no Gemini: um pet virtual em HTML puro
Quem viveu os anos 90 e 2000 sabe bem a febre que foi o Tamagotchi. Mais tarde, essa mesma febre voltou sob a forma do famoso “Pou”. A ideia é simples mas extremamente viciante: cuidar de um bichinho virtual, alimentá-lo, dar-lhe banho e não o deixar morrer à fome.
No entanto, a nível de código, manter uma criatura viva quando o jogador não está com a página aberta não é tarefa fácil. O sistema precisa calcular o tempo que passou no relógio real, abater pontos de fome e energia retroativamente e manter as moedas seguras.
Para testarmos a genialidade matemática e relacional do modelo Pro, desenhamos mais um desafio extremo: recriar a essência de um “Tamagotchi/Pou” num único arquivo HTML puro, em apenas 3 prompts de evolução. Copie os comandos exatos que usamos e perceba como forçamos a IA a criar ciclos de vida virtuais sem usar um único servidor de base de dados.
Gemini Pro é o LLM avançado do Google, com uma gigantesca capacidade para orquestrar *timers* em JavaScript e gravar pacotes de dados no seu navegador.
Neste desafio de *Software Architecture*, a IA não só teve de programar minijogos com colisões de física, como também desenhar todo o *design* da interface do “brinquedo”, usando exclusivamente HTML5, CSS3 e Vanilla JavaScript.
Neste guia: a dissecação de ciclos de tempo (Time-Pass) na IA, os 3 comandos massivos da nossa experiência e o código open-source para jogar o seu próprio pet virtual no browser.
Resposta curta:
O Gemini é perfeitamente capaz de recriar um Pou/Tamagotchi num só arquivo HTML. O segredo está em usar o objeto nativo `Date.now()` para calcular o tempo *offline* (com o ecrã fechado) e o `localStorage` para proteger a vida do bichinho. No entanto, pedir físicas e minijogos muito avançados no mesmo arquivo pode causar falhas visuais em elementos gráficos delicados como “chapéus” ou botões na carcaça do brinquedo.
Como este guia foi montado: Toda a documentação abaixo reflete um teste real sem edições milagrosas. Demonstramos as vitórias de código maravilhosas, mas não escondemos os “pequenos bugs visuais” quando exigimos demasiado das capacidades de renderização do Canvas.
⚡ TL;DR
- Tempo: 8 min (ou pule para os prompts)
- Nível: Intermediário / Lógica relacional
- O que você vai copiar: 3 mega prompts de lógica temporal offline
- Resultado: O arquivo de um Pet Virtual jogável com minijogos
Índice
- As regras do desafio de pet virtual em HTML
- Anatomia do mega prompt biológico
- Os 3 prompts mestres e o nascimento da criatura
- O resultado: Baixe o Tamagotchi HTML
- Amanda aconselha: a armadilha do Game Loop Múltiplo
- SOS: O ecrã congelou a meio do salto!
- FAQ
As regras do desafio de pet virtual em HTML
Regra 1: Arquivo único (zero bases de dados)
O desafio estrutural aqui era tramado: um jogo onde guarda moedas e o animal cresce precisa normalmente de uma ligação de internet para guardar o seu estado. Exigimos à IA que criasse todo o sistema de “Save Game” recorrendo unicamente à cache da página no formato .html independente.
Regra 2: Cálculo de abandono (*Time-Pass*)
Um Tamagotchi morre de fome se for ignorado. Em vez de criar um boneco estático, obrigamos a IA a programar uma rotina matemática para que, sempre que recarregarmos a página, o JavaScript calcule quantas horas se passaram e abata essas barras de energia proporcionalmente.
Regra 3: Injeção de minijogos (módulos)
Num único arquivo, pedir uma “plataforma de saltos” como minijogo e a rotina principal de banho na mesma interface gera facilmente um colapso. Esta regra estipulou que os minijogos tivessem lógicas de física restritas, evitando “contaminar” a página mãe.
Anatomia do mega prompt biológico
| Elemento do prompt | O que faz | O que acontece por dentro | Impacto real | Erro se ignorado |
|---|---|---|---|---|
| Proibição de imagens externas | Obriga o Tamagotchi a ser desenhado no próprio código. | A IA escreve vetores SVG e pinta CSS nativo. | O jogo funciona mesmo se estiver num avião sem internet. | O servidor externo falha e o seu animal de estimação desaparece do ecrã. |
| Prevenção de aniquilação (Time) | Evita punir o usuário severamente pela ausência de dias. | Cria um limite inferior (math.max) na barra de fome/energia. | Se não jogar durante 1 mês, o bicho está doente, mas não “eliminado” do código. | Sempre que tenta regressar no dia seguinte, a IA formatou o jogo (Morte súbita). |
| Clear Listeners (minijogos) | Exige cancelar as ações quando se sai da secção de “Brincar”. | Usa a função cancelAnimationFrame() em JavaScript. | O botão do mouse regressa ao normal na área de alimentação. | O clique para dar comida no menu faz a mascote tentar pular porque o jogo “fantasma” ainda corre. |
💡 O segredo dos especialistas: A física de minijogos num arquivo HTML deve ser tratada como um departamento isolado. Num prompt profissional, diga expressamente: “Pausa o motor e o loop do Tamagotchi quando entrar no Jogo de Saltos”.
Os 3 prompts para construir o brinquedo clássico 📌
Abaixo apresentamos os comandos massivos exatamente como os utilizamos (com a limpeza exata dos fragmentos de formatação para que a cópia seja imediata). Acompanhe a transformação visual fantástica desde a carcaça eletrônica base até à integração mecânica de *platformers*.
👾 Série dev — O projeto Tamagotchi
📸 Prompt 01 — A fundação do brinquedo biológico
Injetamos todos os requisitos básicos: fome, sono, higiene, localStorage para gravar o progresso e o cálculo matemático de tempo off-line.
CRIE UM TAMAGOTCHI VIRTUAL COMPLETO EM UM ÚNICO HTML. O desafio: Recriar a experiência de um Tamagotchi/Pou usando apenas um arquivo HTML, CSS e JS nativos. REGRAS: Zero bibliotecas externas. Sem servidor ou DB. Sem usar imagens de fora (tudo desenhado por CSS/SVG nativo). O bicho deve ter barrinhas: Fome, Felicidade, Higiene, Energia. NECESSIDADES COM O TEMPO: Use Date.now() e o relógio real para causar dano passivo nas necessidades mesmo quando eu estiver com o HTML fechado (salvando tudo via localStorage). Se a fome baixar, exiba estado "Doente" sem punir com morte imediata. Adicione Comida, Banho e Dormir. INTERFACE: Desenhe um brinquedo retrô no CSS e ecrã monocromático ou pixelizado agradável. MOEDAS E LOJINHA: Ganha moedas brincando e interagindo, para comprar comidas e Acessórios simples (chapéus) que apareçam no bicho. O projeto deve funcionar ao clicar duplo no ficheiro .html e ter reatividade imediata na Mobile.
O que aconteceu no teste 1 (sucesso inicial): Logo de cara tivemos um resultado espetacular! O jogo ficou 100% funcional. Lembrou-nos mais um “Pou” com estética web do que o *beeper* de plástico, mas cumpria tudo: animação, loja de chapéus e cálculo de necessidades a funcionar na perfeição! A falha: Os minijogos da opção “Brincar” eram tão fracos que mal mereciam o nome. Tínhamos de injetar física arcade a sério!
👉 Deslize para ver o sistema da mascote a nascer com interface gráfica e loja.
📸 Prompt 02 — Injeção de “arcade” sem quebrar a base
Exigimos especificamente a adição de “Mecânicas Flappy Bird/Pou Jump”, isoladas da lógica do sono e fome.
ATUALIZAÇÃO INCREMENTAL APENAS NA ÁREA "BRINCAR" O jogo já está 100% funcional. NÃO REESCREVA A FÍSICA E A BASE. Não mexa no inventário, loja e localStorage. Substitua os minijogos atuais por: 1. SUBIDA DE PLATAFORMAS: A criatura pula de pedra em pedra e sobe infinitamente. A câmara acompanha-a. Grave os recordes (score). A cada falha, gera moedas pelo esforço. Botões de toque Lado Esquerdo/Direito para Mobile. 2. JOGO DA BOLA: A bola cai na tela e o jogador prime espaço (ou Tocar na Ecrã) no "timing" exato para fazer a criatura bater na bola e manter no ar o maior tempo possível (combo multiplier). 3. ISOLAMENTO: Ao sair da área "Brincar", todos os requestAnimationFrames DEVEM ser encerrados e o jogador devolvido ao quarto com a energia atualizada, sem *bugs* ocultos a correrem no background.
O que aconteceu no teste 2 (o salto arcade): Ficou muitíssimo interessante! Os minijogos integraram-se dentro da mesma página (modal), criando a verdadeira sensação de ter o celular nos dedos. O jogo de pulos é difícil mas recompensa monetariamente para comprar *pizza*! O detalhe em falta: No computador funcionava brilhantemente, mas em celular a reatividade era estranha porque o menu pedia para clicar na “seta”, que era minúscula. Faltavam também alguns “mimos” cosméticos (como fundos celestes e limpezas táteis na higiene).
👉 Deslize para ver as mecânicas Arcade a funcionarem e renderizarem moedas após falhar.
📸 Prompt 03 — Cirurgia de estética e usabilidade mobile
Último aviso severo: não destruir o motor, apenas afinar os botões de ecrã para celulares reais e refazer a mecânica do Banho.
ATUALIZAÇÃO INCREMENTAL SOMENTE NO SISTEMA DE MINIJOGOS A base está impecável. NÃO mexa no ciclo de fome nem nos saves. Foco em UX de celular: 1. BOTÕES GIGANTES NOS MINIJOGOS: Adicione botões [ ESQUERDA ] e [ DIREITA ] físicos nativos no rodapé dos minijogos quando no ecrã. O movimento só pára quando o jogador levanta o dedo. 2. CÉU NO JOGO DOS PULOS: Substitua o fundo branco do jogo das plataformas por um Parallax simples com nuvens de CSS. Se a mascote sobe, as nuvens devem descer gerando profundidade. 3. MINIJOGO DA LIMPEZA TÁCTIL: Quando carrego no ícone da Esponja (Higiene), a criatura aparece cheia de manchas de lama. O jogador passa o rato (ou arrasta o dedo) nas manchas e elas diluem-se e apagam com um efeito satisfatório e, no final da purga completa, ela volta limpa para o menu central e as barras sobem. Garantir os clearListeners nos Pointer Events (Mobile Touch).
📊 O resultado final (e os seus defeitos suportáveis): A lógica comportou-se maravilhosamente! Tivemos “bolhas” para lavar o animal de estimação ao esfregar o dedo no ecrã e o fundo celeste deu uma vida dramática ao jogo dos saltos. O que faltou afinar: Quando adicionamos as nuvens, alguns acessórios (chapéus comprados na loja) saltaram ligeiramente fora das coordenadas da cabeça do boneco, e os “Botões do Celular” acabaram a sobrepor-se ao rodapé inicial. Tudo pequenos desajustes de *Z-Index* ou CSS que são naturais num código enorme, mas sem desvirtuar o sucesso estrondoso!
👉 Deslize para ver as injeções finais de mecânica: a esponja de limpeza tátil e o céu vetorial.
O resultado: Baixe o Tamagotchi HTML 🕹️
Isto é o apogeu da lógica combinada: num único bloco de notas, há uma componente física ativa (saltos), detetores passivos de relógio (bateria a esgotar enquanto estuda) e um gestor monetário ativo sem necessidade de base de dados externa.
TAMAGOTCHI VIRTUAL: Brinquedo app
Quer ter um Pou de bolso na aba do navegador? Baixe o arquivo! Experimente fechar o computador à noite e espreitar de manhã: os cálculos continuam e o boneco acorda com fome.
👉 Amanda aconselha: a armadilha do Game Loop Múltiplo
- O perigo dos módulos (minijogos dentro de um jogo mestre): A armadilha de recriar um Pou/Tamagotchi está na separação de lógicas. A sala principal tem as animações orgânicas de respiro. Ao transitar para o ecrã do Jogo da Plataforma, a rotina de vida *precisa de ser adormecida*. O nosso *prompt* isolou estes acontecimentos dizendo “Interrompa o loop de animação e remova os *Listeners*”. Se omitir isto na sua tentativa com o Gemini, as moedas ganhas no jogo de saltos serão multiplicadas e injetadas repetidamente ao fechar o *popup*.
- Sobre acessórios virtuais (chapéus SVG): O pequeno *bug* de chapéus voadores resultou da inserção do céu! Quando solicitamos à IA que inserisse nuvens (backgrounds paralelos CSS), as âncoras geométricas da cabeça do boneco ficaram sobrepostas. Num projeto rigoroso, em *prompts* seguintes solicite “Reverifique as *Fixed Margins* absolutas dos vetores visuais sobre a carcaça central antes de continuar”.
🚨 SOS: O ecrã congelou a meio do salto no celular!
- Causa: Ao integrar no último comando a lógica táctil simultânea dos “Botões Grandes”, o interpretador
touchstartsobrecarregou a rotina Canvas do ambiente do céu a deslizar por defeitos de propagação do Browser. - Correção prática: Devolva o código à IA mencionando o exato momento do colapso: “A inclusão das setas bloqueou o requestAnimationFrame principal durante o toque seguro. Utilize o parâmetro `passive: false` para permitir o `preventDefault()` nos botões móveis, impedindo a injeção acidental do deslize de sistema operativo (Pinch/Zoom).”
- Resultado: A fluidez imaculada do jogo de salto regressará instantaneamente nos celulares.
FAQ: dúvidas reais a serem respondidas 🔍
O bicho pode morrer se eu não abrir o arquivo em semanas?
Na nossa arquitetura estrita do *Prompt Base 1*, dissemos explicitamente à IA: “Evite destruir completamente os atributos durante uma ausência longa. Não transforme a experiência em punição.” Logo, ele ficará no limite absoluto da inanição sem atingir o extermínio fatal permanente.
O meu celular reiniciou a cache, perdi o Pou virtual?
Infelizmente, sim. Toda a magia deste milagre tecnológico nativo de arquivo único utiliza as bases vitais da arquitetura de cache do Safari ou Chrome (o localStorage). Uma purga limpa esses fragmentos, exigindo no seu negócio verdadeiro uma solução *cloud* ou exportável.
Consigo personalizar os nomes e imagens das refeições?
Certamente. Quando baixar o HTML, abra o arquivo com o Bloco de Notas ou o VS Code e encontre o *Array* das Comidas. Troque facilmente os emojis das fatias de pizza por emojis da sua preferência, assim como as percentagens de energia que fornecem.
Foi fácil forçar o jogo a correr numa lógica “Mobile First”?
Pelo contrário, é o pior inimigo dos testes com IA num único campo ecrã. O comando “Proibição de rolagem horizontal (*overflow-x*)” é mandatório para não frustrar o usuário com esmagamento geométrico do brinquedo.
Conclusão: O poder absoluto do ciclo passivo 🙌
O desafio estrutural do Tamagotchi espelha um salto civilizacional na programação assistida por grandes modelos de linguagem. O Gemini não se resumiu a pintar formas poligonais animadas ou a reagir instantaneamente à compressão de teclas. O algoritmo foi instruído a manter e a calcular danos retroativos à sua ausência; e obedeceu com primor à matemática proposta num parágrafo de texto.
Mais do que desenhar jogos, esta capacidade do LLM serve para testar protótipos de plataformas utilitárias pesadas (Apps de Saúde, Rotinas Agrícolas, Cálculos Temporais) e validá-las em minutos na arena rudimentar do HTML, de imediato nas suas mãos.
Reescreva estes *prompts* estéticos, insira personagens orgânicos e crie um universo particular vivo onde dominar os bastidores é um milagre acessível!
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:
Abra a sua aplicação virtual e personalize o seu bicho único. Mostre o seu “Pou” particular nos *stories* e marque a nossa página @mktamanda. Estarei cá ansiosa para celebrar a sua versão da infância resgatada! :))
ps: obgda por chegar até aqui, é importante para mim.
