Sweet Sortie | HTML5 Ball Sort Puzzle Game

Sweet Sortie is a complete, ready-to-sell HTML5 color-sorting puzzle game built entirely in vanilla HTML5, CSS, and JavaScript — no engine, no build step, no external libraries. The game has 200 solid levels. Open index.html directly, or upload the folder to any host, and it runs.

Players tap to select glass tubes and pour matching candies until every tube contains only one color. A satisfying, physics-inspired pour animation tilts the source tube, sends candies flying along a glowing arc, and drops them into the target with a soft bounce.

Every visual — from the glossy glass tubes to the 12 distinct candy skins (donuts, lollipops, cake slices, gems, and more) — is hand-drawn in pure CSS and inline SVG. There are zero image files, sprite sheets, or icon packs to license. The display fonts (Fredoka and Nunito) are loaded from the Google Fonts CDN via a CSS @import; without an internet connection, the browser falls back to a default system font and the game still runs perfectly.

How to Play

Tap a bottle to pick it up, then tap another bottle to pour the top candies into it. You can only pour onto a matching color or into an empty tube. Sort every color into its own bottle to clear the level and earn stars!

Core Gameplay

• 200 handcrafted levels spread across 7 unique Candy Worlds (Sugar Cove, Gummy Grove, Mint Cliffs, Choco Falls, Lollipop Peaks, Rock Candy Ridge, and Sherbet Summit).
• Simple, addictive controls — tap to select, tap to pour. The entire skill curve comes from planning your moves and managing empty tubes.
• 12+ Candy Skins that rotate per level to keep visuals fresh: solid, swirl, stripe, donut, lollipop, cake slice, cream cookie, confetti, biscuit, gem, gummy, and jellybean.
• Bankable Helpers to assist players when they get stuck:
  • Undo — reverse the last move (3 free charges per level).
  • Hint — highlights the source and target tubes for a suggested pour.
  • Extra Tube — adds a temporary empty bottle to the board to unblock the puzzle.
• 1–3 Star Rating System — finish at or under the “par” move count to earn maximum stars.
• Smart Hint System — follows the baked optimal solution if the player is on track, or falls back to a greedy heuristic search if they go off-script.

Progression & Replayability

• Winding Level Map with a glowing path, decorative floating candies, and world banners that unlock as the color count increases.
• Persistent local progress — unlocked levels, star counts, best moves, and banked helper charges are saved automatically via localStorage.
• Helper Economy — players earn extra Hints and Extra Tubes every few levels, encouraging strategic use rather than spamming.
• Victory Celebrations — clearing a level triggers a cascading confetti particle effect and an ascending Web Audio fanfare.

Visual & Audio Presentation

• 100% code-drawn visuals — no image files, no sprite sheets, no third-party art assets to license. Everything is rendered using CSS gradients, clip-paths, and inline SVG.
• Smooth pour animations — tubes physically tilt toward their target, candies fly along a curved arc with a glowing trail, and the receiving tube bounces on impact.
• Deep parallax home screen with sunburst rays, glowing blobs, and drifting background candies.
• Google Fonts typefaces (Fredoka & Nunito) loaded via the Google Fonts CDN — requires an internet connection to fetch; falls back to system fonts if offline. Google Fonts is a third-party external service outside of the author’s control.
• Synthesized Web Audio sound effects — liquid “glug” sweeps, fizzy noise bursts, selection blips, and victory arpeggios generated entirely in code. No audio files to host.
• In-game “How to Play” guide accessible from the main menu.
• Sound Toggle — persistent mute/unmute button on the home screen and level map.

What’s Included

No build tools, no installation, nothing to compile.

Technical Specifications

• Built with: Pure HTML5, CSS3, vanilla JavaScript (DOM-based rendering with CSS3 transitions and the Web Animations API)
• Dependencies: None (Zero external JS libraries)
• Responsive: Yes, fluid layout scales perfectly from small mobile phones to wide desktop windows
• Browser compatibility: All current versions of Chrome, Safari, Firefox, and Edge — desktop and mobile
• Internet requirement: An internet connection is needed to load fonts from the Google Fonts CDN (a third-party external service). If unavailable, the browser falls back to a default system font and the game still runs normally. All game logic, visuals, and audio are generated in code with no other external calls.

Support Scope

Support covers help getting the game running as delivered and clarifying how to use the customization points already exposed in assets/js/script.js (like editing the level data, adjusting the color palette, or tweaking helper spawn rates). It does not extend to building custom features not present in the original item.