Magic Potion Shop – HTML5 Sorting Puzzle Game
Magic Potion Shop is a cozy, colorful match-3 sorting puzzle game made with pure HTML5 and JavaScript (Canvas 2D). Players run a little witch’s shop: drag potions and magical ingredients between the shelves and put three of a kind together to brew them in the cauldron. Every shelf hides more items behind the front row, so each cleared shelf reveals the next puzzle. Easy to learn, hard to put down, and made for mobile and desktop browsers.
The game is fully finished and ready to publish: 100 levels, 3 game modes, daily rewards, achievements, a collection book, a shop with pets, original music and sound effects, and a living animated world on every screen. No frameworks, no build step and no server code are needed. Upload the folder to any web host, or open index.html directly from your computer.
Gameplay
- Drag and drop (or tap to select, tap to place) potions between shelf slots
- Match 3 identical items on one shelf to brew them
- Hidden back rows move forward when a shelf is cleared
- Combo system: chain matches quickly for score multipliers and praise pop-ups
- Cauldron power meter: every match fills the cauldron, which brews a free spell
- Star rating (1 to 3 stars) based on the time left
- Out-of-time continue offer (+20 seconds)
3 Game Modes
- Adventure: 100 levels on a scrolling, layered map with 10 chapters and a boss “Master Recipe” level at the end of each chapter
- Rush: endless mode with customers who order potions, a refilling board and a best-score record
- Daily Challenge: a new puzzle every day, the same for every player on that date
Obstacles and Spells
- Hidden layers, frozen potions, chained shelves, magic fog and shiny bonus potions
- 4 spells (boosters): Crystal Ball (hint), Whirlwind (shuffle), Frost (freeze the timer) and Magic Wand (auto-brew a set)
- Smart hint system that looks ahead for the best move
- Daily login rewards: 7-day calendar with streaks and a treasure chest on day 7
- Fortune Wheel: one free spin every day, extra spins for coins
- 28 achievements (trophies) with progress bars, coin rewards and pop-up notifications
- Grimoire collection book: discover all 36 items, each with a name and a short story
- Shop: buy spells with coins
- Familiars (pets): Cat, Owl and Baby Dragon, each with its own gameplay perk
- Coins economy, stars and level progress saved automatically (localStorage)
- Interactive tutorial cards that appear when a new mechanic is introduced
Graphics and Sound
- 36 animated items (18 potions and 18 magical ingredients), each with an 8-frame looping animation
- Animated logo, shop, cauldron, familiars, customers, map and full UI kit, all as PNG sprite sheets
- Living world: swinging lanterns, flickering candles, cauldron steam, bats, butterflies, fairies, a witch flying past the moon and more
- Particles, screen effects and smooth animations everywhere
- Original music (menu and gameplay tracks with cross-fade) and 24 magical sound effects
- Separate music and sound toggles, fullscreen button
Technical Features
- 100% HTML5 and JavaScript (Canvas 2D), no external libraries
- Made for modern desktop and mobile browsers (Android and iOS)
- Portrait 540×960 design that scales to any screen or iframe and keeps its 9:16 aspect ratio
- Crisp on high-DPI (Retina) screens
- Mouse and touch input
- Runs from a web server or directly from your computer (file://)
- Pauses and mutes automatically when the browser tab is hidden
- Easy to embed in an iframe or on HTML5 game portals
Easy to Customize
- One config file for timers, scores, star limits, rewards, spell prices, daily rewards, wheel prizes, familiars and unlock levels
- Readable level file: every level is written in a clear, commented format, so you can edit levels or add new ones and the map grows automatically
- Item names, stories, achievements and tutorial texts in one data file
- Well-organized, commented source code
- Optional hooks for ads and analytics (see the Ads and Analytics section below)
What You Get
- Full game source code (HTML, JavaScript)
- All graphics as PNG sprite sheets
- Music and sound effects (MP3)
- Detailed HTML documentation (installation, customization, levels, art, ads hooks, FAQ)
Ads and Analytics Ready (Third-Party Services)
Important: the ad and analytics integrations are optional hooks only. Google AdSense, Google AdMob, GameDistribution, CrazyGames, Poki or GameMonetize are external services: each one requires its own external account (usually with an approval process), has its own terms and policies, and has its own specific costs and revenue-sharing model. None of these accounts, services or SDKs are included with this item.
- Ready-made hooks in config.js: game start, level start, level complete, level fail, Rush end and a rewarded continue (+20 seconds)
- Each hook can wait for a Promise, so interstitial and rewarded ads fit in easily
- Can be connected to services such as Google AdSense, Google AdMob, GameDistribution, CrazyGames, Poki or GameMonetize (external accounts required; each platform has its own costs or revenue-sharing model)
- Nothing is connected by default: the game works fully without any ad or analytics service
Third-party services disclaimer: Magic Potion Shop does not include any ad network or analytics account, SDK or service. Services such as Google AdSense, Google AdMob, GameDistribution, CrazyGames, Poki or GameMonetize are provided by third parties: each one may require its own external account and approval, has its own terms and policies, and may involve fees, revenue sharing or other costs. You are responsible for creating and managing these accounts, for complying with their terms and with the laws that apply to you (for example privacy and cookie-consent rules such as GDPR), and for any costs they involve. The author of this item is not affiliated with these companies and is not responsible for their services.
Support
If you have any questions or need help with the installation or customization, feel free to contact me through my profile page. If you like the game, please consider rating it. Thank you!