Game Concepts for games.justinwiebelhaus.com¶

15 original browser-playable games. Each self-contained, mobile + desktop, ~300-800 lines vanilla HTML/CSS/JS or Canvas2D.

1. Gravity Sculptor¶

Slug: gravity-sculptor Pitch: Paint invisible gravity zones on the canvas to steer a rolling marble to the goal.

Core mechanic: A marble rolls under simulated physics. You draw curved brush strokes that create temporary gravity fields — attractors and repellers — that bend the marble's path. Strokes fade after a few seconds, forcing you to think ahead and layer overlapping fields.

Win/lose: Reach the glowing portal before time runs out. Faster arrival = higher score. Ball falls off canvas = restart.

Mobile input: Draw strokes with finger. Desktop input: Draw strokes with mouse; R to reset.

Assets: Pure Canvas2D — marble as gradient circle, zones as translucent arcs. No image assets needed.

Why it's original: Gravity-painting as the sole mechanic is distinct from marble maze (walls) and pinball (flippers). The temporal decay of strokes creates a planning puzzle that neither genre has.

2. Sync Swarm¶

Slug: sync-swarm Pitch: Pulse at exactly the right moment to catch as many glowing fireflies inside your ring as possible.

Core mechanic: Dozens of fireflies drift in randomized sine-wave paths across the screen. You control a pulse emitter at center. When you fire, a ring expands outward from center. Any firefly inside the ring at peak expansion gets "caught." Fireflies gradually escape the screen; each level adds faster movers.

Win/lose: Score points per catch per pulse. Miss 10 fireflies (exit screen uncaught) = game over.

Mobile input: Tap screen to pulse. Desktop input: Spacebar or click to pulse.

Assets: Canvas2D — fireflies as small glowing dots with trail, ring as expanding circle with opacity fade. No image assets.

Why it's original: The mechanic is "aim in time, not in space" — you don't move or aim, you time a radial event. This is unrelated to rhythm games (no beat track) and unrelated to shooters (no directional aim).

3. Pressure Cook¶

Slug: pressure-cook Pitch: Vent your pots at precisely the right moment — too early loses flavor, too late causes explosion.

Core mechanic: 4-6 pots simmer on screen, each with a pressure gauge that climbs at different rates. A "sweet spot" window is shown on each gauge (the green zone). You tap/click a pot to vent it. Venting inside the window scores flavor points. Venting too early scores low. Venting at max pressure = explosion, lose that pot. New pots appear continuously.

Win/lose: Survive 3 minutes without 3 explosions. Score is cumulative flavor points.

Mobile input: Tap individual pots. Desktop input: Click pots; number keys 1-6 as shortcuts.

Assets: CSS art pots + SVG gauge needles. Procedural steam particles via Canvas. No images needed.

Why it's original: The "timing window on multiple simultaneous objects" is distinct from whack-a-mole (uniform targets, no precision window) and cooking games (resource management, not precision timing).

4. Crowd Ripple¶

Slug: crowd-ripple Pitch: You're invisible — only your wake shows. Herd the crowd through the exit by shaping your movement path.

Core mechanic: A crowd of NPCs mills around a space using simple flocking rules. You move an invisible cursor/finger and it leaves a visible "ripple trail" that NPCs flee from. You must guide the crowd through narrow gates on the level edge. NPCs that hit walls or obstacles stall the herd.

Win/lose: Get a target percentage of the crowd through the exit. Time limit per level.

Mobile input: Drag finger to move the ripple source. Desktop input: Mouse movement drives the ripple.

Assets: Canvas2D — NPCs as small colored circles with velocity vectors, ripple as fading radial gradient. No images.

Why it's original: You don't command NPCs directly (unlike Lemmings or RTS). You're a purely indirect force — an absence the crowd reacts to. The puzzle is about path geometry, not issuing orders.

5. Signal Weave¶

Slug: signal-weave Pitch: Route colored signals through a node grid so every signal arrives at its output at exactly the same tick.

