Vodič

Izvorni kod igre parkiranja: 3D prometna zagonetka s 30 razina iznutra

Što sadrži paket Beep Out, kako je njegov TypeScript projekt organiziran i što kupac obično mijenja prvo.

Ključna vizura igre Beep Out: šareni igračkasti auti i dva žuta autobusa sa strelicama izlaza na drvenoj ploči, uz autobusnu stanicu s četiri putnika.

Ako tražite izvorni kod igre parkiranja, kratak odgovor je ovaj: Beep Out je gotova 3D prometna zagonetka za preglednik s 30 razina, gotova izgrađena verzija za prijenos i uređivani TypeScript projekt iza nje, za 35 USD. Ovaj vodič otvara paket i pokazuje čemu služi svaki dio.

Igre parkiranja izgledaju jednostavno, zato se loša brzo otkrije. Pravila moraju biti čitljiva na prvi pogled, redoslijed razina mora podučavati, a kod mora omogućiti dodavanje vlastitih ploča bez kvarenja starih. To su tri stvari koje ovdje gledamo, uz postavljanje, licencu i ono što izdanje ne uključuje.

Što sadrži paket izvornog koda igre parkiranja

Beep Out se prodaje kao lokalno izdanje za preglednik, verzija 1.1.0. Preuzimanje ima dvije polovice: igru koju možete postaviti već danas i projekt koji možete mijenjati.

  • Gotova mapa game/ sa svih 30 razina, spremna za prijenos.
  • Čitljiv JavaScript, CSS i podaci za izvođenje, pa možete vidjeti što preglednik pokreće.
  • TypeScript razvojni izvorni kod s grafikom igre i testovima.
  • Ilustrirani priručnik na engleskom i portugalskom s instalacijom, kartom datoteka, prilagodbom, rješavanjem problema i često postavljenim pitanjima.
  • Napomene o licencama ovisnosti i fontova.

Sučelje dolazi na 14 jezika: engleskom, portugalskom, španjolskom, francuskom, njemačkom, talijanskom, nizozemskom, poljskom, turskom, ruskom, indonezijskom, japanskom, korejskom i pojednostavljenom kineskom. Sam priručnik je samo na engleskom i portugalskom, što je važno ako vaš programer ne čita nijedan od ta dva jezika.

Otvorite stranicu Beep Out i isprobajte demo

Kako prometna zagonetka radi, pravilo po pravilo

Svako vozilo ima strelicu na krovu koja pokazuje izlaz. Dodirnite ili kliknite auto čija je cesta ispred slobodna i on odveze. Odaberete li blokirano vozilo, ono udari u promet, pa redoslijed poteza odlučuje o razini.

Od razine 4 red putnika čeka na autobusnoj stanici. Vozilo može otići samo kada mu se boja podudara sa sljedećim putnikom. Slobodan auto pogrešne boje parkira se na parkirno mjesto i sam odlazi kada dođe njegov putnik. Parkiralište je malo, pa previše pogrešnih boja ga zatrpa, a igrači moraju planirati nekoliko poteza unaprijed. Taj drugi sloj pretvara običnu gužvu u zagonetku redoslijeda.

Zaslon za igru ima gumbe Hint (savjet), Undo (poništi) i restart. Završetak razine bez blokiranih dodira, savjeta ili poništavanja daje Clean Clear (čisto rješenje), a neobavezno najbolje vrijeme po razini sprema se u pregledniku. Završene razine otključavaju pet stilova boje u Garage (garaži). Boje su samo kozmetičke: svaki auto vozi jednako.

Kako je kod organiziran

Postoje dva mjesta za rad i korisno je držati ih odvojeno. Mapa game/ je gotov izlaz: postavite je i igra radi. Razvojni projekt je mjesto za promjene: razine, postavke, tekst, logotipi i zvučne datoteke. Nakon promjene ponovno izgradite i zamijenite postavljenu mapu game/ cijelim novim izlazom.

Tehnologija je TypeScript, Three.js i WebGL2, izgrađeno s Viteom. Datoteke uključuju HTML, CSS, JavaScript, TypeScript i JSON. Za gradnju je potreban Node.js 22.12 ili noviji i npm. Za igranje ništa od toga nije potrebno.

Projekt dolazi s četiri naredbe, a priručnik objašnjava svaku:

  • npm run levels provjerava datoteke razina prije gradnje.
  • npm test pokreće testove.
  • npm run typecheck traži pogreške u tipovima u TypeScriptu.
  • npm run build upisuje novu mapu igre.

Provjera razina važnija je nego što zvuči. Zagonetke parkiranja padaju na tihe načine: ploča koja se ne može riješiti ili putnik bez odgovarajućeg auta. Pokretanje provjere prije svake gradnje jeftinije je nego da to saznate od igrača.

Što prvo promijeniti u predlošku zagonetke parkiranja

Predlažemo da počnete s ove četiri promjene, redom.

1. Naziv, logotip i brend

Naslov HTML-a i postavke brenda nalaze se u izvornom projektu, logotipi u mapi public/, a zvuk u vlastitoj mapi. Zamijenite datoteke zadržavajući iste putanje, pa ponovno izgradite. Bijela oznaka je dopuštena: vaš brend ili brend vašeg klijenta zamjenjuje naš.

2. Razine

Datoteke za izradu razina nalaze se u source/. Uredite ih, provjerite naredbom npm run levels, ponovno izgradite i prenesite. Priručnik ima kartu datoteka, pa ne morate tražiti kod da biste pronašli ploču.

3. Tekst sučelja i jezici

Tekst sučelja nalazi se u jezičnim datotekama. Ako vaša publika govori jedan od 14 jezika, pročitajte svaki ekran na tom jeziku barem jednom, jer se nekoliko riječi obično isplati prilagoditi glasu brenda.

