Zdrojový kód parkovací puzzle hry: uvnitř 3D hry s 30 úrovněmi

Hledáte zdrojový kód parkovací puzzle hry? Stručná odpověď zní takto: Beep Out je hotová 3D dopravní puzzle pro prohlížeč s 30 úrovněmi, připravenou sestavou k nahrání a upravitelným projektem v TypeScriptu, který za ní stojí. Stojí 35 USD. Tento průvodce balíček rozebírá a ukazuje, k čemu slouží každá jeho část.

Hry se zaseknutými auty vypadají jednoduše, a proto se slabá hra rychle prozradí. Pravidla musí být čitelná na první pohled, pořadí úrovní musí učit a kód musí umožnit přidat vlastní plány bez rozbití těch stávajících. Právě na tyto tři věci se podíváme, a také na hosting, licenci a na to, co tato edice neobsahuje.

Co obsahuje balíček se zdrojovým kódem parkovací puzzle hry

Beep Out se prodává jako lokální edice pro prohlížeč, verze 1.1.0. Stahovaný balíček má dvě poloviny: hru, kterou můžete hostovat hned, a projekt, který můžete měnit.

• Složku game/ připravenou k nahrání se všemi 30 úrovněmi.
• Čitelný běhový JavaScript, CSS a data, abyste viděli, co prohlížeč spouští.
• Vývojářský zdrojový kód v TypeScriptu, spolu s herními assety a testy.
• Ilustrovanou příručku v angličtině a portugalštině, která pokrývá instalaci, mapu souborů, přizpůsobení, řešení potíží a FAQ.
• Oznámení o licencích závislostí a písem.

Rozhraní je k dispozici ve 14 jazycích: angličtina, portugalština, španělština, francouzština, němčina, italština, nizozemština, polština, turečtina, ruština, indonéština, japonština, korejština a zjednodušená čínština. Samotná příručka je jen v angličtině a portugalštině, což je důležité, pokud váš vývojář nečte ani jeden z těchto jazyků.

Otevřete stránku Beep Out a vyzkoušejte demo

Jak dopravní puzzle funguje, pravidlo po pravidle

Každé vozidlo má na střeše šipku, která ukazuje jeho výjezd. Klepněte nebo klikněte na auto, před kterým je volno, a odjede pryč. Vyberete-li zablokované, narazí do provozu, takže o řešení rozhoduje pořadí tahů.

Od úrovně 4 čeká na zastávce fronta cestujících. Vozidlo může odjet jen tehdy, když jeho barva odpovídá dalšímu cestujícímu. Volné auto špatné barvy zaparkuje na stání a odjede samo, až přijde jeho cestující na řadu. Parkoviště je malé, takže příliš mnoho špatných barev ho zaplní a hráči musí plánovat několik tahů dopředu. Právě tato druhá vrstva z obyčejné zácpy dělá puzzle na pořadí.

Herní obrazovka nabízí nápovědu (hint), vrácení tahu (undo) a restart. Dokončení úrovně bez zablokovaných klepnutí, nápověd a vrácení tahů dá Clean Clear (čisté vyčištění) a volitelný nejlepší čas pro každou úroveň se ukládá v prohlížeči. Vyčištěné úrovně odemknou pět stylů nátěru v Garage (garáži). Nátěry jsou jen kosmetické: každé auto hraje stejně.

Jak je kód uspořádaný

Pracovat se dá na dvou místech a vyplatí se je držet odděleně. Složka game/ je hotový výstup: nahrajete ji a hra funguje. Vývojářský projekt je místo, kde se dělají změny: úrovně, nastavení, texty, loga a zvukové soubory. Po změně hru znovu sestavíte a hostovanou složku game/ nahradíte celým novým výstupem.

Technologický základ tvoří TypeScript, Three.js a WebGL2, sestavení zajišťuje Vite. Soubory zahrnují HTML, CSS, JavaScript, TypeScript a JSON. Pro opětovné sestavení je potřeba Node.js 22.12 nebo novější a npm. Pro samotné hraní nic z toho není potřeba.

Projekt obsahuje čtyři příkazy a příručka popisuje každý z nich:

• npm run levels zkontroluje soubory úrovní před sestavením.
• npm test spustí testy.
• npm run typecheck odhalí chyby typů v TypeScriptu.
• npm run build zapíše novou složku hry.

Kontrola úrovní je důležitější, než zní. Parkovací puzzle selhávají nenápadně: deska, kterou nelze vyřešit, nebo cestující bez odpovídajícího auta. Spuštění kontroly před každým sestavením přijde levněji než to slyšet od hráčů.

Co u šablony parkovací puzzle změnit jako první

Doporučujeme začít těmito čtyřmi změnami v tomto pořadí.

1. Název, logo a značka

Titulek HTML a nastavení značky žijí ve zdrojovém projektu, soubory s logem jsou ve složce public/ a zvuk ve vlastní složce. Soubory nahrazujte se zachovanými cestami a poté sestavte znovu. White label je povolen: vaši značku nebo značku vašeho klienta nahradí naši.

2. Úrovně

Soubory pro tvorbu úrovní jsou ve složce source/. Upravte je, ověřte příkazem npm run levels, sestavte a nahrajte. Příručka obsahuje mapu souborů, takže nemusíte v kódu hledat, kde je konkrétní deska.

3. Texty rozhraní a jazyky

Texty rozhraní jsou v jazykových souborech. Pokud vaše publikum mluví jedním z 14 jazyků, projděte každou obrazovku v tomto jazyce alespoň jednou, protože několik slov se obvykle vyplatí upravit podle hlasu značky.

