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

Mohammad Rafaquat Alam — Fri, 04 Sep 2026 05:20:15 +0000

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.

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.

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

Bow and arrows: sweeetpotatoo
Terrain, trees, campfires, barricades: ToffeeCraft
Red slime enemies: Free Game Assets
Erwin character sprite and grass tiles: nogardlab

Try it / look at the code

Play: jungle-base.vercel.app
Source: github.com/raf-xtgt/jungle-base
Demo video: youtube.com/watch?v=TYEkmSEia8U

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.

DEV Community: Mohammad Rafaquat Alam