Izvorna koda parkirne uganke: kaj je v paketu Beep Out in kaj urediti

Če iščeš izvorno kodo parkirne uganke, je kratek odgovor takle: Beep Out je pripravljena 3D prometna uganka za brskalnik s 30 nivoji, gotova gradnja za nalaganje in urejevalni projekt TypeScript za 35 $. Ta vodnik odpre paket in pokaže, čemu služi vsak del.

Igre z zastoji v prometu so videti preproste, zato slaba hitro izpade. Pravila morajo biti razvidna na prvi pogled, vrstni red nivojev mora učiti, koda pa mora omogočati dodajanje lastnih plošč, ne da bi pokvarila stare. To so tri stvari, ki jih tu preverjamo, poleg gostovanja, licence in tega, kaj izdaja ne vključuje.

Kaj vsebuje paket izvorne kode parkirne uganke

Beep Out se prodaja kot lokalna izdaja za brskalnik, različica 1.1.0. Prenos ima dve polovici: igro, ki jo lahko danes gostiš, in projekt, ki ga lahko spremeniš.

• Mapa game/, pripravljena za nalaganje, z vsemi 30 nivoji.
• Berljiva izvajalna koda JavaScript, CSS in podatki, da vidiš, kaj brskalnik izvaja.
• Razvijalna izvorna koda TypeScript, s sredstvi igre in testi.
• Ilustriran priročnik v angleščini in portugalščini, ki pokriva namestitev, zemljevid datotek, prilagajanje, odpravljanje težav in pogosta vprašanja.
• Obvestila o licencah odvisnosti in pisav.

Vmesnik je na voljo v 14 jezikih: angleščina, portugalščina, španščina, francoščina, nemščina, italijanščina, nizozemščina, poljščina, turščina, ruščina, indonezijščina, japonščina, korejščina in poenostavljena kitajščina. Priročnik sam je samo v angleščini in portugalščini, kar je pomembno, če vaš razvijalec ne bere nobenega od teh jezikov.

Odpri stran Beep Out in igraj demo

Kako deluje prometna uganka, pravilo za pravilom

Vsako vozilo ima na strehi puščico, ki kaže izhod. Tapni ali klikni avto, pred katerim je cesta prosta, in odpelje. Če izbereš blokiranega, trči v promet, zato vrstni red potez odloča o nivoju.

Od 4. nivoja na postajališču čaka vrsta potnikov. Vozilo lahko odide le, ko se njegova barva ujema z naslednjim potnikom. Prost avto napačne barve se parkira v zaliv in sam odpelje, ko pride njegov potnik na vrsto. Parkirišče je majhno, zato preveč napačnih barv zapolni prostor, igralci pa morajo načrtovati več potez vnaprej. Ta druga plast je tisto, kar navaden zastoj spremeni v uganko zaporedja.

Zaslon za igranje ima Hint (namig), Undo (razveljavi) in Restart (ponovni zagon). Nivo, dokončan brez tapov na blokirana vozila, namigov ali razveljavitev, prinese Clean Clear (čisto odstranjeno), izbirni najboljši čas za vsak nivo pa se shrani v brskalniku. Odstranjeni nivoji odklenejo pet slogov barvanja v Garage (garaži). Barve so kozmetične: vsak avto se vede enako.

Kako je koda organizirana

Delaš na dveh mestih, dobro pa je, da ostaneta ločena. Mapa game/ je zgrajeni izhod: naloži jo in igra deluje. Razvijalni projekt je mesto za spremembe: nivoji, nastavitve, besedila, logotipi in zvočne datoteke. Po spremembi ponovno zgradiš in zamenjaš gostujočo mapo game/ s popolnim novim izhodom.

Sklad je TypeScript, Three.js in WebGL2, zgrajen z Vite. Datoteke so HTML, CSS, JavaScript, TypeScript in JSON. Ponovna gradnja potrebuje Node.js 22.12 ali novejšega in npm. Za igranje tega ni treba.

Projekt ima štiri ukaze, priročnik pa razloži vsakega:

• npm run levels preveri tvoje datoteke nivojev pred gradnjo.
• npm test zažene teste.
• npm run typecheck ujame napake tipov v TypeScriptu.
• npm run build zapiše novo mapo igre.

Preverjanje nivojev je pomembnejše, kot se sliši. Prometne uganke odpovedo tiho: plošča, ki je ni mogoče rešiti, ali potnik brez ustreznega avtomobila. Preverjanje pred vsako gradnjo je ceneje kot slišati o težavi od igralcev.

Kaj najprej spremeniti v predlogi parkirne uganke

Predlagamo, da začneš s temi štirimi spremembami, v tem vrstnem redu.

1. Ime, logotip in blagovna znamka

Naslov HTML in nastavitve blagovne znamke so v izvornem projektu, datoteke logotipov v public/, zvok pa v svoji mapi. Zamenjaj datoteke in ohrani iste poti, nato ponovno zgradi. Beli označevalnik (white label) je dovoljen: tvoja blagovna znamka ali blagovna znamka tvojega naročnika nadomesti našo.

2. Nivoji

Datoteke za pisanje nivojev so v source/. Uredi jih, preveri z npm run levels, ponovno zgradi in naloži. Priročnik ima zemljevid datotek, zato ti ni treba iskati po kodi, da najdeš ploščo.

3. Besedilo vmesnika in jeziki

Besedilo vmesnika je v jezikovnih datotekah. Če vaše občinstvo govori enega od 14 jezikov, enkrat preberi vsak zaslon v tem jeziku, saj je nekaj besed ponavadi vredno prilagoditi glasu blagovne znamke.

4. Nastavitve igre

