HTML5 spēles pirmkods: atvērām reālu paketi, lai parādītu saturu

HTML5 spēles pirmkods var nozīmēt trīs dažādas lietas: gatavu būvējumu, kas gatavs augšupielādei, izstrādātāja failus, ko rediģējat, vai projektu, kas atveras tikai vienā konkrētā redaktorā. HTML5 spēles veidne ar pirmkodu no mūsu tirgus vietas ir pirmās divas kopā kā parasti tīmekļa faili, un šis ceļvedis atver īstas paketes, lai parādītu, kā tas izskatās.

Mēs pārdodam šīs veidnes, tāpēc lasiet to kā ekskursiju pa mūsu paketēm, nevis neitrālu tirgus pārskatu. Izskatījām vairākus izdevumus, galvenokārt Velvet Pool, Puttide un Sunset Rally, izlasījām to publiskās rokasgrāmatas un veikala noteikumus un pierakstījām, kas ir kastē, kas vajadzīgs, lai to palaistu, un kas tur nav. Katra rokasgrāmata ir saistīta no preces lapas, tāpēc katru rindiņu varat pārbaudīt pirms maksājuma.

Ko var nozīmēt „HTML5 spēles pirmkods”

Pārdevēji vārdu pirmkods lieto brīvi. Trīs jautājumi izšķir, ko patiesībā pārdod.

Būvējums, izstrādātāja pirmkods vai abi?

Būvējums ir gatavā spēle tādā veidā, kā to ielādē pārlūkprogramma: index.html, skripti, attēlu un skaņas faili. To var novietot tieši tādu, kāds tas ir. Izstrādātāja pirmkods ir versija, kas paredzēta rediģēšanai, ar failiem, sadalītiem pēc uzdevuma. Pakete tikai ar būvējumu ir kaut kas, ko var augšupielādēt, bet ne viegli mainīt. Pakete tikai ar pirmkodu var prasīt rīkus, pirms vispār kaut ko palaiž. Šajā ceļvedī minētajos izdevumos abi ir vienā ZIP: parasti mape game/ publicēšanai un mape source/ rediģēšanai (Ricopop gadījumā game/ pati ir pirmkods).

Lasāms vai samazināts?

Samazināšana saspiež skriptus dažās blīvās rindās ar īsiem nosaukumiem, kas lejupielādējas ātrāk un lasās briesmīgi. Aizsardzība pret pārlasīšanu iet tālāk un tīši sajauc nosaukumus. Neviens no tiem nekaitē dzīvai vietnei. Abi kaitē, ja pirkāt kodu, lai to mainītu. Pirms maksājuma atveriet vienu skriptu no tiešās demo versijas savos pārlūkprogrammas izstrādātāja rīkos un pārbaudiet, vai varētu to izsekot.

Vienkārši faili vai redaktora projekts?

Dažas veidnes nāk kā projekts konkrētam spēļu redaktoram, un tās var atvērt tikai tajā. Citas ir vienkārši tīmekļa faili, ko atver jebkurš koda redaktors. Šajā ceļvedī minētie izdevumi ir otrā veida: HTML, CSS, JavaScript un JSON, dažos arī TypeScript.

Apskatīt veidnes

Kas ir Polar Games paketē

Ņemsim Velvet Pool, mūsu 8 bumbiņu biljarda izdevumu. Tā rokasgrāmatā ZIP failā aprakstītas četras mapes:

• game/ ir gatavs augšupielādei izdevums un vienīgā mape, ko publicējat.
• source/ ir tā pati spēle kā rediģējams izstrādātāja izdevums ar README, package.json un testiem.
• documentation/ satur ilustrēto ceļvedi un tā attēlus.
• THIRD-PARTY-LICENSES/ satur fontu licenču tekstus un README.txt kopsavilkumu.

Jūsu bibliotēkā tā pati pakete tiek piedāvāta kā divas lejupielādes: pilna pakete (pirmkods un rokasgrāmata) vai tikai spēle, gatava novietošanai.

game/ un source/ ir vienāds izkārtojums. Velvet Pool gadījumā rokasgrāmata saka, ka failus rediģējat source/ un mainītos kopējat uz to pašu ceļu game/. Starp tiem nekas netiek kompilēts.

Apskatīt Velvet Pool izdevumu

Velvet Pool iekšpuse: failu karte

Failu karte ir lētākais veids, kā novērtēt koda bāzi pirms pirkuma. Šī ir Velvet Pool rokasgrāmatā, ceļi relatīvi pret source/ vai game/:

