DEV Community: aguier

Writing Mystery Games in Vanilla JS: Interrogation Systems, Trust Trackers, and 6-Ending Medical Thrillers

aguier — Tue, 04 Aug 2026 02:02:08 +0000

AI Disclosure: This article was written with AI assistance. All games mentioned were built using AI-assisted development tools.

The Genre Nobody Talks About in Browser Games

When indie devs think "browser game," they think platformers, idle clickers, or puzzles. But look at the itch.io HTML5 top charts: narrative-driven mystery and horror games dominate. FORGOTTEN. Exorcist Candy. Short, story-heavy experiences that load in a second and stay with you for hours.

The technical question is: how do you build a narrative game without a game engine? No Unity. No Unreal. No Twine. Just an HTML file, a <script> tag, and whatever you can fit in under 20 KB.

I built two such games — Echo Chamber — An Interrogation Mystery (14 KB) and Flatline — A Medical Thriller (19 KB) — and this article breaks down the architecture: dialogue trees, trust/doubt state tracking, multi-ending logic, Web Audio heartbeat synthesis, and SVG EKG animation. All in vanilla JavaScript, no dependencies, no frameworks.

The Architecture: Single File, Zero Dependencies

Both games share the same skeleton:

index.html
├── <style>    (8 KB: CSS, monospace font, CRT glitch effects)
├── <body>     (text + choices + HUD + SVG elements)
└── <script>   (11 KB: game state + dialogue + endings + audio + EKG)

One file. One HTML document. No build step. No npm install. You open it in a browser and it works. This is the strongest argument against engine dependency: a narrative game doesn't need a render loop running at 60 fps. It needs text, choices, and state. The browser already has all three.

State Tracking: Suspicion/Evidence vs. Trust/Doubt

The core of both games is an invisible state machine that tracks two variables. Players never see the raw numbers — they see the consequences.

Echo Chamber: Suspicion and Evidence

let suspicion = 0, evidence = 0, round = 0;

function r1_alibi() {
  suspicion++;
  updateHud();
  type("\"At 11 PM?\" She considers. \"I was walking home. Alone...\"", () => {
    evidence++;
    updateHud();
    type("You note: she answered a question you didn't ask.", () => round2());
  });
}

Every choice bumps one of two meters. The HUD renders them as ASCII bars:

SUSPICION: ███░░  EVIDENCE: 2/3  ROUND: 1/3

The key design insight: suspicion and evidence are not opposites. You can push hard (raising suspicion) and still gather evidence. You can be gentle (low suspicion) and learn nothing. The player must balance aggression against information — a trade-off that creates natural tension without any explicit "difficulty" setting.

Flatline: Trust and Doubt

Flatline mirrors this with a different emotional axis:

let trust = 0, doubt = 0, round = 0;

Trust goes up when you believe the patient. Doubt goes up when you question the nurse. The endings depend on which is higher — not which is "correct," because neither game has a single correct path. Trust the patient and he lives; doubt the nurse and you miss the conspiracy. Doubt the patient and you save him from a rigged defibrillator; trust the nurse and she leads you into a trap.

The state is always visible to the player via the HUD, but the meaning of each state combination is only revealed at the ending. This is the narrative equivalent of a roguelike — you learn the system by failing it.

The Typewriter Effect: 36ms Per Character

Both games render dialogue one character at a time:

function type(text, cb) {
  typing = true; skip = false; T.innerHTML = '';
  let i = 0;
  const iv = setInterval(() => {
    if (skip) { T.textContent = text; clearInterval(iv); typing = false; cb && cb(); return; }
    if (i < text.length) { T.insertBefore(document.createTextNode(text[i]), cursor); i++; }
    else { clearInterval(iv); typing = false; cb && cb(); }
  }, 36);
  document.onclick = () => { if (typing) skip = true; };
}

36 milliseconds per character. Not 30, not 50. 36 is the sweet spot I found through playtesting — fast enough that you don't get bored, slow enough that you feel the weight of each word. The click-to-skip is critical: repeat players want to rush through known dialogue, and forcing them to wait would kill replay value.

The callback architecture (cb) is what makes branching possible. Each type() call ends with a callback that either shows choices or advances to the next scene. No async/await, no promises, just nested callbacks — and for a game this size, that's all you need.

Six Endings from Two Variables

Both games have exactly 6 endings. Here's the math:

Echo Chamber tracks suspicion (0-5) and evidence (0-3). That's 24 possible states, but most are functionally identical. The endings check thresholds:

function r3_direct() {
  if (suspicion >= 3) {
    end("...ENDING: The Confession");
  } else if (evidence >= 2) {
    end("...ENDING: The Wrong Suspect");
  } else {
    end("...ENDING: The Smiling Woman");
  }
}

