A NEW WAY TO LEARN WEB DEVELOPMENT
Build a game. Learn the web.
Vibe Code Matrix turns natural-language prompts into a living game world — and quietly teaches you the events, state, and rules that power every modern app.
Why we built this
Most coding tutorials start with syntax. We start with intent. You describe what you want to happen — and we show you the structured action, the event listener, the state update, and the rule that made it real. By the time you've built a game, you've internalized the mental model behind every web app you've ever used.
How it works
You type a prompt
Plain English: "add a dragon at row 2, column 3" or "when I press space, the hero jumps ahead."
AI translates it into an action
Your sentence becomes a structured, validated action — the same kind of JSON a real backend would receive.
The engine runs the rule
Triggers, effects, modifiers, timers, key bindings — a tiny game engine evaluates them every frame.
You see what code really does
Every prompt maps to a concept: coordinates, events, conditionals, state, loops. Learn by playing.
What we built
A real prompt-driven game engine — not a toy. Every feature you'd wire up by hand in JavaScript, you can summon with a sentence.
Coordinates & state
Place, move, and remove assets on an 8×8 grid backed by real state objects.
Keyboard events
key_pressed, key_held, key_released, key combos, and movement modifiers like Shift = 2× speed.
Mouse & pointer
cell_click, cell_hover, asset_click — the same DOM events you'd wire in real apps.
Timers & lifecycle
on_start, every N seconds, after N seconds — built on requestAnimationFrame.
Rules & conditions
When X happens, do Y. Add cooldowns, run-once, and max-fire modifiers.
Editor meta-prompts
"Enter paint mode with grass" changes the builder UI itself — a tiny taste of meta-programming.