← Blog

Letter 09

AI Built This Game, Then Turned It into a Roguelike Campaign

The browser game evolved from a screenshot reconstruction into a six-chapter Three Kingdoms tower-defense roguelike with persistent five-slot recruitment, automatic waves, visible combat XP, upgradeable treasures, generated music, and local autosave.

AI Built This Game, Then Turned It into a Roguelike Campaign
The current browser game at /game/: six historical chapters, route choices, moving two-path defense, persistent five-slot recruitment, combat XP, treasures, weapons, farmers, music, and local autosave.

Play 云汉守城 in your browser →
No install, no account, no ads. Your run is saved locally on the device.

July 12 update: from a reconstruction to a campaign

The first playable edition proved that the map, moving enemies, deployment positions, projectiles, melee attacks, farmers, merging, and local saves could work in a small browser game. The next design pass changed the scale of the project. It now has six Three Kingdoms chapters and thirty waves, named enemy generals, automatic wave continuation, visible kill experience, branching routes, temporary blessings, permanent run treasures with three upgrade levels, and an original generative score made with the Web Audio API.

The five recruitment slots now behave as a real shop row. Buying one candidate removes only that candidate; the other four remain available, and a player with enough buns can buy all five. Only pressing “replace row” discards the remaining offers. The run starts with one visible row and 18 buns. Ordinary soldiers cost 3 buns, name fragments cost 5, and replacing the row costs 3. Kills remain the main bun faucet, while farmers provide a slower compounding economy.

Combat progression is split into two visible numbers. Merge rank still comes from combining matching cards. Combat level comes from XP: a hero that lands the killing blow receives a 70% exclusive share, with the remaining 30% shared by the other deployed units; a soldier kill is shared by the whole deployed formation. The XP bar and both levels are shown on every deployed-capable card.

The six acts are Bowang Slope, Changban, Red Cliffs, Luo Castle, the Han River, and Ji Valley. The game labels the opening chapter as a story-driven interpretation where literary tradition is stronger than the surviving historical record. Every fifth wave brings the chapter's opposing general. After each boss, the player chooses a safer supply road, a harder raid with a five-wave blessing, or a merchant road. This is the part inspired by Slay the Spire: the route is a resource-and-risk decision, not a cosmetic story button.

The balance pass targets several ordinary hits per enemy instead of one-hit kills. Enemy health follows a smooth curved progression, encounter size grows more slowly, early combat levels arrive quickly, and later XP thresholds widen. Treasures do not expire in real time and do not punish a player for closing the page. Permanent treasures last for the run; clearly labelled route blessings expire after five completed waves. Challenge comes from the enemy curve and optional raid path rather than hidden decay.

Audible autoplay is blocked by modern browsers until the page receives a click, tap, or key press. The game therefore defaults music on and begins its generated pentatonic battle score automatically on the first interaction, with a visible music toggle. Autosave writes after every strategic action, every two seconds during combat, when the tab is hidden, and before the page unloads. The save remains in that browser's local storage; clearing site data, ending an incognito session, or changing device removes it.

The design pass used published references rather than copying another game's hidden numbers: GDC's balance and pacing guidance, a power-curve framework, the official Slay the Spire description of risky and safe paths, the Chinese Text Project's Zhao Yun source index, and MDN's browser autoplay guidance. The resulting formulas, prices, XP split, chapter structure, and music are original to this web edition.

I was playing a mobile game called 赵云与阿斗. Its core idea was excellent: recruit Chinese-character cards, merge soldiers into stronger ranks, join name fragments into Three Kingdoms heroes, and hold a tower-defense line. But the version I had felt unfinished. Advertising and energy friction repeatedly interrupted the part that was actually fun.

So I did not ask AI for a game mockup. I gave it four phone screenshots, a short description, and later several real gameplay videos. The target was concrete: understand the mechanism, rebuild a complete local game, make it dynamic rather than static, test it on desktop and mobile, publish it at AI4EPC.com/game, and write the story you are reading now.

From screenshots and video frames to an explicit rule system

The screenshots carried more information than they first appeared to. They showed bun-based recruitment, a three-heart base, active and passive items, a weapon backpack, a merchant, a hero compendium, same-card counts, wave defense, and a name grid containing twelve combinable generals. One screenshot exposed exact displayed draw weights: blade 19.8%, bow 17.9%, spear 17.0%, cavalry 16.0%, and hero-name fragments 18.9%.

The first web release still got two essential things wrong. It treated recruitment as a one-card draw that immediately entered the deck, and it reduced combat to three straight horizontal lanes. Gameplay recordings made the missing behavior unmistakable: recruitment uses five visible offers and only purchased offers enter the deck; the battle needs an actual map, deployment positions, edge spawns, connected routes, moving enemies, projectiles, lunges, impacts, and death effects.