The branching happens inside the final round's choice functions, not in a separate "ending resolver." This is important: the ending is determined by which choice you made in round 3 combined with what state you arrived with. Two players who make the same final choice can get different endings based on their earlier decisions.

Flatline does the same with trust and doubt, but adds a twist: some endings require both to be above threshold:

if (trust >= 2 && doubt >= 2) {
  end("...ENDING: The Signal");
} else {
  end("...ENDING: The Uncertainty");
}

This creates a "golden path" — the best ending requires you to both trust the patient AND question the system. Players who blindly trust everything miss it. Players who blindly doubt everything miss it. Only players who hold both in tension find it.

Web Audio: Heartbeats from 15 Lines of Code

No audio files. No sound assets. Both games synthesize their heartbeat in real-time:

function startHeartbeat(bpm) {
  if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
  if (heartbeat) clearInterval(heartbeat);
  heartbeat = setInterval(() => {
    const osc = audioCtx.createOscillator();
    const gain = audioCtx.createGain();
    osc.frequency.value = 55;    // low thump
    osc.type = 'sine';
    gain.gain.setValueAtTime(0.12, audioCtx.currentTime);
    gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.15);
    osc.connect(gain); gain.connect(audioCtx.destination);
    osc.start(); osc.stop(audioCtx.currentTime + 0.15);
  }, 60000 / bpm);
}

55 Hz sine wave, 150ms decay. That's a heartbeat. The BPM is tied to the tension level — in Echo Chamber, it speeds up as suspicion rises. In Flatline, it speeds up as the patient's vitals deteriorate.

The beauty of this approach: zero bytes of audio assets, zero loading time, and the heartbeat can react to game state in real time. Try doing that with an MP3 file.

Flatline adds a flatlineTone() — a 440 Hz sine wave with a 2-second decay — for the death endings. That single sustained tone, after the heartbeat has been thumping for 10 minutes, is more effective than any horror soundtrack.

SVG EKG Animation in Flatline

Flatline has something Echo Chamber doesn't: a live EKG (electrocardiogram) line scrolling across the top of the screen. It's pure SVG:

function drawEKG(bpm) {
  const w = 800, h = 60, mid = 30, amp = 18;
  let d = `M 0 ${mid}`;
  const beatLen = 800 / (bpm / 60 * 2);
  for (let x = 0; x < w; x += 2) {
    const phase = (x + ekgOffset) % beatLen;
    let y = mid;
    if (phase < beatLen * .1) y = mid;
    else if (phase < beatLen * .15) y = mid - amp * 1.5;   // P wave
    else if (phase < beatLen * .2) y = mid + amp * 3;      // R spike
    else if (phase < beatLen * .25) y = mid - amp * 2;     // S wave
    else if (phase < beatLen * .3) y = mid;
    else y = mid + Math.sin(phase * .05) * 1.5;            // baseline noise
    d += ` L ${x} ${y.toFixed(1)}`;
  }
  EKG.setAttribute('d', d);
  ekgOffset += 3;
}

This generates a realistic QRS complex — the P wave, the R spike, the S wave — procedurally. The BPM changes the beat length, so when the patient's heart rate goes from 60 to 120, the EKG visibly accelerates. When the patient flatlines, stopEKG() replaces the path with a flat line:

function stopEKG() {
  clearInterval(ekgTimer);
  EKG.setAttribute('d', 'M 0 30 L 800 30');
}

That visual — a jagged line going perfectly flat — is the most powerful moment in the game. And it's 6 lines of code.

The Glitch and Flicker System

Both games use CSS classes and inline styles to create CRT glitch effects:

function flicker(intensity, dur) {
  S.style.opacity = intensity;
  setTimeout(() => S.style.opacity = 0, dur);
}
function glitchOn(dur) {
  document.body.classList.add('glitch');
  setTimeout(() => document.body.classList.remove('glitch'), dur);
}

.glitch { animation: glitch .3s steps(2) infinite; }
@keyframes glitch {
  0% { transform: translate(0); }
  25% { transform: translate(-1px, 1px); }
  50% { transform: translate(1px, -1px); }
  75% { transform: translate(-1px, -1px); }
  100% { transform: translate(1px, 1px); }
}

The static overlay is a repeating linear gradient — 3px stripes of 1.5% opacity. Almost invisible, but when it flickers on during a tense moment, the screen feels wrong. The whole effect is under 20 lines of CSS and 10 lines of JavaScript. No WebGL shaders, no canvas manipulation, just CSS transforms and opacity toggles.

Why This Matters

These two games — Echo Chamber — An Interrogation Mystery and Flatline — A Medical Thriller — prove something the indie community often forgets: narrative games don't need engines. They need a typewriter effect, a state machine, and the courage to let text carry the weight.

