Сорс код на паркинг пъзел: отвътре на 3D пъзел с 30 нива

Ако търсите сорс код на паркинг пъзел, краткият отговор е следният: Beep Out е готов 3D пъзел за трафик в браузъра с 30 нива, готов build за качване и редактируемия проект на TypeScript зад него, за 35 USD. Това ръководство отваря пакета и показва за какво служи всяка част.

Игрите тип паркинг изглеждат прости, затова слабата бързо се разкрива. Правилата трябва да се четат с един поглед, редът на нивата трябва да учи, а кодът трябва да ви позволява да добавяте собствени табла, без да счупите старите. Това са трите неща, които разглеждаме тук, заедно с хостинга, лиценза и това, което изданието не включва.

Какво съдържа пакетът сорс код на паркинг пъзел

Beep Out се продава като Local Browser Edition (локално издание за браузър), версия 1.1.0. Изтеглянето има две части: игра, която можете да хоствате още днес, и проект, който можете да променяте.

• Готова за качване папка game/ с всичките 30 нива.
• Четим JavaScript, CSS и данни за работа в браузъра, за да виждате какво изпълнява браузърът.
• Сорс кодът на TypeScript за разработчици, с игровите активи и тестовете.
• Илюстрирано ръководство на английски и португалски, което обхваща инсталацията, картата на файловете, персонализирането, отстраняването на проблеми и ЧЗВ.
• Бележки за лицензите на зависимостите и шрифтовете.

Интерфейсът е на 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. Настройки на играта

Настройките на играта се пазят в конфигурационни файлове, а не са разпръснати из кода. Променяйте по една стойност и изигравайте няколко нива след всяка промяна.

1. Архивирайте оригиналния пакет.
2. Променете файловете с марката, като запазвате пътищата им.
3. Редактирайте или добавете нива и пуснете npm run levels.
4. Пуснете npm test и npm run build.
5. Заменете цялата хостната папка game/, а не отделни файлове.
6. Тествайте на телефоните и браузърите, които ползват вашите играчи.

Хостинг, вграждане и магазини за приложения

Качете съдържанието на 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 USD; до 30 ноември 2026 г. промоция за Black Friday намалява всеки шаблон с 15%, така че Beep Out струва 29,75 USD, а от 1 декември цените се връщат към каталожните.

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

Често задавани въпроси

Нужен ли ми е сървър или база данни?

Не. Качете съдържанието на game/ на статичен HTTP(S) хостинг и отворете index.html през този адрес. Напредъкът и резултатите се записват в браузъра на играча.

Мога ли да добавя свои нива за паркиране?

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

Работи ли пъзелът с трафик на телефони?

Да. Играчите докосват колите на сензорни екрани и кликват на компютър. Браузърът трябва да поддържа WebGL2, а настройката Low за графиката помага на по-стари устройства. Тествайте на собствените си телефони преди старта.

Мога ли да сложа играта в собствената си страница?

Да. Хостнете я в която и да е папка и я вградете с iframe. Ръководството включва пример за фрагмент.

Включени ли са реклами или онлайн резултати?

Не. Изданието няма рекламен SDK, онлайн класация или мултиплейър. Добавянето им е работа по поръчка, оценявана за всеки проект.

Мога ли да използвам един лиценз за двама клиенти?

Не. Един лиценз покрива един краен продукт. Втори клиент изисква втори лиценз, а няколко шаблона в една поръчка получават пакетна отстъпка.

Свързани пъзели с шаблони

Ако аудиторията ви харесва сортирането повече от трафика, Mochi Monsters е пъзел за сортиране по цвят с 60 нива в три свята и режим Endless (безкраен), на 39 USD по каталожна цена. Ако искате по-кратък цикъл на сесия, Gridspark е блоков пъзел 8×8 с ход ZAP (светкавица) и ежедневно предизвикателство с фиксиран начален номер, на 29 USD по каталожна цена. И двата идват с четим сорс код и 14 езика на интерфейса.

Вижте Mochi Monsters, пъзела за сортиране по цвят

Вижте Gridspark, блоковия пъзел

Купуването на два или повече шаблона в една поръчка намалява цената на всеки лиценз: 5% отстъпка за два, 10% за три, 15% за четири и 20% за пет или повече.

Вземете сорс кода на паркинг пъзела Beep Out