Game Design: Mash Match — Swap, Match, MASH!

🥔 Mash Match — Swap, Match, MASH!

Genre: Match-3 Puzzle
Platform: Web (HTML5 Canvas, vanilla JavaScript)
Tagline: "Three of a kind? That's a mash combo, baby."

The Pitch

It's Candy Crush, but with potatoes. And attitude. Swap potato varieties on a grid to match 3+ of the same type. Chain combos to trigger MASH ATTACKS — screen-clearing explosions of buttery goodness. Each level introduces new potato types, obstacles (rocks in the soil!), and objectives. Simple to learn, impossible to put down.

Core Loop (Every 30 Seconds)

1. Scan the board for potential matches
2. Swap two adjacent potatoes
3. Match 3+ of the same variety — they pop and score
4. Cascade! New potatoes fall from above, triggering chain reactions
5. Use power-ups from big combos to clear tough spots
6. Beat the objective before running out of moves

Key Mechanics

1. Potato Varieties (The Tiles)

Six base potato types, each with a distinct color and face:
🟡 Goldie (Yukon Gold) — cheerful, round
🟤 Rusty (Russet) — rugged, oval
🟣 Violet (Purple Potato) — mysterious, cool
🔴 Ruby (Red Potato) — fiery, small
🍠 Sweetie (Sweet Potato) — warm, elongated
👆 Slim (Fingerling) — tall, skinny, sassy

2. Mash Combos (Power-Ups)

• Match 4 in a row → Creates a Baked Potato (clears entire row or column when matched)
• Match 5 in an L/T shape → Creates a Loaded Potato (explodes in a 3x3 radius)
• Match 5 in a row → Creates a Golden Masher (clears ALL of one potato type from the board)
• Combine two power-ups → Mega combo with screen shake and butter splash VFX

3. Soil Obstacles

• Rocks — immovable, must match adjacent to destroy
• Frozen Soil — potato trapped in ice, match it to thaw
• Weeds — spread each turn if not cleared, covering tiles
• Buried Treasure — match above it multiple times to dig it up (bonus points)

4. Level Objectives

• Score Target — reach X points in Y moves
• Collection — collect N of a specific potato type
• Dig Down — get buried treasures to the bottom of the board
• Clear the Weeds — remove all weeds before they take over

5. Star Rating & Replay

Each level awards 1-3 stars based on score. Stars unlock new worlds. Players replay levels to 3-star them and unlock bonus content.

Progression

World	Levels	New Element
1. The Garden	1-15	Basic matching, tutorial
2. Rocky Fields	16-30	Rock obstacles
3. The Frost	31-45	Frozen soil + 6th potato type
4. Weed Invasion	46-60	Spreading weeds
5. The Deep	61-75	Buried treasure objectives

MVP: World 1 (15 levels) is the target. Each world can be added as a content update.

Art Style

Bright, bubbly cartoon art. Think Cut the Rope meets Plants vs Zombies. Each potato has a tiny face with 2-3 expressions (idle, matched/happy, about to expire/worried). Backgrounds are painted garden scenes with parallax layers. UI uses a rustic wood-and-chalkboard aesthetic. Particle effects: butter splashes, steam puffs, sparkles on combos.

Sound Design

• Match sounds: Satisfying pop/squish (pitch increases with chain length)
• Combo sounds: Sizzling (baked potato), crunchy smash (loaded potato), magical chime (golden masher)
• Background music: Upbeat ukulele + light percussion, farm-cozy vibes. Tempo increases in final 5 moves.
• UI sounds: Wooden click for buttons, chalk scratch for menus
• Failure: Sad trombone + potato wilting sound
• Victory: Triumphant jingle with crowd of potatoes cheering

Monetization (XRP Integration)

