The Game
Play as Kosros. Survive the rot.
P2K Roguelike Survival is a browser-playable, top-down dark fantasy roguelike. You are a tiefling wizard — fragile, dangerous, and running out of forest.
Kosros, Tiefling Wizard
Fragile but dangerous. Wins through movement, mouse aim, mana discipline, and earned upgrades — not raw power.
player
Fire Magic System
Firebolt, Fireball, Pyroclasm, and Last Stand. Every spell costs mana — a rhythm that forces real decisions under pressure.
spells · mana
Enemy Roles
Lurkers flank, Swarms flood, Crushers tank. Each role changes retreat routes, spell priority, and target ordering.
lurker · swarm · crusher
Gold Is Dangerous
Rewards sit in the world. Picking them up means moving toward enemies. Every gold run is a risk calculation.
economy · risk
Corruption Pressure
The forest darkens in stages. Ground shifts, fissures crack open, audio warps. Survive longer and the environment becomes part of the threat.
phase 8
Heartfire Objective
Heartland is the last uncorrupted place. The Heartfire’s health is the world’s health. Let it die, and you enter Heartless State.
heartland · north star
“A fragile spellcaster survives by precision, nerve, and earned power — while the world around him rots into a hellscape.”
Core Loop
Move
WASD · kite
→
Aim
mouse cursor
→
Cast
fire spells
→
Collect
gold · chests
→
Die
see the ledger
→
Upgrade
spend gold / XP
→
Return
stronger
Technical Architecture
Simulation owns gameplay. Phaser renders.
The architecture has one load-bearing rule that survived all 11 phases: keep game logic completely separate from the rendering layer.
The Rule That Held
“Simulation owns gameplay state. Phaser renders, adapts input, and plays audio.”
This boundary is why the project survived scope changes, art resets, and renderer bugs without losing the core loop. It remains the most important architecture decision of the entire project.
Phaser 3
Canvas renderer. Draws scenes, handles sprites, manages the game loop. pixelArt mode and roundPixels enabled.
engine
TypeScript
Typed state structures catch configuration mistakes before the game runs. Guardrails on a fast-moving codebase.
language
Vite
Dev server and build tool. Outputs a fully inlined dist/index.html that runs from Chrome’s file:// protocol.
build
Web Audio
All audio synthesized in code. Firebolt, impact, corruption, fissure, Pyroclasm — zero external audio files.
AudioService.ts
Playwright
Automated smoke tests open the game, advance time via window.advanceTime(), and capture screenshots at each phase gate.
testing
Repository Architecture
simulation layer — game rules & state
simulation/state.ts
←
all game rules, HP, enemies, gold, mana, corruption, rounds
simulation/config.ts
←
tuning knobs: enemy stats, spell costs, round values, upgrade data
phaser layer — rendering & input
BootScene
MenuScene
GameScene
UpgradeScene
StoreScene
adapters — translation boundary
adapters/sceneBridge.ts
↔
connects simulation state to Phaser scenes
adapters/smokeHooks.ts
←
exposes window.render_game_to_text() & window.advanceTime(ms)
output
dist/index.html
←
fully self-contained — runs via Chrome file://
Scene Flow
Boot
load assets
→
Menu
start screen
→
Game
the run
→
Upgrade
spend gold
→
Store
arcane market
→
Game
next run
The AI Workflow
Idea burst → Claude → Codex → ship.
Every phase was built with the same loop: refine the vision, give it precision, then hand it to Codex with enough structure that the AI could plan and implement without drifting.
Phase History
How the game grew.
11 phases plus several post-MVP systems. Each phase locked to one concern before the next began.
Foundation — Phases 1–4
Phase 1
Playable Foundation
Phaser + Vite browser game. Kosros moves in a scrolling forest, firebolts fire, debug hooks installed from day one.
Phase 2
Combat Foundation
Tree HP, Lurker enemies, player HP/damage, death, score. The prototype becomes a survival loop.
Phase 3
Combat Feel
Mouse aim independent from movement. Telegraphs, hurt feedback, invulnerability frames, camera shake.
Phase 4
Economy Foundation
Gold drops in the world (risk to collect). Mana makes spells a resource rhythm, not unlimited fire.
Progression — Phases 5–7
Phase 5
Upgrade Screen
Death feeds progression. Permanent stat purchases with gold, cost scaling, level caps.
Phase 6
Arcane Market
Store screen: Fireball, Pyroclasm, Last Stand as persistent unlocks. Health and mana potions as run consumables.
Phase 7
Enemy Variety
Lurker, Swarm, Crusher — role-based configs, separate stats, wave weighting. Gameplay changes by enemy mix.
Depth — Phases 8–10
Phase 8
Land Corruption
Ground darkens in stages. Stage 3 cracks open fissure hazards. The forest becomes active environmental pressure.
Phase 9
Ability System
Fireball with scorch marks, Pyroclasm charge, Last Stand. Full ability HUD states. Kosros’s fire identity realized.
Phase 10
Game Feel
Rounds replace wave pressure. Map wrapping removes hard borders. Mana pacing, damage feedback, economy expansion.
Post-MVP Systems
Phase 11
Custom Art Integration
First custom/generated art pass. Exposed renderer ownership bugs. One entity = one cached view object rule established.
Heartland
Heartfire Objective
Central Heartfire with protection radius. Heartless State when fire dies. The loop now has something fragile to protect.
XP + Skills
Dual Currency & Tree MVP
XP as future Skill Tree currency. Gold stays for Market. Survival, Fire, Ice, Ritual branches planned and documented.
Screenshot Gallery
What it looks like in motion.
Smoke test captures from each major phase. Every screenshot was taken by Playwright running against the built dist/index.html.
Phase 11 — Firebolt and fire effects · custom art pass
Heartland — Healthy Heartfire; enemies approach the protection radius
Heartland — Enemies breach the radius and attack the Heartfire directly
Heartland — Heartless State: the last light dies
Phase 11 — Stage 3 Corruption: forest cracks open, fissures glow
Phase 8 — Corruption readability pass: stage 3 pressure with readable silhouette
Skill Tree MVP — Survival branch, empty start; XP is the new currency
Skill Tree MVP — After first XP purchases; purchased nodes glow
Phase 6 — Death summary: failure becomes a ledger, gold becomes a plan
Phase 6 — Upgrade screen: spend gold on permanent stat improvements
Phase 11 — Main menu with custom-generated tiefling art
Phase 11 — Upgrade screen with custom art integration
1 / 12
Struggles & Lessons
The honest account.
The strongest portfolio story isn’t “AI made a perfect game.” These are the real blockers, what caused them, and what each one taught.
Asset Generation Was Unstable
Image generation produced impressive single frames — especially north-facing Kosros. The hard part wasn’t making him look good once. It was making him remain the same person across south, diagonal, idle, walk, cast, and hurt states at production scale.
South-facing frames drifted in pose, color, and proportions. The character lost identity across directions. AI doesn’t have the visual capability to judge angle, readability, and aesthetic consistency the way a human animator does — I had to put in manual work to identify proper sprites and frames.
South-facing frames drifted in pose, color, and proportions. The character lost identity across directions. AI doesn’t have the visual capability to judge angle, readability, and aesthetic consistency the way a human animator does — I had to put in manual work to identify proper sprites and frames.
Lesson
Independent generated frames aren’t reliable for consistent directional animation. The missing piece is a strong seed-and-strip workflow that locks character identity before generating variations.
Renderer Ownership Bug
Phase 11’s first custom art pass looked wrong — but not because the art was bad. The bug was architectural: both the procedural renderer and the sprite renderer were running simultaneously, drawing on top of each other. Full sheets were being drawn as images instead of frame-by-frame. Dimensions were guessed, not read.
It took a full repair pass before the art could be fairly judged on its own merits.
It took a full repair pass before the art could be fairly judged on its own merits.
Lesson
Integration bugs can masquerade as bad art. One simulation entity must equal one cached view object — sprite or procedural, never both. This boundary is now a permanent architecture rule.
AI Drift on Abstract Prompts
When a prompt became too broad, Codex would generate more scaffolding, more lists, and more parallel tracks — all of it feeling productive while the concrete deliverable kept not shipping. “Make the game feel better” produced five plans and no code.
Abstract goals are the enemy of AI-assisted development. The AI optimizes for completeness of the response, not completion of the work.
Abstract goals are the enemy of AI-assisted development. The AI optimizes for completeness of the response, not completion of the work.
Lesson
“One lane, one next action, one verification target.” Every prompt should fit on one screen. If it doesn’t, it’s not ready to hand to AI yet.
Token Burn Rate
This project burns through AI tokens faster than typical projects. By Phase 8–10, the simulation layer was large enough that every Codex query needed to load significant context. The codebase complexity scales token cost geometrically, not linearly.
The allocation percentage dropped faster than expected — a real constraint that forced discipline around what to ask for and when.
The allocation percentage dropped faster than expected — a real constraint that forced discipline around what to ask for and when.
Lesson
Tight file boundaries (one concern per file) and narrow prompts reduce context size. The simulation/config split exists as much for token management as for good architecture.
The Real Portfolio Story
I directed an AI-assisted production workflow to turn a tabletop-inspired fantasy concept into a playable browser roguelike — then documented the design decisions, failures, technical constraints, and recovery plans that made the project more coherent.
That story is more credible than pretending the process was smooth.
The Toolchain
Built with the Game Studio Plugin.
P2K was developed using the OpenAI Game Studio plugin for Codex — a curated skill pack designed for building browser games with AI-guided workflows.
Game Studio Plugin
The Game Studio plugin gives Codex specialized knowledge across the full browser game stack: engine selection, 2D sprite pipelines, 3D WebGL architecture, React Three Fiber, physics integration, HUD layout patterns, and structured playtesting workflows. It was the primary tool for implementing every phase of P2K Roguelike Survival.
phaser-2d-game
sprite-pipeline
game-playtest
web-game-foundations
three-webgl-game
react-three-fiber-game
game-ui-frontend
web-3d-asset-pipeline
Available through the OpenAI Codex curated plugin catalog.
If you’re starting a browser game with AI: use locked phases from day one. The Game Studio plugin’s phaser-2d-game and sprite-pipeline skills are the fastest on-ramp, but the discipline of one system → smoke test → next phase is what keeps the codebase coherent as it grows.