Parkavimo galvosūkio žaidimo šaltinio kodas: Beep Out iš vidaus

Jei ieškote parkavimo galvosūkio žaidimo šaltinio kodo, trumpas atsakymas toks: Beep Out yra baigtas 3D eismo galvosūkis naršyklei su 30 lygių, paruoštu įkelti surinkimu ir redaguojamu TypeScript projektu, kainuojantis 35 USD. Šiame vadove atidarome paketą ir parodome, kam skirta kiekviena dalis.

Parkavimo galvosūkiai atrodo paprasti, todėl prastas žaidimas greitai išsiduoda. Taisyklės turi būti suprantamos iš pirmo žvilgsnio, lygių tvarka turi mokyti, o kodas turi leisti pridėti savo lentas nesugadinant senųjų. Tai trys dalykai, kuriuos čia vertiname, kartu su talpinimu, licencija ir tuo, ko leidimas neapima.

Ką apima parkavimo galvosūkio žaidimo šaltinio kodo paketas

Beep Out parduodamas kaip vietinis naršyklės leidimas, 1.1.0 versija. Atsisiuntime yra dvi dalys: žaidimas, kurį galite talpinti jau šiandien, ir projektas, kurį galite keisti.

• Paruoštą įkelti aplanką game/ su visais 30 lygių.
• Įskaitomą vykdomąjį JavaScript, CSS ir duomenis, kad matytumėte, ką vykdo naršyklė.
• TypeScript kūrėjo šaltinį su žaidimo ištekliais ir testais.
• Iliustruotą vadovą anglų ir portugalų kalbomis, apimantį diegimą, failų žemėlapį, pritaikymą, gedimų šalinimą ir DUK.
• Priklausomybių ir šriftų licencijų pranešimus.

Sąsaja yra 14 kalbų: anglų, portugalų, ispanų, prancūzų, vokiečių, italų, olandų, lenkų, turkų, rusų, indoneziečių, japonų, korėjiečių ir supaprastintos kinų. Pats vadovas tik anglų ir portugalų kalbomis, o tai svarbu, jei jūsų kūrėjas nemoka nė vienos iš jų.

Atidarykite Beep Out puslapį ir žaiskite demonstracinę versiją

Kaip veikia eismo galvosūkis, taisyklė po taisyklės

Kiekviena transporto priemonė ant stogo turi rodyklę, rodančią jos išvažiavimą. Bakstelėkite ar spustelėkite automobilį, kurio kelias priekyje laisvas, ir jis nuvažiuoja. Jei pasirinksite užblokuotą, jis įsirems į eismą, todėl lygį lemia ėjimų tvarka.

Nuo 4 lygio prie autobusų stotelės laukia keleivių eilė. Transporto priemonė gali išvažiuoti tik tada, kai jos spalva sutampa su kito keleivio spalva. Laisvas, bet kitos spalvos automobilis pastatomas į stovėjimo vietą ir išvažiuoja pats, kai atvyksta jo keleivis. Aikštelė maža, todėl per daug neteisingų spalvų ją užpildo, o žaidėjams reikia planuoti kelis ėjimus į priekį. Būtent šis antras sluoksnis paverčia paprastą spūstį eilės tvarkos galvosūkiu.

Žaidimo ekrane yra užuomina (hint), atšaukimas (undo) ir paleidimas iš naujo. Lygį baigus be užblokuotų bakstelėjimų, užuominų ar atšaukimų, gaunamas Clean Clear (švarus išvalymas), o pasirinktinai kiekvienam lygiui saugomas geriausias laikas naršyklėje. Išvalius lygius, Garage (garažas) atrakinami penki dažų stiliai. Dažai yra kosmetiniai: visi automobiliai elgiasi vienodai.

Kaip sutvarkytas kodas

Yra dvi vietos darbui, ir verta jas laikyti atskirai. Aplankas game/ yra surinktas rezultatas: įkelkite jį ir žaidimas veikia. Kūrėjo projekte keičiami dalykai: lygiai, nustatymai, tekstai, logotipai ir garso failai. Po pakeitimo surenkate iš naujo ir pakeičiate talpinamą game/ aplanką pilnu naujo rezultato turiniu.