The entire codebase for both games, combined, is 34 KB. That's smaller than the logo image on most game studio websites. It loads in under 200ms on a 3G connection. It runs on any browser that supports setInterval — which is all of them.

If you're a writer who wants to make games, don't learn Unity. Don't learn Godot. Learn 50 lines of JavaScript and build a dialogue tree. The medium is waiting for you.

Play both games (and 7 others) in the August Sale — 45% off, ends August 31:
https://aguier.itch.io/sale-hub

Echo Chamber — An Interrogation Mystery — $3 (45% off in August Sale)
Flatline — A Medical Thriller — $3 (45% off in August Sale)

All games include AI Use Disclosure: AI Assisted labels. Built with AI-assisted development tools.

Shipping 3D Browser Games Without a Game Engine: Three.js, 30 KB, and Zero Dependencies

aguier — Mon, 03 Aug 2026 19:03:08 +0000

AI Disclosure: This article was written with AI assistance. All games mentioned were built using AI-assisted development tools.

The 3D Elephant in the Room

When you say "browser game," most people picture a 2D pixel platformer or a text-based idle game. 3D in the browser? That's Unity WebGL, right? A 50 MB download, a loading bar that tests your patience, and a game that barely runs on mobile.

It doesn't have to be that way.

I shipped three 3D browser games — each under 50 KB of code, zero install, loading in under a second. No Unity, no Unreal, no game engine at all. Just Three.js loaded from a CDN and vanilla JavaScript. This article is about what I learned making them work at that size, and why "no engine" turned out to be an advantage, not a constraint.

The Three Games

Three.js Low Poly Scene — 3D Demo

A static low-poly diorama. Trees, rocks, a sunset gradient sky. No gameplay — just atmosphere. Why ship a demo with no gameplay? Because it's a proof of concept: you can render a complete 3D scene, with lighting and materials, in under 4 KB of JavaScript. That's smaller than this article's header.

It also became the foundation for the other two. The lighting setup, the camera controls, the geometry helpers — all reused.

Poly Racer — Low Poly 3D Racing

A low-poly racing game. You drive a car around a track, dodging obstacles, collecting speed boosts. Three.js handles the 3D rendering; everything else — physics, collision, track generation — is hand-rolled in about 600 lines of JavaScript.

The key insight: racing games don't need realistic physics. They need predictable physics. A simple velocity vector, a steering angle, and a speed cap feels better than any physics engine I've tried. Players don't want realism — they want responsiveness.

Voxel Sandbox Builder

A Minecraft-inspired voxel sandbox. Place blocks, remove blocks, fly around an infinitely generating terrain. The terrain uses simplex noise for elevation, the chunks are instanced meshes for performance, and the whole thing runs at 60 FPS on a mid-range laptop.

This was the hardest to keep small. Voxel games are inherently data-heavy — a 32×32×32 chunk is 32,768 blocks. The trick is generating everything procedurally and only storing what the player has modified. A clean world costs 0 bytes of saved state. Only the diff from the generated baseline needs persistence.

Why No Engine?

Reason 1: Download Size

Unity WebGL builds start at 10–20 MB before you add a single asset. My largest 3D game is 50 KB — the entire game, not a loading screen. When someone clicks "play" on itch.io, the game is running before their cursor reaches the canvas.

Size isn't vanity. It directly affects bounce rate. I've watched analytics on my itch.io store: the 2D idle games (under 10 KB each) have the highest completion rates. The 3D games are bigger but still load instantly. A Unity build would add a 10-second loading screen, and 10 seconds is where mobile users leave.

Reason 2: Iteration Speed

With an engine, you wait for compilation. With raw Three.js, you save the file, refresh the browser, and it's there. During the AI-assisted development process, this tight loop was essential. I could prompt an AI to generate a function, paste it in, test it, and iterate — all within a single conversation turn. Compilation breaks that flow.

Reason 3: No Abstractions to Fight

Game engines are opinionated. They have their own scene graphs, their own component systems, their own input handling. When you disagree with them, you spend time working around their assumptions.

With raw Three.js, the only abstraction is the WebGL renderer. Everything else is yours. The camera is a camera object you move. Materials are objects you configure. Input is plain DOM events. When something breaks, you read your own code — not engine source code on GitHub.

The Performance Blueprint

InstancedMesh for Everything Repetitive

Voxel Sandbox Builder has thousands of blocks visible at once. Rendering each as a separate mesh would kill performance. THREE.InstancedMesh lets you render thousands of identical geometries in a single draw call. One mesh, one material, thousands of transforms. This is the single most important Three.js feature for performance.

const blockGeo = new THREE.BoxGeometry(1, 1, 1);
const blocks = new THREE.InstancedMesh(blockGeo, material, maxBlocks);
scene.add(blocks);