• src/core/physics.js: bumbiņu simulācija, griešana un atsitiens no borta.
• src/core/rules.js: 8 bumbiņu spēles noteikumi un faulu lēmumi.
• src/core/ai.js: kā CPU izvēlas sitienu.
• src/game/controls.js: mērķēšana, spēks un griešanas ievade.
• src/game/progress.js: sasniegumi, galdu audumi, kijas un spēles punktu skaitīšana.
• src/game/i18n.js: teksts 14 valodās.
• src/game/localRecords.js: vietējā rezultātu vēsture.
• src/game/audio.js: skaņas efekti un mūzikas atskaņošana.
• css/style.css un css/fonts.css: tēma, adaptīvs izkārtojums un fontu deklarācijas.
• assets/: māksla, audio un fonti, ar apakšmapi logo/.

Ievērojiet sadalījumu. Noteikumi, fizika un CPU atrodas src/core. Ievade, saglabājumi, teksti un skaņa atrodas src/game. Rokasgrāmata lūdz mainīt vienu funkciju vienlaikus, un šis izkārtojums to padara reālu: borta korekcija un tulkojuma labojums skar dažādus failus.

Rokasgrāmatā arī teikts, ka kods source/src un game/src ir vienkārša, formatēta JavaScript bez samazinātiem vai saliktiem failiem. Velvet Pool ir Vanilla JavaScript uz WebGL2 un neizmanto nevienu koda bibliotēku, arī Three.js. Izmaiņu žurnāls to apliecina: versija 1.0.1 sadalīja garās vienrindas virknes audio, tulkojumos un shaders kodā lasāmās rindās, uzvedību nemainot.

Puttide: tas pats izkārtojums, plus bibliotēkas

Puttide, mūsu 3D minigolfa izdevums, izmanto tās pašas četras mapes un pievieno vienu lietu: divas trešo pušu bibliotēkas, kas spēlei vajadzīgas. Three.js r186 (MIT) un Rapier 3D 0.21.0 (Apache-2.0) atrodas lib/three/ un lib/rapier/, bet index.html importa karte saka pārlūkprogrammai, kur tās atrast. Puttide FAQ apgalvo, ka nekas netiek ielādēts no CDN, tāpēc spēlei vajadzīgs tikai jūsu pašu serveris. Rokasgrāmata piebilst, ka bibliotēku faili ir formatēti tā, lai tos varētu lasīt, un uzvedība nav mainīta.

Tās failu karte, atkal relatīvi pret source/ vai game/:

• src/course/courses.js: trašu secība un atbloķēšanas nosacījumi.
• src/course/holes.js: Ruins trases ģeometrija, pars un šķēršļi. pier.js, ice.js, lava.js un sky.js satur pārējās četras.
• src/sim/constants.js: fizikas regulējums.
• src/game/economy.js: bumbiņu, trases un tērpu definīcijas un cenas.
• src/ui/i18n.js un vēl trīs vārdnīcu faili: teksts valodās.
• css/style.css: saskarnes krāsas, fonti un adaptīvie stili.
• fonts/ un music/: tīmekļa fonti ar licencēm un divi mūzikas skaņdarbi.

Rokasgrāmatas recepte jaunai trasei: dublējiet definīciju pareizajā trases failā, piešķiriet unikālu id, iestatiet pars, starta un bedres pozīcijas, pievienojiet to trasei, pēc tam pievienojiet tās nosaukumu un padomu valodu vārdnīcām. Izlasiet šādu recepti pirms pirkuma. Ja tas šķiet darbs, ko varat paveikt, pakete jums der.

Apskatīt Puttide izdevumu

Kad pirmkodam vajag būvēšanas soli

„Nav būvēšanas soļa” ir patiesi dažiem izdevumiem, bet ne visiem, tāpēc pārbaudiet izdevumu, nevis veikalu. Šeit pieci no mūsējiem blakus ar to saraksta cenām.

• Velvet Pool, saraksta cena 39 USD: vienkārši JavaScript moduļi uz WebGL2. Rediģējiet source/, kopējiet uz game/. Node.js 20+ tikai neobligātiem testiem.
• Puttide, 39 USD: vienkārši JavaScript moduļi ar Three.js un Rapier mapē lib/. Nav būvēšanas soļa. Node.js ir neobligāts un vajadzīgs tikai bibliotēku versiju pārvaldīšanai.
• Ricopop, 39 USD: vienkārši HTML, CSS un JavaScript moduļi, un game/ pati ir pirmkods. Neobligāti izstrādātāja rīki (Node.js 20+): lokālais serveris, līmeņu pārbaudītājs un testi.
• Pinloop, 24 USD: TypeScript ar Vite. Mapē game/ ir lasāms JavaScript un CSS. Node.js 22.12+ un npm vajadzīgi tikai, lai rediģētu un pārbūvētu pirmkodu.
• Sunset Rally, 39 USD: TypeScript ar Three.js r184 un Vite. Mape game/ jau ir sabūvēta un nesamazināta. Node.js vajadzīgs tikai tad, ja pārbūvējat.

