Archived one-page layout (before the site was split into pages). Back to the current site
The DOM is the game board. Letters become points. Buttons become enemy factories. Four tiny arcade experiments that break the fourth wall of your browser.
Psst. Tap the bad guys. Drag the tank. Hit BUTTON_01.
Choose a game below. It plays across this page. Your score lives in the game HUD; Esc or Recall ends the session.
Deploy an M4-inspired pixel tank onto a live webpage. Breach fortified button bases, build your own cover, and hold the page against escalating squads.
Play uses the selected build. Notes below describe the current release.
Created by Chris Cooley · coded.design
Drive with arrows or the joystick; hold Fire or Space to shoot. Mouse aiming controls the turret on desktop. Blast text into binary and capture button bases.
A lighter enemy that flanks and fires at you. Destroy it for points and two scrap.
Joins siege waves from wave 2. Takes more damage to destroy and drops four scrap. Keep cover between you and incoming shells.
B builds cover, T builds a pillbox, M plants a mine. Spend scrap and leave space in front of your tank for construction.
Sound starts after your first input. Minimize keeps the game running; Recall restores the page.
Letters block tanks and shells. Direct hits clear nearby glyphs into faint binary rubble, opening a crater wider than your tank. Whitespace becomes a route between positions. Explicit data-sherman-wall elements remain solid cover; both movement and shell rays respect their cached rectangles.
Four destructible wall segments surround each visible button base. Blast a gap, disable the button, and occupy it for 0.7 seconds to capture it. Friendly bases repair 18 armor per second, fire at nearby enemies, and supply one scrap every 2.5 seconds while occupied. Capturing all factories moves siege reinforcements to the page edges.
Aim at clear ground and press B for cover (2 scrap), T for a pillbox (8), or M for a mine (3). A pixel engineer completes one job in 0.65 seconds. Cover and pillboxes sit 52 pixels ahead of the turret; mines deploy 120 pixels ahead to catch approaching tanks. Blocked construction refunds its cost. Pillboxes lead moving targets; mines deal area damage to enemy tanks.
Siege starts with a four-second preparation window and a ten-tank first wave. Squads arrive in groups of up to three. Later waves introduce more tanks and heavier armor, with at most 40 enemies per wave and 32 alive at once. Clear a wave for eight seconds to fortify, four scrap, and 12 armor. Conquest mode retains the original capture-every-base victory condition.
Start with 16 scrap. Earn supplies from destroyed tanks, breached button walls, base capture, and every four letters you clear. Cannon upgrades still unlock at 20 and 60 XP. Build up to 12 cover segments, four pillboxes, and eight mines. Your own walls stop your shells too, so leave firing lanes or blast a new opening.
The original M4-inspired silhouette retains its movement, two cached tread frames, independently aiming turret, and recoil. One runtime loop drives tanks, the engineer, construction, and waves. Shells use swept collision segments; movement advances in steps of at most four pixels. A shared TypeScript wave director schedules bounded squads without timers or per-enemy DOM nodes.
Shells write literal 0/1 into the existing Text nodes. Optional binaryOpacity styles the real digits using CSS Highlights; without that API they stay fully visible. No replacement letters on canvas, cloned HTML, or per-letter spans. Recall restores still-owned text and button styles.
Release a swarm onto the page, then defend it. Bugs eat letters into binary, evolve, and drain your buttons. Squash them before the interface falls apart.
Play uses the selected build. Notes below describe the current release.
Created by Chris Cooley · coded.design
Move the crosshair over a bug and click to hit it. On touchscreens, tap the bug directly. Larger bugs can take more than one hit.
Starts with one hit point. Feeds on real letters, changing each bite to 0 or 1. Squash it before it grows.
After six letters it grows and gains one hit point. Earlier damage still counts; evolution does not fully heal it.
After twelve letters it grows again and gains one more hit point. It hunts buttons, bites text on the way, and drains button integrity.
Sound starts after your first input. Minimize keeps the game running; Recall restores the page.
Bugs arrive inside your viewport near the pointer. Small bugs stay near local food and buttons. Grown hunters keep their assigned mission, biting letters already in their path. Scrolling can outrun the swarm; attached bugs track their target geometry while free bugs retain their document position.
The first bite fades the button to mint green. Yellow starts at 75% health, then coral red at 35%. Damage drains a fill behind the real label. Desktop surfaces ripple and bubble; mobile uses stable native CSS gradients and quiet radial bubbles. The label, icon and original handler remain part of the host page.
Offscreen attack alerts offer Jump from 50 points and Jump + Zap from 200. Each rescue increases the jump and zap prices; each zap increases its own price further. A zap clears a limited radius and awards only one point per kill. Manual scrolling is always free.
Swarm keeps its established engine. A reusable Range and a nearby glyph shortlist constrain geometry work. The navigation audit preserved full deterministic gameplay and DOM traces while reducing ancestry checks by 81.8% and distance calls by 90.4% in the documented workload. Those are operation counts, not an FPS claim.
Optional hidden activation: ↑ ↑ ↓ ↓ ← → ← → B A Enter. A deferred entry can wait for load, delay and idle before installing the activation bootstrap; the game itself loads on first open or start.
A round, hungry pixel frog races through magnetic food pipes in the page’s whitespace. Jump out to eat real text, then catch another trail and hunt escaping flies.
Play uses the selected build. Notes below describe the current release.
Created by Chris Cooley · coded.design
A round green frog with a wide side chomp, expressive eyes and tiny ball-shaped feet. Nearby trails gently guide parallel movement; steer across them to roam freely and eat real letters.
The violet fly takes a corridor route toward your position. Unpowered contact costs a life.
The pink fly aims several junctions ahead of your heading. Turn to change its interception point.
The cyan fly mixes fast pursuit with roaming at junctions. Its wings stay within the corridor routes.
A glowing power pellet seals the gates temporarily. Blue flies flee along the maze and become edible. Chain catches for increasing points.
Large glowing pink squares give six seconds of power, capped at nine when stacked. Six to eight are spread along the trails; eaten power squares return after 20 seconds as bonus food.
Cherries and strawberries appear on the corridors. Catch them before they disappear; they are optional bonus food.
Sound starts after your first input. Minimize keeps the game running; Recall restores the page.
Soft maze edges trace the whitespace around text, controls and media. The frog sticks firmly to the centerline, carries speed through bends, and queues turns at junctions. Press Space or double-tap a direction to jump out anywhere. Eat real letters on your detours, then catch another trail.
Pink power squares emit a pulse and turn flies blue for six seconds, stacking up to nine. A quick red tongue grabs vulnerable flies up to two pellets ahead. Hunt them for 100, 200, 300, then 400 points. Fruit is optional bonus food.
Tiny ball-shaped feet scramble only while moving. Violet flies pursue directly, pink flies anticipate your heading, and cyan Roamers mix pursuit with wandering. Flies occasionally escape between pipes, but stay inside the visible playfield.
Pellets twinkle independently and eaten squares leave a faint grey trail. Food returns on the simulation clock using the same SVG nodes. Pipes stay stable during play: scrolling, resizing, a new wave, or Refresh maze redraws them. Native scrolling carries everything with the page; real text stays mutated until Recall.
Three lives. Eat every square once to clear a level. Up to five flies arrive immediately, building toward nine on the first level and twelve later where space permits. Recall removes game-owned creatures, food, and text edits.
Fly an interceptor through a real webpage. Turn letters into binary, break the button factories, and clear the aliens they release.
Play uses the selected build. Notes below describe the current release.
Created by Chris Cooley · coded.design
Steer with the mouse or arrow keys. Hold Fire or Space. Shooting page text leaves real binary behind; weapon upgrades unlock at 8, 24 and 50 XP.
The slowest alien shape. Spawns from live button gates and chases your ship with a sideways sway. One hit early; two from wave 3.
Uses the same pursuit rules as the drone, with a higher movement speed. Contact costs a shield. Destroy its gate to stop that spawn source.
The fastest of the three alien shapes. Health rises with the wave, just like the other aliens; keep moving while firing.
Sound starts after your first input. Minimize keeps the game running; Recall restores the page.
Bullets travel through viewport space and collide with cached text geometry. A hit writes a literal 0 or 1 into the existing DOM Text node. That letter can be consumed once, and inherits its real page font and color. Button health drains through a liquid fill. A destroyed factory stops spawning for the rest of that wave.
Pulse starts with one shot. Twin unlocks at 8 XP, Trident at 24, and four-shot Overdrive at 50. Letters give 1 XP, aliens 4, factory hits 2, and a destroyed factory another 8. Fire cadence accelerates from 160 ms to 95 ms. Weapon pods appear on the interceptor as it upgrades.
The cyan interceptor keeps its split nose, stepped wings, lime core, and twin engines through Pulse, Twin, Trident, and Overdrive. Movement drives small thrust and banking frames. Finite pixel variants are baked once and reused with smoothing disabled; collision and firing geometry stay stable.
A swept segment test checks the path from the previous bullet position to the next. The nearest intersecting glyph, alien or factory wins, so a fast projectile cannot simply jump across a narrow letter between frames. Alien and bullet objects are recycled through bounded pools.
Three shields. Four waves. Factories reactivate between waves. Chained kills build a multiplier up to ×5; losing a shield resets the combo, but keeps your weapon.
A webpage is a surprisingly good game map. The interesting part is reading it cheaply, changing only what you own, and leaving cleanly. Here is what these games actually do.
A custom host attaches a Shadow Root for the canvas and controls. This isolates game UI styles from the page. It is a style boundary, not a security sandbox: the game deliberately uses the supplied document to inspect text and mutate selected elements.
The board adapter maps DOM geometry into the simulation. Null Invaders uses canvas; Byte Runner uses SVG attached to the content root. Letters and buttons stay in the real document. Attached Swarm bugs, pulse rings, Sherman base walls, capture labels and cover outlines belong to their real target elements: native layout handles scrolling, clipping, resizing, and transforms. Selectors decide which page elements participate.
Null Invaders, Byte Runner and Sherman Bytes share a TypeScript engine. Swarm now uses strict TypeScript too, while keeping its established engine and gameplay. Each package ships independently, with no runtime dependency on the launcher.
requestAnimationFrameThe shared runtime uses one requestAnimationFrame loop. Geometry is cached, a spatial grid narrows collision candidates, and dirty board measurements have their own cadence. Projectiles query that cache instead of calling layout APIs for every shot. One reusable Range measures live text. Game-owned button paints do not rebuild the text index; external application changes still invalidate it.
Entity pools reuse slots for bullets, enemies, particles and score feedback. Counts have hard ceilings. HUD updates run at 10 Hz, separate from the canvas. Page visibility pauses gameplay; teardown cancels the scheduled frame and listeners. Target beacons use native transform/opacity animations, bounded to two per attached target. Mobile and reduced-motion modes use stationary rings and stable fills. Recall removes owned attachments and cancels their animations.
Mobile movement and fire controls stay separate from the compact scoreboard. Native touch policies lock zoom only during play, keep scrolling available, and restore on pause or Recall. Explosions use bounded particles; pixel sprites and Swarm’s Path2D geometry are cached rather than rebuilt for every character.
TypeScript makes the simulation contract explicit. Types disappear at build time; the performance comes from those runtime choices, not the type annotations.
Hits replace characters in the existing DOM Text nodes with literal 0 or 1. There are no canvas replacement letters, cloned text, or per-letter wrappers. The ownership ledger records the original and latest game-written value per node. Recall restores only still-owned values; newer host edits win. Changing a proportional-font letter into a digit can reflow text, so the bounded geometry cache is invalidated and refreshed.
All four games record real game-owned DOM edits. Cleanup restores a value only when it still matches what the game wrote. If your app changed it in the meantime, that newer content wins. Buttons retain their real elements and handlers while game-owned styles track damage. All four games color the already-mutated digits with their own solid palette color using native CSS Highlights. Transparent highlights let the page surface show through in both themes. Without that API the real digits remain fully visible.
Recall removes the game host, cancels animation, detaches listeners and restores eligible edits. It is an ownership ledger—not a snapshot that overwrites your whole document. It cannot roll back unrelated changes made by your application.
TextNode #0042SAME NODE"Hello, world."LAST WRITE"H01lo, w10ld."| Budget | Shared engine / new games | Swarm Protocol |
|---|---|---|
| Canvas pixel ratio | Up to 1.5× | Up to 1.75× |
| Particles | 100 reusable slots | 120 maximum |
| Text geometry | 8,000 indexed glyphs; 900 Range reads / refresh | 240 nearby glyph candidates; 36 Range reads / frame |
| Page targets | 32 targets; 160 text containers | Selected through text and target selectors |
| Geometry cadence | Dirty: 12.5 Hz / stable: 2 Hz | Nearby discovery and measurement budgets |
| Button damage | Hit-driven fill, up to 12 Hz | Desktop fill up to 12 Hz; stable mobile CSS |
| Feedback | 24 pooled score popups | 8 active effects |
Null Invaders caps aliens at 48 and bullets at 80. Byte Runner caps flies at 12, layout routing candidates at 672, food squares at 280, and bonus fruit at one. Eaten food leaves a grey trail and returns on the simulation clock; real text never regenerates. Sherman Bytes caps tanks at 32 and shells at 120. A wave queues at most 40 enemies, with 12 player-built barricades, 4 pillboxes, and 8 mines. Swarm caps bugs at 48. These are explicit capacity decisions to prevent a long session from accumulating unbounded work.
The standalone dist/index.js includes this game and its shared runtime. No engine fetch is required.
The complete immediate-entry import graph, including lazy game code. 4.3 kB gzip for the initial static import graph; the remainder loads on activation.
The standalone dist/index.js includes this game and its shared runtime. No engine fetch is required.
The standalone dist/index.js includes this game and its shared runtime. No engine fetch is required.
These figures are generated during the site build from the package distribution files, using Node’s gzip defaults and decimal kB. For split output, each reachable module is counted once and compressed individually. The Astro site, React adapter, HTTP headers and browser cache are excluded. The site bundler may regroup game chunks, so these package figures are not a prediction of this page’s network transfer.
Swarm’s documented navigation audit reduced ancestry checks by 81.8% and distance calls by 90.4% while preserving deterministic gameplay and DOM traces. That measures operations in a repeatable workload, not universal FPS. Real frame time still depends on page layout, font metrics, device, viewport and browser. Read the experiment
Null Invaders, Byte Runner and Sherman Bytes include a built engine snapshot, its declarations, and an ORIGIN.json with the source version and SHA-256 fingerprint. Engine updates are explicit: build once in DOM VIRUS, sync the selected game snapshots, rebuild, and test. Swarm is not silently moved onto that engine.
The websites use the same idea: one Astro site kit maintained in DOM VIRUS, copied with version metadata into each game repository. Each repo owns its gameplay description. Every site can build from its own checkout. No runtime iframe, remote content service, font download, or client-side framework is required for the product page.
SemVer tracks package changes; immutable version tags identify tested releases. Lockfiles pin development tools. CI checks types, tests and distribution builds before a Pages deployment. The launcher pins game versions in games.json. GitHub Pages serves the resulting static files.