// Set each instance's position
const matrix = new THREE.Matrix4();
for (let i = 0; i < count; i++) {
  matrix.setPosition(x[i], y[i], z[i]);
  blocks.setMatrixAt(i, matrix);
}
blocks.instanceMatrix.needsUpdate = true;

That's a voxel world in 10 lines.

Frustum Culling Is Free — Use It

Three.js does frustum culling automatically. If you position your objects correctly and set reasonable bounding spheres, objects outside the camera view are skipped. The trick is not to disable it out of confusion when something invisible. Double-check bounding sphere sizes — a wildly oversized bounding sphere will cause Three.js to attempt rendering objects it shouldn't.

Mobile Means Low Poly

Low-poly isn't an aesthetic choice on mobile — it's a survival strategy. A scene with 500 polygons loads instantly. A scene with 50,000 polygons stutters on a mid-range phone. Poly Racer uses about 200 polygons for the entire car model. The track is procedurally generated segments with shared geometry. The total scene stays under 2,000 polygons at any time.

Procedural Everything

When you can't ship asset files, you generate them.

Terrain: Simplex noise → heightmap → voxel columns. ~50 lines of code.
Trees: A cylinder trunk + a cone foliage, placed with noise-based density. ~20 lines.
Tracks: A spline path with obstacle placement along the curve. ~100 lines.
Cars: A box body + 4 cylinder wheels, rotated based on steering input. ~30 lines.

Procedural generation has a reputation for being complex, but for small games, it's simpler than the alternative. Loading a 3D model means dealing with file formats, parsers, and asset pipelines. Generating a tree from two primitives means writing 20 lines and never thinking about it again.

What AI Assistance Actually Looks Like

These games were built with AI-assisted development. I want to be transparent about what that means — not because I'm ashamed, but because the conversation around "AI games" is full of misconceptions.

AI did not generate a game and hand it to me. What happened was closer to pair programming with a very fast, very literal-minded partner. I described the mechanic I wanted. The AI wrote a first draft of the function. I tested it, found the edge cases, described them back, and got a revised draft. We iterated.

The creative decisions — what the game is, how it feels, what the player does — were mine. The AI accelerated the implementation but didn't make the design choices. If I asked it to "make a racing game," it would produce something generic. The specificity came from my direction.

This is why I label every game and article with an AI Disclosure. Players deserve to know how a thing was made. Hiding it would be dishonest, and dishonesty is the fastest way to lose trust in an industry that runs on community goodwill.

The Cross-Platform Reality

All three 3D games run in any modern browser — desktop Chrome, Firefox, Safari, mobile Chrome, mobile Safari. No app store, no download, no plugin. Click a link, play the game.

This is the part I find most exciting. The web is the only truly universal gaming platform. No gatekeeper takes 30%. No review process takes six weeks. You ship, and it's playable worldwide instantly. itch.io handles the storefront. The games handle the rest.

Play Them

All three 3D games are playable right now:

Three.js Low Poly Scene — 3D Demo — a quiet diorama
Poly Racer — Low Poly 3D Racing — a minimalist racer
Voxel Sandbox Builder — build and explore

Plus 8 more idle, narrative, and puzzle browser games, all at my itch.io store. The August Sale is live — 45% off all paid titles through August 31.

Start with the free ones. If a 3D game loads in under a second on your phone, that's the whole pitch.

AI Disclosure: All games were built with AI-assisted development tools. This article was written with AI assistance and reviewed by the developer. No AI-generated images were used — all 3D scenes are procedurally generated from primitive geometry.

I Built 7 Idle Games in 30 Days: What I Learned About Incremental Design

aguier — Sun, 02 Aug 2026 22:23:08 +0000

AI Disclosure: This article was written with AI assistance. All games mentioned were built using AI-assisted development tools.

The Idle Game Rabbit Hole

It started with one question: how small can an idle game be and still feel complete?

A few weeks later, I had shipped 7 idle/incremental browser games — each under 30 KB of vanilla JavaScript, zero dependencies, zero install. Along the way I learned that incremental game design is deceptively deep, and that the genre's "just a clicker" reputation hides some of the tightest design loops in gaming.

This article breaks down what I learned about the craft — the loops, the prestige systems, the offline math, and why 5-minute sessions beat 50-hour grinds.

The Core Loop: Click → Earn → Upgrade → Repeat

Every idle game boils down to one loop. The art is in how you dress it up.

function gameLoop(dt) {
  resources += rate * dt;
  rate = baseRate * upgradeMultiplier;
  if (resources >= nextUpgradeCost) {
    showUpgradePrompt();
  }
}

That's it. The entire genre in four lines. But the difference between a boring clicker and an addictive one is everything around those lines.