Naudojama TypeScript, Three.js ir WebGL2, surenkama su Vite. Failai: HTML, CSS, JavaScript, TypeScript ir JSON. Surinkimui reikia Node.js 22.12 ar naujesnės versijos ir npm. Žaidimui to nereikia.

Projekte yra keturios komandos, o vadove kiekviena paaiškinta:

• npm run levels patikrina lygių failus prieš surinkimą.
• npm test paleidžia testus.
• npm run typecheck ieško tipų klaidų TypeScript kode.
• npm run build sukuria naują žaidimo aplanką.

Lygių tikrintuvas svarbesnis, nei atrodo. Parkavimo galvosūkiai genda tyliai: lenta, kurios neįmanoma išspręsti, keleivis be atitinkamo automobilio. Tikrinti prieš kiekvieną surinkimą pigiau, nei sulaukti pastabos iš žaidėjų.

Ką pirmiausia pakeisti parkavimo galvosūkio šablone

Siūlome pradėti nuo šių keturių pakeitimų, tokia tvarka.

1. Pavadinimas, logotipas ir prekės ženklas

HTML pavadinimas ir prekės ženklo nustatymai yra šaltinio projekte, logotipų failai — public/ aplanke, o garsas — savame aplanke. Keiskite failus išlaikydami tuos pačius kelius, tada surinkite iš naujo. Baltas ženklas (white label) leidžiamas: jūsų ar jūsų kliento prekės ženklas pakeičia mūsų.

2. Lygiai

Lygių kūrimo failai yra source/ aplanke. Redaguokite, patikrinkite su npm run levels, surinkite iš naujo ir įkelkite. Vadove yra failų žemėlapis, todėl lentos kode ieškoti nereikia.

3. Sąsajos tekstas ir kalbos

Sąsajos tekstai yra kalbos failuose. Jei jūsų auditorija kalba viena iš 14 kalbų, perskaitykite kiekvieną ekraną toje kalboje bent kartą, nes keletą žodžių paprastai verta pritaikyti prekės ženklo balsui.

4. Žaidimo nustatymai

Žaidimo nustatymai laikomi konfigūracijos failuose, o ne išbarstyti kode. Keiskite po vieną reikšmę ir po kiekvieno pakeitimo sužaiskite kelis lygius.

1. Padarykite originalaus paketo atsarginę kopiją.
2. Keiskite prekės ženklo failus, išlaikydami jų kelius.
3. Redaguokite ar pridėkite lygius ir paleiskite npm run levels.
4. Paleiskite npm test ir npm run build.
5. Pakeiskite visą talpinamą game/ aplanką, o ne atskirus failus.
6. Išbandykite telefonuose ir naršyklėse, kurias naudoja jūsų žaidėjai.

Talpinimas, įterpimas ir programėlių parduotuvės

Įkelkite game/ turinį į bet kurį statinį HTTP(S) talpinimą ir atidarykite adresą. Žaidimui paleisti nereikia PHP, duomenų bazės, paskyros ar Node.js serverio. Jis veikia poaplankyje arba įterptas iframe į jūsų puslapį, o vadove yra iframe pavyzdys. Iframe suteikite pakankamai aukščio ir palikite įjungtą naršyklės saugyklą, jei pažanga turi išlikti perkrovus puslapį.

Atidarius index.html tiesiai iš disko, nepalaikoma; jis turi būti pateiktas per HTTP(S). Naršyklei reikia JavaScript, ES modulių ir WebGL2. Žaidėjai bakstelėja jutikliniuose ekranuose, o kompiuteryje spusteli. Nustatymuose (Settings) yra Low graphics mode (žemos grafikos režimas), kuris taupo bateriją senesniuose telefonuose.

Pakete nėra natyvaus programėlės projekto. Jei norite žaidimo parduotuvėje, prijungto portalo SDK ar įdiegto savo serveryje, tai atskira paslauga, kurią įkainojame kiekvienam projektui.

Prašykite pasiūlymo dėl pakeitimų, talpinimo ar programėlės versijos

Ką ši versija neapima

