🍉 Watermelon Game

#game

A single-file implementation of the viral Suika-style fruit-merging puzzle game. Drop fruits into a portrait-shaped container, merge identical pairs to evolve them up the chain, and try to make a watermelon — without overflowing the danger line at the top.

How to Play

1. Tap GAME START to begin.
2. Move your finger (or mouse) left/right across the play area to aim the fruit hovering at the top.
3. Tap or lift your finger to drop the fruit straight down.
4. When two of the same fruit touch, they merge into the next fruit in the chain and you score points.
5. Keep merging until you make a 🍉 watermelon — the goal!
6. If any fruit's center stays above the dashed red line for 1.5 seconds, it's game over.
7. If a fruit is launched fully off the top of the canvas, it's an instant game over.

Features

Fruit Evolution Chain

Eleven tiers, each merge produces the next. Small fruits spawn most often so merging stays the core challenge.

Tier	Fruit	Score	Spawnable
1	🍒 Cherry	1	✓
2	🍓 Strawberry	3	✓
3	🍇 Grape	6	✓
4	🍊 Orange	10	✓
5	🟠 Persimmon	15	✓
6	🍎 Apple	21	merge only
7	🍐 Pear	28	merge only
8	🍑 Peach	36	merge only
9	🍍 Pineapple	45	merge only
10	🍈 Melon	55	merge only
11	🍉 Watermelon	66	merge only

Evolution Chart

A horizontal "Evolution" strip below the playfield shows the full progression. Higher tiers stay hidden as "?" until you produce them for the first time. The first sighting plays a bright chime and a brief pop animation.

Double Watermelon Bonus

Once you have a watermelon, you can keep going. Bumping two watermelons together makes both disappear, awarding +100 bonus points along with a victory fanfare, confetti shower, and a "Double watermelon!" toast.

Danger Zone

A dashed red line sits near the top of the canvas. When any fruit's center crosses above it, the area above the line pulses red as a 1.5-second countdown runs. Brief bounces don't count — the fruit has to stay above. Freshly-dropped fruits get a 1.2-second grace period before the check engages.

Sound Effects

All sounds are synthesized on the fly — no external audio files.

• Soft "tup" on drop
• Tiny rounded tap on hard collisions (stacks stay quiet)
• Pentatonic pop on every merge, pitch rising with tier
• Bright arpeggio when a new tier is unlocked
• Watermelon fanfare: 2-second sustained arpeggio with a 12-burst confetti shower
• Three-note descent on game over
• Two-note ascent on restart

A mute button (🔊 / 🔇) in the bottom row silences everything. Audio auto-resumes when the page returns from background (tab switch, screen lock).

Quality-of-Life Details

Two small icon buttons sit below the playfield:

• 🔊 / 🔇 Mute (bottom-left): Silence everything.
• 🏠 Home (bottom-right): Reset the board and return to the start screen.

Other niceties:

• Drop cooldown (500 ms) — prevents accidental double-drops.
• Weighted spawning — small fruits show up more often so merging stays the challenge.
• Live rescale on resize — the in-progress game stays consistent if you rotate or resize the window.
• Game-over overlay with final score and a Play Again button.

Design

• Portrait layout (9:16) sized in vw units — fits entirely on a phone without scrolling.
• White background with a warm dark-brown outline on every fruit and UI element for a hand-drawn picture-book feel.
• Each fruit has a face (two eye strokes and a smiling arc) plus per-fruit surface markings — strawberry seeds, orange segment lines, pineapple cross-hatch, watermelon stripes, etc. — that rotate with the body.
• Fredoka + Jua font (Google Fonts) for a rounded, child-friendly look.

Tech

• Single HTML file — no build step, no external assets (except a single Google Fonts link).
• Canvas 2D for the playfield, inline SVG for the Next preview and Evolution chart icons.
• Web Audio API for all sound — synthesized tones, no audio files.
• Custom physics — no external engines.