Gem Cascade
Design brief
Drop glowing gems into a 5-column grid and merge matching ones to climb the tier ladder before your board fills up.
Date: 2026-07-08 Genre: merge puzzle Platform: Mobile (portrait, touch-first) Status: Playable build
Concept
Gem Cascade is a portrait drop-and-merge puzzle. You control a stream of colored gems—Ruby, Sapphire, Emerald, Topaz, Amethyst, Diamond, Crystal, Prism—and place them one by one into a five-column grid. When two identical gems end up adjacent (horizontally or vertically), they merge into the next-tier gem automatically. The goal is to keep merging and scoring before the grid overflows. Chain reactions cascade naturally, creating satisfying combos from a single well-placed drop.
How to play
Aim at a column (tap/move finger on mobile; move mouse or use arrow keys on desktop) to see the ghost landing preview, then tap/click—or press space/enter/arrow-down—to drop the current gem. The next gem is shown in the header. Identical adjacent gems merge automatically and gravity pulls remaining gems down, potentially triggering further chain merges. The game ends when any column is full and you try to add another gem. Restart at any time with the on-screen "Play Again" button or the R key.
Core mechanics
- Tier system — Eight gem tiers (1-8): Ruby → Sapphire → Emerald → Topaz → Amethyst → Diamond → Crystal → Prism. Merging two of the same tier yields one of the next.
- Adjacency merge — Any two same-tier gems that share an edge (up/down/left/right) trigger a merge the moment they touch.
- Cascade gravity — After each merge, gems fall to fill gaps; the board is re-scanned for new matches, repeating until no merges remain.
- Ghost preview — A semi-transparent gem shows exactly where the drop will land in the selected column.
- Column drop placement — Five columns only; full-column drops end the game immediately.
Progression & scoring
Each merge awards tier × 10 points. A merge chain (e.g., four Ruby drops that cascade into two Sapphires that cascade into one Emerald) multiplies the score naturally. Spawned gems are weighted toward lower tiers (Rubies ~30 %, Sapphires ~25 %, dropping to ~1 % for Crystals), so reaching Prism is a rare achievement. Difficulty creeps up as the board fills with high-tier gems that are harder to match.
Look & feel
Dark indigo backdrop with a glowing purple phone bezel. Gems are rendered as faceted diamond shapes with per-tier radial gradients and colored glow shadows (red, blue, green, gold, purple, cyan, white, gold). Header shows live score, all-time best (localStorage), and the next incoming gem. Audio is WebAudio-generated: a soft triangle-wave thud on drop and a rising two-note chime on merge (pitch scales with tier). No external assets—pure canvas + CSS.
What makes it fun
- Instant cascade payoff — placing one gem can set off a satisfying multi-step chain that clears a quarter of the board.
- Read-ahead strategy — the NEXT preview and the ghost landing preview combine to reward players who think two moves ahead.
- Tier escalation — watching a pair of Rubies eventually become a Prism through careful accumulation gives a slow-burn progression feel.
- Tight column management — five columns means every drop matters; bad habits compound quickly into an unrecoverable board state.