4. Nastavení hry

Nastavení hry jsou uložena v konfiguračních souborech, a ne rozptýlena po kódu. Měňte vždy jednu hodnotu a po každé změně zahrajte několik úrovní.

1. Zálohujte původní balíček.
2. Změňte soubory značky a zachovejte jejich cesty.
3. Upravte nebo přidejte úrovně a spusťte npm run levels.
4. Spusťte npm test a npm run build.
5. Nahraďte celou hostovanou složku game/, ne jednotlivé soubory.
6. Otestujte na telefonech a prohlížečích, které používají vaši hráči.

Hosting, vložení na web a obchody s aplikacemi

Obsah složky game/ nahrajte na libovolný statický HTTP(S) hosting a otevřete jeho adresu. Pro hraní není potřeba PHP, databáze, účet ani server s Node.js. Hra funguje v podsložce nebo uvnitř iframe na vaší vlastní stránce a příručka obsahuje příklad kódu iframe. Dejte iframe dostatečnou výšku a ponechte úložiště prohlížeče zapnuté, pokud postup musí přežít znovunačtení stránky.

Otevření souboru index.html přímo z disku není podporováno; musí běžet přes HTTP(S). Prohlížeč potřebuje JavaScript, ES moduly a WebGL2. Hráči klepají na dotykových obrazovkách a na počítači klikají. V nastavení je režim Low graphics (nízká grafika), který šetří baterii na starších telefonech.

Balíček neobsahuje projekt nativní aplikace. Pokud chcete hru v obchodě s aplikacemi, připojit k SDK portálu nebo nainstalovat na svůj server, jde o samostatnou službu, kterou nabídneme podle projektu.

Vyžádejte si nabídku na úpravy, hosting nebo aplikační verzi

Co tato edice nezahrnuje

Beep Out je hra pro jednoho hráče s lokálními daty. Postup, záznamy a nastavení zůstávají v prohlížeči hráče. Neobsahuje online multiplayer, online žebříček ani cloudové záznamy, žádné reklamní SDK ani SDK portálu. Nativní aplikace, hosting a hostované služby nejsou součástí balíčku.

Pro mnoho webů je to správný tvar: na serveru není co udržovat a data hráčů neopouštějí prohlížeč. Pokud potřebujete žebříček nebo reklamy, naplánujte tu práci před spuštěním, ne po něm.

Licence, podpora a cena v jednom odstavci

Jedna koupě dává trvalou, nevýhradní licenci k použití edice v jednom koncovém produktu, vašem nebo jednoho vašeho klienta. Hráči ji mohou používat zdarma nebo s monetizací reklamou. Kód, grafiku a zvuk uvnitř tohoto produktu můžete upravovat a nahradit naše jméno a logo vaším, ale šablonu, její zdrojový kód ani assety nesmíte dál prodávat ani sdílet samostatně. Podpora trvá 6 měsíců, nebo 12 měsíců s rozšířením při pokladně, a zahrnuje instalaci a používání souborů a opravu reprodukovatelných chyb. Katalogová cena je 35 USD; do 30. listopadu 2026 platí akce Black Friday, která sníží cenu každé šablony o 15 %, takže Beep Out stojí 29,75 USD. Od 1. prosince se ceny vrátí na katalogové.

Přečtěte si celé podmínky licence a podpory

Často kladené otázky

Potřebuji server nebo databázi?

Ne. Obsah složky game/ nahrajte na statický HTTP(S) hosting a otevřete index.html přes jeho adresu. Postup a záznamy se ukládají v prohlížeči hráče.

Můžu přidat vlastní parkovací úrovně?

Ano. Upravte soubory pro tvorbu úrovní ve složce source/, ověřte je příkazem npm run levels, sestavte a nahraďte hostovanou složku game/ novým výstupem.

Funguje dopravní puzzle na telefonech?

Ano. Hráči klepají na vozidla na dotykových obrazovkách a na počítači klikají. Prohlížeč musí podporovat WebGL2 a nastavení Low graphics pomůže starším zařízením. Před spuštěním otestujte na vlastních telefonech.

Můžu hru vložit do vlastní stránky?

Ano. Hostujte ji v libovolné složce a vložte ji pomocí iframe. Příručka obsahuje příklad kódu.

Jsou v ceně reklamy nebo online skóre?

Ne. Edice nemá reklamní SDK, online žebříček ani multiplayer. Jejich doplnění je zakázková práce, nabízená podle projektu.

Mohu jednu licenci použít pro dva klienty?

Ne. Jedna licence pokrývá jeden koncový produkt. Druhý klient potřebuje druhou licenci, a při objednávce více šablon platí slevy za balíček.

Další puzzle šablony

Pokud vaše publikum má raději třídění než dopravu, Mochi Monsters je puzzle na třídění barev se 60 úrovněmi ve třech světech a režimem Endless, katalogová cena 39 USD. Pokud chcete kratší herní smyčku, Gridspark je blokové puzzle 8×8 s bleskovým tahem ZAP a denní výzvou se semínkem, katalogová cena 29 USD. Obě mají čitelný zdrojový kód a 14 jazyků rozhraní.

Podívejte se na Mochi Monsters, puzzle na třídění barev

Podívejte se na Gridspark, blokové puzzle

Pokud v jedné objednávce koupíte dvě nebo více šablon, každá licence je levnější: 5 % sleva za dvě, 10 % za tři, 15 % za čtyři a 20 % za pět a více.

Získejte zdrojový kód parkovací puzzle Beep Out