Zdrojový kód hry na parkovací hlavolam: vnútri 3D dopravného hlavolamu
Čo obsahuje balík Beep Out, ako je rozložený jeho projekt v TypeScripte a čo kupujúci zvyčajne upravia ako prvé.
Ak hľadáte zdrojový kód hry na parkovací hlavolam, krátka odpoveď je táto: Beep Out je hotový 3D dopravný hlavolam pre prehliadač s 30 úrovňami, pripravenou zostavou na nahratie a upraviteľným projektom v TypeScripte, za 35 $. Tento sprievodca otvorí balík a ukáže, na čo slúži každá jeho časť.
Hry typu parkovacie zápchy vyzerajú jednoducho, a preto slabá hra rýchlo vynikne. Pravidlá musia byť čitateľné na prvý pohľad, poradie úrovní musí učiť a kód vám musí dovoliť pridávať vlastné plány bez rozbitia starých. To sú tri veci, na ktoré sa tu pozeráme, spolu s hostingom, licenciou a tým, čo vydanie neobsahuje.
Čo obsahuje balík zdrojového kódu hry na parkovací hlavolam
Beep Out sa predáva ako Local Browser Edition, verzia 1.1.0. Stiahnutie má dve časti: hru, ktorú môžete hostovať hneď, a projekt, ktorý môžete meniť.
- Hotový priečinok game/ pripravený na nahratie so všetkými 30 úrovňami.
- Čitateľný runtime JavaScript, CSS a dáta, aby ste videli, čo prehliadač spúšťa.
- Vývojársky zdrojový kód v TypeScripte s hernými assetmi a testami.
- Ilustrovaný manuál v angličtine a portugalčine o inštalácii, mape súborov, prispôsobení, riešení problémov a FAQ.
- Oznámenia o licenciách závislostí a fontov.
Rozhranie je v 14 jazykoch: angličtina, portugalčina, španielčina, francúzština, nemčina, taliančina, holandčina, poľština, turečtina, ruština, indonézština, japončina, kórejčina a zjednodušená čínština. Samotný manuál je len v angličtine a portugalčine, čo je dôležité, ak váš vývojár nečíta ani jeden z nich.
Otvorte stránku Beep Out a vyskúšajte demo
Ako dopravný hlavolam funguje, pravidlo po pravidle
Každé vozidlo má na streche šípku, ktorá ukazuje jeho výjazd. Klepnite alebo kliknite na auto, pred ktorým je cesta voľná, a odíde. Ak vyberiete blokované, narazí do premávky, takže poradie ťahov rozhoduje o úrovni.
Od úrovne 4 čaká pri zastávke fronta cestujúcich. Vozidlo môže odísť len vtedy, ak sa jeho farba zhoduje s ďalším cestujúcim. Voľné auto zlej farby zaparkuje na parkovacom mieste a odíde samo, keď príde jeho cestujúci. Plocha je malá, takže príliš veľa zlých farieb ju zaplní a hráči musia plánovať niekoľko ťahov dopredu. Táto druhá vrstva mení obyčajnú zápchu na hlavolam s poradím.
Herná obrazovka má hint (nápoveda), undo (späť) a restart. Dokončenie úrovne bez blokovaných klepnutí, nápovedí alebo späť dá odznak Clean Clear (čisté vyčistenie) a voliteľný najlepší čas na úroveň sa ukladá v prehliadači. Dokončené úrovne odomknú päť štýlov farby v Garage (garáž). Farby sú len vizuálne: každé auto sa správa rovnako.
Ako je kód organizovaný
Pracovať sa dá na dvoch miestach a oplatí sa ich držať oddelene. Priečinok game/ je hotový výstup: nahrajte ho a hra beží. Vývojársky projekt je miesto, kde sa robia zmeny: úrovne, nastavenia, texty, logá a zvukové súbory. Po zmene hru znovu zostavte a hostovaný priečinok game/ nahraďte úplným novým výstupom.
Technológie sú TypeScript, Three.js a WebGL2, zostavenie zabezpečuje Vite. Súbory zahŕňajú HTML, CSS, JavaScript, TypeScript a JSON. Na opätovné zostavenie treba Node.js 22.12 alebo novší a npm. Na hranie nič z toho netreba.
Projekt obsahuje štyri príkazy a manuál vysvetľuje každý z nich:
- npm run levels skontroluje vaše súbory úrovní pred zostavením.
- npm test spustí testy.
- npm run typecheck zachytí chyby typov v TypeScripte.
- npm run build zapíše nový priečinok hry.
Kontrola úrovní je dôležitejšia, než znie. Parkovacie hlavolamy zlyhávajú potichu: plán, ktorý sa nedá vyriešiť, alebo cestujúci bez zodpovedajúceho auta. Spustiť kontrolu pred každým zostavením je lacnejšie, než sa o chybe dozvedieť od hráčov.
Čo zmeniť ako prvé v šablóne parkovacieho hlavolamu
Odporúčame začať týmito štyrmi zmenami, v tomto poradí.
1. Názov, logo a značka
Názov HTML stránky a nastavenia značky sú vo zdrojovom projekte, logá sú v priečinku public/ a zvuk vo vlastnom priečinku. Nahraďte súbory pri zachovaní rovnakých ciest a potom zostavte znova. White label je povolený: vaša značka alebo značka vášho klienta nahradí našu.
2. Úrovne
Súbory na tvorbu úrovní sú v source/. Upravte ich, overte príkazom npm run levels, znovu zostavte a nahrajte. Manuál obsahuje mapu súborov, takže nemusíte v kóde hľadať žiadnu plochu.
3. Text rozhrania a jazyky
Text rozhrania je v jazykových súboroch. Ak vaše publikum hovorí jedným zo 14 jazykov, prejdite si raz každú obrazovku v tomto jazyku, keďže niekoľko slov sa zvyčajne oplatí upraviť podľa hlasu značky.
4. Nastavenia hry
Nastavenia hry sú v konfiguračných súboroch a nie rozsypané po kóde. Meňte vždy jednu hodnotu a po každej zmene si zahrajte pár úrovní.
- Zálohujte pôvodný balík.
- Zmeňte súbory značky a zachovajte ich cesty.
- Upravte alebo pridajte úrovne a spustite npm run levels.
- Spustite npm test a npm run build.
- Nahraďte celý hostovaný priečinok game/, nie jednotlivé súbory.
- Otestujte na telefónoch a prehliadačoch, ktoré používajú vaši hráči.
Hosting, vkladanie a aplikačné obchody
Nahrajte obsah priečinka game/ na ľubovoľný statický HTTP(S) hosting a otvorte jeho adresu. Na hranie nie je potrebný PHP, databáza, účet ani server s Node.js. Funguje v podpriečinku alebo vnútri iframe na vašej vlastnej stránke a manuál obsahuje príklad kódu iframe. Dajte iframe dostatočnú výšku a ponechajte ukladanie v prehliadači zapnuté, ak sa postup musí zachovať po obnovení stránky.
Otvorenie index.html priamo z disku nie je podporované; musí bežať cez HTTP(S). Prehliadač potrebuje JavaScript, ES moduly a WebGL2. Hráči klepú na dotykových obrazovkách a klikajú na počítači. V menu Settings (nastavenia) je režim Low graphics (nízka grafika), ktorý šetrí batériu na starších telefónoch.
Balík neobsahuje projekt natívnej aplikácie. Ak chcete hru v obchode s aplikáciami, napojenú na SDK portálu alebo nainštalovanú na vašom serveri, je to samostatná služba, ktorú ponúkame za projekt.
Vyžiadajte si ponuku na zmeny, hosting alebo verziu aplikácie
Čo vydanie vynecháva
Beep Out je pre jedného hráča s lokálnymi dátami. Postup, záznamy a nastavenia zostávajú v prehliadači hráča. Nie je tu online multiplayer, online rebríček ani cloudové záznamy, žiadne reklamné SDK ani SDK portálu. Natívne aplikácie, hosting a hostované služby nie sú súčasťou balíka.
Pre mnohé stránky je to správny tvar: na serveri nie je čo udržiavať a dáta hráčov neopúšťajú prehliadač. Ak potrebujete rebríček alebo reklamy, naplánujte tú prácu pred spustením, nie po ňom.
Licencia, podpora a cena v jednom odseku
Jeden nákup dáva trvalú, nevýhradnú licenciu na používanie vydania v jednom konečnom produkte, vašom alebo jedného klienta. Hráči ho môžu používať zadarmo alebo s monetizáciou reklamou. Kód, grafiku a zvuk v tomto produkte môžete meniť a nahradiť naše meno a logo svojimi, ale šablónu, jej zdrojový kód ani jej assety nemôžete ďalej predávať ani zdieľať samostatne. Podpora trvá 6 mesiacov, alebo 12 s rozšírením pri pokladni, a pokrýva inštaláciu a používanie súborov a opravu reprodukovateľných chýb. Katalógová cena je 35 $; do 30. novembra 2026 platí promo k Black Friday, ktoré znižuje každú šablónu o 15 %, takže Beep Out stojí 29,75 $. Od 1. decembra sa ceny vrátia na katalógové.
Prečítajte si úplné podmienky licencie a podpory
Často kladené otázky
Potrebujem server alebo databázu?
Nie. Nahrajte obsah priečinka game/ na statický HTTP(S) hosting a otvorte index.html cez jeho adresu. Postup a záznamy sa ukladajú v prehliadači hráča.
Môžem pridať vlastné parkovacie úrovne?
Áno. Upravte súbory na tvorbu úrovní v source/, overte ich príkazom npm run levels, znovu zostavte a nahraďte hostovaný priečinok game/ novým výstupom.
Funguje dopravný hlavolam na telefónoch?
Áno. Hráči klepú na vozidlá na dotykových obrazovkách a klikajú na počítači. Prehliadač musí podporovať WebGL2 a nastavenie Low graphics pomáha starším zariadeniam. Pred spustením otestujte na vlastných telefónoch.
Môžem hru vložiť do vlastnej stránky?
Áno. Hostujte ju v ľubovoľnom priečinku a vložte cez iframe. Manuál obsahuje príklad kódu.
Sú zahrnuté reklamy alebo online skóre?
Nie. Vydanie nemá reklamné SDK, online rebríček ani multiplayer. Ich pridanie je zákazková práca s cenou za projekt.
Môžem jednu licenciu použiť pre dvoch klientov?
Nie. Jedna licencia pokrýva jeden konečný produkt. Druhý klient potrebuje druhú licenciu a viac šablón v jednej objednávke dostane zľavu za balík.
Súvisiace hlavolamové šablóny
Ak vaše publikum má radšej triedenie než dopravu, Mochi Monsters je hlavolam na triedenie farieb so 60 úrovňami v troch svetoch a režimom Endless (nekonečný), za 39 $ katalógovo. Ak chcete kratšiu herná slučku, Gridspark je blokový hlavolam 8×8 s bleskovým ťahom ZAP a denná výzva s pevným seedom, za 29 $ katalógovo. Obe prichádzajú s čitateľným zdrojovým kódom a 14 jazykmi rozhrania.
Pozrite si Mochi Monsters, hlavolam na triedenie farieb
Pozrite si Gridspark, blokový hlavolam
Kúpa dvoch alebo viacerých šablón v jednej objednávke zníži každú licenciu: 5 % zľavy pre dve, 10 % pre tri, 15 % pre štyri a 20 % pre päť alebo viac.