Codul sursă al jocului puzzle cu parcare: 30 de niveluri 3D
Ce conține pachetul Beep Out, cum e organizat proiectul TypeScript și ce modifică de obicei un cumpărător primul.
Dacă cauți cod sursă pentru un joc puzzle cu parcare, răspunsul scurt este acesta: Beep Out este un puzzle 3D de trafic finalizat, pentru browser, cu 30 de niveluri, un build gata de încărcat și proiectul TypeScript editabil din spatele lui, la prețul de 35 USD. Ghidul acesta deschide pachetul și arată la ce folosește fiecare parte.
Jocurile cu blocaje de parcare par simple, de aceea unul slab se descoperă repede. Regulile trebuie să se înțeleagă dintr-o privire, ordinea niveluri trebuie să învețe jucătorul, iar codul trebuie să te lase să adaugi propriile table fără să le strici pe cele vechi. Acestea sunt cele trei lucruri la care ne uităm aici, împreună cu găzduirea, licența și ce nu include ediția.
Ce conține pachetul cu codul sursă pentru jocul puzzle cu parcare
Beep Out se vinde ca Local Browser Edition, versiunea 1.1.0. Descărcarea are două jumătăți: un joc pe care îl poți găzdui chiar azi și un proiect pe care îl poți modifica.
- Un dosar game/ gata de încărcat, cu toate cele 30 de niveluri.
- JavaScript, CSS și date de rulare lizibile, ca să vezi ce rulează browserul.
- Sursa TypeScript pentru dezvoltatori, cu resursele jocului și testele.
- Un manual ilustrat, în engleză și portugheză, cu instalarea, harta fișierelor, personalizarea, depanarea și o secțiune de întrebări frecvente.
- Notele de licență pentru dependențe și fonturi.
Interfața vine în 14 limbi: engleza, portugheza, spaniola, franceza, germana, italiana, olandeza, poloneza, turca, rusa, indoneziana, japoneza, coreeana și chineza simplificată. Manualul în sine este doar în engleză și portugheză, ceea ce contează dacă dezvoltatorul tău nu citește niciuna dintre ele.
Deschide pagina Beep Out și joacă demo-ul
Cum funcționează puzzle-ul de trafic, regulă cu regulă
Fiecare vehicul are pe acoperiș o săgeată care arată ieșirea. Atingi sau dai click pe o mașină al cărei drum e liber și ea pleacă. Dacă alegi una blocată, se lovește de trafic, deci ordinea mutărilor decide nivelul.
Din nivelul 4, o coadă de pasageri așteaptă la stația de autobuz. Un vehicul poate pleca doar dacă culoarea lui se potrivește cu următorul pasager. O mașină liberă de culoare greșită se parchează într-un loc și pleacă singură când urcă pasagerul ei. Parcarea e mică, deci prea multe culori greșite o umplu, iar jucătorul trebuie să planifice câteva mutări înainte. Acest al doilea strat transformă un simplu blocaj într-un puzzle de secvențiere.
Ecranul de joc are hint (indiciu), undo (anulare) și restart (repornire). Dacă termini un nivel fără atingeri blocate, fără indicii sau anulări, primești un Clean Clear (curățare fără greșeli), iar un cel mai bun timp opțional pe nivel se salvează în browser. Nivelurile terminate deblochează în Garage (garaj) cinci stiluri de vopsea. Vopselele sunt estetice: toate mașinile se comportă la fel.
Cum este organizat codul
Există două locuri în care lucrezi, și merită să le ții separate. Dosarul game/ este rezultatul compilat: îl încarci și jocul rulează. Proiectul pentru dezvoltatori este locul în care se fac schimbările: niveluri, setări, texte, logo-uri și fișiere audio. După o modificare, recompilezi și înlocuiești dosarul game/ găzduit cu rezultatul complet nou.
Stiva este TypeScript, Three.js și WebGL2, compilată cu Vite. Fișierele includ HTML, CSS, JavaScript, TypeScript și JSON. Pentru recompilare ai nevoie de Node.js 22.12 sau mai nou și de npm. Pentru joc nu ai nevoie de nimic din toate acestea.
Proiectul vine cu patru comenzi, pe care manualul le explică pe rând:
- npm run levels verifică fișierele de niveluri înainte de compilare.
- npm test rulează testele.
- npm run typecheck prinde erorile de tip din TypeScript.
- npm run build scrie noul dosar al jocului.
Verificatorul de niveluri contează mai mult decât pare. Puzzle-urile cu parcare cad în moduri discrete: o tablă care nu se poate rezolva, un pasager fără mașină potrivită. Rularea verificării înainte de fiecare compilare costă mai puțin decât să afli de la jucători.
Ce să schimbi primul într-un șablon de puzzle cu parcare
Îți sugerăm să începi cu aceste patru schimbări, în această ordine.
1. Nume, logo și branding
Titlul HTML și setările de brand se află în proiectul sursă, fișierele logo în public/, iar audio în dosarul lui. Înlocuiește fișierele păstrând aceleași căi, apoi recompilează. Marca albă este permisă: brandul tău sau al clientului tău îl înlocuiește pe al nostru.
2. Niveluri
Fișierele de creare a nivelurilor sunt în source/. Editează-le, validează cu npm run levels, recompilează și încarcă. Manualul conține harta fișierelor, așa că nu trebuie să cauți prin cod ca să găsești o tablă.
3. Textul interfeței și limbile
Textul interfeței se află în fișiere de limbă. Dacă publicul tău vorbește una dintre cele 14 limbi, citește o dată fiecare ecran în limba respectivă, pentru că de obicei merită ajustate câteva cuvinte după vocea brandului.
4. Setările jocului
Setările jocului sunt ținute în fișiere de configurare, nu împrăștiate prin cod. Schimbă câte o valoare o dată și joacă câteva niveluri după fiecare schimbare.
- Fă o copie de rezervă a pachetului original.
- Modifică fișierele de branding, păstrând căile.
- Editează sau adaugă niveluri și rulează npm run levels.
- Rulează npm test și npm run build.
- Înlocuiește tot dosarul game/ găzduit, nu fișiere individuale.
- Testează pe telefoanele și browserele pe care le folosesc jucătorii tăi.
Găzduire, integrare și magazine de aplicații
Încarcă conținutul dosarului game/ pe orice găzduire statică HTTP(S) și deschide adresa. Nu e nevoie de PHP, bază de date, cont sau server Node.js ca să joci. Funcționează într-un subdosar sau într-un iframe pe propria pagină, iar manualul include un exemplu de fragment iframe. Dă iframe-ului suficientă înălțime și lasă activată stocarea browserului dacă progresul trebuie să supraviețuiască unei reîncărcări.
Deschiderea directă a fișierului index.html de pe disc nu este suportată; trebuie servit prin HTTP(S). Browserul are nevoie de JavaScript, de module ES și de WebGL2. Jucătorii ating pe ecranele tactile și dau click pe desktop, iar în Setări există modul Low graphics (grafică redusă), care economisește bateria pe telefoanele mai vechi.
Pachetul nu include un proiect de aplicație nativă. Dacă vrei jocul într-un magazin de aplicații, conectat la un SDK de portal sau instalat pe serverul tău, acesta este un serviciu separat, pe care îl cotăm pe proiect.
Cere o ofertă pentru modificări, găzduire sau o versiune de aplicație
Ce lasă în afară această ediție
Beep Out este pentru un singur jucător, cu date locale. Progresul, înregistrările și setările rămân în browserul jucătorului. Nu există multiplayer online, clasament online sau înregistrări în cloud, nu există SDK de publicitate și nici SDK de portal. Aplicațiile native, găzduirea și serviciile găzduite nu fac parte din pachet.
Pentru multe site-uri aceasta este forma potrivită: nimic de întreținut pe un server și nicio dată a jucătorului nu iese din browser. Dacă ai nevoie de clasament sau de reclame, planifică lucrul acesta înainte de lansare, nu după.
Licență, suport și preț, într-un singur paragraf
O singură achiziție oferă o licență perpetuă, neexclusivă, pentru a folosi ediția într-un produs final, al tău sau al unui singur client. Jucătorii pot accesa jocul gratuit sau prin monetizare cu publicitate. Poți modifica codul, grafica și audio din produsul respectiv și poți înlocui numele și logo-ul nostru, dar nu poți revinde sau distribui separat șablonul, codul sursă sau activele lui. Suportul durează 6 luni, sau 12 cu extensia de la finalizarea comenzii, și acoperă instalarea și utilizarea fișierelor, precum și remedierea defectelor reproductibile. Prețul de listă este de 35 USD; până pe 30 noiembrie 2026 o promoție Black Friday scade cu 15% fiecare șablon, deci Beep Out costă 29,75 USD, iar din 1 decembrie prețurile revin la listă.
Citește termenii complet ai licenței și suportului
Întrebări frecvente
Am nevoie de server sau de bază de date?
Nu. Încarci conținutul dosarului game/ pe o găzduire statică HTTP(S) și deschizi index.html prin adresa aceea. Progresul și înregistrările se salvează în browserul jucătorului.
Pot adăuga propriile niveluri de parcare?
Da. Editezi fișierele de creare a nivelurilor din source/, le validezi cu npm run levels, recompilezi și înlocuiești dosarul game/ găzduit cu rezultatul nou.
Funcționează puzzle-ul de trafic pe telefoane?
Da. Jucătorii ating vehiculele pe ecranele tactile și dau click pe desktop. Browserul trebuie să accepte WebGL2, iar setarea Low graphics ajută dispozitivele mai vechi. Testează pe propriile telefoane înainte de lansare.
Pot pune jocul în propria pagină?
Da. Îl găzduiești în orice dosar și îl incluzi cu un iframe. Manualul conține un exemplu de fragment.
Sunt incluse reclame sau scoruri online?
Nu. Ediția nu are SDK de publicitate, clasament online sau multiplayer. Adăugarea lor este lucrare personalizată, cotată pe proiect.
Pot folosi o licență pentru doi clienți?
Nu. O licență acoperă un singur produs final. Un al doilea client are nevoie de o a doua licență, iar mai multe șabloane în aceeași comandă primesc reducere de pachet.
Șabloane de puzzle înrudite
Dacă publicul tău preferă sortarea în locul traficului, Mochi Monsters este un puzzle de sortare a culorilor, cu 60 de niveluri în trei lumi și un mod Endless, la prețul de listă de 39 USD. Dacă vrei o buclă de sesiune mai scurtă, Gridspark este un puzzle cu blocuri 8×8, cu o mutare fulger ZAP și o provocare zilnică cu sămânță, la prețul de listă de 29 USD. Ambele vin cu sursă lizibilă și 14 limbi de interfață.
Vezi Mochi Monsters, puzzle-ul de sortare a culorilor
Vezi Gridspark, puzzle-ul cu blocuri
Cumpărarea a două sau mai multe șabloane în aceeași comandă reduce fiecare licență: 5% pentru două, 10% pentru trei, 15% pentru patru și 20% pentru cinci sau mai multe.