Mini Ai Game Builder

Mini AI Game Builder turns text prompts into customizable, publishable mini-games. Built with Next.js, NestJS, and MySQL, it helps creators quickly prototype and share playable game ideas.

Comment

Mini AI Game Builder

Inspiration

Mini AI Game Builder started from a simple frustration: turning a game idea into a playable prototype usually takes too long.
In hackathons and indie projects, momentum is everything — but setup, boilerplate, and repetitive logic often slow teams down before creativity can shine.
We wanted a workflow where anyone could describe a game idea in plain language and instantly get a structured, playable result they could iterate on and share.

What It Does

Mini AI Game Builder is a prompt-to-play platform.
Users type a game idea and the system generates a fully playable browser game with sensible, editable defaults:

  • Template type — auto-detected or manually selected from 6 engines
  • Lives, duration, speed, difficulty — parsed from natural language or tuned via sliders
  • Objective — generated per template type
  • Publish & play — one click to go live in the gallery; another to play

The core value is rapid experimentation: moving from concept to a running game in your browser in seconds, not hours.

Key Features (Current Build)

Feature Status
6 playable game templates (Dodger, Clicker, Platformer, Snake, Memory, Shooter) ✅ Live
Natural-language prompt parsing → game config ✅ Live
Playable HTML5 Canvas game engine per template ✅ Live
In-game HUD (score, lives, countdown timer) ✅ Live
Per-game leaderboard with score submission ✅ Live
Guest & authenticated score tracking ✅ Live
User registration + login (JWT auth) ✅ Live
Published game gallery with search & template filter ✅ Live
Dashboard stats (games created, published, total plays) ✅ Live
Play session analytics (score + seconds played) ✅ Live
Premium dark glassmorphism UI ✅ Live
Toast notification system ✅ Live

How We Built It

A full-stack app with clear separation of concerns:

  • Frontend: Next.js 16 (App Router) · TypeScript · CSS Modules · HTML5 Canvas
  • Backend: NestJS · TypeScript · JWT + Passport · bcrypt
  • Database: MySQL 8 via TypeORM (migrated from MongoDB/Mongoose)

Architecture Highlights

  • Prompt parser maps natural-language cues ("hard", "fast", "3 lives", "60 seconds", "snake", "shoot") into validated config values across 6 template types.
  • 6 canvas game engines — fully self-contained, pure HTML5 Canvas, no external game libraries. Each engine is initialized once and cleaned up on unmount via React effect cleanup.
  • Stable callback ref pattern — game loops run outside React's render cycle via requestAnimationFrame. Callbacks are stored in useRef and proxied into the engine to avoid stale closure bugs.
  • Auth module — bcrypt-hashed passwords, 7-day JWT, optional auth guards so guests can still generate and play.
  • Scores module — leaderboard per game (top 10), play session recording, stat aggregation.
  • Gallery — published games sorted by play count, searchable and filterable by template.
  • The core loop: prompt → generate → tweak → play → publish → leaderboard.

Challenges We Ran Into

  • Prompt ambiguity: Natural language is messy. We built safe fallback defaults and keyword chains per template so any prompt still produces a valid game.
  • Canvas ↔ React boundary: The game loop runs outside React. Getting score/lives state to update in React without stale closures required the useRef delegate pattern.
  • Operator precedence parsing: Turbopack (Next.js 16) is stricter than Babel — mixing ?? and || without parentheses is a parse error that crashes the entire page.
  • Database migration: Switched from MongoDB to MySQL mid-project; required rebuilding all entities, relations, and query logic with TypeORM.
  • Auth integration with optional guards: Some endpoints needed to work for both guests and logged-in users, requiring a custom OptionalJwtGuard that doesn't throw on missing tokens.

Accomplishments We're Proud Of

  • Delivered a fully playable multi-template game platform end-to-end.
  • Built 6 distinct game engines in pure HTML5 Canvas without any game library dependency.
  • Implemented a live leaderboard with real score persistence and play session tracking.
  • Built a JWT auth system from scratch with bcrypt, optional guards, and context-aware frontend state.
  • Designed a premium glassmorphism UI with animated stats, micro-animations, and full mobile responsiveness.
  • Maintained a clean, documented codebase with a full bug fix report throughout rapid development.

What We Learned

  • Fast prototyping improves dramatically when generation and editing are both first-class features.
  • Strong validation and defaults are essential for reliable AI-assisted UX.
  • Clear API contracts between frontend and backend prevent rework — especially after a database migration.
  • For creator tools, time-to-first-result is one of the most important product metrics.
  • Running game loops outside React requires deliberate patterns (ref delegates) to keep UI state in sync.

You can think of iteration efficiency as:

$$\text{Prototype Velocity} \propto \frac{\text{Idea Clarity} \times \text{Generation Quality}}{\text{Setup Friction}}$$

Our goal was to reduce setup friction while keeping output quality immediately playable and shareable.

What's Next for Mini AI Game Builder

Near-term

  • [ ] Shareable play links — public URLs for each published game (no login required to play)
  • [ ] User dashboard — see your own games, stats, and leaderboard rankings in one place
  • [ ] Mobile touch controls — on-screen D-pad / tap areas for all 6 templates

Mid-term

  • [ ] AI remix / version history — fork any published game config and diff against the original
  • [ ] Difficulty telemetry — auto-tune speed and spawn rates based on average completion rates
  • [ ] More templates — runner, tower defence, rhythm, brick-breaker
  • [ ] In-game visual themes — let users choose colour palettes / sprite styles per game

Long-term

  • [ ] LLM-powered generation — replace rule-based parsing with a real language model for richer config extraction
  • [ ] Export to code — download a self-contained HTML file for any generated game
  • [ ] Production deployment — Docker + CI/CD pipeline, analytics, usage dashboards
  • [ ] Multiplayer leaderboard — real-time score updates via WebSockets

Built With

Share this project:

Updates

Submission history