Sunset Rally rokasgrāmata iesaka Node.js 24 LTS. Mapē source/ palaidiet npm ci, npm run typecheck un npm run build, pēc tam publicējiet tikai dist/ saturu. Tā lūdz pārbūvējot atstāt minify un cssMinify izslēgtus, jo piegādātais izpildlaiks ir formatēts lasīšanai. Augšupielādējiet rezultātu, nekad node_modules/.

Apskatīt Sunset Rally izdevumu

Novietošana: ko nozīmē „statisks”

Statiska novietošana nozīmē, ka serveris tikai pasniedz failus. Velvet Pool un Puttide rokasgrāmatas dod visu instalēšanu trijos soļos:

1. Izvelciet ZIP.
2. Augšupielādējiet visu mapē game/ uz mapi savā vietnē, piemēram, public_html/velvet-pool/, ar FTP vai sava hostinga failu pārvaldnieku, saglabājot apakšmapes.
3. Atveriet šo adresi pārlūkprogrammā.

Nav iesaistīts ne npm, ne terminālis, ne būvēšanas solis, ne PHP, ne datubāze, ne konts. Pēc tām pašām rokasgrāmatām, ar ko cilvēki parasti paklūp:

• Neveriet dubultklikšķi uz index.html. Pārlūkprogrammas bloķē spēles moduļus file://. Lokālam testam palaidiet python -m http.server 8765 mapē game/ un atveriet http://localhost:8765/.
• Jūsu serverim .js failus jāsūta ar JavaScript MIME tipu, bet .wasm kā application/wasm. Nepareizs MIME tips parādās kā kļūda „module refused”.
• Publiskai novietošanai izmantojiet HTTPS.
• Saglabājumi pieder pārlūkprogrammas izcelsmei (protokols, hosts un ports). Pārvietojiet spēli uz citu domēnu, un spēlētāji sāks no nulles.
• Jaunas lapas ielāde joprojām prasa jūsu serveri, tāpēc tā nav instalējama bezsaistes lietotne.

Kur atrodas logotips, krāsas, noteikumi un tulkojumi

Katrai rokasgrāmatai ir pielāgošanas sadaļa, un tās aptvertais atšķiras no izdevuma uz izdevumu. Lūk, ko katra saka.

Velvet Pool

• Logotips un zīmols: aizvietojiet failus mapē assets/logo/ un pielāgojiet atbilstošos izmērus CSS.
• Galdu audumu un kiju stili: to definīcijas ir progress.js. Saglabājiet vienumu ID stabilus, lai saglabātie kosmētikas priekšmeti turpinātu darboties.
• CPU uzvedība failā ai.js, fizika failā physics.js. Pēc noteikumu vai fizikas maiņas palaidiet 8 bumbiņu testus.
• Tulkojumi: src/game/i18n.js ar valodu sarakstu LANGS.

Puttide

• Krāsas un fonti: css/style.css.
• Fizika: src/sim/constants.js. Kosmētisko priekšmetu cenas: src/game/economy.js, saglabājot esošos ID.
• Mūzika: iekopējiet licencētu failu mapē music/ un atjauniniet skaņdarbu karti src/audio/audio.js.
• Trases, pars un atbloķēšana: iepriekš aprakstītie trases faili.

Gridspark un Sunset Rally

Gridspark, saskaņā ar tā preces FAQ, saskarnes teksts atrodas src/locales.js, noteikumu konstantes un paleta src/config.js, bet mīklas noteikumi game.js, board.js, generator.js un shapes.js. Sunset Rally kampaņas spēles un zvaigžņu nosacījumi ir Campaign.ts, vietas Places.ts, fizika physics.ts un punktu skaitīšana match.ts. Tās angļu un portugāļu teksti ir src/i18n.ts, pārējās 12 valodas src/locales/.

Ievērojiet, ko rokasgrāmatas atstāj ārpusē. Puttide rokasgrāmata aptver krāsas, fiziku, trases, cenas un mūziku, bet tajā nav soļa logotipa nomaiņai, un Sunset Rally rokasgrāmatai nav atsevišķas zīmola sadaļas. Ja zīmols ir pirmais, ko mainīsiet, pajautājiet pirms pirkuma.