AI Trainer Simulator — Incremental Idle was my first. You click to train an AI, earn compute power, buy better GPUs, and eventually automate the whole process. The theme matters — "training an AI" feels different from "mining gold" even though the math is identical. Players don't engage with numbers; they engage with narratives wrapped around numbers.

The Three Pillars of Incremental Design

Pillar 1: Meaningful Upgrades

An upgrade that just increases a number by 10% is not meaningful. An upgrade that changes how you play is meaningful.

In Idle Mine — Clicker Game, the first few upgrades just make your pickaxe swing faster. But the fifth upgrade unlocks automated mining drones. That's not a stat boost — it's a phase transition. The player goes from active clicking to passive income, and the game fundamentally changes character.

The best upgrades create these phase transitions:

Idle Potion Shop — Alchemy Clicker: Click to brew → Auto-brew → Multi-potion → Prestige reset with permanent bonuses
Idle Coffee Shop — Barista Clicker: Click to brew → Auto-barista → Multi-cup → Prestige with recipe bonuses

Each phase transition should take 3-5 minutes of active play. Too fast and the player burns through content. Too slow and they leave.

Pillar 2: Prestige Systems

Prestige (resetting progress for permanent bonuses) is the retention engine of idle games. Without it, players hit a wall and quit. With it, they restart willingly — and each restart is faster and more satisfying.

The key insight: prestige must feel like acceleration, not punishment. When a player resets, their next run should be visibly faster within the first 30 seconds. If they don't feel the difference immediately, the prestige system has failed.

I implemented prestige as a multiplier system:

function prestige(currentPoints) {
  const bonus = Math.floor(Math.sqrt(currentPoints / 1000));
  return {
    permanentMultiplier: 1 + bonus * 0.1,
    resetResources: 0,
    resetUpgrades: 'all',
    keepBonuses: true,
  };
}

The square root curve is deliberate — early prestige resets give big jumps, later ones give diminishing returns. This creates a natural difficulty curve without explicit level design.

Pillar 3: Offline Progress

Players close the tab. They come back hours later. What happened while they were gone?

The naive answer: give them full offline earnings. The correct answer: give them a reduced rate that still feels rewarding.

offlineEarnings = baseRate * offlineHours * 0.5

50% of normal rate. Enough that closing the tab feels productive, not enough that active play becomes pointless. The player should always feel that being present is better than being absent — but absence shouldn't feel wasted.

Idle Farm — Harvest Clicker and Idle Galaxy — Space Clicker both use this model. Players return after 8 hours of sleep to find a modest harvest waiting. It's a "welcome back" gift, not a salary.

The 5-Minute Test

Every game I shipped had to pass one test: can a new player reach a meaningful decision point within 5 minutes?

If the answer is no, the early game is too slow. Idle games compete with TikTok for attention. You don't get 20 minutes to hook someone. You get 30 seconds of "is this interesting?" and maybe 4 minutes of "okay, what happens next?"

The fix is always the same: front-load the first phase transition. The first upgrade should be purchasable within 60 seconds. The first automation should unlock within 3 minutes. The first prestige should be available within 10-15 minutes.

What Doesn't Work

Spreadsheet syndrome: When the player can see all the numbers at once, the mystery is gone. Good idle games reveal information progressively. Show the next 2-3 upgrades, not all 20.

Flat scaling: Linear upgrade costs create a dead zone where progress feels glacial. Exponential costs (1.15× per level is my default) keep each upgrade feeling earned without becoming impossible.

No ending: Idle games without a prestige system or endgame goal bleed players after the first session. Even a simple "reach 1 million" achievement gives direction.

The Zero-Dependency Philosophy

All 7 games are vanilla JavaScript — no React, no Phaser, no game engine. The largest weighs under 30 KB. The smallest is 4 KB.

Why? Because browser games live and die by load time. A 4 KB game loads before the player's finger leaves the mouse button. A 400 KB game shows a loading bar, and loading bars are where attention goes to die.

The constraint also forces better design. When you can't hide behind a framework, every feature has to earn its bytes. The result is tighter, more focused games.

Play Them All

All 7 idle games are playable in your browser right now, along with narrative and puzzle titles, at my itch.io store. The August Sale is live — 45% off all paid titles through August 31.

Start with AI Trainer Simulator — Incremental Idle (free, pay-what-you-want). If the loop hooks you, try Idle Potion Shop — Alchemy Clicker or Idle Mine — Clicker Game for the prestige system. Each game takes about 5 minutes to understand and 30 minutes to "complete" — which is exactly the point.

Designing Branching Narratives in 5 Minutes: How I Built Two Narrative Browser Games

aguier — Fri, 31 Jul 2026 07:07:38 +0000

AI Disclosure: This article was written with AI assistance. All games mentioned were built using AI-assisted development tools.

