Руководство

Исходный код игры-головоломки про парковку: что внутри Beep Out

Что входит в пакет Beep Out, как устроен его проект TypeScript и что покупатель обычно меняет в первую очередь.

30 октября 2026 г.

Арт Beep Out: цветные игрушечные машинки и два жёлтых автобуса со стрелками выезда на деревянном поле, рядом остановка с четырьмя пассажирами.

Если вы ищете исходный код игры-головоломки про парковку, короткий ответ такой: Beep Out — готовая 3D-головоломка про пробки для браузера на 30 уровней, с готовой сборкой для загрузки и редактируемым проектом TypeScript под ней. Цена — $35. Это руководство разбирает пакет и объясняет, для чего нужна каждая его часть.

Игры про парковочные пробки выглядят просто, поэтому слабую быстро раскусывают. Правила должны читаться с первого взгляда, порядок уровней должен учить, а код должен позволять добавлять свои поля, не ломая старые. Об этих трёх вещах мы и говорим ниже, а также о хостинге, лицензии и о том, чего в издании нет.

Что входит в пакет исходного кода игры-головоломки про парковку

Beep Out продаётся как локальное браузерное издание, версия 1.1.0. Загрузка состоит из двух частей: игры, которую можно разместить уже сегодня, и проекта, который можно менять.

Готовая папка game/ для загрузки со всеми 30 уровнями.
Читаемый JavaScript, CSS и данные среды выполнения, чтобы видеть, что исполняет браузер.
Исходный код TypeScript для разработчика, с игровыми ассетами и тестами.
Иллюстрированное руководство на английском и португальском: установка, карта файлов, настройка, устранение неполадок и FAQ.
Уведомления о лицензиях зависимостей и шрифтов.

Интерфейс доступен на 14 языках: английском, португальском, испанском, французском, немецком, итальянском, нидерландском, польском, турецком, русском, индонезийском, японском, корейском и упрощённом китайском. Само руководство есть только на английском и португальском, и это важно, если ваш разработчик не читает ни на одном из них.

Открыть страницу Beep Out и сыграть в демо

Как работает головоломка с пробками, правило за правилом

У каждой машинки на крыше есть стрелка, которая показывает направление выезда. Нажмите на машинку, путь перед которой свободен, и она уедет. Нажмёте на заблокированную, и она упрётся в другие машины, поэтому порядок ходов решает всё на уровне.

Начиная с 4 уровня у остановки ждёт очередь пассажиров. Машина может уехать, только если её цвет совпадает со следующим пассажиром. Свободная машина не того цвета встаёт на парковочное место и уезжает сама, когда подходит её пассажир. Поле маленькое, поэтому слишком много неподходящих цветов его забивает, и игроку приходится просчитывать несколько ходов вперёд. Именно этот второй слой превращает простую пробку в головоломку на последовательность.

На игровом экране есть подсказка, отмена и перезапуск. Пройти уровень без заблокированных нажатий, подсказок и отмены — значит получить «Чистое прохождение». Необязательное лучшее время на каждый уровень сохраняется в браузере. Пройденные уровни открывают пять вариантов покраски в гараже. Краски косметические: все машины ведут себя одинаково.

Как организован код

Работать можно в двух местах, и лучше держать их раздельно. Папка 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. Игроки нажимают на сенсорных экранах и кликают на компьютере; в настройках есть режим «Низкая графика», который экономит батарею на старых телефонах.

В пакет не входит проект нативного приложения. Если вы хотите игру в магазине приложений, подключённую к SDK портала или установленную на вашем сервере, это отдельная услуга, которую мы оцениваем по каждому проекту.

Запросить расчёт за изменения, хостинг или версию приложения

Чего не включает это издание

Beep Out — однопользовательская игра с локальными данными. Прогресс, рекорды и настройки остаются в браузере игрока. Здесь нет онлайн-мультиплеера, онлайн-рейтинга или облачных записей, нет рекламного SDK и SDK портала. Нативные приложения, хостинг и размещённые сервисы в пакет не входят.

Для многих сайтов это правильная форма: на сервере нечего поддерживать, а данные игроков не покидают браузер. Если нужны таблица лидеров или реклама, планируйте эту работу до запуска, а не после.

Лицензия, поддержка и цена в одном абзаце

Одна покупка даёт бессрочную неэксклюзивную лицензию на использование издания в одном конечном продукте — вашем или клиента. Игроки могут пользоваться им бесплатно или с монетизацией через рекламу. Внутри продукта можно менять код, графику и аудио и заменить наше название и логотип, но нельзя перепродавать или передавать шаблон, его исходный код или ассеты отдельно. Поддержка длится 6 месяцев, или 12, если при оплате выбрано продление. Она покрывает установку и использование файлов и исправление воспроизводимых дефектов. Обычная цена — $35. До 30 ноября 2026 года акция «Чёрная пятница» даёт скидку 15% на каждый шаблон, поэтому Beep Out стоит $29,75; с 1 декабря цены возвращаются к обычным.

Прочитать полные условия лицензии и поддержки

Часто задаваемые вопросы

Нужны ли сервер или база данных?

Нет. Загрузите содержимое game/ на статический HTTP(S)-хостинг и откройте index.html по этому адресу. Прогресс и рекорды сохраняются в браузере игрока.

Могу ли я добавить собственные уровни с парковкой?

Да. Редактируйте файлы авторинга уровней в source/, проверяйте их командой npm run levels, пересобирайте и заменяйте размещённую папку game/ новым результатом.

Работает ли головоломка с пробками на телефонах?

Да. Игроки нажимают на машины на сенсорных экранах, а на компьютере кликают. Браузер должен поддерживать WebGL2, а настройка «Низкая графика» помогает старым устройствам. Перед запуском проверьте игру на своих телефонах.

Можно ли встроить игру в свою страницу?

Да. Разместите её в любой папке и встройте через iframe. В руководстве есть пример фрагмента кода.

Входят ли реклама или онлайн-рейтинг?

Нет. В издании нет рекламного SDK, онлайн-рейтинга или мультиплеера. Их добавление — индивидуальная работа, которую мы оцениваем по проекту.

Можно ли использовать одну лицензию для двух клиентов?

Нет. Одна лицензия покрывает один конечный продукт. Второму клиенту нужна вторая лицензия, а несколько шаблонов в одном заказе получают скидку за комплект.