Flows category icon
App Builder
Intermediate
Generated

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.

9 steps46 verify checks60-120 minutesWorks with: emergent · chatgpt · claude · cursor
Start Guided Walkthrough

AI-generated draft. This flow was created by the custom generator. Review the steps and Definition of Done before running - curated flows in the library are hand-crafted and research-backed.

The Route

0/9 verified

Context Pack

Paste this first. It briefs the AI on requirements, constraints, and the Definition of Done before your first build prompt.

Context Pack
PROJECT CONTEXT:
Build a small but fully functional 2D browser game. The game should run in a single web app, support keyboard controls, render visible game objects, handle collisions, track score, and include start, game over, and restart flows.

GOAL:
Create a real 2D game that can be played in the browser from start to finish, with working mechanics instead of a static mockup.

REQUIREMENTS:
- Use a browser-friendly 2D rendering approach such as HTML5 Canvas or a lightweight game loop in the app
- Implement a controllable player character or object with keyboard input
- Render enemies, obstacles, collectibles, or targets as real interactive objects
- Implement collision detection that changes score, health, or game state
- Include a visible score or progress system that updates during play
- Include a start screen or clear game start state
- Include a game over or win condition with visible feedback
- Allow the player to restart the game without refreshing the page
- Keep all core gameplay functional on desktop browser
- Organize code so game state, rendering, and input are clearly separated

CONSTRAINTS:
- Do not produce only a decorative landing page or fake game UI
- Do not rely on placeholder buttons pretending to be gameplay
- Keep scope small enough to finish in one session
- Prefer simple shapes and programmatic assets over requiring external art packs

DEFINITION OF DONE:
- The game starts and the player can control a character or object with the keyboard
- Interactive objects appear and affect gameplay through real collision logic
- Score, health, timer, or another tracked state updates correctly during play
- A win or loss condition is reachable through gameplay and clearly displayed
- The restart flow resets the full game state without needing a browser refresh
- There are no major broken loops, frozen states, or non-responsive controls

COMMON FAILURES TO AVOID:
- Building a nice-looking screen with no actual game loop or controls
- Showing score and health labels that never update from real gameplay
- Rendering objects visually but not wiring up collision behavior
- Adding a restart button that only changes text instead of resetting state
- Creating code with overlapping timers or loops that break after restart

Paste this into your AI builder first. It teaches the AI what you want before you give it the build prompt.

Related routes

More App Builder flows that share ground with this one.

Flows category icon
App Builder
Generated

Build a Login Page with Auth Metrics Tracking

Create a real login page with working authentication and instrument it to capture useful investment-app auth metrics such as signups, login attempts, success rate, failures, and drop-off.

01Define the auth flow and metrics schema
02Create or wire the authentication foundation
03Build the login page UI with validation

+6 more steps to Done

Best forbuilders who have shipped a basic app before

9 steps60-120 minutesIntermediate
Flows category icon
App Builder
Generated

Build a Scary First-Person Horror Game

A step-by-step flow to create a real playable first-person horror game with movement, interactions, enemy behavior, atmosphere, objectives, fail states, and testing.

01Define the game loop and systems before building
02Build the first-person controller and playable scene foundation
03Add interaction, doors, pickups, and progression gating

+7 more steps to Done

Best forproduction-grade builds with strict verification

10 steps4-8 hoursAdvanced
Flows category icon
App Builder
Generated

Add Real-Time Presence Indicators to a Chat App with WebSockets

A step-by-step flow for implementing real-time online, offline, and typing presence in a chat app using WebSockets, including backend presence tracking, frontend updates, reconnect handling, and verification.

01Inspect the existing chat architecture and choose presence data flow
02Define the presence event contract and server-side state model
03Implement authenticated WebSocket connection handling on the server

+7 more steps to Done

Best forbuilders who have shipped a basic app before

10 steps60-120 minutesIntermediate

Made with Emergent