Codul sursă al jocurilor HTML5: am deschis un pachet real

Prin codul sursă al unui joc HTML5 se pot înțelege trei lucruri diferite: un build gata de încărcat, fișierele de dezvoltator pe care le editați sau un proiect care se deschide doar într-un anumit editor. Un șablon de joc HTML5 cu cod sursă de pe piața noastră este primele două împreună, sub formă de fișiere web simple, iar acest ghid deschide pachete reale ca să arate cum arată asta.

Vindem aceste șabloane, deci citiți-l ca pe un tur al propriilor noastre pachete, nu ca pe un sondaj neutru al pieței. Am parcurs mai multe ediții, mai ales Velvet Pool, Puttide și Sunset Rally, am citit manualele lor publice și termenii magazinului și am notat ce se află în pachet, ce vă trebuie ca să îl rulați și ce nu există acolo. Fiecare manual este legat de pagina articolului, ca să puteți verifica fiecare rând înainte de plată.

Ce poate însemna „codul sursă al unui joc HTML5”

Vânzătorii folosesc expresia cu ușurință. Trei întrebări lămuresc ce se vinde de fapt.

Un build, o sursă de dezvoltator sau amândouă?

Un build este jocul finalizat, așa cum îl încarcă browserul: un index.html, scripturi, imagini și fișiere audio. Îl puteți găzdui așa cum este. Sursa de dezvoltator este versiunea făcută pentru a fi editată de oameni, cu fișiere împărțite după sarcină. Un pachet cu doar build se poate încărca, dar nu se poate schimba confortabil. Un pachet cu doar sursă poate avea nevoie de unelte înainte să ruleze deloc. Edițiile din acest ghid pun ambele într-un singur ZIP: de obicei un folder game/ pentru publicare și un folder source/ pentru editare (în Ricopop, game/ este chiar sursa).

Lizibil sau miniaturizat?

Miniaturizarea comprimă scripturile în câteva rânduri dense, cu nume scurte, ceea ce se descarcă mai repede și se citește foarte greu. Ofuscarea merge mai departe și amestecă intenționat numele. Niciuna nu strică un site live. Ambele strică dacă ați cumpărat codul ca să îl modificați. Înainte de plată, deschideți un script din demonstrația live în uneltele de dezvoltator ale browserului și vedeți dacă l-ați putea urmări.

Fișiere simple sau un proiect de editor?

Unele șabloane vin ca un proiect pentru un anumit editor de jocuri și se pot deschide doar în acel editor. Altele sunt fișiere web simple, pe care le deschide orice editor de cod. Edițiile din acest ghid sunt de al doilea fel: HTML, CSS, JavaScript și JSON, iar unele dintre ele au TypeScript.

Răsfoiți șabloanele

Ce se află într-un pachet Polar Games

Luați Velvet Pool, ediția noastră de biliard cu bila 8. Manualul său descrie patru foldere în ZIP:

• game/ este ediția gata de încărcat și singurul folder pe care îl publicați.
• source/ este același joc ca ediție editabilă pentru dezvoltatori, cu un README, un package.json și teste.
• documentation/ conține ghidul ilustrat și imaginile lui.
• THIRD-PARTY-LICENSES/ conține textele licențelor fonturilor și un rezumat README.txt.

În biblioteca dumneavoastră, același pachet se oferă ca două descărcări: pachetul complet (sursă și manual) sau doar jocul, gata de găzduit.

game/ și source/ au aceeași structură. Pentru Velvet Pool, manualul spune să editați fișierele din source/ și să copiați fișierele modificate în același drum din game/. Nimic nu este compilat între ele.

Vedeți ediția Velvet Pool

În Velvet Pool: harta fișierelor

Harta fișierelor este cel mai ieftin mod de a judeca o bază de cod înainte să o cumpărați. Aceasta este cea din manualul Velvet Pool, cu drumuri relative la source/ sau game/:

