DEV Community

Mohammad Rafaquat Alam
Mohammad Rafaquat Alam

Posted on

I built a jungle survival browser game where you co-op with an AI agent

#webmcp #vite #gamedev #opensource

This is my first post here. I figured I should start somewhere, and a hackathon project is as good a reason as any.

The background

I have been writing business software for about three years. Dashboards, APIs, data pipelines. It pays the bills but it stopped being fun a while ago. When I saw the WebMCP Challenge hackathon, I decided to build something I would actually want to play when it was done.

This is also my first game. Never touched game loops, sprite rendering, or canvas animation before this week.

What I built

Erwin's Survival is a browser game where a human and an AI agent play together. The human explores a jungle, collects resources, and builds a base. The AI reads the game state through WebMCP tools and places defenses before each night attack.

The game has three simple phases that repeat for three days:

  • Morning: You move with WASD, cut through jungle, collect wood/stone/rope/herbs. You build a base at the crash site.
  • Dusk: The AI takes over. It reads the threat (how many slimes, from which sides) and calls WebMCP tools to place spike traps, barricades, and fires around the base.
  • Night: Slimes crawl in along three roads. You aim with arrow keys and shoot with spacebar. The defenses the AI placed catch what you miss.

Survive 3 nights and rescue arrives.

Dusk phase: the AI places defenses while the player watches

How the AI part works

The game uses WebMCP, which lets a website expose tools that an external AI agent can discover and call. The game registers 5 tools. Four of them only exist during the dusk phase:

  • get_game_state — always available, returns health/inventory/position
  • get_planning_context — dusk only, returns expected enemies and defense options
  • place_spike_trap({side}) — costs 2 wood + 1 stone
  • build_barricade({side}) — costs 3 wood
  • set_fire({side}) — costs 1 wood + 1 herbs

When night falls, the defense tools are unregistered. The AI's job is done until the next dusk.

I tested it with Chrome's WebMCP flag and the Model Context Tool Inspector extension by François Beaufort. You type something like "plan the defense" and the AI calls the tools one by one. Each call updates the game map in real time.

Night phase: slimes approach while the player defends

The thing I got wrong first

The first version had the AI doing everything: gather water, eat berries, chop wood, craft items. All through WebMCP tools. It worked, but it was boring. Typing "gather water" to an AI when pressing R does the same thing is just friction.

On day 2, I scrapped that and gave the AI only the planning phase. That was the right call. The keyboard handles actions. The AI handles strategy. Both halves got better once I stopped forcing everything through one channel.

Tech

  • Vanilla JS + HTML Canvas + Vite
  • No framework. About 1500 lines of JS across 9 modules
  • Pixel art from a mix of free and paid asset packs ($3.20 total)
  • Deployed on Vercel as a static site

Asset credits

Try it / look at the code

If you want to test the WebMCP tools, you need Chrome 146+ with the chrome://flags/#enable-webmcp-testing flag enabled, plus the Model Context Tool Inspector extension. Or just add ?debug=true to the URL for manual buttons.

Three days, one game, a lot of sprite cropping. It was fun. Might do more of these.

Top comments (0)