Stack Ascent

A browser dungeon crawler that teaches the full-stack web developer roadmap. Each act is a roadmap phase, each room is a lesson with hands-on challenges, and each act ends in a boss fight. A playable prototype I designed and directed.

Role
Designer and director
Discipline
Game, Software
Year
2026
Tools
HTML, CSS, JavaScript, Canvas 2D, WebGL, Web Audio, Playwright
The lobby: character, rank, today's bounties and the next room

I want to be hireable as a full-stack web developer by 2027, and reading about the roadmap wasn’t sticking. So I set out to build a game that makes me practise each phase instead. It started as a gamified course. Partway through I pushed it towards a proper dungeon-crawler RPG: a skill tree that levels, your rank as your character, a key you have to earn before the boss door opens, and boss fights with real weight to them.

It’s a playable prototype. The first two acts, foundations and HTML and CSS, are complete with 20 rooms and three bosses. The third act, JavaScript, is part built.

Every act is a dungeon

Each act is a floor map of rooms in a snaking grid, joined by corridors. Rooms ahead of you sit under fog, and a room only opens once the one before it is cleared. Along the way are treasure, a campfire and a key altar. The boss door stays shut until every other room in the act is cleared, which is what earns the key. Beating the boss opens the vault, which holds the act’s build project, and the stairs down to the next act.

A dungeon map of lesson rooms joined by corridors, with cleared rooms starred and fog over the rooms ahead

Boss fights

A boss has 100 HP per question. Every right answer lands a hit: the health bar drops with a lagging ghost bar behind it, a damage number floats up, and particles burst off the boss. An attack timer counts down the whole time, and when it runs out the boss strikes and you lose a heart. At a third of its health the boss enrages and the music changes. Answers in a row charge a power meter for a bigger strike.

A boss question about CSS specificity, with the attack timer and a lantern to clear wrong options

Practice, not reading

Most rooms end in challenges where you actually write or run the thing. There are 10 challenge types and 240 challenges so far:

  • Terminal: a simulated shell with its own file tree and a working Git model, about 35 commands from init to merge and push. Objectives tick off as you type.
  • Layout puzzles: your CSS renders live next to dashed outlines showing where each box needs to land, checked one element at a time.
  • JavaScript: your code runs in a sandbox with a loop guard and a timeout, against hidden tests.
  • Selectors: a live count of what your selector matches against what it should match.
A terminal challenge running git init, status and add, with objectives ticking off A flexbox layout puzzle with a CSS editor and dashed target outlines

Remembering what you learned

Every question is tagged with the skills it tests, and there are 124 skills. Each one levels from 1 to 5, and levels 3 to 5 award points to spend on talents. Underneath that is spaced review. Skills fade if you leave them, so a skill you haven’t touched in weeks shows as rusty and comes back up for review. A skill only counts as mastered once you’ve answered three different questions about it on two different days. Daily Review serves what’s due, and Debug Drill replays the questions you got wrong.

The skill tree, with skill levels for each room and points to spend The rank pass, a track of rewards for each rank tier

Text that stays in its box

The hardest problem was keeping text inside its box across hundreds of exercises at every screen size. While playtesting I found answers spilling out of their cards in a sorting exercise, which forced six columns no matter how long the answers were. That was fixed, along with a general rule so text in any exercise wraps instead of escaping.

To keep it fixed, an automated audit now renders all 586 lesson exercises and every room challenge at three screen widths and flags any text that overflows or gets clipped. Its first run reported zero problems, which was wrong: it had skipped the sections where my bug lived. Once those were covered, we put the broken layout back on purpose to test the audit. It caught all six spills, then reported zero again with the fix in.

The lobby on a phone, with the bottom tab bar A boss fight on a phone, mid-way through a code-and-test challenge

My part

This project is about design and direction more than hand-written code. I came up with the idea and set the direction: the clean, dark look, the dungeon-crawler structure, the tabs and a rank pass tied to progress. I playtested every build, and that drove the bug fixes and the balancing: talents were too cheap, gold too generous and build projects too easy to skip. I also set the rule that the course contains no personal details, so the screenshots show a fictional learner, Alex Rivera.

What’s next

Finishing Act III, with its last eight rooms and two bosses, then the remaining acts through to getting hired. Before anyone else plays it, it needs an accuracy pass over the lessons, a feedback button and hosting of its own.