Core mechanic: A grid of nodes is shown. Each node has an input and output direction and a delay value (shown as a number). You draw connections between nodes to route three colored signals from their source to their matching output. All three signals must arrive simultaneously — so you must pick paths with matching total delay sums.

Win/lose: All signals arrive same tick = clear. Any signal arrives out of sync or hits a dead node = level failed.

Mobile input: Tap node pairs to connect/disconnect them. Desktop input: Click to connect nodes; backspace removes last connection.

Assets: CSS grid with SVG arrows for connections. Color-coded signal dots animate along paths. No images.

Why it's original: The simultaneous-arrival constraint is the entire puzzle — it's not a path-routing game or a Sudoku. It's closest to a timing/synchronization puzzle, a genre almost unexplored in casual web games.

6. Resonance Draw¶

Slug: resonance-draw Pitch: Copy an incoming sound wave by drawing its shape — score is how well your hand matches the waveform.

Core mechanic: A sine/sawtooth/complex waveform scrolls across the top of the screen while its matching audio plays. Below is a blank canvas. You draw a line across the canvas matching the wave's peaks and valleys as closely as possible. When you lift your finger/release mouse, the drawn line is scored against the waveform using area-difference math.

Win/lose: Score 0-100% per round. 5 rounds per game; average above 80% = win.

Mobile input: Draw with finger. Desktop input: Click-drag with mouse.

Assets: Canvas2D for waveform rendering and drawn line. Web Audio API generates the matching tone (no audio files). No images.

Why it's original: It's a drawing-accuracy game where the target is a live audio waveform — combining audio and fine-motor feedback in a way no existing casual genre does.

7. Echo Chain¶

Slug: echo-chain Pitch: Build the longest chain of rhyming words — but each word must share a sound with the previous, not just the spelling.

Core mechanic: A seed word is shown ("FLIGHT"). You type a word that rhymes phonetically ("BITE"). Then you must chain from "BITE" to a new rhyme ("KITE"), then "KITE" to another ("NIGHT"), and so on. A phonetic matching library (pre-bundled CMU pronouncing dictionary subset, ~50KB JSON) validates rhymes. No dictionary lookup clues — you rely on your ear.

Win/lose: Chain breaks when you can't find a valid rhyme in 15 seconds. Score = chain length. Leaderboard stored in localStorage.

Mobile input: Soft keyboard text input. Desktop input: Keyboard text input, Enter to submit.

Assets: 50KB JSON phoneme dictionary bundled. UI is pure CSS. No images.

Why it's original: It's phonetic, not orthographic — "THROUGH" and "BLUE" are valid links; "THOUGH" and "THROUGH" are not. This is unrelated to word games like Wordle (letter position) or Boggle (letter adjacency).

8. Brushfire Forest¶

Slug: brushfire-forest Pitch: Plant seeds, watch a procedural forest grow, then race to contain the wildfire before it consumes everything.

Core mechanic: Phase 1 (30s): Tap/click to plant trees across a grid. Denser clusters grow faster. Phase 2: Wind direction is revealed, then a fire starts at a random edge. Fire spreads via cellular automaton — faster downwind, slower upwind. You tap burning cells to "firebreak" them (costs water; water regenerates slowly). Goal: save at least 60% of trees.

Win/lose: Fire burns out naturally or you extinguish it. Trees remaining > 60% = win.

Mobile input: Tap to plant (phase 1), tap to firebreak (phase 2). Desktop input: Click to plant/firebreak; hold shift to paint multiple cells.

Assets: Canvas2D grid cells with CSS color states (green, orange, black, ember). Wind shown as animated arrow. No images.

Why it's original: Two-phase structure (build then defend) is not a tower defense (no enemy pathing) and not a sim (no economy). It's a short-form ecosystem/crisis puzzle.

9. Shadow Stack¶

Slug: shadow-stack Pitch: Draw shapes with your finger — they drop as rigid bodies. Stack them to reach the height target without toppling.

