Вихідний код головоломки на сортування кольорів: що змінити першим
Mochi Monsters як робочий приклад: правила, файли, один конфігураційний файл і зміни, які потребують перезбірки.

Купівля вихідного коду головоломки на сортування кольорів має сенс, коли ви хочете гру в стилі water sort на власному сайті і не хочете самі писати правила ходів, генератор рівнів і систему збереження. Mochi Monsters саме такий пакет: 60 рівнів у трьох світах, режим Endless (нескінченний), читабельний TypeScript і готова до хостингу папка гри за $39 за прайсовою ціною.
Правило water sort, ball sort і Mochi Monsters однакове: переходити можна лише в порожню ємність або на збіг верхнього елемента. Відрізняє один шаблон від іншого все, що навколо цього правила. Цей гід проходить пакет у тому порядку, в якому його бачить покупець, і завершується змінами, які можна зробити за п’ять хвилин, та тими, які потребують розробника.
Правило сортування і два ускладнення поверх нього
Гравець натискає одне гніздо, потім інше. Група желейних друзів угорі переходить лише тоді, коли цільове гніздо порожнє або його верхній друг того самого виду. Дошка розв’язана, коли кожне гніздо містить один вид. Hint (підказка), Undo (скасувати) і Restart (заново) вбудовані.
Дві механіки не дають 60 рівням відчуватися як один рівень, який повторюється. Кришка-раковина закриває гніздо і відкривається, коли ви заповнюєте його видом, показаним на кришці; Undo може закрити її знову. Пов’язані гнізда припливу міняються місцями, коли одне з них стає порожнім, і це змінює дошку під план гравця.
Для покупця це важливо, бо все це вже написано і протестовано. Додати таке ускладнення до простої гри на сортування зазвичай займає більше часу, ніж очікуєш, переважно через крайні випадки навколо скасування ходу.
Зіграйте демоверсію Mochi Monsters
Що входить у вихідний код головоломки на сортування кольорів
- 60 рівнів кампанії у Sugar Meadow (Цукровий луг), Bubble Beach (Пляж бульбашок) і Mushroom Village (Село грибів), по 20 у кожному світі.
- Режим Endless (нескінченний) з фіксованим насінням (seed), який відкривається після 20 рівня.
- Альбом колекції, інтерактивний сад і шість капелюхів, які купують за Sugar Drops (цукрові краплі), зароблені в грі.
- Керування дотиком і мишею, локальні збереження і опція зменшеного руху.
- Готова до хостингу папка game/, читабельний код JavaScript і TypeScript, конфігурація, тести і ліцензійні повідомлення.
- Ілюстрований офлайн-посібник 14 мовами, зі скриншотами англійською.
Інтерфейс має 14 мов: англійську, португальську, іспанську, французьку, німецьку, італійську, нідерландську, польську, турецьку, російську, індонезійську, японську, корейську і спрощену китайську. Посібник автоматично слідує за мовою читача.
Стек це TypeScript і JavaScript на Canvas 2D, з Web Audio. Файли включають HTML, CSS, JavaScript, JSON, TypeScript, WebP, PNG і MP3.
Як побудовано проєкт
Думайте про пакет як про три шари, кожен з яких вимагає різних зусиль.
Шар 1: готова гра
Папка game/ повна. Завантажте її вміст на статичний HTTP(S)-хостинг, і гра працюватиме. Тут нічого не потрібно збирати.
Шар 2: файл конфігурації
mochi.config.js лежить поруч з index.html. Він задає заголовок браузера, логотип, мову за замовчуванням і ключ збереження. Змініть значення, завантажте файл, перезавантажте сторінку. Все ще без збірки.
Шар 3: вихідний код TypeScript
Правила, графіка, рівні і ціни капелюхів живуть у вихідному коді. Щоб їх змінити, треба редагувати TypeScript і перезбирати через npm, для чого потрібен Node.js 22.13 або новіший. Вихідний код містить інструменти запікання рівнів і 52 автоматичні тести, які охоплюють правила, рівні, збереження та переклади.
Які зміни робити першими в шаблоні сортування кольорів
Ось порядок, який ми пропонуємо: від змін без збірки до роботи розробника.
- Назва і логотип у mochi.config.js, щоб вкладка браузера і стартовий екран несли ваш бренд.
- Мова за замовчуванням у тому ж файлі, якщо більшість гравців не говорять англійською.
- Ключ збереження: задайте його один раз перед запуском і більше не чіпайте. Зміна на живому сайті змусить гравців втратити прогрес.
- Графіка й кольори желейних друзів, якщо потрібен повний ребрендинг (reskin). Це робота з вихідним кодом.
- Ціни капелюхів і економіка нагород, теж у вихідному коді.
- Нові рівні за допомогою інструментів запікання рівнів, потім тести.
Для багатьох сайтів перші три кроки і є вся робота. Повний ребрендинг, натомість, означає заміну кожної істоти, гнізда і фону в трьох світах, і саме там іде більшість часу. Закладіть це чесно, перш ніж обіцяти клієнту дату.
Білий лейбл дозволено: ваше ім’я і логотип, або логотип вашого клієнта, можуть замінити наші будь-де в грі.
Хостинг, вбудовування і подальший розвиток
Завантажте вміст game/ на будь-який статичний HTTP(S)-хостинг, за потреби в піддиректорію. Для гри не потрібні база даних, PHP чи сервіс Node.js. Відкриття файлів з диска через file:// не працює, тож тестуйте з локального або справжнього веб-сервера.
Гра працює в актуальних Chrome, Edge, Firefox і Safari на комп’ютері, планшеті чи телефоні. Прогрес зберігається в локальному сховищі браузера, без синхронізації між пристроями. Це не застосунок, який можна встановити для офлайн-роботи: гравці завантажують його з вашої веб-адреси.
У пакеті немає проєкту нативного застосунку. Якщо ви хочете його в магазині застосунків, підключеним до SDK порталу або встановленим на вашому сервері, ми оцінюємо таку роботу окремо для кожного проєкту.
Запитайте пропозицію на ребрендинг, хостинг або версію застосунку
Чого немає в Mochi Monsters
Видання не має онлайн-акаунтів, хмарних збережень, глобальних таблиць рекордів, покупок за реальні гроші чи рекламного SDK. Проєкти нативних застосунків, хостинг і індивідуальна розробка не входять. Окрім трьох світів, кампаній більше немає; після них гру тримає режим Endless.
Якщо ви плануєте показувати рекламу, ліцензія дозволяє монетизацію рекламою вашого кінцевого продукту, але підключення рекламної мережі це ваша робота або оплачувана робота на нашому боці.
Ліцензія і ціна одним абзацом
Одна покупка дає безстрокову невиняткову ліцензію на використання видання в одному кінцевому продукті, вашому або одного клієнта. Гравці можуть грати безкоштовно або через монетизацію рекламою. Код, графіку й аудіо всередині цього продукту можна змінювати, але шаблон, його вихідний код або активи не можна перепродавати чи ділитися ними окремо, як комплект для розробників або всередині іншого продукту. Підтримка триває 6 місяців, або 12 з розширенням на оплаті, і охоплює встановлення і використання файлів та виправлення відтворюваних дефектів; ліцензія не закінчується з підтримкою. Прайсова ціна $39; до 30 листопада 2026 року акція «Чорна п’ятниця» дає знижку 15% на кожен шаблон, тож Mochi Monsters коштує $33.15, а з 1 грудня ціни повертаються до прайсу.
Поширені запитання
Чи є Mochi Monsters грою на water sort?
Вона має те саме базове правило: група може переходити лише в порожнє гніздо або на збіглого друга. Замість рідини в пробірках гравці сортують желейних створінь по гніздах, а зверху додано кришки-раковини і гнізда припливу.
Чи потрібно збирати гру перед завантаженням?
Ні. Завантажте вміст game/ на HTTP(S)-хостинг. Розробка з вихідного коду необов’язкова.
Що можна змінити без перезбірки?
Заголовок браузера, логотип, мову за замовчуванням і ключ збереження, усе в mochi.config.js. Правила, графіка, рівні і ціни капелюхів потребують вихідного коду TypeScript і перезбірки через npm.
Чи можна додати ще світи або рівні?
Видання має 60 рівнів у трьох світах. Додавання більшої кількості означає редагування вихідного коду з вбудованими інструментами запікання рівнів. Додаткові кампанії не входять до пакета.
Де зберігається прогрес гравця?
У локальному сховищі поточного браузера. Хмарна синхронізація не входить.
Чи працює на телефонах?
Так. Гра працює в актуальних мобільних браузерах з керуванням дотиком, а на комп’ютері з мишею.
Кому підійде головоломка на сортування кольорів і що ще подивитися
Головоломка на сортування кольорів пасує казуальним порталам, сімейним сайтам і брендам, яким потрібна спокійна гра з короткими сесіями. Вона добре виглядає на телефоні, а правило вміщується в одне речення.
Якщо хочете головоломку з більшим плануванням, Beep Out це 3D-головоломка з паркуванням, 30 рівнів і збігом пасажирів, $35 за прайсовою ціною. Якщо ваша аудиторія любить цифри, Tenguin це головоломка на збіг чисел, де гравці з’єднують однакові числа або два, що дають десять, $39 за прайсовою ціною.
Дивіться Beep Out, 3D-головоломку з паркуванням
Дивіться Tenguin, головоломку на збіг чисел
Отримайте вихідний код головоломки Mochi Monsters на сортування кольорів
