Candy Sortie is an entire, ready-to-sell HTML5 color-sorting puzzle recreation constructed completely in vanilla HTML5, CSS, and JavaScript — no engine, no construct step, no exterior libraries. The sport has 200 strong ranges. Open index.html straight, or add the folder to any host, and it runs.
Gamers faucet to pick out glass tubes and pour matching candies till each tube incorporates just one colour. A satisfying, physics-inspired pour animation tilts the supply tube, sends candies flying alongside a glowing arc, and drops them into the goal with a tender bounce.
Each visible — from the shiny glass tubes to the 12 distinct sweet skins (donuts, lollipops, cake slices, gems, and extra) — is hand-drawn in pure CSS and inline SVG. There are zero picture information, sprite sheets, or icon packs to license. The show fonts (Fredoka and Nunito) are loaded from the Google Fonts CDN through a CSS @import; with out an web connection, the browser falls again to a default system font and the sport nonetheless runs completely.
Methods to Play
Faucet a bottle to select it up, then faucet one other bottle to pour the highest candies into it. You may solely pour onto an identical colour or into an empty tube. Type each colour into its personal bottle to clear the extent and earn stars!
Core Gameplay
- 200 handcrafted ranges unfold throughout 7 distinctive Sweet Worlds (Sugar Cove, Gummy Grove, Mint Cliffs, Choco Falls, Lollipop Peaks, Rock Sweet Ridge, and Sherbet Summit).
- Easy, addictive controls — faucet to pick out, faucet to pour. All the talent curve comes from planning your strikes and managing empty tubes.
- 12+ Sweet Skins that rotate per degree to maintain visuals contemporary: strong, swirl, stripe, donut, lollipop, cake slice, cream cookie, confetti, biscuit, gem, gummy, and jellybean.
- Bankable Helpers to help gamers after they get caught:
- Undo — reverse the final transfer (3 free costs per degree).
- Trace — highlights the supply and goal tubes for a instructed pour.
- Further Tube — provides a brief empty bottle to the board to unblock the puzzle.
- 1–3 Star Ranking System — end at or beneath the “par” transfer depend to earn most stars.
- Good Trace System — follows the baked optimum resolution if the participant is on monitor, or falls again to a grasping heuristic search in the event that they go off-script.
Development & Replayability
- Winding Stage Map with a glowing path, ornamental floating candies, and world banners that unlock as the colour depend will increase.
- Persistent native progress — unlocked ranges, star counts, greatest strikes, and banked helper costs are saved routinely through
localStorage. - Helper Economic system — gamers earn further Hints and Further Tubes each few ranges, encouraging strategic use fairly than spamming.
- Victory Celebrations — clearing a degree triggers a cascading confetti particle impact and an ascending Internet Audio fanfare.
Visible & Audio Presentation
- 100% code-drawn visuals — no picture information, no sprite sheets, no third-party artwork belongings to license. Every little thing is rendered utilizing CSS gradients, clip-paths, and inline SVG.
- Clean pour animations — tubes bodily tilt towards their goal, candies fly alongside a curved arc with a glowing path, and the receiving tube bounces on influence.
- Deep parallax house display screen with sunburst rays, glowing blobs, and drifting background candies.
- Google Fonts typefaces (Fredoka & Nunito) loaded through the Google Fonts CDN — requires an web connection to fetch; falls again to system fonts if offline. Google Fonts is a third-party exterior service exterior of the creator’s management.
- Synthesized Internet Audio sound results — liquid “glug” sweeps, fizzy noise bursts, choice blips, and victory arpeggios generated completely in code. No audio information to host.
- In-game “Methods to Play” information accessible from the principle menu.
- Sound Toggle — persistent mute/unmute button on the house display screen and degree map.
What’s Included
| File | Goal |
|---|---|
SweetSortie/index.html |
Web page markup solely — no inline types or scripts |
SweetSortie/belongings/css/model.css |
All styling, together with the Google Fonts import and CSS sweet shapes |
SweetSortie/belongings/js/script.js |
All recreation logic, 200 ranges, pour guidelines, save knowledge, and synthesized audio |
Documentation/documentation.html |
Full setup, customization, and FAQ documentation |
No construct instruments, no set up, nothing to compile.
Technical Specs
- Constructed with: Pure HTML5, CSS3, vanilla JavaScript (DOM-based rendering with CSS3 transitions and the Internet Animations API)
- Dependencies: None (Zero exterior JS libraries)
- Responsive: Sure, fluid structure scales completely from small cellphones to huge desktop home windows
- Browser compatibility: All present variations of Chrome, Safari, Firefox, and Edge — desktop and cellular
- Web requirement: An web connection is required to load fonts from the Google Fonts CDN (a third-party exterior service). If unavailable, the browser falls again to a default system font and the sport nonetheless runs usually. All recreation logic, visuals, and audio are generated in code with no different exterior calls.
Assist Scope
Assist covers assist getting the sport operating as delivered and clarifying tips on how to use the customization factors already uncovered in belongings/js/script.js (like modifying the extent knowledge, adjusting the colour palette, or tweaking helper spawn charges). It doesn’t lengthen to constructing customized options not current within the unique merchandise.
