Criei um jogo de sobrevivência na selva onde você coopera com um agente de IA

Este é meu primeiro post aqui. Eu achei que deveria começar em algum lugar, e um projeto de hackathon é uma boa razão para isso.

O contexto

Eu tenho escrito software empresarial por cerca de três anos. Painéis, APIs, pipelines de dados. Isso paga as contas, mas parou de ser divertido há um tempo. Quando vi o WebMCP Challenge, decidi construir algo que eu realmente gostaria de jogar quando estivesse pronto.

Este também é meu primeiro jogo. Nunca mexi com loops de jogo, renderização de sprites ou animação em canvas antes desta semana.

O que eu construí

Erwin's Survival é um jogo de navegador onde um humano e um agente de IA jogam juntos. O humano explora uma selva, coleta recursos e constrói uma base. A IA lê o estado do jogo através das ferramentas do WebMCP e coloca defesas antes de cada ataque noturno.

O jogo tem três fases simples que se repetem por três dias:

• Manhã: Você se move com WASD, corta a selva, coleta madeira/pedra/corda/ervas. Você constrói uma base no local da queda.
• Crepúsculo: A IA assume. Ela lê a ameaça (quantos slimes, de quais lados) e chama as ferramentas do WebMCP para colocar armadilhas de espinhos, barricadas e fogueiras ao redor da base.
• Noite: Slimes se arrastam por três caminhos. Você mira com as teclas de seta e atira com a barra de espaço. As defesas que a IA colocou pegam o que você perde.

Sobreviva 3 noites e o resgate chega.

Como a parte da IA funciona

O jogo usa WebMCP, que permite que um site exponha ferramentas que um agente de IA externo pode descobrir e chamar. O jogo registra 5 ferramentas. Quatro delas existem apenas durante a fase do crepúsculo:

• get_game_state — sempre disponível, retorna saúde/inventário/posição
• get_planning_context — apenas no crepúsculo, retorna inimigos esperados e opções de defesa
• place_spike_trap({side}) — custa 2 madeira + 1 pedra
• build_barricade({side}) — custa 3 madeira
• set_fire({side}) — custa 1 madeira + 1 ervas

Quando a noite chega, as ferramentas de defesa são desregistradas. O trabalho da IA está feito até o próximo crepúsculo.

Eu testei com a flag WebMCP do Chrome e a extensão Model Context Tool Inspector de François Beaufort. Você digita algo como "planejar a defesa" e a IA chama as ferramentas uma a uma. Cada chamada atualiza o mapa do jogo em tempo real.

A coisa que eu errei primeiro

A primeira versão tinha a IA fazendo tudo: coletar água, comer frutas, cortar madeira, criar itens. Tudo através das ferramentas do WebMCP. Funcionou, mas era chato. Digitar "coletar água" para uma IA quando pressionar R faz a mesma coisa é apenas fricção.

No dia 2, eu descartei isso e dei à IA apenas a fase de planejamento. Essa foi a decisão certa. O teclado lida com as ações. A IA lida com a estratégia. Ambas as partes melhoraram assim que parei de forçar tudo por um único canal.

Tecnologia

• Vanilla JS + HTML Canvas + Vite
• Sem framework. Cerca de 1500 linhas de JS em 9 módulos
• Arte em pixel de uma mistura de pacotes de ativos gratuitos e pagos (total de $3,20)
• Implantado no Vercel como um site estático

Créditos dos ativos

• Arco e flechas: sweeetpotatoo
• Terreno, árvores, fogueiras, barricadas: ToffeeCraft
• Inimigos slime vermelhos: Free Game Assets
• Sprite do personagem Erwin e tiles de grama: nogardlab

Experimente / veja o código

• Jogar: jungle-base.vercel.app
• Fonte: github.com/raf-xtgt/jungle-base
• Vídeo de demonstração: youtube.com/watch?v=TYEkmSEia8U

Se você quiser testar as ferramentas do WebMCP, precisa do Chrome 146+ com a flag chrome://flags/#enable-webmcp-testing habilitada, além da extensão Model Context Tool Inspector. Ou apenas adicione ?debug=true à URL para botões manuais.

Três dias, um jogo, muito recorte de sprites. Foi divertido. Posso fazer mais desses.