Nastavitve igre so v konfiguracijskih datotekah in niso razpršene po kodi. Spremeni eno vrednost naenkrat in po vsaki spremembi odigraj nekaj nivojev.

1. Varnostno kopiraj prvotni paket.
2. Spremeni datoteke blagovne znamke in ohrani njihove poti.
3. Uredi ali dodaj nivoje in zaženi npm run levels.
4. Zaženi npm test in npm run build.
5. Zamenjaj celotno gostujočo mapo game/, ne posameznih datotek.
6. Preizkusi na telefonih in brskalnikih, ki jih uporabljajo tvoji igralci.

Gostovanje, vdelava in trgovine z aplikacijami

Naloži vsebino mape game/ na poljubno statično gostovanje HTTP(S) in odpri njen naslov. Za igranje ni potreben PHP, baza podatkov, račun ali strežnik Node.js. Deluje v podmapi ali v iframeu na tvoji strani, priročnik pa vključuje primer kode iframe. Daj iframeu dovolj višine in pusti shranjevanje brskalnika omogočeno, če mora napredek preživeti ponovno nalaganje.

Odpiranje index.html neposredno z diska ni podprto; streči ga je treba prek HTTP(S). Brskalnik potrebuje JavaScript, ES module in WebGL2. Igralci tapnejo na dotikalnih zaslonih in klikajo na računalniku, v meniju Settings (nastavitve) pa je način Low graphics (nizka grafika), ki na starejših telefonih varčuje z baterijo.

Paket ne vključuje projekta za nativno aplikacijo. Če želiš igro v trgovini z aplikacijami, povezano s SDK portala ali nameščeno na svojem strežniku, je to ločena storitev, ki jo ponudimo za vsak projekt posebej.

Zahtevaj ponudbo za spremembe, gostovanje ali različico za aplikacijo

Kaj ta izdaja izpušča

Beep Out je za enega igralca z lokalnimi podatki. Napredek, zapisi in nastavitve ostanejo v brskalniku igralca. Ni spletnega večigralca, spletne lestvice ali oblačnih zapisov, ni SDK za oglase in ne SDK za portal. Nativne aplikacije, gostovanje in gostovane storitve niso del paketa.

Za mnoga spletna mesta je to prava oblika: na strežniku ni česa vzdrževati, podatki igralcev pa ne zapustijo brskalnika. Če potrebuješ lestvico ali oglase, načrtuj to delo pred zagonom, ne po njem.

Licenca, podpora in cena v enem odstavku

Z enim nakupom dobiš trajno, nekskluzivno licenco za uporabo izdaje v enem končnem izdelku, tvojem ali enega naročnika. Igralci jo lahko uporabljajo brezplačno ali z oglaševalskim zaslužkom. Kodo, grafiko in zvok v tem izdelku lahko spremeniš ter zamenjaš naše ime in logotip s svojim, ne smeš pa predloge, njene izvorne kode ali sredstev preprodajati ali deliti samih po sebi. Podpora traja 6 mesecev, z dodatnim podaljšanjem ob blagajni pa 12, in pokriva namestitev in uporabo datotek ter popravljanje napak, ki jih je mogoče ponoviti. Redna cena je 35 $; do 30. novembra 2026 velja promocija črni petek, ki odstrani 15 % z vsake predloge, zato Beep Out stane 29,75 $, od 1. decembra pa se cene vrnejo na redne.

Preberi celotne pogoje licence in podpore

Pogosta vprašanja

Ali potrebujem strežnik ali bazo podatkov?

Ne. Naloži vsebino mape game/ na statično gostovanje HTTP(S) in odpri index.html prek tega naslova. Napredek in zapisi se shranjujejo v brskalniku igralca.

Ali lahko dodam lastne parkirne nivoje?

Da. Uredi datoteke za pisanje nivojev v source/, jih preveri z npm run levels, ponovno zgradi in zamenjaj gostujočo mapo game/ z novim izhodom.

Ali prometna uganka deluje na telefonih?

Da. Igralci tapnejo vozila na dotikalnih zaslonih in klikajo na računalniku. Brskalnik mora podpirati WebGL2, nastavitev Low graphics pa pomaga starejšim napravam. Pred zagonom preizkusi na svojih telefonih.

Ali lahko igro postavim v svojo stran?

Da. Gostuj jo v poljubni mapi in jo vdelaj z iframeom. Priročnik vključuje primer kode.

Ali so vključeni oglasi ali spletne točke?

Ne. Izdaja nima SDK za oglase, spletne lestvice ali večigralca. Njihovo dodajanje je delo po meri, ponujeno za vsak projekt posebej.

Ali lahko eno licenco uporabim za dva naročnika?

Ne. Ena licenca velja za en končni izdelek. Drugi naročnik potrebuje drugo licenco, pri več predlogah v enem naročilu pa je na voljo popust za paket.

Sorodne predloge za uganke

Če je tvoje občinstvo bolj za razvrščanje kot za promet, je Mochi Monsters uganka razvrščanja barv s 60 nivoji v treh svetovih in načinom Endless (neskončno), po redni ceni 39 $. Če želiš krajšo sejo, je Gridspark uganka z blokovi 8×8 s potezo ZAP (strela) in dnevnim izzivom na podlagi semena, po redni ceni 29 $. Obe imata berljivo izvorno kodo in 14 jezikov vmesnika.

Oglej si Mochi Monsters, uganko razvrščanja barv

Oglej si Gridspark, uganko z blokovi

Dva ali več predlog v istem naročilu zniža vsako licenco: 5 % popusta za dve, 10 % za tri, 15 % za štiri in 20 % za pet ali več.

Kupi izvorno kodo parkirne uganke Beep Out