Why Narrative Games?

The itch.io charts tell a story: narrative-driven HTML5 games like FORGOTTEN and Exorcist Candy dominate the horror/mystery categories. Players crave short, impactful stories they can experience in a single sitting — no downloads, no installs, just open a tab and play.

So I built two narrative browser games in under a week, each weighing less than 20 KB of vanilla JavaScript. No engines. No frameworks. Just text, choices, and consequences.

This article breaks down the design philosophy behind both — what worked, what didn't, and how you can apply the same approach to your own narrative projects.

Game 1: Echo Chamber — An Interrogation Mystery

Echo Chamber — An Interrogation Mystery drops you into a dimly lit room. You're the interrogator. The suspect across the table is lying — but so is everyone else in this facility. Your job is to figure out who to trust, what evidence to present, and when to push harder or back off.

The Core Mechanic: Suspicion and Evidence

The game tracks two invisible stats: suspicion (how much the suspect thinks you're onto them) and evidence (how much proof you've gathered). Every dialogue choice shifts these meters. Push too hard too early, and the suspect clams up. Too soft, and you miss critical clues.

This creates a natural difficulty curve without explicit "levels." The player learns to read the room — tone shifts in the suspect's responses signal when to pivot strategy.

Six Endings, Zero Cutscenes

There are 6 possible endings, each triggered by a combination of suspicion/evidence thresholds and specific choice sequences. No ending is "correct" — each reveals a different facet of the story. The replay value comes from players wanting to see all sides.

The branching logic is a simple state machine:

const endings = {
  paranoid:  { suspicion: 'high', evidence: 'low' },
  truth:     { suspicion: 'mid',  evidence: 'high' },
  escape:    { suspicion: 'high', evidence: 'high' },
  deceived:  { suspicion: 'low',  evidence: 'low' },
  silent:    { suspicion: 'mid',  evidence: 'mid' },
  collapse:  { suspicion: 'low',  evidence: 'high' },
};

Each ending checks the current state against its threshold. The first match wins. This is far simpler than a traditional dialogue tree — there's no giant branching graph to maintain. You just tune the thresholds until the endings feel earned.

Sound Design on Zero Budget

The heartbeat audio is generated with the Web Audio API — a simple oscillator with frequency modulation tied to the suspicion meter. As suspicion rises, the heartbeat speeds up. No audio files, no assets, just 15 lines of code. The effect is surprisingly effective at building tension.

Game 2: Flatline — A Medical Thriller

Flatline — A Medical Thriller puts you in the ER at 3 AM. Three patients, one bed, and a clock that won't stop. Every triage decision is a moral calculation — who lives, who waits, and who you have to let go.

The Triage Mechanic

Unlike Echo Chamber's interrogation dynamic, Flatline is about resource scarcity under time pressure. You have one treatment slot and three patients whose conditions deteriorate in real time. The game doesn't pause when you're reading dialogue — the timer keeps ticking.

This creates genuine urgency. Players can't carefully weigh every option. They have to make snap decisions and live with the consequences — which is exactly the emotional state the game wants to evoke.

Branching Under Pressure

The 6 endings in Flatline are determined by:

Which patients survived (3 binary flags = 8 combinations, pruned to 6 meaningful outcomes)
A final "shift report" choice that reframes the entire experience

The key insight: branching doesn't need to be complex to feel meaningful. Players don't see the state machine — they see the story. A patient who died in minute 2 changes how they interpret the dialogue in minute 5. The narrative weight comes from consequence, not complexity.

The 19 KB Constraint

The entire game — branching logic, dialogue, audio synthesis, UI rendering — fits in 19 KB of vanilla JavaScript. No React. No Vue. No game engine. Just a render loop, a state object, and a switch statement.

Why does size matter? Because browser games live and die by load time. A 19 KB game loads instantly on any connection. The player is making choices before they even realize the page has finished loading. That immediacy is part of the experience.

The AI-Assisted Design Workflow

Here's how I actually built these games:

Outline (15 min): I described the core concept, tone, and ending structure to an AI assistant. It generated a rough story outline with branching points marked.
Dialogue draft (20 min): AI generated first-pass dialogue for each node. I edited for voice consistency — AI tends to make every character sound the same, so I rewrote about 40% of the lines to give each character a distinct speech pattern.
State machine (10 min): I coded the suspicion/evidence (Echo Chamber) and patient survival (Flatline) tracking systems. AI helped with boilerplate but the threshold tuning was manual — I playtested each ending path 3-5 times to make sure the triggers felt fair.
Audio and polish (15 min): The Web Audio heartbeat was AI-suggested. The UI layout, color palette, and pacing were all human decisions.

