What to Change First in Color Sort Puzzle Source Code (Water Sort Style)
Mochi Monsters as a worked example: the rules, the files, the one config file and the changes that need a rebuild.
Buying color sort puzzle source code makes sense when you want a water sort style game on your own site without writing the move rules, the level generator and the save system yourself. Mochi Monsters is that kind of package: 60 levels in three worlds, an Endless mode, readable TypeScript and a ready-to-host game folder, for $39 at list price.
The rule behind water sort, ball sort and Mochi Monsters is the same: you can only move onto an empty container or onto a matching top. What separates one template from another is everything around that rule. This guide walks through the package in the order a buyer meets it, and ends with the changes you can make in five minutes and the ones that need a developer.
The sorting rule, and the two twists on top of it
Players tap one nest, then another. The group of jelly friends on top hops across only if the target nest is empty or its top friend is the same species. A board is solved when every nest holds a single species. Hint, Undo and Restart are built in.
Two mechanics keep the 60 levels from feeling like one level repeated. A shell lid covers a nest and opens once you fill that nest with the species shown on the lid; Undo may close it again. Linked tide nests swap places when one of them becomes empty, which changes the board under the player's plan.
These matter to a buyer because they are already written and tested. Adding a twist like this to a plain sort game is the kind of work that takes longer than expected, mostly in the edge cases around undo.
What the color sort puzzle source code includes
- 60 campaign levels across Sugar Meadow, Bubble Beach and Mushroom Village, 20 in each world.
- A seeded Endless mode that opens after level 20.
- A collection album, an interactive garden and six hats bought with Sugar Drops earned in play.
- Touch and mouse controls, local saves and a reduced motion option.
- A ready-to-host game/ folder, readable JavaScript and TypeScript source, configuration, tests and licence notices.
- An illustrated offline guide in 14 languages, with screenshots in English.
The interface has 14 languages: English, Portuguese, Spanish, French, German, Italian, Dutch, Polish, Turkish, Russian, Indonesian, Japanese, Korean and Simplified Chinese. The guide follows the reader's language automatically.
The stack is TypeScript and JavaScript on Canvas 2D, with Web Audio. Files include HTML, CSS, JavaScript, JSON, TypeScript, WebP, PNG and MP3.
How the project is laid out
Think of the package as three layers, each needing a different level of effort.
Layer 1: the hosted game
The game/ folder is complete. Upload its contents to static HTTP(S) hosting and it plays. Nothing here needs a build.
Layer 2: the config file
mochi.config.js sits next to index.html. It sets the browser title, the logo, the starting language and the save key. Edit a value, upload the file, reload the page. Still no build.
Layer 3: the TypeScript source
Rules, art, levels and hat prices live in the source. Changing them means editing TypeScript and rebuilding with npm, which needs Node.js 22.13 or newer. The source includes level-baking tools and 52 automated tests that cover rules, levels, saving and translations.
What to change first in a color sort template
Here is the order we suggest, from no-build changes to developer work.
- Title and logo in mochi.config.js, so the browser tab and the start screen carry your brand.
- Starting language in the same file, if most of your players are not English speakers.
- Save key: set it once before launch, then leave it alone. Changing it on a live site makes players lose their progress.
- Art and colours of the jelly friends, if you need a full reskin. This is source work.
- Hat prices and the reward economy, also in the source.
- New levels, using the level-baking tools, then the tests.
For many sites the first three steps are the whole job. A full reskin, on the other hand, means replacing every creature, nest and background in three worlds, and that is where most of the time goes. Plan for it honestly before you promise a client a date.
White label is allowed: your name and logo, or your client's, can replace ours anywhere in the game.
Hosting it, embedding it and taking it further
Upload the contents of game/ to any static HTTP(S) host, in a subfolder if you like. No database, PHP or Node.js service is needed to play. Opening the files from disk with file:// does not work, so test from a local or real web server.
The game runs in current Chrome, Edge, Firefox and Safari on a computer, tablet or phone. Progress is kept in the browser's local storage, with no sync between devices. It is not an installable offline app: players load it from your web address.
There is no native app project in the package. If you want it in an app store, connected to a portal SDK or installed on your server, we quote that work per project.
Ask for a quote for a reskin, hosting or an app version
What Mochi Monsters does not include
The edition has no online accounts, cloud saves, global leaderboards, real-money purchases or advertising SDK. Native app projects, hosting and custom development are not included. There are no playable campaigns beyond the three worlds; Endless mode is what keeps the game going after them.
If you plan to show ads, the licence allows advertising monetisation of your end product, but connecting an ad network is work on your side or a quoted job on ours.
Licence and price in one paragraph
One purchase gives a perpetual, non-exclusive licence to use the edition in one end product, yours or one client's. Players may play free or through advertising monetisation. You may change the code, art and audio inside that product, but you may not resell or share the template, its source or its assets on their own, as a kit or inside another product for developers. Support lasts 6 months, or 12 with the extension at checkout, and covers installing and using the files and fixing reproducible defects; the licence does not end with support. The list price is $39; until 30 November 2026 a Black Friday promotion takes 15% off every template, so Mochi Monsters costs $33.15, and from 1 December prices return to list.
FAQ
Is Mochi Monsters a water sort game?
It uses the same core rule: a group can only move into an empty nest or onto a matching friend. Instead of liquid in tubes, players sort jelly creatures into nests, with shell lids and tide nests added on top.
Do I need to build the game before uploading it?
No. Upload the contents of game/ to HTTP(S) hosting. Source development is optional.
What can I change without a rebuild?
The browser title, the logo, the starting language and the save key, all in mochi.config.js. Rules, art, levels and hat prices need the TypeScript source and an npm rebuild.
Can I add more worlds or levels?
The edition has 60 levels in three worlds. Adding more means editing the source, with the included level-baking tools. Additional campaigns are not part of the package.
Where is player progress saved?
In the current browser's local storage. Cloud sync is not included.
Does it work on phones?
Yes. It runs in current mobile browsers with touch controls, and on desktop with a mouse.
Who should pick a color sort puzzle, and what else to look at
A color sort puzzle suits casual portals, family sites and brands that want a calm game with short sessions. It reads well on a phone, and the rule fits in one sentence.
If you want a puzzle with more planning, Beep Out is a 3D parking puzzle with 30 levels and passenger matching, $35 at list price. If your audience likes numbers, Tenguin is a number match puzzle where players pair equal numbers or two that make ten, $39 at list price.
See Beep Out, the 3D parking puzzle