• src/core/physics.js: simularea bilelor, efectul și răspunsul la bandă.
• src/core/rules.js: regulile biliardului cu bila 8 și deciziile la fault.
• src/core/ai.js: cum alege CPU o lovitură.
• src/game/controls.js: țintirea, puterea și efectul introduse de jucător.
• src/game/progress.js: realizările, fețele de masă, tacurile și punctajul meciurilor.
• src/game/i18n.js: textul în 14 limbi.
• src/game/localRecords.js: istoricul scorurilor locale.
• src/game/audio.js: efectele sonore și redarea muzicii.
• css/style.css și css/fonts.css: tema, layout-ul responsiv și declarațiile de font.
• assets/: grafica, audio și fonturile, cu un subfolder logo/.

Observați împărțirea. Regulile, fizica și CPU-ul trăiesc în src/core. Intrările, salvările, textele și sunetul trăiesc în src/game. Manualul cere să schimbați câte o funcție pe rând, iar această structură face asta realist: o ajustare a benzii și o corectură de traducere ating fișiere diferite.

Manualul mai afirmă că fișierele din source/src și game/src sunt JavaScript simplu, formatat, fără fișiere miniaturizate sau împachetate. Velvet Pool este JavaScript vanilla pe WebGL2 și nu folosește nicio bibliotecă de cod, nici Three.js. Jurnalul de modificări susține afirmația: versiunea 1.0.1 a împărțit șirurile lungi de pe o singură linie din audio, traduceri și shadere în rânduri lizibile, fără a schimba comportamentul.

Puttide: aceeași structură, plus biblioteci

Puttide, ediția noastră 3D de mini-golf, folosește aceleași patru foldere și adaugă un lucru: două biblioteci terțe de care are nevoie jocul. Three.js r186 (MIT) și Rapier 3D 0.21.0 (Apache-2.0) se află în lib/three/ și lib/rapier/, iar harta de importuri din index.html îi spune browserului unde să le găsească. FAQ-ul Puttide afirmă că nimic nu se încarcă dintr-un CDN, deci jocul are nevoie doar de propriul server. Manualul adaugă că fișierele bibliotecilor sunt formatate ca să poată fi citite, fără modificări de comportament.

Harta sa de fișiere, din nou relativ la source/ sau game/:

• src/course/courses.js: ordinea terenurilor și cerințele de deblocare.
• src/course/holes.js: geometria, parul și obstacolele terenului Ruins. pier.js, ice.js, lava.js și sky.js conțin celelalte patru.
• src/sim/constants.js: reglajele fizicii.
• src/game/economy.js: definițiile și prețurile mingilor, urmelor și ținutelor.
• src/ui/i18n.js și încă trei fișiere de dicționar: textul în limbi.
• css/style.css: culorile interfeței, fonturile și stilurile responsive.
• fonts/ și music/: fonturile web cu licențele lor și două piese muzicale.

Rețeta din manual pentru o gaură nouă: duplicați o definiție în fișierul de teren potrivit, dați-i un id unic, stabiliți parul și pozițiile de start și de groapă, adăugați-o în teren, apoi adăugați numele și sfatul ei în dicționarele de limbă. Citiți o rețetă de acest fel înainte să cumpărați. Dacă vi se pare o muncă pe care o puteți face, pachetul vi se potrivește.

Vedeți ediția Puttide

Când sursa are nevoie de un pas de build

„Fără pas de build” este adevărat pentru unele ediții și nu pentru altele, deci verificați ediția, nu magazinul. Iată cinci dintre ale noastre, una lângă alta, cu prețurile de listă. Magazinul nostru afișează în prezent o reducere de 10% față de prețul de listă, oferta „direct de la studio” de pe fiecare pagină de articol: Velvet Pool, de exemplu, apare la 35,10 dolari în loc de 39.

