Вихідний код паркувальної головоломки: що всередині Beep Out
Що містить пакет Beep Out, як розташовано його проєкт TypeScript і що покупець зазвичай змінює першим.
Якщо ви шукаєте вихідний код паркувальної головоломки, коротка відповідь така: Beep Out — це готова 3D-головоломка про дорожній рух для браузера з 30 рівнями, збірка, яку можна одразу завантажити, і редагований проєкт TypeScript, що стоїть за нею, за $35. Цей гайд розбирає пакет і показує, для чого потрібна кожна його частина.
Ігри на паркувальні затори здаються простими, тому слабку швидко помічають. Правила мають бути зрозумілі з першого погляду, порядок рівнів має навчати, а код має дозволяти додавати власні поля, не ламаючи старі. Це три речі, на які ми дивимося тут, а також хостинг, ліцензія і те, чого версія не містить.
Що містить пакет вихідного коду паркувальної головоломки
Beep Out продається як версія Local Browser Edition, 1.1.0. Завантаження складається з двох частин: гра, яку можна розмістити вже сьогодні, і проєкт, який можна змінювати.
- Папка game/, готова до завантаження, з усіма 30 рівнями.
- Читабельний JavaScript, CSS і дані середовища виконання, щоб ви бачили, що запускає браузер.
- Вихідний код розробника на TypeScript, з ігровими ресурсами та тестами.
- Ілюстрований посібник англійською та португальською: встановлення, карта файлів, налаштування, усунення несправностей і FAQ.
- Повідомлення про ліцензії залежностей і шрифтів.
Інтерфейс доступний 14 мовами: англійською, португальською, іспанською, французькою, німецькою, італійською, нідерландською, польською, турецькою, російською, індонезійською, японською, корейською та спрощеною китайською. Сам посібник лише англійською та португальською, і це важливо, якщо ваш розробник не читає жодною з них.
Відкрийте сторінку Beep Out і пограйте в демо
Як працює паркувальна головоломка, правило за правилом
Кожен транспортний засіб має стрілку на даху, що показує напрямок виїзду. Натисніть або клацніть на машину, попереду якої дорога вільна, і вона поїде. Якщо обрати заблоковану, вона врізається в рух, тому порядок ходів визначає рівень.
З рівня 4 біля зупинки чекає черга пасажирів. Транспорт може виїхати, лише коли його колір збігається з наступним пасажиром. Вільна машина неправильного кольору паркується на місці й сама виїжджає, коли підходить її пасажир. Майданчик невеликий, тож забагато невідповідних кольорів його заповнює, і гравцям доводиться планувати кілька ходів наперед. Саме цей другий шар перетворює звичайний затор на головоломку послідовності.
На екрані гри є hint (підказка), undo (скасування) та restart (перезапуск). Пройдений рівень без заблокованих натискань, підказок і скасувань отримує значок Clean Clear (чисте проходження), а необов'язковий найкращий час для кожного рівня зберігається в браузері. Пройдені рівні відкривають п'ять стилів фарбування в Garage (гаражі). Фарби лише косметичні: кожна машина поводиться однаково.
Як організовано код
Є два місця для роботи, і варто тримати їх окремо. Папка game/ — це зібраний результат: завантажте її, і гра запрацює. Проєкт розробника — це місце, де вносяться зміни: рівні, налаштування, текст, логотипи й аудіофайли. Після зміни ви перезбираєте проєкт і замінюєте розміщену папку game/ повним новим результатом.
Основа — TypeScript, Three.js і WebGL2, збірка через Vite. Файли включають HTML, CSS, JavaScript, TypeScript і JSON. Для збірки потрібні Node.js 22.12 або новіший і npm. Для гри все це не потрібно.
Проєкт має чотири команди, і посібник пояснює кожну з них:
- npm run levels перевіряє файли рівнів перед збіркою.
- npm test запускає тести.
- npm run typecheck знаходить помилки типів у TypeScript.
- npm run build записує нову папку гри.
Перевірка рівнів важливіша, ніж здається. Паркувальні головоломки ламаються тихо: поле, яке неможливо розв'язати, або пасажир без машини відповідного кольору. Запуск перевірки перед кожною збіркою обходиться дешевше, ніж дізнатися про проблему від гравців.
Що змінити першим у шаблоні паркувальної головоломки
Пропонуємо почати з цих чотирьох змін, у такому порядку.
1. Назва, логотип і бренд
Заголовок HTML і налаштування бренду знаходяться у вихідному проєкті, файли логотипів — у папці public/, а аудіо — в окремій папці. Замінюйте файли, зберігаючи ті самі шляхи, і перезбирайте проєкт. Білий ярлик дозволено: ваш бренд або бренд вашого клієнта замінює наш.
2. Рівні
Файли для створення рівнів лежать у source/. Редагуйте їх, перевіряйте командою npm run levels, перезбирайте та завантажуйте. У посібнику є карта файлів, тож шукати поле в коді не доведеться.
3. Текст інтерфейсу та мови
Текст інтерфейсу міститься в мовних файлах. Якщо ваша аудиторія говорить однією з 14 мов, прочитайте кожен екран цією мовою хоча б раз: кілька слів зазвичай варто скоригувати під голос бренду.
4. Налаштування гри
Налаштування гри зберігаються в конфігураційних файлах, а не розкидані по коду. Змінюйте одне значення за раз і після кожної зміни пограйте кілька рівнів.
- Створіть резервну копію початкового пакета.
- Змініть файли бренду, зберігаючи їхні шляхи.
- Відредагуйте або додайте рівні та запустіть npm run levels.
- Запустіть npm test і npm run build.
- Замініть усю розміщену папку game/, а не окремі файли.
- Перевірте на телефонах і браузерах, якими користуються ваші гравці.
Хостинг, вбудовування та магазини застосунків
Завантажте вміст game/ на будь-який статичний HTTP(S)-хостинг і відкрийте його адресу. Для гри не потрібні PHP, база даних, акаунт чи сервер Node.js. Вона працює в підпапці або всередині iframe на вашій сторінці, а посібник містить приклад фрагмента iframe. Дайте iframe достатньо висоти і залиште увімкненим сховище браузера, якщо прогрес має пережити перезавантаження.
Відкривати index.html безпосередньо з диска не можна; його потрібно віддавати через HTTP(S). Браузеру потрібні JavaScript, ES-модулі та WebGL2. Гравці натискають на сенсорних екранах і клацають на комп'ютері, а в Settings (налаштуваннях) є режим Low (низька графіка), який економить батарею на старіших телефонах.
Пакет не містить проєкту нативного застосунку. Якщо ви хочете гру в магазині застосунків, підключену до SDK порталу або встановлену на вашому сервері, це окрема послуга, яку ми оцінюємо за проєктом.
Запитайте оцінку змін, хостингу чи версії для застосунку
Чого не містить ця версія
Beep Out — гра для одного гравця з локальними даними. Прогрес, рекорди і налаштування залишаються в браузері гравця. Немає онлайн-мультиплеєра, онлайн-рейтингу чи хмарних рекордів, немає рекламного SDK і SDK порталу. Нативні застосунки, хостинг і хостингові сервіси не входять до пакета.
Для багатьох сайтів така форма правильна: нічого підтримувати на сервері і жодні дані гравців не виходять із браузера. Якщо вам потрібні таблиця лідерів або реклама, плануйте цю роботу до запуску, а не після.
Ліцензія, підтримка і ціна одним абзацом
Одна покупка дає безстрокову невиключну ліцензію на використання версії в одному кінцевому продукті, вашому або одного клієнта. Гравці можуть отримати доступ безкоштовно або через монетизацію рекламою. Ви можете змінювати код, графіку та аудіо в межах цього продукту і замінити нашу назву та логотип, але не можете перепродавати чи ділитися шаблоном, його вихідним кодом або ресурсами окремо. Підтримка триває 6 місяців, або 12 з розширенням при оформленні, і охоплює встановлення та використання файлів, а також виправлення відтворюваних дефектів. Ціна за списком — $35; до 30 листопада 2026 року акція Black Friday дає знижку 15% на кожен шаблон, тож Beep Out коштує $29,75, а з 1 грудня ціни повертаються до списку.
Прочитайте повні умови ліцензії та підтримки
Поширені запитання
Чи потрібні сервер або база даних?
Ні. Завантажте вміст game/ на статичний HTTP(S)-хостинг і відкрийте index.html за цією адресою. Прогрес і рекорди зберігаються в браузері гравця.
Чи можна додати власні паркувальні рівні?
Так. Редагуйте файли для створення рівнів у source/, перевіряйте їх командою npm run levels, перезбирайте і замініть розміщену папку game/ новим результатом.
Чи працює головоломка на телефонах?
Так. Гравці натискають на транспорт на сенсорних екранах і клацають на комп'ютері. Браузер має підтримувати WebGL2, а налаштування низької графіки допомагає старішим пристроям. Перевірте на своїх телефонах перед запуском.
Чи можна вставити гру на свою сторінку?
Так. Розмістіть її в будь-якій папці і вбудуйте через iframe. Посібник містить приклад коду.
Чи входять реклама або онлайн-рекорди?
Ні. Версія не має рекламного SDK, онлайн-рейтингу чи мультиплеєра. Додавання їх — індивідуальна робота, яку ми оцінюємо за проєктом.
Чи можна використати одну ліцензію для двох клієнтів?
Ні. Одна ліцензія покриває один кінцевий продукт. Для другого клієнта потрібна друга ліцензія, а кілька шаблонів в одному замовленні отримують пакетну знижку.
Пов'язані шаблони головоломок
Якщо вашій аудиторії подобається сортування більше, ніж дорожній рух, Mochi Monsters — головоломка на сортування кольорів із 60 рівнями в трьох світах і режимом Endless (нескінченний), $39 за ціною зі списку. Якщо вам потрібна коротша сесія, Gridspark — блочна головоломка 8×8 з блискавичним ходом ZAP і щоденним завданням з фіксованим зерном, $29 за ціною зі списку. Обидва постачаються з читабельним вихідним кодом і 14 мовами інтерфейсу.
Дивіться Mochi Monsters, головоломку на сортування кольорів
Дивіться Gridspark, блочну головоломку
Купівля двох або більше шаблонів в одному замовленні знижує вартість кожної ліцензії: 5% знижки за два, 10% за три, 15% за чотири і 20% за п'ять і більше.