AI cross-checked that evidence against the official Google Play listing, which describes a merge-strategy tower defense game with troop placement and skill combinations. It also compared secondary guides, including a twelve-hero list and a zero-ad strategy guide. Those secondary pages sometimes contradicted one another, so AI treated them as clues, not ground truth.

The useful move was not to pretend every hidden number had been recovered. It was to separate observed facts from design decisions, then make every new decision explicit and testable.

The displayed draw weights total 89.6%. Rather than hide the gap, the web edition assigns the remaining 10.4% to a defensive shield soldier, consistent with the observed defensive play. It keeps the user-confirmed progression rule: elite heroes can reach level 5, normal heroes level 3, and soldiers level 5. Exact proprietary damage tables were not available, so the web version uses an original, visible balance model.

AI designed the missing game, not just the page

The result is an original game named 云汉守城. It preserves the satisfying loop while removing the interruptions:

  • Recruitment: five priced candidates remain on screen until bought or deliberately replaced. Buying one never deletes the others.
  • Combination: merge two identical same-level soldiers, or join complementary name characters such as 赵 + 云.
  • Hero growth: merge duplicate heroes for rank and earn a separate visible combat level through exclusive and shared kill XP.
  • Defense: deploy to twelve legal positions, fight automatically on two connected routes, and continue from one wave to the next after a four-second rest.
  • Motion: bow and spear units create travelling projectiles; blade, cavalry, and shield units slash, charge, or bash. Hits, skills, spawns, breaches, damage numbers, death ink, and bosses all have time-based effects.
  • Build variety: choose routes and rewards, upgrade treasures to level 3 with military currency, collect boss weapons, and use temporary blessings without real-time expiry.
  • Campaign: play thirty waves across six story chapters, each with its own terrain treatment, narrative, encounter pressure, and enemy general.
  • Sound: an original Web Audio score changes tempo and motif between chapter rest states and active combat.
  • Continuity: the browser saves the run to local storage every two seconds and after every important action.

The campaign has thirty designed waves and then opens into endless defense. Pause, automatic/manual continuation, and 1×/2×/3× controls work on pointer and touch devices. Keyboard shortcuts remain available on desktop, while mobile controls keep visible tap targets.

A small architecture with a real rules engine

The production page has no framework and no runtime dependency. The configuration file owns recruitment weights, five-slot candidate rules, route point geometry, legal deployment positions, hero recipes, progression caps, weapons, treasures, and enemy types. A deterministic JavaScript engine owns candidate refresh and selection, combination, explicit deployment, path sampling, distance-based targeting, projectile travel, combat stats, waves, skills, loot, and seeded randomness. The UI layer owns animated Canvas rendering, touch and mouse interaction, dialogs, sound, and local saves.

That separation matters. A visual demo can make a button look like it recruits a soldier. A rules engine can prove that 18 buns were spent, the inventory limit was enforced, 赵 + 云 became the intended hero, elite and ordinary caps differ, and a saved wave survives a browser reload.

AI tested the game as a player

The current lightweight release suite has twelve executable behavior and regression tests. It proves that candidates persist after another offer is bought, replacing a row charges the right amount, automatic continuation waits for its intermission, level-one attacks cannot one-shot base enemies, XP attribution distinguishes hero kills from shared soldier kills, treasures respect price and level caps, routes apply deterministic risk modifiers, farmer merging doubles production speed, version-three saves migrate without losing their army, and every module uses the same release version.

Then AI ran the current build in real Chromium at 1440×1000 and 390×844. It bought two offers and measured three remaining, combined and deployed Zhao Yun, completed ordinary waves automatically, observed Zhao Yun's kill XP and level changes, paused correctly at a treasure reward, spawned real farmers, fought Xiahou Dun long enough to rule out a one-hit boss, selected the risky raid route, entered Changban automatically, and upgraded the Farming Decree with military currency.

The rendered run ended with zero console errors, zero page exceptions, no horizontal overflow, and no visible control edge below 42 pixels. It also compared consecutive Canvas captures and measured live engine state, so a decorative static map could not falsely pass as moving gameplay.

What “AI can make a game” means now

AI did not originate the genre, and it did not erase the need for human taste. The human contribution was the sharp part: recognize what was fun, reject the advertising-heavy experience, provide evidence, and define what “finished” meant.

But everything between that intent and the published system was executed in one continuous workflow: web research, evidence grading, mechanism specification, balance design, original interface design, rules programming, automated testing, real browser testing, bug fixing, build integration, server deployment, and release writing.

That is the important change. AI is no longer only a code-completion tool inside game development. Given a clear objective and the authority to inspect, build, test, and publish, it can operate across the entire product loop.

Play 云汉守城 → If the city survives, keep going. The thirtieth wave is only the end of the campaign, not the end of the system.