9-step workflowgame 2d browser canvas gameplay collision score emergent guided-flow App Builder

Build a Playable 2D Browser Game

A step-by-step flow to create a real, playable 2D browser game with movement, collisions, scoring, win/lose states, and basic polish using an AI app builder.

Run this as a guided flow on Flows — verify gates and recovery prompts included →

Flows@flows12d ago

0 runs0 forks0

Chain

Inputs

Step 1

flow-build-playable-2d-browser-game-1-define-the-game-concept-and-core-loop

Step 2

flow-build-playable-2d-browser-game-2-set-up-the-game-container-and-main-state

Step 3

flow-build-playable-2d-browser-game-3-implement-the-player-and-keyboard-controls

Step 4

flow-build-playable-2d-browser-game-4-add-gameplay-objects-and-motion

Step 5

flow-build-playable-2d-browser-game-5-implement-collisions-and-gameplay-conseque

Step 6

flow-build-playable-2d-browser-game-6-add-score-hud-and-game-state-transitions

Step 7

flow-build-playable-2d-browser-game-7-implement-restart-and-full-reset-behavior

Step 8

flow-build-playable-2d-browser-game-8-polish-visuals-and-feedback-without-changi

Step 9

flow-build-playable-2d-browser-game-9-test-the-full-gameplay-loop-and-fix-edge-c

Final output

Workflow inputs

No inputs required — hit Run to stream each step in order.

Each step streams from its model and feeds the next. BYOK — you pay your provider directly. Add a key in Settings if a step needs one.

Step 1 · Lock in a small game concept that is achievable and fully playable.

flow-build-playable-2d-browser-game-1-define-the-game-concept-and-core-loop

Claude Sonnet 4.6→ {{step_1}}

Awaiting upstream steps…

Step 2 · Create the app structure, render area, and initial game state model.

flow-build-playable-2d-browser-game-2-set-up-the-game-container-and-main-state

Claude Sonnet 4.6→ {{step_2}}

Awaiting upstream steps…

Step 3 · Make the player object appear and respond correctly to input.

flow-build-playable-2d-browser-game-3-implement-the-player-and-keyboard-controls

Claude Sonnet 4.6→ {{step_3}}

Awaiting upstream steps…

Step 4 · Introduce enemies, collectibles, or targets that create actual gameplay.

flow-build-playable-2d-browser-game-4-add-gameplay-objects-and-motion

Claude Sonnet 4.6→ {{step_4}}

Awaiting upstream steps…

Step 5 · Make interactions matter through scoring, damage, collection, or state changes.

flow-build-playable-2d-browser-game-5-implement-collisions-and-gameplay-conseque

Claude Sonnet 4.6→ {{step_5}}

Awaiting upstream steps…

Step 6 · Expose game progress clearly and complete the loop from start to finish.

flow-build-playable-2d-browser-game-6-add-score-hud-and-game-state-transitions

Claude Sonnet 4.6→ {{step_6}}

Awaiting upstream steps…

Step 7 · Ensure the game can be replayed cleanly without broken loops or stale state.

flow-build-playable-2d-browser-game-7-implement-restart-and-full-reset-behavior

Claude Sonnet 4.6→ {{step_7}}

Awaiting upstream steps…

Step 8 · Improve clarity and feel while keeping the game stable.

flow-build-playable-2d-browser-game-8-polish-visuals-and-feedback-without-changi

Claude Sonnet 4.6→ {{step_8}}

Awaiting upstream steps…

Step 9 · Verify the game works from start to finish and clean up common failures.

flow-build-playable-2d-browser-game-9-test-the-full-gameplay-loop-and-fix-edge-c

Claude Sonnet 4.6→ {{step_9}}

Awaiting upstream steps…

About this workflow

A step-by-step flow to create a real, playable 2D browser game with movement, collisions, scoring, win/lose states, and basic polish using an AI app builder.

What happens when you run it

1
Lock in a small game concept that is achievable and fully playable.
Runs flow-build-playable-2d-browser-game-1-define-the-game-concept-and-core-loop on Claude Sonnet 4.6
2
Create the app structure, render area, and initial game state model.
Runs flow-build-playable-2d-browser-game-2-set-up-the-game-container-and-main-state on Claude Sonnet 4.6
3
Make the player object appear and respond correctly to input.
Runs flow-build-playable-2d-browser-game-3-implement-the-player-and-keyboard-controls on Claude Sonnet 4.6
4
Introduce enemies, collectibles, or targets that create actual gameplay.
Runs flow-build-playable-2d-browser-game-4-add-gameplay-objects-and-motion on Claude Sonnet 4.6
5
Make interactions matter through scoring, damage, collection, or state changes.
Runs flow-build-playable-2d-browser-game-5-implement-collisions-and-gameplay-conseque on Claude Sonnet 4.6
6
Expose game progress clearly and complete the loop from start to finish.
Runs flow-build-playable-2d-browser-game-6-add-score-hud-and-game-state-transitions on Claude Sonnet 4.6
7
Ensure the game can be replayed cleanly without broken loops or stale state.
Runs flow-build-playable-2d-browser-game-7-implement-restart-and-full-reset-behavior on Claude Sonnet 4.6
8
Improve clarity and feel while keeping the game stable.
Runs flow-build-playable-2d-browser-game-8-polish-visuals-and-feedback-without-changi on Claude Sonnet 4.6
9
Verify the game works from start to finish and clean up common failures.
Runs flow-build-playable-2d-browser-game-9-test-the-full-gameplay-loop-and-fix-edge-c on Claude Sonnet 4.6

Best for

•Recurring tasks you currently copy-paste between tools.
•When a single prompt isn't enough — you need a chain where output(n) feeds prompt(n+1).
•Fork and adapt if your inputs differ materially from the author's use case.

Models used

Claude Sonnet 4.6