Kod źródłowy gry parkingowej: co kryje 30-poziomowa układanka 3D
Co zawiera pakiet Beep Out, jak jest zbudowany jego projekt TypeScript i co kupujący zwykle zmienia jako pierwsze.
Jeśli szukasz kodu źródłowego gry parkingowej, krótka odpowiedź brzmi tak: Beep Out to gotowa trójwymiarowa układanka drogowa do przeglądarki, z 30 poziomami, gotową do wgrania wersją i edytowalnym projektem TypeScript pod spodem. Cena to 35 USD. Ten przewodnik otwiera pakiet i pokazuje, do czego służy każda jego część.
Gry z korkami parkingowymi wyglądają prosto, dlatego słaba szybko wychodzi na jaw. Zasady muszą być czytelne na pierwszy rzut oka, kolejność poziomów musi uczyć, a kod musi pozwalać dodawać własne plansze bez psucia starych. Te trzy rzeczy oceniamy tutaj, a obok hosting, licencja i to, czego wydanie nie obejmuje.
Co zawiera pakiet kodu źródłowego gry parkingowej
Beep Out sprzedawany jest jako Local Browser Edition, wersja 1.1.0. Pobranie ma dwie części: grę, którą można wgrać od razu, i projekt, który można zmieniać.
- Gotowy do wgrania folder game/ ze wszystkimi 30 poziomami.
- Czytelny JavaScript, CSS i dane uruchomieniowe, dzięki czemu widzisz, co wykonuje przeglądarka.
- Kod źródłowy dla programistów w TypeScript, z zasobami gry i testami.
- Ilustrowany podręcznik po angielsku i portugalsku: instalacja, mapa plików, dostosowanie, rozwiązywanie problemów i FAQ.
- Informacje o licencjach zależności i czcionek.
Interfejs występuje w 14 językach: angielskim, portugalskim, hiszpańskim, francuskim, niemieckim, włoskim, holenderskim, polskim, tureckim, rosyjskim, indonezyjskim, japońskim, koreańskim i chińskim uproszczonym. Sam podręcznik jest tylko po angielsku i portugalsku, co ma znaczenie, jeśli Twój programista nie zna żadnego z tych języków.
Otwórz stronę Beep Out i zagraj w demo
Jak działa układanka drogowa, zasada po zasadzie
Każdy pojazd ma na dachu strzałkę pokazującą wyjazd. Dotknij albo kliknij auto, którego droga przed nim jest wolna, a odjedzie. Wybierz zablokowane, a uderzy w ruch, więc kolejność ruchów decyduje o poziomie.
Od poziomu 4 na przystanku czeka kolejka pasażerów. Pojazd może odjechać tylko wtedy, gdy jego kolor pasuje do następnego pasażera. Wolne auto w złym kolorze parkuje na miejscu i odjeżdża samo, gdy podejdzie jego pasażer. Parking jest mały, więc zbyt wiele złych kolorów go zapcha, a gracze muszą planować kilka ruchów naprzód. Ta druga warstwa zamienia zwykły korek w układankę na kolejność.
Ekran gry ma podpowiedź, cofnij i restart. Ukończenie poziomu bez zablokowanych dotknięć, podpowiedzi i cofania daje Clean Clear (czysty przejazd), a opcjonalny najlepszy czas na poziom jest zapisywany w przeglądarce. Ukończone poziomy dają pięć stylów lakieru w Garage (garażu). Lakiery są kosmetyczne: każde auto jeździ tak samo.
Jak zorganizowany jest kod
Są dwa miejsca do pracy i warto je trzymać osobno. Folder game/ to zbudowany wynik: wgraj go, a zadziała. Projekt dla programistów to miejsce zmian: poziomy, ustawienia, teksty, logo i pliki audio. Po zmianie przebudowujesz projekt i podmieniasz hostowany folder game/ kompletnym nowym wynikiem.
Stos to TypeScript, Three.js i WebGL2, budowane przez Vite. Pliki to HTML, CSS, JavaScript, TypeScript i JSON. Do przebudowy potrzebne są Node.js 22.12 lub nowszy oraz npm. Do grania nie potrzeba niczego z tego.
Projekt zawiera cztery polecenia, a podręcznik opisuje każde z nich:
- npm run levels sprawdza pliki poziomów przed budowaniem.
- npm test uruchamia testy.
- npm run typecheck wyłapuje błędy typów w TypeScript.
- npm run build zapisuje nowy folder gry.
Sprawdzanie poziomów znaczy więcej, niż brzmi. Układanki parkingowe psują się po cichu: plansza, której nie da się rozwiązać, albo pasażer bez pasującego auta. Uruchomienie sprawdzenia przed każdą budową kosztuje mniej, niż dowiadywanie się o tym od graczy.
Co zmienić najpierw w szablonie gry parkingowej
Proponujemy zacząć od tych czterech zmian, w tej kolejności.
1. Nazwa, logo i branding
Tytuł HTML i ustawienia marki znajdują się w projekcie źródłowym, pliki logo w public/, a audio we własnym folderze. Podmieniaj pliki, zachowując te same ścieżki, a potem przebuduj. White label (biała etykieta) jest dozwolona: Twoja marka albo marka klienta zastępuje naszą.
2. Poziomy
Pliki do tworzenia poziomów są w source/. Edytuj je, sprawdź poleceniem npm run levels, przebuduj i wgraj. Podręcznik zawiera mapę plików, więc nie musisz szukać w kodzie planszy.
3. Teksty interfejsu i języki
Teksty interfejsu leżą w plikach językowych. Jeśli Twoi odbiorcy mówią w jednym z 14 języków, przeczytaj raz każdy ekran w tym języku, bo kilka słów zwykle warto dostosować do głosu marki.
4. Ustawienia gry
Ustawienia gry trzymane są w plikach konfiguracyjnych, a nie rozrzucone po kodzie. Zmieniaj jedną wartość naraz i po każdej zmianie zagraj kilka poziomów.
- Zrób kopię zapasową oryginalnego pakietu.
- Zmień pliki brandingu, zachowując ich ścieżki.
- Edytuj lub dodaj poziomy i uruchom npm run levels.
- Uruchom npm test i npm run build.
- Podmień cały hostowany folder game/, a nie pojedyncze pliki.
- Przetestuj na telefonach i w przeglądarkach, z których korzystają Twoi gracze.
Hosting, osadzanie i sklepy z aplikacjami
Wgraj zawartość game/ na dowolny statyczny hosting HTTP(S) i otwórz jego adres. Do grania nie potrzeba PHP, bazy danych, konta ani serwera Node.js. Działa w podfolderze albo w iframe na Twojej stronie, a podręcznik zawiera przykładowy fragment iframe. Daj iframe dość wysokości i zostaw włączony zapis w przeglądarce, jeśli postępy mają przetrwać przeładowanie.
Otwieranie index.html bezpośrednio z dysku nie jest obsługiwane; musi być udostępniane przez HTTP(S). Przeglądarka potrzebuje JavaScript, modułów ES i WebGL2. Gracze dotykają ekranu na urządzeniach dotykowych, a na komputerze klikają. W Ustawieniach jest tryb Low graphics (niska grafika), który oszczędza baterię na starszych telefonach.
Pakiet nie zawiera projektu aplikacji natywnej. Jeśli chcesz grę w sklepie z aplikacjami, podłączoną do SDK portalu albo zainstalowaną na swoim serwerze, to osobna usługa, którą wyceniamy za każdy projekt.
Poproś o wycenę zmian, hostingu lub wersji aplikacji
Czego ta edycja nie obejmuje
Beep Out to gra jednoosobowa z lokalnymi danymi. Postępy, rekordy i ustawienia zostają w przeglądarce gracza. Nie ma multiplayera online, rankingu online ani zapisów w chmurze, nie ma SDK reklam ani SDK portalu. Aplikacje natywne, hosting i usługi hostowane nie należą do pakietu.
Dla wielu stron to właściwy kształt: nic do utrzymywania na serwerze i żadne dane graczy nie opuszczają przeglądarki. Jeśli potrzebujesz tabeli wyników albo reklam, zaplanuj tę pracę przed startem, a nie po nim.
Licencja, wsparcie i cena w jednym akapicie
Jeden zakup daje wieczną, niewyłączną licencję na użycie tej edycji w jednym produkcie końcowym, Twoim albo jednego klienta. Gracze mogą grać za darmo albo z monetyzacją przez reklamy. Kod, grafikę i dźwięk w ramach tego produktu możesz zmieniać i zastąpić naszą nazwę i logo, ale nie wolno odsprzedawać ani udostępniać szablonu, jego kodu źródłowego ani zasobów osobno. Wsparcie trwa 6 miesięcy, a 12 miesięcy przy rozszerzeniu wykupionym przy zakupie. Obejmuje instalację, korzystanie z plików i naprawianie powtarzalnych błędów. Cena katalogowa to 35 USD; do 30 listopada 2026 promocja Black Friday obniża każdy szablon o 15%, więc Beep Out kosztuje 29,75 USD, a od 1 grudnia ceny wracają do katalogowych.
Przeczytaj pełne warunki licencji i wsparcia
Najczęściej zadawane pytania
Czy potrzebuję serwera lub bazy danych?
Nie. Wgraj zawartość game/ na statyczny hosting HTTP(S) i otwórz index.html pod tym adresem. Postępy i rekordy zapisują się w przeglądarce gracza.
Czy mogę dodać własne poziomy parkingowe?
Tak. Edytuj pliki do tworzenia poziomów w source/, sprawdź je poleceniem npm run levels, przebuduj i podmień hostowany folder game/ nowym wynikiem.
Czy układanka drogowa działa na telefonach?
Tak. Gracze dotykają pojazdów na ekranach dotykowych, a na komputerze klikają. Przeglądarka musi obsługiwać WebGL2, a ustawienie Low graphics pomaga starszym urządzeniom. Przed startem przetestuj na swoich telefonach.
Czy mogę osadzić grę we własnej stronie?
Tak. Hostuj ją w dowolnym folderze i osadź przez iframe. Podręcznik zawiera przykładowy fragment kodu.
Czy reklamy lub wyniki online są w pakiecie?
Nie. Ta edycja nie ma SDK reklam, rankingu online ani multiplayera. Dodanie ich to praca na zamówienie, wyceniana za każdy projekt.
Czy mogę użyć jednej licencji dla dwóch klientów?
Nie. Jedna licencja obejmuje jeden produkt końcowy. Drugi klient potrzebuje drugiej licencji, a kilka szablonów w jednym zamówieniu dostaje zniżkę pakietową.
Powiązane szablony układanek
Jeśli Twoim odbiorcom bardziej podoba się sortowanie niż ruch drogowy, Mochi Monsters to układanka z sortowaniem kolorów, 60 poziomów w trzech światach i tryb Endless, za 39 USD w cenie katalogowej. Jeśli chcesz krótszą pętlę sesji, Gridspark to układanka z bloków 8×8 z ruchem błyskawicy ZAP i codziennym wyzwaniem z ustalonym ziarnem, za 29 USD w cenie katalogowej. Obie mają czytelny kod źródłowy i 14 języków interfejsu.
Zobacz Mochi Monsters, układankę z sortowaniem kolorów
Zobacz Gridspark, układankę z blokami
Kupując dwa lub więcej szablonów w jednym zamówieniu, obniżasz cenę każdej licencji: 5% zniżki za dwa, 10% za trzy, 15% za cztery i 20% za pięć lub więcej.