DOM-Walker

How a web page becomes a dungeon

Every HTML document is already a tree. A page has a root, branches for its sections and articles, and leaves for its paragraphs, list items and links. A dungeon map is also a tree — rooms connected by corridors, some rooms deeper in than others. DOM-Walker exploits that resemblance: it parses the page with the browser's own DOMParser, walks the result with a TreeWalker, and hands each element a role in a game world.

Structural tags become architecture. An <h1> becomes the boss chamber, <main> becomes the throne room, <section> and <div> become halls, <aside> becomes a secret room, <footer> becomes catacombs. Content tags become things inside those rooms: paragraphs spawn wandering enemies, list items and spans become collectible loot, blockquotes and captions become lore scrolls you can read, forms and tables become trap rooms, and every <a href> becomes a portal pointing at the URL it actually links to.

The layout itself is procedurally generated but not random. The seed is derived from the URL, so the same address always produces the same dungeon — you can share a seed and a friend will walk the identical map. Room size follows nesting depth, room count follows how many structural elements the page has, and the overall shape follows the page's character: a dense documentation page yields a sprawling labyrinth, an article yields a linear run of rooms, a link index yields a looping network, and a one-screen landing page yields a tight arena.

Why anyone would want this

Partly because it is fun, and partly because it makes structure visible in a way an outline never does. Load a page you wrote and you can see, at a glance, whether it is a coherent building or a warren of empty <div> wrappers. Pages with clean semantic markup produce maps that read like real dungeons; pages built from nested wrappers and no headings produce a handful of featureless boxes. That is an accessibility and SEO signal rendered as a game level.

It is also a demonstration of what the browser can do on its own. There is no game engine, no sprite sheet, no audio file and no server: the tiles and characters are drawn as 8×8 pixel bitmaps on a canvas, the chiptune sound effects are generated by Web Audio oscillators at the moment they play, and the saves live in your own localStorage. The only network request DOM-Walker ever makes is the one that fetches the page you asked for, and even that can be skipped by pasting HTML or loading a local .html file instead.

Getting more out of it

• If a URL will not load, the site is blocking cross-origin requests. Open the page in another tab, view its source, copy the markup, and use paste mode — that route never touches the network at all.
• Portals are real links. Stepping into one fetches that URL and generates the next dungeon, carrying your character, level and inventory with you, so you can chain a whole site into a campaign.
• Hold on to consumables before entering a boss chamber. Bosses come from the page's <h1> and hit several times harder than the paragraph-spawned wanderers.
• Elements matter in combat: fire beats nature, nature beats water, water beats fire, and shadow and arcane counter each other. Enemy element is shown in the combat panel before you commit.
• Roguelike difficulty deletes your save on death. Use it deliberately, and export a .dwsave file first if you want an escape hatch.

How to play

1. Type a URL into the field at the top, or press one of the sample buttons, and enter the dungeon.
2. Move with the arrow keys or W A S D — or swipe and tap on a touch screen. Every step is a turn, and enemies move when you do.
3. Walk into an enemy to start turn-based combat, then attack, defend, cast, use an item or run.
4. Press Space to interact with chests, levers, statues and lore scrolls, and to enter portals.
5. Save to one of three slots, or export a .dwsave file to carry your run to another browser.

Related: HTML Minifier for shrinking the markup you just explored, HTML to Markdown to extract a page's content, and URL Parser for picking apart the links that became portals.