• Velvet Pool, preț de listă 39 de dolari: module JavaScript simple pe WebGL2. Editați source/, copiați în game/. Node.js 20+ doar pentru testele opționale.
• Puttide, 39 de dolari: module JavaScript simple cu Three.js și Rapier în lib/. Fără pas de build. Node.js este opțional și doar pentru gestionarea versiunilor bibliotecilor.
• Ricopop, 39 de dolari: HTML, CSS și module JavaScript simple, iar game/ este chiar sursa. Unelte opționale pentru dezvoltatori (Node.js 20+): un server local, un verificator de niveluri și teste.
• Pinloop, 24 de dolari: TypeScript cu Vite. Folderul game/ are JavaScript și CSS lizibile. Node.js 22.12+ și npm doar ca să editați și să reconstruiți sursa.
• Sunset Rally, 39 de dolari: TypeScript cu Three.js r184 și Vite. Folderul game/ este deja construit și neminiaturizat. Node.js doar dacă reconstruiți.

Pentru Sunset Rally, manualul recomandă Node.js 24 LTS. În source/ rulați npm ci, npm run typecheck și npm run build, apoi publicați doar conținutul din dist/. Vă cere și să lăsați dezactivate minify și cssMinify când reconstruiți, pentru că runtime-ul livrat este formatat pentru citire. Încărcați rezultatul, niciodată node_modules/.

Vedeți ediția Sunset Rally

Găzduirea: ce înseamnă „static” în practică

Găzduirea statică înseamnă că serverul dumneavoastră doar livrează fișiere. Manualele Velvet Pool și Puttide dau toată instalarea în trei pași:

1. Dezarhivați ZIP-ul.
2. Încărcați tot ce se află în game/ într-un folder de pe site, de exemplu public_html/velvet-pool/, prin FTP sau cu managerul de fișiere al serverului, păstrând subfolderele.
3. Deschideți acea adresă într-un browser.

Nu sunt implicate npm, terminal, pas de build, PHP, bază de date sau cont. Ce îi încurcă pe oameni, potrivit acelorași manuale:

• Nu dați dublu clic pe index.html. Browserele blochează modulele jocului pe file://. Pentru un test local, rulați python -m http.server 8765 în interiorul game/ și deschideți http://localhost:8765/.
• Serverul trebuie să trimită fișierele .js cu un tip MIME JavaScript, iar .wasm ca application/wasm. Un tip MIME greșit apare ca o eroare de modul refuzat.
• Folosiți HTTPS pentru găzduire publică.
• Salvările aparțin originii browserului (protocol, gazdă și port). Mutați jocul pe alt domeniu și jucătorii pornesc de la zero.
• O încărcare nouă a paginii tot are nevoie de server, deci aceasta nu este o aplicație offline care se poate instala.

Unde se află logoul, culorile, regulile și traducerile

Fiecare manual are o secțiune de personalizare, iar ce acoperă diferă de la ediție la ediție. Iată ce spune fiecare.

Velvet Pool

• Logo și branding: înlocuiți fișierele din assets/logo/ și ajustați dimensiunile corespunzătoare din CSS.
• Fețele de masă și tacurile: definițiile lor sunt în progress.js. Păstrați stabili id-urile articolelor, ca cosmeticele salvate să funcționeze în continuare.
• Comportamentul CPU în ai.js, fizica în physics.js. După ce schimbați regulile sau fizica, rulați testele pentru biliardul cu bila 8.
• Traduceri: src/game/i18n.js, cu lista limbilor în LANGS.

Puttide

• Culori și fonturi: css/style.css.
• Fizica: src/sim/constants.js. Prețurile cosmeticelor: src/game/economy.js, păstrând id-urile existente.
• Muzica: copiați un fișier licențiat în music/ și actualizați maparea pieselor în src/audio/audio.js.
• Găuri, par și deblocări: fișierele de teren descrise mai sus.

Gridspark și Sunset Rally

În Gridspark, potrivit FAQ-ului articolului, textul interfeței se află în src/locales.js, constantele regulilor și paleta în src/config.js, iar regulile puzzle-ului în game.js, board.js, generator.js și shapes.js. În Sunset Rally, condițiile meciurilor și ale stelelor din campanie sunt în Campaign.ts, locațiile în Places.ts, fizica în physics.ts, iar punctajul în match.ts. Șirurile în engleză și portugheză sunt în src/i18n.ts, celelalte 12 limbi în src/locales/.

