Flip Grid | HTML5 Mobile Puzzle Game
Flip Grid is a modern mobile-first puzzle game built with HTML5 Canvas, featuring addictive tile-flipping mechanics, procedural level generation, and multiple gameplay rules that keep every stage fresh and engaging.
Players must transform the current board configuration into a target pattern by strategically flipping tiles. Each level introduces a different rule set that affects how tiles react, creating a surprising amount of depth from a simple core mechanic.
Designed for portrait mobile devices, Flip Grid is lightweight, easy to customize, and ideal for developers looking to publish on mobile web platforms, app stores, or game portals. A visual Level Generator tool is included, so you can grow the game from 17 levels to hundreds without writing a single line of code.
- Features
- 17 puzzle levels across 6 worlds — expandable without limit
- Visual Level Generator tool included: batch-create new levels, verified solvable and difficulty-checked by the game’s own solver, then copy-paste them in
- Scrolling level-select screen that lays out new worlds and levels automatically
- 8 tile-flipping rule systems (7 used in the shipped levels, plus a custom influence-map rule for your own designs)
- Dynamic gameplay rules that change as you progress
- Mobile-first 9:16 portrait canvas design (390×844)
- Scales to fit any screen size without layout breaks
- Modern neon-inspired interface
- Star-based progression system (1–3 stars per level)
- Move counter and performance tracking
- Smart hint system (2 hints per level, unlimited on Level 1) — exact BFS solver on small grids, exact linear solver on large grids, so hints always lead to the solution
- Restart level functionality
- Progress saved to localStorage — levels stay unlocked after refresh
- Smooth tile flip animations and screen transitions
- Works on desktop and mobile browsers
- Touch and mouse input support
- Lightweight codebase — no JavaScript frameworks or libraries
- Zero external dependencies — fonts are self-hosted, the game runs fully offline
- Included Rule Types
The game features 8 distinct gameplay mechanics that introduce new strategic depth as levels progress:
- Cross Flip — tapped tile plus all 4 cardinal neighbors flip
- Neighbors Only — only the 4 cardinal neighbors flip (not the tapped tile)
- Full Burst — entire 3×3 area around the tapped tile flips
- Row Blast — entire row of the tapped tile flips
- Column Blast — entire column of the tapped tile flips
- Diagonal Flip — tapped tile plus its 4 diagonal neighbors flip
- Knight Move — tiles at chess knight-move distance flip
- Custom Influence Map — define your own flip pattern per tile for fully bespoke mechanics
These rule variations significantly increase replayability and prevent gameplay from becoming repetitive.
- Level Generator Included — Expand Without Coding
The bundled Level Generator page (`documentation/level-generator.html`) turns level creation into a point-and-click job:
- Batch mode — generate any number of levels at once for a chosen world, rule, and difficulty range
- Quality gate — every candidate level is solved by the game’s own hint engine before it is accepted: unsolvable boards are impossible, duplicates are discarded, and the par used for star scoring is verified against the true optimal solution
- Single mode — craft one level at a time with a live preview of the start and target boards
- Copy-paste workflow — the tool outputs ready-made code lines; paste them into one array and the new levels and worlds appear in the game automatically, complete with a scrolling level-select screen
The tool runs on the game’s actual engine files, so generated levels always behave identically in-game.
- Easy to Reskin
All visual properties are centralized in a single `constants.js` file. The `CLR` color token object and `FONT` variables control every visual element drawn on the canvas — changing a handful of values is enough to produce a completely different look.
Common reskin scenarios:
- Sci-fi neon theme
- Fantasy / medieval theme
- Minimalist monochrome theme
- Corporate training tool
- Brand-matched custom theme
Because the game is canvas-rendered, there are no HTML element styles or complex CSS selectors to untangle. The rendering code is clean and well-structured.
- Engagement & Retention
Flip Grid is designed around short gameplay sessions that encourage players to continue progressing.
Key engagement elements include:
- Increasing puzzle complexity across 6 worlds
- Distinct rule systems introduced gradually
- Instant level restarts
- Quick learning curve with unlimited hints on Level 1
- Strategic depth that rewards planning over guessing
- 3-star completion system
- Clear world-based progression path
- Progress automatically saved to localStorage
- Fast-paced sessions suitable for casual mobile users
The game is easy to learn but difficult to master, encouraging players to replay levels and achieve maximum stars.
- Technical Information
- HTML5 Canvas rendering (no DOM elements in gameplay)
- CSS3 (layout and canvas scaling only)
- Vanilla JavaScript — no frameworks, no build step
- Mobile-first architecture
- Fixed-resolution canvas (390×844) scales to any viewport
- Portrait orientation
- Touch and mouse event support
- Cross-browser compatible (Chrome, Firefox, Safari, Edge)
- localStorage for save/load persistence
- Deterministic seeded level generation — every level is reproducible from a single line of code
- Exact hint solver (BFS + GF(2) linear algebra) shared between gameplay, hints, and the level tool
- Self-hosted WOFF2 fonts — no CDN, fully offline-capable
- Lightweight source — loads in under 1 second on a standard connection
- Well-structured and easy to extend
- Full HTML + PDF documentation included
- Suitable For
- Mobile game publishers
- HTML5 game portals
- Educational platforms
- Puzzle game collections
- Developers looking for a customizable puzzle template
Flip Grid delivers an engaging puzzle experience with simple mechanics, strong replayability, and a clean codebase that can be easily customized and expanded for future projects.