Beep Out yra vieno žaidėjo žaidimas su vietiniais duomenimis. Pažanga, įrašai ir nustatymai lieka žaidėjo naršyklėje. Nėra internetinio žaidimo su daugeliu žaidėjų, internetinio reitingo ar debesies įrašų, reklamos SDK ir portalo SDK. Natyvios programėlės, talpinimas ir talpinamos paslaugos į paketą neįtraukti.

Daugeliui svetainių tai tinkama forma: serveryje nieko prižiūrėti nereikia ir jokie žaidėjo duomenys nepalieka naršyklės. Jei reikia lyderių lentelės ar reklamos, planuokite tai prieš paleidimą, o ne po jo.

Licencija, palaikymas ir kaina vienoje pastraipoje

Vienas pirkinys suteikia neribotą, neišskirtinę licenciją naudoti leidimą viename galutiniame produkte, jūsų ar vieno kliento. Žaidėjai gali naudotis nemokamai arba per skelbimų pajamas. Tame produkte galite keisti kodą, piešinius ir garsą bei pakeisti mūsų pavadinimą ir logotipą, bet negalite perparduoti ar dalytis šablonu, jo šaltinio kodu ar turtu atskirai. Palaikymas trunka 6 mėnesius, arba 12 su priedu apmokėjimo metu, ir apima paketo diegimą, failų naudojimą ir atkuriamų defektų taisymą. Įprasta kaina yra 35 USD; iki 2026 m. lapkričio 30 d. Juodojo penktadienio akcija taiko 15 % nuolaidą kiekvienam šablonui, todėl Beep Out kainuoja 29,75 USD, o nuo 2026 m. gruodžio 1 d. kainos grįžta į įprastas.

Skaitykite visas licencijos ir palaikymo sąlygas

Dažnai užduodami klausimai

Ar man reikia serverio ar duomenų bazės?

Ne. Įkelkite game/ turinį į statinį HTTP(S) talpinimą ir atidarykite index.html per tą adresą. Pažanga ir įrašai saugomi žaidėjo naršyklėje.

Ar galiu pridėti savo parkavimo lygių?

Taip. Redaguokite lygių kūrimo failus source/ aplanke, patikrinkite juos su npm run levels, surinkite iš naujo ir pakeiskite talpinamą game/ aplanką nauju rezultatu.

Ar eismo galvosūkis veikia telefonuose?

Taip. Žaidėjai bakstelėja transporto priemones jutikliniuose ekranuose, o kompiuteryje spusteli. Naršyklė turi palaikyti WebGL2, o senesniems įrenginiams padeda žemos grafikos nustatymas. Prieš paleidimą išbandykite savo telefonuose.

Ar galiu įdėti žaidimą į savo puslapį?

Taip. Talpinkite jį bet kuriame aplanke ir įterpkite per iframe. Vadove yra pavyzdinis kodo fragmentas.

Ar įtrauktos reklamos ar internetiniai rezultatai?

Ne. Versijoje nėra reklamos SDK, internetinio reitingo ar kelių žaidėjų režimo. Jų pridėjimas yra individualus darbas, įkainojamas kiekvienam projektui.

Ar vienai licencijai galima turėti du klientus?

Ne. Viena licencija galioja vienam galutiniam produktui. Antram klientui reikia antros licencijos, o keli šablonai viename užsakyme gauna paketo nuolaidą.

Susiję galvosūkių šablonai

Jei jūsų auditorija labiau mėgsta rūšiavimą nei eismą, Mochi Monsters yra spalvų rūšiavimo galvosūkis su 60 lygių trijuose pasauliuose ir Endless mode (begalinis režimas), 39 USD įprasta kaina. Jei norite trumpesnio sesijos ciklo, Gridspark yra 8×8 blokų galvosūkis su žaibo ZAP judesiu ir kasdieniu iššūkiu, 29 USD įprasta kaina. Abu pateikiami su įskaitomu šaltiniu ir 14 sąsajos kalbų.

Žiūrėkite Mochi Monsters, spalvų rūšiavimo galvosūkį

Žiūrėkite Gridspark, blokų galvosūkį

Pirkdami du ar daugiau šablonų viename užsakyme, kiekvieną licenciją gaunate pigiau: 5 % nuolaida dviem, 10 % trims, 15 % keturiems ir 20 % penkiems ar daugiau.

Įsigykite Beep Out parkavimo galvosūkio šaltinio kodą