Apskatīt Gridspark izdevumu

Automātiskie testi: ko tie pārbauda un ko nē

Velvet Pool mapē source/ ir testu komplekts. Ar Node.js 20 vai jaunāku atveriet terminālu mapē source/ un palaidiet npm test, kas ir tas pats, kas node tests/run.js. Atkarību instalēšana nav vajadzīga. Saskaņā ar rokasgrāmatu komplekts pārbauda fiziku, 8 bumbiņu noteikumus, CPU spēles un tulkojumu atslēgu atbilstību, un tas neaizstāj testēšanu pārlūkprogrammās un reālās ierīcēs.

Tulkojumu atslēgu pārbaude ir tāda veida tests, kāds vajadzīgs spēlei ar 14 valodām: pievienojat atslēgu vienā valodā, aizmirstat citā, un cilvēks to var nepamanīt nedēļām.

Ne visiem izdevumiem ir testi. Puttide rokasgrāmatā neviena nav, tikai manuālas pārbaudes. Pinloop un Beep Out izstrādātāja komandās ietilpst npm test, bet Ricopop izstrādātāja rīkos ir līmeņu pārbaudītājs.

Licence, trešo pušu paziņojumi un izmaiņu žurnāls

Saskaņā ar veikala noteikumiem katrs pirkums dod mūžīgu, neekskluzīvu licenci izmantot izdevumu vienā gala produktā, jūsu vai viena klienta. Tajā drīkstat mainīt kodu, mākslu un skaņu, un spēlētāji to var izmantot bez maksas vai caur reklāmām. Nedrīkstat pārdot, dalīt vai pārizplatīt veidni, tās pirmkodu vai aktīvus atsevišķi, kā veidni, komplektu vai aktīvu paku, vai iekļaut to citā produktā, kas paredzēts izstrādātājiem. Licence nebeidzas, kad beidzas atbalsts.

Trešo pušu daļām ir savas licences, un to paziņojumus paturat kopā ar savu produktu. Velvet Pool tas nozīmē divus fontus, Manrope un Fraunces, saskaņā ar SIL Open Font License 1.1, ar tekstiem mapē THIRD-PARTY-LICENSES/ un blakus fontiem. Puttide sarakstam pievienojas Three.js (MIT), Rapier (Apache-2.0) un fonti Rubik un Fredoka (OFL 1.1).

Izmaiņu žurnāls parāda, kā par paketi rūpējas. Velvet Pool 1.0.1 (2026. gada 18. oktobris) sadalīja garās virknes lasāmās rindās un savāca licenču paziņojumus vienā plakanā mapē. Versija 1.1.0 (2026. gada 22. oktobris) ieviesa saskarni 14 valodās. Šie ieraksti ir preces lapā. Noteikumi saka, ka atjauninājumi tam pašam izdevumam parādās jūsu bibliotēkā, kad tie ir publicēti, bez solījuma par atjauninājumiem fiksētā laika periodā.

Kā vienā stundā izlasīt iegādātās spēles kodu

Šis ir ieteicams plāns, nevis apsolīts laiks. Tas seko Velvet Pool izkārtojumam un izmanto tikai to, ko pakete dod.

1. 0.–10. minūte: izvelciet ZIP, pārlūkojiet README mapē source/ un rokasgrāmatas failu karti. Atveriet index.html un redziet, kurus skriptus un stilu failus tas ielādē.
2. 10.–20. minūte: palaidiet npm test mapē source/ (Node.js 20+), lai iegūtu zaļu bāzlīniju.
3. 20.–35. minūte: lasiet src/core pirms src/game. Sāciet ar rules.js, tad ai.js, tad physics.js. Tā ir pati spēle. Vadība, progress, teksti un skaņa ir apkārtējais palīgkods.
4. 35.–40. minūte: ievērojiet, ka vienumu ID un saglabāšanas atslēgām jāpaliek stabilām, citādi spēlētāji zaudē savus saglabātos kosmētikas priekšmetus.
5. 40.–55. minūte: veiciet vienu nelielu izmaiņu, piemēram, galdu auduma definīciju failā progress.js. Kopējiet failu uz to pašu ceļu game/, palaidiet game/ ar python -m http.server 8765 un apskatiet rezultātu. Nekad neatveriet caur file://.
6. 55.–60. minūte: palaidiet testus vēlreiz.

ES moduļi savos importa rindiņās nosauc, kas tiem vajadzīgs, tāpēc var izsekot ķēdi no pirmā skripta, ko lapa ielādē. Tieši tāpēc vienkāršu failu izdevumu var lasīt šādā tempā.