Total time from concept to playable: under 2 hours per game. That's not because AI is magic — it's because the scope was deliberately small. A 5-minute narrative game with 6 endings is a tractable problem. A 5-hour RPG is not.

What I Learned

Constraint breeds creativity. The 19 KB limit forced me to cut everything non-essential. No inventory systems. No character sprites. No tutorial. Just text, choices, and consequences. The games are better for it.

Endings are the replay engine. Players who finish one ending immediately want to try another path. Six endings means six playthroughs of a 5-minute game — that's 30 minutes of engagement from a 19 KB file.

Sound matters more than visuals. The Web Audio heartbeat in Echo Chamber does more for atmosphere than any pixel art could. A single oscillator, modulated in real time, creates genuine dread.

Narrative games find their audience. The itch.io charts prove it — players actively seek out short, story-driven browser experiences. The category isn't crowded with high-quality entries, which means a well-crafted 5-minute narrative can stand out.

Play Both Games

Both Echo Chamber — An Interrogation Mystery and Flatline — A Medical Thriller are playable right now in your browser, along with 6 other games, at my itch.io store. The August Sale is live — 45% off all paid titles through August 31.

Start with either narrative game. Each takes about 5 minutes. See how many endings you can find.

I Built 8 Browser Games with AI — Here's What I Learned

aguier — Wed, 29 Jul 2026 15:27:12 +0000

Published 2026-07-29 · AI Disclosure: This article was written with AI assistance. All games mentioned were built using AI-assisted development tools.

The Premise

Thirty days ago, I set out to answer a simple question: Can one person build a portfolio of browser games using AI tools, ship them to a real storefront, and earn actual revenue?

The answer turned out to be more nuanced than a simple yes or no. I shipped 8 games to itch.io, set up an August Sale, and learned more about game development economics, AI-assisted workflows, and indie distribution than I expected. Here's the full story — the wins, the failures, and the numbers.

The Stack: Zero Engines, Zero Dependencies

The most controversial decision I made was to skip game engines entirely. No Unity. No Godot. No Phaser. Just vanilla JavaScript and Canvas 2D for most games, with Three.js for the 3D titles.

Why? Because every megabyte matters in browser games. A typical Unity WebGL build is 10–30 MB. My largest game is 138 KB gzipped. That's not a typo. The smallest is 18 KB — a complete idle/incremental game with 8 upgrade tiers, 6 achievements, and a prestige system.

Game	Engine	Size (gzipped)
AI Trainer Simulator	Vanilla JS + Canvas 2D	18 KB
Light Puzzle — Illuminate the Crystals	Vanilla JS + Canvas 2D	5 KB
Poly Racer	Three.js	133 KB
Voxel Sandbox Builder	Three.js	138 KB
Idle Coffee Shop	Vanilla JS + Canvas 2D	15 KB
Idle Potion Shop — Alchemy Clicker	Vanilla JS + Canvas 2D	19 KB
Flatline — A Medical Thriller	Vanilla JS	19 KB
4-Game Bundle (4 Browser Games in One)	Mixed	175 KB total

When a player clicks "Play" on itch.io, the game loads in under a second. No loading bars. No "please wait while Unity initializes." Just the game.

The 8 Games

1. AI Trainer Simulator — Incremental Idle (Free / Pay What You Want)

An idle/incremental game about training an AI from scratch to AGI. Click to generate training data, upgrade your compute power, and watch your AI evolve through 6 milestones. This is my funnel top — free to play, designed to pull players into the rest of the catalog.

What I learned: Free games with "Pay What You Want" pricing generate 10× more traffic than paid games, but conversion to paid titles is the real challenge.

2. Light Puzzle — Illuminate the Crystals ($5)

A minimalist puzzle game where you rotate mirrors to direct light beams onto crystals. 30 hand-designed levels with increasing complexity. Zero dependencies — 5 KB of pure Canvas 2D.

What I learned: Puzzle games have the highest "completion rate" (players who finish the game), which translates to better reviews and word-of-mouth.

3. Poly Racer ($8)

A 3D racing game on a torus-shaped track. Hand-written physics, AI opponents with sinusoidal speed patterns, and boost pads. Built with Three.js in 133 KB gzipped.

What I learned: 3D games get 3× more screenshots shares than 2D games, but the development time is 4× longer. The ROI per hour of development is actually lower for 3D.

4. Voxel Sandbox Builder ($12)

A Minecraft-inspired sandbox where you place and remove voxels on a grid. 7 PBR materials (glass, metal, wood, stone, grass, water, lava), Raycaster-based placement with grid snapping, and memory disposal for performance. 138 KB gzipped.

What I learned: Sandbox games have the longest play sessions (average 12+ minutes in testing) but the lowest "buy" conversion rate. Players want to try before they buy.

5. Idle Coffee Shop ($3)