4. Postavke igre

Postavke igre čuvaju se u konfiguracijskim datotekama, a ne raspršene po kodu. Mijenjajte jednu vrijednost u jednom trenutku i nakon svake promjene odigrajte nekoliko razina.

  1. Napravite sigurnosnu kopiju izvornog paketa.
  2. Promijenite datoteke brenda, zadržavajući putanje.
  3. Uredite ili dodajte razine i pokrenite npm run levels.
  4. Pokrenite npm test i npm run build.
  5. Zamijenite cijelu postavljenu mapu game/, a ne pojedinačne datoteke.
  6. Testirajte na telefonima i preglednicima koje koriste vaši igrači.

Postavljanje, ugradnja i trgovine aplikacija

Prenesite sadržaj mape game/ na bilo koji statički HTTP(S) hosting i otvorite njegovu adresu. Za igranje nisu potrebni PHP, baza podataka, račun ni Node.js poslužitelj. Radi u podmapi ili unutar iframea na vašoj stranici, a priručnik sadrži primjer iframe isječka. Ostavite iframeu dovoljnu visinu i uključite pohranu preglednika ako napredak mora preživjeti ponovno učitavanje.

Otvaranje index.html izravno s diska nije podržano; mora se poslužiti putem HTTP(S). Preglednik treba JavaScript, ES module i WebGL2. Igrači dodiruju zaslon na uređajima osjetljivima na dodir, a na računalu klikću. Postavke imaju način Low graphics mode (način niske grafike) koji štedi bateriju na starijim telefonima.

Paket ne uključuje projekt za nativnu aplikaciju. Ako želite igru u trgovini aplikacija, povezanu s SDK-om portala ili instaliranu na svom poslužitelju, to je zasebna usluga koju nudimo po projektu.

Zatražite ponudu za izmjene, hosting ili verziju za aplikaciju

Što ovo izdanje ne uključuje

Beep Out je jednokorisničko izdanje s lokalnim podacima. Napredak, zapisi i postavke ostaju u pregledniku igrača. Nema online višeigračkog načina, online ljestvice ni oblaka sa zapisima, nema oglašivačkog SDK-a ni SDK-a portala. Nativne aplikacije, hosting i hostirane usluge nisu dio paketa.

Za mnoge stranice to je pravi oblik: nema što održavati na poslužitelju i nijedan podatak igrača ne napušta preglednik. Ako trebate ljestvicu ili oglase, planirajte taj posao prije lansiranja, a ne poslije.

Licenca, podrška i cijena u jednom odlomku

Jedna kupnja daje trajnu, nekskluzivnu licencu za korištenje izdanja u jednom krajnjem proizvodu, vašem ili jednog klijenta. Igrači mu mogu pristupiti besplatno ili uz oglase. Smijete mijenjati kod, grafiku i zvuk unutar tog proizvoda te zamijeniti naše ime i logotip, ali ne smijete preprodavati ni dijeliti predložak, njegov izvorni kod ili resurse zasebno. Podrška traje 6 mjeseci, ili 12 uz proširenje pri plaćanju, a pokriva instalaciju i korištenje datoteka te ispravljanje ponovljivih grešaka. Cijena po cjeniku je 35 USD. Do 30. studenoga 2026. Black Friday promocija daje 15% popusta na svaki predložak, pa Beep Out košta 29,75 USD. Od 1. prosinca cijene se vraćaju na cjenik.

Pročitajte cijelu licencu i uvjete podrške

Često postavljana pitanja

Trebam li poslužitelj ili bazu podataka?

Ne. Prenesite sadržaj mape game/ na statički HTTP(S) hosting i otvorite index.html preko te adrese. Napredak i zapisi spremaju se u pregledniku igrača.

Mogu li dodati vlastite razine parkiranja?

Da. Uredite datoteke za izradu razina u source/, provjerite ih naredbom npm run levels, ponovno izgradite i zamijenite postavljenu mapu game/ novim izlazom.

Radi li prometna zagonetka na telefonima?

Da. Igrači dodiruju vozila na uređajima osjetljivima na dodir, a na računalu klikću. Preglednik mora podržavati WebGL2, a postavka Low graphics pomaže starijim uređajima. Testirajte na vlastitim telefonima prije lansiranja.

Mogu li igru staviti unutar svoje stranice?

Da. Postavite je u bilo koju mapu i ugradite iframeom. Priručnik sadrži primjer isječka.

Jesu li uključeni oglasi ili online rezultati?

Ne. Izdanje nema oglašivački SDK, online ljestvicu ni višeigrački način. Dodavanje toga je prilagođeni rad, za koji se nudi ponuda po projektu.

Mogu li jednu licencu koristiti za dva klijenta?

Ne. Jedna licenca pokriva jedan krajnji proizvod. Drugi klijent treba drugu licencu, a više predložaka u jednoj narudžbi dobiva popust na paket.

Povezani predlošci zagonetki

Ako vaša publika voli sortiranje više nego promet, Mochi Monsters je zagonetka sortiranja boja sa 60 razina u tri svijeta i načinom Endless, 39 USD po cjeniku. Ako želite kraću sesiju, Gridspark je blok zagonetka 8×8 s potezom munje ZAP i sjemenom dnevnog izazova, 29 USD po cjeniku. Oba dolaze s čitljivim izvornim kodom i 14 jezika sučelja.

Pogledajte Mochi Monsters, zagonetku sortiranja boja

Pogledajte Gridspark, blok zagonetku

Kupnja dva ili više predložaka u istoj narudžbi smanjuje svaku licencu: 5% popusta za dva, 10% za tri, 15% za četiri i 20% za pet ili više.

Kupite izvorni kod igre parkiranja Beep Out