• Free to play, all levels accessible
• XRP Tip Jar: "Buy the dev a baked potato" — micro-tips via XRPL
• Cosmetic Skins: Unlock potato outfits (hats, sunglasses, costumes) purchasable with XRP
• Weekly Tournament: Entry fee in XRP, prize pool distributed to top 10 scorers
• NFT Level Editor: Future — players create levels, mint as NFTs, earn XRP when others play them

MVP Scope (1-2 Day Build)

• 8x8 grid with 5 potato types (drop 6th for MVP)
• Swap + match-3 detection + gravity/cascade
• 1 power-up (match-4 baked potato)
• 15 levels with score targets only
• Basic particle effects on match
• Score display + move counter + star rating
• Level select screen
• Sound effects (can use free SFX packs)

---

📦 Asset Requirements

Sprites & Images

1. Potato tiles (6) — 64x64 each, cartoon potato with face, distinct color per variety
2. Baked Potato power-up — 64x64, glowing potato with foil wrap and steam
3. Loaded Potato power-up — 64x64, potato overflowing with toppings
4. Golden Masher power-up — 64x64, shining golden potato masher tool
5. Rock obstacle — 64x64, grey boulder in soil
6. Frozen soil overlay — 64x64, translucent ice crystal layer
7. Weed tile — 64x64, creeping green vine
8. Buried treasure — 64x64, partially visible golden chest in dirt
9. Background (per world) — 800x600, painted garden/field scene
10. UI frame — Wooden board border for the game grid
11. Star icons — Empty, filled, animated (3 states)
12. Button sprites — Play, Retry, Menu, Next Level
13. Logo — "Mash Match" title art
14. Match particles — Butter splash, sparkle, steam puff (sprite sheets)

Sound Effects

1. Potato swap (whoosh)
2. Match pop (x3 pitch variations)
3. Cascade chain (rising pitch sequence)
4. Baked potato activation (sizzle + boom)
5. Loaded potato explosion (crunchy blast)
6. Golden masher (magical sweep)
7. Rock break (stone crack)
8. Ice thaw (crystalline shatter)
9. Weed clear (snip/pull)
10. Level complete (fanfare)
11. Level fail (sad trombone)
12. Button click (wood tap)
13. Star earned (chime, x3 pitches)

Music

1. Main gameplay loop — upbeat ukulele, 90-120 BPM, 60s loopable
2. Menu/level select — chill acoustic guitar, 70 BPM
3. Tension variation — same melody, faster tempo for final moves

---

🔗 The Prompt Chain (Build Guide for AI Agents)

These 5 prompts, given sequentially to a coding AI, will produce a playable Mash Match game.

Prompt 1: Project Setup + Core Grid

Build a match-3 puzzle game called "Mash Match" using vanilla JavaScript and HTML5 Canvas.

Setup:
- Single index.html with embedded CSS and JS (or separate files, your choice)
- Canvas sized 480x600 (grid area 480x480, bottom 120px for UI)
- 8x8 grid, each cell is 60x60 pixels