Observați ce lasă afară manualele. Manualul Puttide acoperă culorile, fizica, găurile, prețurile și muzica, dar nu are un pas pentru schimbarea logoului, iar manualul Sunset Rally nu are o secțiune dedicată brandingului. Dacă brandingul este primul lucru pe care îl veți schimba, întrebați înainte de cumpărare.

Vedeți ediția Gridspark

Teste automate: ce verifică și ce nu

Folderul source/ al Velvet Pool include un set de teste. Cu Node.js 20 sau mai nou, deschideți un terminal în source/ și rulați npm test, adică același lucru cu node tests/run.js. Nu este nevoie de instalarea dependențelor. Potrivit manualului, setul verifică fizica, regulile biliardului cu bila 8, meciurile cu CPU și consecvența cheilor de traducere, iar acestea nu înlocuiesc testarea în browsere și pe dispozitive reale.

Verificarea cheilor de traducere este genul de test de care are nevoie un joc cu 14 limbi: adăugați o cheie într-o limbă, uitați alta, iar un om poate să nu observe săptămâni la rând.

Nu toate edițiile au teste. Manualul Puttide descrie niciunul, doar verificări manuale. Pinloop și Beep Out enumeră npm test printre comenzile pentru dezvoltatori, iar uneltele pentru dezvoltatori ale Ricopop includ un verificator de niveluri.

Licența, notele terților și jurnalul de modificări

Conform termenilor magazinului, fiecare achiziție oferă o licență perpetuă, neexclusivă, de utilizare a ediției într-un singur produs final, al dumneavoastră sau al unui client. Puteți modifica codul, grafica și audio din el, iar jucătorii îl pot folosi gratuit sau prin publicitate. Nu aveți voie să revindeți, să distribuiți sau să redistribuiți șablonul, sursa sau resursele lui separat, ca șablon, kit sau pachet de resurse, ori într-un alt produs destinat dezvoltatorilor. Licența nu expiră când se termină suportul.

Componentele terțe își păstrează propriile licențe, iar notele lor le păstrați alături de produsul dumneavoastră. În Velvet Pool, asta înseamnă două fonturi, Manrope și Fraunces, sub SIL Open Font License 1.1, cu textele în THIRD-PARTY-LICENSES/ și alături de fonturi. În Puttide, lista adaugă Three.js (MIT), Rapier (Apache-2.0) și fonturile Rubik și Fredoka (OFL 1.1).

Jurnalul de modificări arată cum este întreținut un pachet. Velvet Pool 1.0.1 (18 octombrie 2026) a împărțit șirurile lungi în rânduri lizibile și a strâns notele de licență într-un singur folder plat. Versiunea 1.1.0 (22 octombrie 2026) a adus interfața în 14 limbi. Aceste intrări sunt pe pagina articolului. Termenii spun că actualizările aceleiași ediții apar în biblioteca dumneavoastră când sunt publicate, fără promisiunea unor actualizări pentru o perioadă fixă.

Cum citiți codul unui joc cumpărat în o oră

Acesta este un plan sugerat, nu un timp promis. Urmează structura Velvet Pool și folosește doar ce vă oferă pachetul.

1. Minutele 0 până la 10: dezarhivați ZIP-ul, parcurgeți README-ul din source/ și harta fișierelor din manual. Deschideți index.html și vedeți ce scripturi și foi de stil încarcă.
2. Minutele 10 până la 20: rulați npm test în source/ (Node.js 20+) ca să aveți o bază de referință verde.
3. Minutele 20 până la 35: citiți src/core înainte de src/game. Începeți cu rules.js, apoi ai.js, apoi physics.js. Acela este jocul în sine. Comenzile, progresul, textele și sunetul sunt instalațiile din jurul lui.
4. Minutele 35 până la 40: notați că id-urile articolelor și cheile de salvare trebuie să rămână stabile, altfel jucătorii își pierd cosmeticele salvate.
5. Minutele 40 până la 55: faceți o schimbare mică, de exemplu o definiție de față de masă în progress.js. Copiați fișierul în același drum din game/, serviți game/ cu python -m http.server 8765 și uitați-vă la rezultat. Nu îl deschideți niciodată prin file://.
6. Minutele 55 până la 60: rulați din nou testele.