Jautājumi, ko uzdot pirms pirkuma

• Vai varu izlasīt rokasgrāmatu un nospēlēt demo pirms maksāšanas? Mūsu izdevumiem abi ir saistīti no preces lapas.
• Vai ir gatavs novietošanai būvējums un atsevišķs izstrādātāja pirmkods?
• Vai kods ir lasāms vai samazināts? Atveriet vienu skriptu un paskatieties.
• Vai man vajag Node.js, npm, PHP vai datubāzi, un kuras versijas?
• Vai spēle ielādē ko no CDN vai cita vietnes?
• Kuras trešo pušu bibliotēkas ir iekšā un saskaņā ar kurām licencēm?
• Cik projektos drīkstu to izmantot un vai drīkstu to pārizplatīt?
• Cik ilgs ir atbalsts un ko tas sedz? Mūsējais ir 6 mēneši vai 12 ar paplašinājumu, kas izvēlēts pasūtījuma brīdī; tas sedz jautājumus par failu instalēšanu un lietošanu un atkārtoti reproducējamas kļūdas.
• Kas ir izslēgts?
• Vai ir izmaiņu žurnāls un nesena izlaide?
• Kāda ir atmaksas kārtība? Mūsējā: veidnes ir digitāli produkti, tāpēc atmaksājam tikai tad, ja neesat veidni vēl lejupielādējis vai ja tajā ir kļūda, ko nevaram labot. Pieprasījumu rakstiet studijai ar licences numuru.

Ko šie izdevumi neietver

Daži izdevumi pievieno neobligātus papildinājumus. Ricopop un Zabum ietver vienfailu PHP rezultātu tabulu, kas pēc noklusējuma ir izslēgta. Tā ir neformāla kopīga rezultātu tabula, kas glabā rezultātus failā, nevis izturīga pret krāpšanu reitinga sistēma, un tā nav tiešraides daudzspēlētāju režīms.

Atbalsts sedz jautājumus par piegādāto failu instalēšanu un lietošanu un atkārtoti reproducējamu kļūdu labošanu piegādātajā spēlē. Tā ir robeža, un labāk to zināt pirmajā dienā.

Biežāk uzdotie jautājumi

Kāda ir atšķirība starp spēles mapi un pirmkoda mapi?

game/ ir būvējums, ko augšupielādējat savā serverī. source/ ir tās pašas spēles rediģējams izstrādātāja izdevums. Velvet Pool un Puttide tiem ir vienāds izkārtojums, tāpēc fails, ko rediģējat source/, tiek kopēts uz to pašu ceļu game/. TypeScript izdevumos, piemēram, Sunset Rally, source/ ir projekts, ko pārbūvējat, un publicējat jauno izvadi.

Vai spēles lietošanai man vajag npm vai Node.js?

Lai to novietotu, nē. Node.js parādās tikai neobligātiem testiem Velvet Pool (20 vai jaunāks) vai lai pārbūvētu TypeScript izdevumus, piemēram, Sunset Rally (ieteicams 24 LTS) un Pinloop (22.12 vai jaunāks).

Vai pirmkods ir samazināts?

Šeit aprakstītajos izdevumos nav. Velvet Pool un Puttide ir vienkāršs, formatēts JavaScript, un abu 1.0.1 versija sadalīja garās vienrindas virknes lasāmās rindās. Sunset Rally izpildlaiks tiek piegādāts formatēts, ar izslēgtu samazināšanu.

Vai vienu pirkumu varu izmantot vairākiem projektiem vai klientiem?

Licence sedz vienu gala produktu, jūsu vai viena klienta. Otrs produkts ir ārpus tās.

Vai drīkstu pārdot vai dalīt pirmkodu?

Nē: ne atsevišķi, ne kā veidni, komplektu vai aktīvu paku, un ne citā produktā, kas paredzēts izstrādātājiem. Savā gala produktā drīkstat mainīt kodu, mākslu un skaņu.

Vai pirms pirkuma varu izlasīt rokasgrāmatu?

Jā. Katra preces lapa saista rokasgrāmatu un spēlējamu demo tam pašam izdevumam.

Atveriet paketi pirms pirkuma

Izvēlieties izdevumu, atveriet tā rokasgrāmatu no preces lapas, nospēlējiet demo un salīdziniet failu karti ar iepriekšējiem jautājumiem. Ja rokasgrāmata uz tiem atbild, atbildei jābūt arī paketē. Ja nē, rakstiet studijai pirms maksāšanas.

Apskatīt visas veidnes