Core mechanic: A blank Canvas physics world. You draw a closed shape (triangle, blob, crescent) with your finger or mouse. On release, the shape is traced, closed, triangulated into a 2D rigid body, and drops under gravity. Stack shapes to reach a dashed height line. Unstable stacks topple.

Win/lose: Get any part of the stack to touch or cross the height line. Stack must hold for 3 seconds. Time limit per level.

Mobile input: Draw shape with finger. Desktop input: Draw shape with mouse click-drag.

Assets: Canvas2D + a small 2D physics lib (Matter.js, ~180KB, self-hosted). No images. Shapes rendered as filled polygons.

Why it's original: The player-drawn-shape-as-physics-body mechanic is distinct from Angry Birds (pre-defined projectiles) and stacking games (pre-defined blocks). The creative problem space is entirely in the shape you draw.

10. Fault City¶

Slug: fault-city Pitch: Place shock absorbers and bridges on a procedurally generated city before the earthquake hits.

Core mechanic: A side-view city is generated (buildings, bridges, underground pipes shown). A seismograph shows quake magnitude and direction building for 60 seconds. You place a limited budget of absorbers (reduce building sway), reinforcements (prevent collapse), and firebreaks (stop post-quake fires). Then the quake fires — buildings shake, collapse, catch fire. Your score is survivors.

Win/lose: Keep 70%+ of buildings standing to win. Budget management is the puzzle.

Mobile input: Tap building to cycle absorber type; drag to position. Desktop input: Click to select item type, click to place. DEL to refund.

Assets: CSS art buildings with Canvas2D shake animation. Procedural generation = seeded random heights. No images.

Why it's original: It's a pre-disaster placement puzzle (not city builder, not tower defense). The procedural generation means no two games use the same city layout.

11. Pixel Seed¶

Slug: pixel-seed Pitch: Paint colored pixels onto a grid — each color is a seed that grows by cellular automaton rules you discover through play.

Core mechanic: A 40x40 canvas. You paint pixels in one of 8 colors. Each tick, cells "grow" based on neighbors — blue spreads into adjacent empty cells slowly (water), yellow radiates diagonally (sunlight), green grows upward (vine), red consumes adjacent non-red (fire), white crystallizes into snowflake patterns, etc. The interactions between types create emergent patterns. A "daily seed" challenge asks you to replicate a target pattern.

Win/lose: Challenge mode: match target pattern above 85% similarity in 10 ticks. Sandbox mode: no lose condition.

Mobile input: Tap/drag to paint pixels; palette at bottom. Desktop input: Click/drag to paint; number keys select color.

Assets: Canvas2D pixel grid. Color rules bundled in JS. No images.

Why it's original: It's a player-authored cellular automaton, not Conway's Game of Life (fixed rules) and not a pixel art tool (the art is alive). Discovery of interaction rules is itself a mechanic.

12. Dark Sonar¶

Slug: dark-sonar Pitch: The screen is black. Click where you hear the sound — the closer you are, the higher you score.

Core mechanic: The canvas is completely dark. 5 objects are placed at random hidden positions. Each emits a unique sound (ping, hum, rattle, etc.) via Web Audio API, with volume and stereo panning corresponding to position. You click/tap where you think each source is. A circle reveals how close you were. Objects then slowly move; next round you must relocate them.

Win/lose: 3 rounds of 5 objects. Score is cumulative proximity accuracy (0-100 per click). No fail state — pure score challenge.

Mobile input: Tap canvas to guess location. Desktop input: Click canvas to place guess.

Assets: Web Audio API oscillators + panning — no audio files. Canvas is dark with minimal CSS UI. No images.

Why it's original: Spatial audio as the primary game mechanic (no visual cues) is unexplored in casual web games. It tests a different sense than all other games on the hub.

13. Mood Creature¶

Slug: mood-creature Pitch: Mix four emotion sliders to match your creature's displayed mood — it reacts with procedural animation and sound.

Core mechanic: A procedurally animated blob-creature sits center screen. Its animation is driven by four parameters: Tension, Energy, Wonder, Calm. The creature's posture, color, movement speed, and ambient sound all shift based on the mix. Each round, a "target mood" is shown as a description ("Quietly excited") — you adjust sliders until the creature's behavior matches the description text, confirmed by a similarity score. It's a qualitative matching puzzle.