Modulele ES numesc în liniile lor de import ce au nevoie, deci puteți urmări lanțul de la primul script pe care îl încarcă pagina. De aceea o ediție cu fișiere simple poate fi citită în acest ritm.

Întrebări de pus înainte să cumpărați cod sursă

• Pot citi manualul și juca o demonstrație înainte să plătesc? Pentru edițiile noastre, amândouă sunt legate de pagina articolului.
• Există un build gata de găzduit și, separat, o sursă de dezvoltator?
• Codul este lizibil sau miniaturizat? Deschideți un script și uitați-vă.
• Am nevoie de Node.js, npm, PHP sau o bază de date și în ce versiuni?
• Jocul încarcă ceva dintr-un CDN sau de pe alt site?
• Ce biblioteci terțe sunt înăuntru și sub ce licențe?
• În câte proiecte îl pot folosi și pot să îl redistribui?
• Cât durează suportul și ce acoperă? Al nostru are 6 luni, sau 12 cu extensia aleasă la finalizarea comenzii, și acoperă întrebările despre instalarea și utilizarea fișierelor și defectele reproductibile.
• Ce lasă afară?
• Există un jurnal de modificări și o versiune recentă?
• Care este regula de rambursare? A noastră: șabloanele sunt produse digitale, deci rambursăm doar dacă nu ați descărcat încă șablonul sau dacă are un defect pe care nu îl putem remedia. Cereți scriind studioului cu numărul licenței.

Ce nu includ aceste ediții

Unele ediții adaugă extra opționale. Ricopop și Zabum includ un clasament PHP dintr-un singur fișier, dezactivat implicit. Este un tablou de scoruri comun, informal, care stochează scorurile într-un fișier, nu un clasament rezistent la trișat și nici multiplayer live.

Suportul acoperă întrebările despre instalarea și utilizarea fișierelor livrate și corectarea defectelor reproductibile din jocul livrat. Este o limită, și este mai bine să o cunoașteți din prima zi.

Întrebări frecvente

Care este diferența dintre folderul game și folderul source?

game/ este build-ul pe care îl încărcați pe server. source/ este ediția editabilă pentru dezvoltatori a aceluiași joc. În Velvet Pool și Puttide au aceeași structură, deci un fișier editat în source/ se copiază în același drum din game/. În ediții TypeScript precum Sunset Rally, source/ este un proiect pe care îl reconstruiți, iar publicați noul rezultat.

Am nevoie de npm sau Node.js ca să folosesc jocul?

Nu ca să îl găzduiți. Node.js apare doar pentru testele opționale din Velvet Pool (20 sau mai nou) sau ca să reconstruiți ediții TypeScript precum Sunset Rally (se recomandă 24 LTS) și Pinloop (22.12 sau mai nou).

Codul sursă este miniaturizat?

Nu în edițiile prezentate aici. Velvet Pool și Puttide sunt JavaScript simplu, formatat, iar versiunea 1.0.1 a ambelor a împărțit șirurile lungi de pe o singură linie în rânduri lizibile. Runtime-ul Sunset Rally este livrat formatat, cu miniaturizarea dezactivată.

Pot folosi o singură achiziție pentru mai multe proiecte sau clienți?

Licența acoperă un singur produs final, al dumneavoastră sau al unui client. Un al doilea produs se află în afara ei.

Pot revinde sau distribui codul sursă?

Nu: nici separat, nici ca șablon, kit sau pachet de resurse și nici într-un alt produs destinat dezvoltatorilor. Puteți modifica codul, grafica și audio în propriul produs final.

Pot citi manualul înainte să cumpăr?

Da. Fiecare pagină de articol are legătura către manual și către o demonstrație jucabilă a aceleiași ediții.

Deschideți un pachet înainte să cumpărați unul

Alegeți o ediție, deschideți manualul de pe pagina articolului, jucați demonstrația și comparați harta fișierelor cu întrebările de mai sus. Dacă manualul răspunde la ele, pachetul ar trebui să o facă la fel. Dacă nu, scrieți studioului înainte să plătiți.

Răsfoiți toate șabloanele