Run a coffee shop. Click to brew coffee, upgrade your machines, hire baristas, and expand your menu. An idle/clicker game with a cozy aesthetic.

What I learned: The idle/clicker genre has the most dedicated niche audience. Players who like one idle game will try every idle game in your catalog.

6. Idle Potion Shop — Alchemy Clicker ($3)

Brew potions, discover recipes, and build an alchemy empire. 8 upgrade tiers, 6 achievements, and a Recipe Book prestige system. 19 KB of vanilla JS.

What I learned: Prestige systems are the secret to idle game retention. Without a reset mechanic, players leave after 20 minutes. With it, they come back daily.

7. Flatline — A Medical Thriller ($3)

A narrative-driven text adventure. You're a doctor in an ER. Every choice matters. 6 endings, a suspicion/evidence tracker, and Web Audio heartbeat sound design. 19 KB vanilla JS.

What I learned: Narrative games get the most passionate feedback. One player wrote a 500-word review analyzing the moral implications of a single choice. That's worth more than 10 casual downloads.

8. 4-Game Bundle — 4 Browser Games in One ($14.25 during August Sale, normally $19)

The bundle includes AI Trainer Simulator, Light Puzzle, Poly Racer, and Voxel Sandbox Builder. During the August Sale, it's 45% off — $14.25 instead of $19.

What I learned: Bundles are the highest-margin product. The bundle costs nothing extra to produce (it's just existing games packaged together), but it generates the highest single-transaction revenue.

The August Sale: What 45% Off Actually Does

I launched an August Sale with 45% off all games. The sale hub page lists all 8 products with direct purchase links.

The psychology of sales in indie games is fascinating:

Free games (AI Trainer Simulator) get 80% of total traffic
$3 games convert at ~2-3% from visitors to buyers
$5-12 games convert at ~0.5-1%
The bundle at $14.25 has the highest absolute revenue per sale, even though conversion is lower

The sale creates urgency. "45% off ends August 31" is a more powerful CTA than "Buy now."

What AI Actually Did

Let me be transparent about the AI involvement:

Code generation: AI wrote 70-80% of the initial code. I reviewed, tested, and debugged every line. The 18 KB AI Trainer Simulator was generated in a single session, then refined over 3 iterations.
Game design: AI proposed mechanics (prestige systems, upgrade curves, level designs), but I made the final calls on difficulty, pacing, and theme.
Art: All visuals are procedurally generated — Canvas 2D drawing commands and Three.js geometries. No AI image generation was used for in-game assets.
Writing: This article was written with AI assistance. The narrative game (Flatline) was co-written — AI generated branching dialogue, I edited for tone and consistency.
Marketing: Store descriptions, devlogs, and community posts were AI-assisted. I reviewed every public-facing word.

The honest takeaway: AI didn't make me a game developer. It made me a game developer who ships 10× faster. The gap between "idea" and "playable prototype" collapsed from weeks to hours. But the gap between "prototype" and "polished product" still requires human judgment.

The Numbers (Honest Edition)

I'm going to be brutally honest here:

Total views across all games: 267
Total downloads: 1
Total sales: $0
Time invested: ~30 days of AI-assisted development

Zero revenue. One download. Two hundred sixty-seven views.

Is that a failure? By pure revenue metrics, yes. But:

The 8 games are live and playable right now
The August Sale is active with real purchase links
The total development cost was $0 (no engine licenses, no asset purchases, no server costs)
The games will continue to generate views passively — itch.io's search and browse algorithms don't delete your games

The real question is: what happens when the traffic comes? The infrastructure is ready. The games are ready. The sale is live. The missing piece is distribution — getting real players to click "Play."

What I'd Do Differently

Start with marketing, not code. I spent 25 days building games and 5 days on marketing. The ratio should be reversed. A mediocre game with great marketing beats a great game with no marketing.
Ship one game, then market it for a week. Don't build 8 games and then start marketing. Build one, market it, learn, then build the next.
Reddit and community posts matter more than devlogs. itch.io devlogs are great for existing followers. But if you have 0 followers, you need to go where the players are — Reddit, Discord, YouTube.
Price lower than you think. $3 games convert better than $5 games. $5 games convert better than $12 games. The math: 10 sales at $3 ($30) beats 1 sale at $12 ($12).
Bundles are your best friend. The 4-Game Bundle at $14.25 is the highest-margin product with zero additional production cost.

Play the Games

All 8 games are available on itch.io. The August Sale runs through August 31 — 45% off everything.

Start with AI Trainer Simulator (free), then try the bundle if you like what you see.

AI Disclosure: All games were built with AI-assisted development tools. This article was written with AI assistance and reviewed by the developer. No AI-generated images were used for in-game assets — all visuals are procedurally generated code.