HTML5-mängu lähtekood: avasime päris paketi, et näidata sisu

HTML5-mängu lähtekood võib tähendada kolme erinevat asja: üleslaadimiseks valmis ehitist, arendaja faile, mida muudad, või projekti, mis avaneb ainult ühes kindlas redaktoris. HTML5-mängumall lähtekoodiga meie turult on esimesed kaks koos, tavaliste veebifailidena, ja see juhend avab päris pakette, et näidata, kuidas see välja näeb.

Me müüme neid malle, seega loe seda meie enda pakettide ekskursioonina, mitte neutraalse turuülevaatena. Käisime läbi mitu väljaannet, peamiselt Velvet Pool'i, Puttide'i ja Sunset Rally, lugesime nende avalikke juhendeid ja poe tingimusi ning kirjutasime üles, mis on karbis, mis on vaja käivitamiseks ja mida seal pole. Iga juhend on lingitud oma üksuse lehelt, nii et saad iga rea enne maksmist üle kontrollida.

Mida võib „HTML5-mängu lähtekood“ tähendada

Müüjad kasutavad sõna lähtekood lõdvalt. Kolm küsimust selgitavad, mida tegelikult müüakse.

Ehitis, arendaja lähtekood või mõlemad?

Ehitis on valmis mäng sellisena, nagu brauser selle laadib: index.html, skriptid, pildid ja helifailid. Seda saab majutada nii, nagu on. Arendaja lähtekood on versioon, mis on tehtud selleks, et inimesed seda muudaksid, failid on jaotatud töö järgi. Pakett ainult ehitisega on, mida saab üles laadida, aga mitte mugavalt muuta. Pakett ainult lähtekoodiga võib vajada enne käivitumist tööriistu. Selle juhendi väljaanded panevad mõlemad ühte ZIP-i: tavaliselt avaldamiseks game/-kausta ja muutmiseks source/-kausta (Ricopop'is on game/ ise lähtekood).

Loetav või minifitseeritud?

Minifitseerimine pakib skriptid mõne tihedasse ritta lühikeste nimedega, mis laadib kiiremini ja on halvasti loetav. Obfuskeerimine läheb kaugemale ja segab nimed tahtlikult. Kumbki ei kahjusta elavat saiti. Mõlemad kahjustavad, kui ostsid koodi muutmiseks. Enne maksmist ava elavast demost üks skript brauseri arendajatööriistades ja vaata, kas suudaksid seda jälgida.

Lihtsad failid või redaktori projekt?

Osa malle tuleb konkreetse mänguredaktori projektina ja neid saab avada ainult selles redaktoris. Teised on tavalised veebifailid, mida avab iga koodiredaktor. Selle juhendi väljaanded kuuluvad teise liiki: HTML, CSS, JavaScript ja JSON, osades TypeScript.

Sirvi malle

Mis on Polar Gamesi paketis

Võta Velvet Pool, meie 8-palli bassiväljaanne. Selle juhend kirjeldab ZIP-is nelja kausta:

• game/ on üleslaadimiseks valmis väljaanne ja ainus kaust, mida avaldad.
• source/ on sama mäng muudetava arendajaversioonina, koos README, package.json ja testidega.
• documentation/ sisaldab illustreeritud juhendit ja selle pilte.
• THIRD-PARTY-LICENSES/ sisaldab fondilitsentside tekste ja README.txt kokkuvõtet.

Sinu raamatukogus pakutakse sama paketti kahe allalaadimisena: täispakett (lähtekood ja juhend) või ainult mäng, valmis majutamiseks.

game/ ja source/ on sama paigutusega. Velvet Pool'i juhend ütleb, et muuda faile source/-is ja kopeeri muudetud failid game/-is samale teele. Vahepeal ei kompileerita midagi.

Vaata Velvet Pool'i väljaannet

Velvet Pool'i sees: failikaart

Failikaart on odavaim viis koodibaasi enne ostmist hinnata. See on Velvet Pool'i juhendist, teed on suhtelised source/ või game/ suhtes:

• src/core/physics.js: palli simulatsioon, pöörlemine ja äärepadja (bande) reaktsioon.
• src/core/rules.js: 8-palli reeglid ja vea otsused.
• src/core/ai.js: kuidas arvuti valib lööki.
• src/game/controls.js: sihtimine, jõud ja pöörlemise sisend.
• src/game/progress.js: saavutused, laudkatted, kepid ja mängu skoorimine.
• src/game/i18n.js: tekst 14 keeles.
• src/game/localRecords.js: kohaliku skoori ajalugu.
• src/game/audio.js: helliefektid ja muusika taasesitus.
• css/style.css ja css/fonts.css: teema, reageeriv paigutus ja fondideklaratsioonid.
• assets/: kunst, heli ja fondid, alamkaustaga logo/.

Pane tähele jaotust. Reeglid, füüsika ja arvuti asuvad src/core-s. Sisend, salvestused, tekstid ja heli asuvad src/game-s. Juhend palub muuta korraga ühte funktsiooni ja see paigutus teeb selle realistlikuks: äärepadja häälestus ja tõlkeparandus puudutavad erinevaid faile.

Juhend ütleb ka, et koodid source/src ja game/src on lihtne, vormindatud JavaScript, ilma minifitseeritud ega kokku pakitud failideta. Velvet Pool on Vanilla JavaScript WebGL2 peal ega kasuta ühtegi kooditeeki, Three.js kaasa arvatud. Muudatuste logi toetab väidet: versioon 1.0.1 jagas pikad üherealised stringid audio, tõlgete ja shaderite juures loetavateks ridadeks, käitumine jäi samaks.

Puttide: sama paigutus ja teegid

Puttide, meie 3D minigolfi väljaanne, kasutab samu nelja kausta ja lisab ühe asja: kaks kolmanda osapoole teeki, mida mäng vajab. Three.js r186 (MIT) ja Rapier 3D 0.21.0 (Apache-2.0) asuvad kaustades lib/three/ ja lib/rapier/ ning index.html-i import map ütleb brauserile, kust neid leida. Puttide KKK ütleb, et midagi ei laadita CDN-ist, seega mäng vajab ainult sinu enda majutust. Juhend lisab, et teegifailid on vormindatud nii, et neid saab lugeda, käitumist muutmata.

Selle failikaart, jällegi source/ või game/ suhtes:

• src/course/courses.js: radade järjekord ja lukustuse nõuded.
• src/course/holes.js: geomeetria, par ja takistused rajal Ruins. pier.js, ice.js, lava.js ja sky.js hoiavad ülejäänud nelja.
• src/sim/constants.js: füüsika häälestus.
• src/game/economy.js: palli, jälje ja riietuse definitsioonid ning hinnad.
• src/ui/i18n.js ja veel kolm sõnastikufaili: keeleteksti.
• css/style.css: liidese värvid, fondid ja reageerivad stiilid.
• fonts/ ja music/: veebifondid koos litsentsidega ja kaks muusikapala.

Juhendi retsept uue augu jaoks: dubleeri definitsioon õiges rajafailis, anna talle unikaalne id, määra par ning tee- ja augupositsioonid, lisa see rajale ning lisa siis nimi ja vihje keelesõnastikesse. Loe selline retsept enne ostmist. Kui see tundub tööna, mida suudad teha, sobib pakett sulle.

Vaata Puttide'i väljaannet

Millal lähtekood vajab ehitusetappi

„Ehitusetappi pole“ kehtib mõnede väljaannete kohta, teiste kohta mitte, seega kontrolli väljaannet, mitte poodi. Siin on viis meie oma kõrvuti koos listhindadega:

• Velvet Pool, listhind 39 $: tavalised JavaScripti moodulid WebGL2 peal. Muuda source/-i, kopeeri game/-i. Node.js 20+ ainult valikulistele testidele.
• Puttide, 39 $: tavalised JavaScripti moodulid koos Three.js ja Rapier'iga kaustas lib/. Ehitusetappi pole. Node.js on valikuline ja vajalik ainult teekide versioonide haldamiseks.
• Ricopop, 39 $: tavaline HTML, CSS ja JavaScripti moodulid, game/ on ise lähtekood. Valikulised arendajatööriistad (Node.js 20+): kohalik server, taseme kontrollija ja testid.
• Pinloop, 24 $: TypeScript Vite'iga. Kaustas game/ on loetav JavaScript ja CSS. Node.js 22.12+ ja npm ainult lähtekoodi muutmiseks ja uuesti ehitamiseks.
• Sunset Rally, 39 $: TypeScript koos Three.js r184 ja Vite'iga. Kaust game/ on juba ehitatud ja minifitseerimata. Node.js ainult siis, kui ehitad uuesti.

Sunset Rally juhend soovitab Node.js 24 LTS-i. Kaustas source/ käivitad npm ci, npm run typecheck ja npm run build ning avaldad ainult kausta dist/ sisu. Samuti palub see uuesti ehitades jätta minify ja cssMinify välja, sest kohaletoimetatud käituskeskkond on vormindatud lugemiseks. Laadi üles tulemus, mitte kunagi node_modules/.

Vaata Sunset Rally väljaannet

Majutamine: mida „staatiline“ praktikas tähendab

Staatiline majutus tähendab, et majutaja ainult serveerib faile. Velvet Pool'i ja Puttide'i juhendid annavad kogu paigalduse kolme sammuga:

1. Paki ZIP lahti.
2. Laadi kõik game/ sees olev sinu saidi kausta, näiteks public_html/velvet-pool/, FTP või majutaja failihalduri kaudu, alamkaustad alles.
3. Ava see aadress brauseris.

Npm, terminal, ehitusetapp, PHP, andmebaas ega konto pole kaasatud. Mis inimesi kimbutab, on samade juhendite järgi:

• Ära topeltklõpsa index.html-il. Brauserid blokeerivad mängu mooduleid file:// peal. Kohaliku testi jaoks käivita python -m http.server 8765 game/ sees ja ava http://localhost:8765/.
• Sinu server peab saatma .js-failid JavaScripti MIME-tüübiga ja .wasm tüübiga application/wasm. Vale MIME-tüüp ilmub mooduli tagasilükkamise veana.
• Avalikuks majutamiseks kasuta HTTPS-i.
• Salvestused kuuluvad brauseri päritolule (protokoll, host ja port). Kui mängu kolid teisele domeenile, alustavad mängijad nullist.
• Värske lehelaadimine vajab ikka sinu majutust, seega see ei ole installitav võrguühenduseta rakendus.

Kus asuvad logo, värvid, reeglid ja tõlked

Igal juhendil on kohandamise osa ja see, mida see katab, erineb väljaannete vahel. Siin on, mida iga üks ütleb.

Velvet Pool

• Logo ja bränding: asenda failid kaustas assets/logo/ ja kohenda vastavad mõõdud CSS-is.
• Laua katte ja kepi stiilid: nende definitsioonid on progress.js-is. Hoia üksuste ID-d stabiilsed, et salvestatud kosmeetika jääks tööle.
• Arvuti käitumine ai.js-is, füüsika physics.js-is. Pärast reeglite või füüsika muutmist käivita 8-palli testid.
• Tõlked: src/game/i18n.js, keelenimekiri LANGS-is.

Puttide

• Värvid ja fondid: css/style.css.
• Füüsika: src/sim/constants.js. Kosmeetika hinnad: src/game/economy.js, säilitades olemasolevad ID-d.
• Muusika: kopeeri litsentseeritud fail kausta music/ ja uuenda rajakaarti failis src/audio/audio.js.
• Augud, par ja lukustused: ülal kirjeldatud rajafailid.

Gridspark ja Sunset Rally

Gridsparkis, selle üksuse KKK järgi, elab liidese tekst failis src/locales.js, reeglite konstandid ja paletid failis src/config.js ning pusle reeglid failides game.js, board.js, generator.js ja shapes.js. Sunset Rallys on kampaania vastete ja tähetingimused failis Campaign.ts, kohad failis Places.ts, füüsika failis physics.ts ja skoorimine failis match.ts. Inglise ja portugali stringid on failis src/i18n.ts, ülejäänud 12 keelt kaustas src/locales/.

Pane tähele, mida juhendid välja jätavad. Puttide'i juhend katab värve, füüsikat, auke, hindu ja muusikat, aga logo vahetamise sammu sel pole ning Sunset Rally juhendil pole eraldi brändingu jaotist. Kui bränding on esimene asi, mida muudad, küsi enne ostmist.

Vaata Gridsparki väljaannet

Automaattestid: mida nad kontrollivad ja mida mitte

Velvet Pool'i kaustas source/ on testikomplekt. Node.js 20 või uuem: ava terminal source/ sees ja käivita npm test, mis on sama mis node tests/run.js. Sõltuvuste paigaldamist pole vaja. Juhendi järgi kontrollib komplekt füüsikat, 8-palli reegleid, arvutimatše ja tõlkevõtmete järjepidevust ning see ei asenda testimist brauserites ja päris seadmetel.

Tõlkevõtme kontroll on test, mida 14 keelega mäng vajab: lisad ühes keeles võtme, unustad teise ja inimene ei pruugi nädalateks märgata.

Kõigil väljaannetel pole teste. Puttide'i juhend ei kirjelda ühtegi, ainult käsitsi kontrolle. Pinloop ja Beep Out loetlevad npm test arendajakäskude hulgas ja Ricopop'i arendajatööriistad sisaldavad taseme kontrollijat.

Litsents, kolmandate osapoolte teated ja muudatuste logi

Poe tingimuste järgi annab iga ost püsiva, mitteeksklusiivse litsentsi väljaande kasutamiseks ühes lõpptootes, sinu või ühe kliendi oma. Võid selle sees muuta koodi, kunsti ja heli ning mängijad võivad seda kasutada tasuta või reklaamidega. Sa ei tohi malli, selle lähtekoodi ega varasid eraldi müüa, jagada ega edasi levitada, malli, komplekti või varapakina ega teises tootes, mis on mõeldud arendajatele. Litsents ei aegu, kui tugi lõpeb.

Kolmanda osapoole osad säilitavad oma litsentsid ja sina hoiad nende teated oma tootega. Velvet Pool'is tähendab see kahte fonti, Manrope ja Fraunces, SIL Open Font License 1.1 all, tekstid kaustas THIRD-PARTY-LICENSES/ ja fontide kõrval. Puttide'i nimekirjas on lisaks Three.js (MIT), Rapier (Apache-2.0) ning fondid Rubik ja Fredoka (OFL 1.1).

Muudatuste logi näitab, kuidas paketti hooldatakse. Velvet Pool 1.0.1 (18. oktoober 2026) jagas pikad read loetavateks ridadeks ja kogus litsentsiteated ühte lamedasse kausta. Versioon 1.1.0 (22. oktoober 2026) tõi liidese 14 keelde. Need kirjed on üksuse lehel. Tingimused ütlevad, et sama väljaande uuendused ilmuvad raamatukogus, kui need avaldatakse, ilma lubaduseta uuendusi fikseeritud ajaks.

Kuidas lugeda ostetud mängu koodi tunniga

See on soovitatud plaan, mitte lubatud ajakava. See järgib Velvet Pool'i paigutust ja kasutab ainult seda, mida pakett annab.

1. 0–10 minutit: paki ZIP lahti, vaata kiiresti source/ README ja juhendi failikaarti. Ava index.html ja vaata, milliseid skripte ja stiililehti see laeb.
2. 10–20 minutit: käivita npm test source/ sees (Node.js 20+), et saada roheline lähtepunkt.
3. 20–35 minutit: loe src/core enne src/game. Alusta rules.js-ist, siis ai.js, siis physics.js. See on mäng ise. Juhtimine, edenemine, tekstid ja heli on selle ümber toru.
4. 35–40 minutit: pane tähele, et üksuste ID-d ja salvestusvõtmed peavad jääma stabiilseks, muidu kaotavad mängijad salvestatud kosmeetika.
5. 40–55 minutit: tee üks väike muudatus, näiteks laua katte definitsioon progress.js-is. Kopeeri fail game/ samale teele, serveeri game/ käsuga python -m http.server 8765 ja vaata tulemust. Ära kunagi ava seda file:// kaudu.
6. 55–60 minutit: käivita testid uuesti.

ES-moodulid nimetavad, mida nad vajavad oma importridades, nii et saad jälgida ahelat esimesest skriptist, mille leht laeb. Sellepärast saab tavaliste failide väljaannet selle tempoga lugeda.

Küsimused, mida küsida enne lähtekoodi ostmist

• Kas võin enne maksmist lugeda juhendit ja mängida demot? Meie väljaannete puhul on mõlemad lingitud üksuse lehelt.
• Kas on valmis majutatav ehitis ja eraldi arendaja lähtekood?
• Kas kood on loetav või minifitseeritud? Ava üks skript ja vaata.
• Kas vajan Node.js-i, npm-i, PHP-d või andmebaasi, ja millised versioonid?
• Kas mäng laadib midagi CDN-ist või teisest saidist?
• Millised kolmanda osapoole teegid on sees ja millise litsentsi all?
• Mitme projekti jaoks võin seda kasutada ja kas võin seda edasi levitada?
• Kui kaua tugi kestab ja mida see katab? Meil on 6 kuud või 12, kui valid kassas pikenduse; see katab küsimused failide paigaldamise ja kasutamise kohta ning korduvad vead.
• Mis on välja jäetud?
• Kas on muudatuste logi ja hiljutine väljalase?
• Mis on tagastusreegel? Meil: mallid on digitaalsed tooted, seega tagastame ainult siis, kui malli pole veel alla laaditud või sellel on viga, mida me parandada ei saa. Pöördud stuudio poole litsentsinumbriga.

Mida need väljaanded ei sisalda

Mõned väljaanded lisavad valikulisi lisasid. Ricopop ja Zabum sisaldavad ühefaililist PHP edetabelit, mis on vaikimisi väljas. See on lihtne ühine tulemustabel, mis salvestab skoorid faili, mitte petukindel edetabel, ega elav mitmikmäng.

Tugi katab küsimused antud failide paigaldamise ja kasutamise kohta ning antud mängu korduva vea parandamise. See on piir ja parem on seda teada esimesel päeval.

Korduma kippuvad küsimused

Mis vahe on mängukaustal ja lähtekaustal?

game/ on ehitis, mille laadid oma majutajale. source/ on sama mängu muudetav arendajaversioon. Velvet Pool'il ja Puttide'il on sama paigutus, seega fail, mida muudad source/-is, kopeeritakse samale teele game/-is. TypeScripti väljaannetes nagu Sunset Rally on source/ projekt, mida ehitad uuesti, ja avaldad uue väljundi.

Kas mängu kasutamiseks on vaja npm-i või Node.js-i?

Majutamiseks mitte. Node.js ilmub ainult Velvet Pool'i valikulistele testidele (20 või uuem) või TypeScripti väljaannete nagu Sunset Rally (soovitatav 24 LTS) ja Pinloop'i (22.12 või uuem) uuesti ehitamiseks.

Kas lähtekood on minifitseeritud?

Käsitletud väljaannetes ei ole. Velvet Pool ja Puttide on lihtne vormindatud JavaScript ning mõlema versioon 1.0.1 jagas pikad üherealised stringid loetavateks ridadeks. Sunset Rally käituskeskkond on kohaletoimetatud vormindatuna, minifitseerimine väljas.

Kas saan ühe ostu kasutada mitme projekti või kliendi jaoks?

Litsents katab ühe lõpptoote, sinu või ühe kliendi oma. Teine toode on sellest väljas.

Kas võin lähtekoodi edasi müüa või jagada?

Ei: mitte eraldi, mitte mallina, komplektina ega varapakina ega teises tootes, mis on mõeldud arendajatele. Võid muuta koodi, kunsti ja heli oma lõpptoote sees.

Kas võin juhendi enne ostmist lugeda?

Jah. Iga üksuse leht lingib oma juhendile ja samast väljaandest mängitavale demole.

Ava pakett enne ostmist

Vali väljaanne, ava juhend üksuse lehelt, mängi demot ja loe failikaarti kõrvuti ülaltoodud küsimustega. Kui juhend need vastab, peaks ka pakett vastama. Kui ei, kirjuta enne maksmist stuudiole.

Sirvi kõiki malle