Core grid system:
- Grid stored as 2D array of integers (0-4, representing 5 potato types)
- On init, fill grid randomly ensuring no initial matches of 3+
- Render each cell as a colored circle with a simple face (two dots for eyes, curve for mouth)
- Colors: gold (#FFD700), brown (#8B6914), purple (#7B2D8B), red (#DC3545), orange (#FF8C00)

Implement:
1. Click-to-select: clicking a cell highlights it with a border
2. Click adjacent cell to swap: animate the two cells swapping positions (200ms tween)
3. After swap, check for matches (3+ in a row/column of same type)
4. If no match found, swap back (invalid move)
5. If match found, remove matched cells (fade out animation, 200ms)
6. Gravity: cells above empty spaces fall down (animate, 150ms per row)
7. Refill: new random cells drop in from top
8. Chain detection: after gravity + refill, check for new matches (repeat until stable)

Use requestAnimationFrame for smooth rendering. The game should be playable after this prompt.

Prompt 2: Scoring, Moves, Levels & Power-Ups

Extend the Mash Match game with scoring, move limits, levels, and one power-up.

Scoring:
- Base: 10 points per matched potato
- Chain bonus: multiply by chain depth (chain 1 = x1, chain 2 = x2, etc.)
- Display score in the UI area below the grid (large font, updates with pop animation)

Move System:
- Each swap that results in a match costs 1 move
- Invalid swaps don't cost moves
- Display moves remaining next to score

Level System:
- Level data: array of objects { targetScore, maxMoves, gridTypes (3-5, how many potato varieties) }
- Create 15 levels with increasing difficulty:
  - Levels 1-5: 3-4 potato types, generous moves, low targets
  - Levels 6-10: 5 types, moderate moves, medium targets
  - Levels 11-15: 5 types, tight moves, high targets
- Level complete when score >= target before moves run out
- Star rating: 1 star = target met, 2 stars = target x1.5, 3 stars = target x2
- Show results screen with stars and "Next Level" / "Retry" buttons

Power-Up — Baked Potato:
- When player matches 4 in a row, instead of removing all 4, leave behind a "Baked Potato" special tile
- Render it as a glowing version of the matched type with a "B" overlay
- When the Baked Potato is part of a future match, it clears its entire row OR column (whichever direction it was created from)
- This should trigger cascades and feel satisfying

Level Select Screen:
- Show before gameplay: grid of 15 level buttons
- Locked levels show as grey, unlocked show level number + stars earned
- Level 1 unlocked by default, each completion unlocks the next
- Save progress to localStorage

Prompt 3: Visual Polish & UI

Upgrade Mash Match visuals from placeholder circles to polished game art.

Potato Rendering (no external assets needed — draw with Canvas):
- Each potato: rounded rectangle body with variety-specific color
- Two oval white eyes with black pupils (slightly different positions per type for personality)
- Small curved mouth (happy by default, worried expression when moves < 5)
- Subtle shadow beneath each potato
- When selected: gentle "breathing" scale animation (1.0 to 1.05, oscillating)

Match Animation Upgrade:
- On match: potatoes squash vertically (scale Y to 0) then particles burst out
- Particles: 8-12 small circles in the potato's color, flying outward with gravity, fading
- On chain: screen does a subtle shake (±2px, 100ms)
- On Baked Potato activation: white flash across the cleared row/column

Background:
- Gradient background: warm earth tones (top: sky blue #87CEEB, bottom: soil brown #8B7355)
- Grid background: slightly darker rounded rectangle with subtle border
- Decorative: small grass tufts along the bottom edge (draw with bezier curves)

UI Improvements:
- Score: chunky white font with dark outline, bounces when updated
- Moves: same style, turns red when < 5 remaining
- Level complete overlay: dark semi-transparent background, centered panel with stars (animate them flipping in one by one), score breakdown
- Level select: wooden-plank styled buttons, hand-drawn font style
- Add a title screen: "MASH MATCH" in large bubbly letters with a big potato mascot (draw a large version of Goldie with a chef hat)

Transitions:
- Level start: grid slides in from bottom
- Level complete: grid items pop away one by one (staggered, satisfying)

Prompt 4: Sound, Juice & Game Feel

Add sound effects and final "game juice" to Mash Match. Use the Web Audio API to generate all sounds procedurally (no external audio files needed).

Sound Effects (generate with oscillators + filters):
1. Swap: quick pitch sweep up (100ms)
2. Match: bubbly pop — short sine wave with fast decay. Pitch based on chain: chain 1 = C4, chain 2 = E4, chain 3 = G4, etc.
3. Invalid swap: low buzz (100ms, square wave, low freq)
4. Baked potato create: rising shimmer (200ms, triangle wave sweep)
5. Baked potato activate: whoooosh (300ms, noise + bandpass filter sweep)
6. Level complete: ascending arpeggio C-E-G-C (each note 150ms, sine wave)
7. Level fail: descending Bb-G-Eb (each 200ms, slightly detuned for sadness)
8. Button click: short tick (50ms, high freq sine)
9. Star awarded: bright chime (100ms, high sine with reverb/delay)

Background Music (procedural):
- Simple looping melody using Web Audio:
  - Ukulele-like plucked string sound (Karplus-Strong synthesis or short sine with fast decay)
  - 4-bar loop in C major, quarter notes at 120 BPM
  - Bass note on beat 1 of each bar
  - Play continuously during gameplay, pause on menus
  - Volume control button in corner

Game Juice:
- Combo counter: when chain > 1, show floating "x2!", "x3!" text that rises and fades
- Score popups: each match shows "+30" floating up from the match location
- Screen flash: subtle white overlay flash (50ms, 10% opacity) on big combos
- Potato idle animation: occasional blink (close eyes for 150ms every 3-5 seconds, random per potato)
- Hint system: if no input for 5 seconds, one valid move's potatoes gently glow/pulse

Prompt 5: Final Polish & Deploy

Final polish pass on Mash Match, then prepare for deployment.

Polish:
- Add a "How to Play" overlay accessible from title screen (simple 3-panel tutorial with diagrams)
- Add a persistent high score per level (localStorage)
- Add a total stars counter on the level select screen ("⭐ 23/45")
- Mobile support: handle touch events (touchstart, touchmove, touchend) for swapping
  - Detect swipe direction on touch to determine swap direction
  - Prevent default touch behaviors (scrolling, zooming)
  - Responsive canvas: scale to fit viewport while maintaining aspect ratio
- Add viewport meta tag for mobile
- Pause when tab is hidden (visibilitychange event)

Performance:
- Only redraw changed cells, not the entire canvas each frame (dirty rectangles)
- Object pool for particles (pre-allocate, reuse)
- Throttle cascade checks to avoid frame drops on long chains

Deployment Prep:
- Ensure everything is in a single index.html file (inline all JS and CSS)
- Add meta tags: title, description, Open Graph tags for social sharing
- Minify inline JS (or at least remove console.logs)
- Add a favicon (base64 inline, tiny potato icon)
- Add a "Made by Hot Potato Games — hotpotatogames.com" footer link
- Test: load index.html directly in browser, should be fully playable with no server needed

Output the complete, final index.html file.

---

🎨 Asset Generation Prompts (DALL-E)

For teams wanting custom art instead of Canvas-drawn graphics:

Potato Tile Set

"Sprite sheet of 6 cute cartoon potato characters on transparent background, arranged in a row. Left to right: golden Yukon Gold, brown Russet, purple potato, red potato, orange sweet potato, thin fingerling potato. Each has tiny dot eyes and a smile. Pixel art style, 64x64 each, game asset, clean edges, vibrant colors."

Power-Up Tiles

"Three game power-up icons on transparent background: 1) a baked potato wrapped in foil with steam rising, glowing golden, 2) a loaded baked potato overflowing with cheese, bacon, and sour cream, sparkling, 3) a golden potato masher tool radiating light beams. Cartoon style, 64x64 each, game asset."

Game Background

"A warm sunny garden scene for a puzzle game background. Blue sky with fluffy clouds at top, rolling green hills in middle, rich brown soil with small potato plants at bottom. Soft watercolor cartoon style, warm lighting, no characters, suitable as a game background, 800x600."

UI Frame

"A rustic wooden picture frame border for a game UI, with carved potato vine decorations in the corners. Warm brown wood grain texture, slightly weathered, cartoon style, transparent center, game asset, 520x520."

Title Logo

"Game logo text reading 'MASH MATCH' in bubbly, rounded 3D letters. Letters are golden-brown like baked potatoes with butter melting on top. Small cartoon potato character sitting on the M waving. Sparkles and steam effects. Transparent background, game title art."

Designed with 🥔 by Hot Potato Games — where every game starts with a potato.