Win/lose: Score per round based on slider proximity to target values. 5 rounds per game.

Mobile input: Drag sliders with finger. Desktop input: Drag sliders with mouse or arrow keys.

Assets: Canvas2D procedural blob animation (sine-wave deformation). Web Audio API ambient tone. No images.

Why it's original: Emotion as a game input — matching a qualitative description by adjusting affective parameters — is unique. It's not a rhythm game, not a puzzle game; it's closer to an empathy/perception exercise made playable.

14. Blob Merge¶

Slug: blob-merge Pitch: Pin two drifting blobs together to merge their colors — hit the target color before they all escape the screen.

Core mechanic: Colored blobs drift across the canvas in lazy random walks. When two blobs overlap, a "pin" icon appears — tap/click it to fuse them. Fused blobs blend colors additively (red + blue = purple). A target color swatch is shown. You must fuse blobs to produce an exact color match. Blobs that exit the screen are lost — fewer blobs = harder to hit target.

Win/lose: Match target color (within tolerance) = round clear. All blobs exit without match = fail.

Mobile input: Tap the overlap zone between two blobs. Desktop input: Click the overlap zone.

Assets: Canvas2D blob rendering with additive color blending. No images. Colors defined procedurally per level.

Why it's original: Color mixing as a spatial/timing puzzle — you must intercept blobs in motion rather than select from a palette. Not a match-3 (no grid), not a painting game (no brush).

15. Chrono Thread¶

Slug: chrono-thread Pitch: A timeline of events is scrambled — draw threads between causes and effects to restore causal order.

Core mechanic: 8 event cards are shown in scrambled positions on a timeline strip. Each card describes an event ("The bridge collapses," "Heavy rain falls," "Road crew misses inspection"). You draw threads (lines) from cause cards to effect cards. When all threads are drawn, the game simulates the causal chain — if logical, events snap into correct order and a story plays out. Wrong causality creates paradoxes shown with a red flash.

Win/lose: All events in correct causal order with valid threads = win. 3 paradox strikes = fail.

Mobile input: Drag thread from one card to another. Desktop input: Click source card, click destination card to thread.

Assets: CSS event cards. Canvas2D threads as bezier curves. Event text sets are bundled JSON (~20 scenario packs, ~10KB). No images.

Why it's original: Causality as an explicit draggable game mechanic (not choose-your-own-adventure, not logic grid puzzle). The "simulate and see" feedback loop is unique — you reason, then watch your reasoning play out.

Genre Coverage¶

Genre	Games
Arcade / reflex	Sync Swarm, Pressure Cook, Dark Sonar
Puzzle / logic	Signal Weave, Fault City, Chrono Thread, Blob Merge
Physics	Gravity Sculptor, Shadow Stack
Rhythm / audio	Resonance Draw, Dark Sonar
Word	Echo Chain
Drawing	Shadow Stack, Resonance Draw
Strategy-lite	Crowd Ripple, Brushfire Forest, Fault City
Idle / generative	Brushfire Forest, Pixel Seed
Generative / toy	Pixel Seed, Mood Creature

Implementation Notes for Codebuilder¶

Matter.js required only for Shadow Stack (self-host, ~180KB). All others: pure Canvas2D + vanilla JS.
Web Audio API required for Dark Sonar, Resonance Draw, Mood Creature. No audio file assets.
Bundled data: Echo Chain needs CMU phoneme subset (~50KB JSON). Chrono Thread needs scenario packs (~10KB JSON).
All others: zero external assets. Procedural CSS/Canvas art throughout.
Suggested batch split: Batch A (1-8): gravity-sculptor, sync-swarm, pressure-cook, crowd-ripple, signal-weave, resonance-draw, echo-chain, brushfire-forest. Batch B (9-15): shadow-stack, fault-city, pixel-seed, dark-sonar, mood-creature, blob-merge, chrono-thread.