Broncode van een HTML5-game: wat zit er echt in een pakket?
Een blik in echte pakketten uit de Polar Games Marketplace: mappen, bestanden, buildstappen, licenties en de vragen die u vóór aankoop moet stellen.
Broncode van een HTML5-game kan drie verschillende dingen betekenen: een build die klaar is om te uploaden, de ontwikkelaarsbestanden die u bewerkt, of een project dat alleen in één bepaalde editor opent. Een HTML5-gametemplate met broncode uit onze marketplace is de eerste twee samen, als gewone webbestanden, en deze gids opent echte pakketten om te laten zien hoe dat eruitziet.
Wij verkopen deze templates, dus lees dit als rondleiding door onze eigen pakketten, niet als neutraal overzicht van de markt. We liepen verschillende edities door, vooral Velvet Pool, Puttide en Sunset Rally, lazen hun openbare handleidingen en de winkelvoorwaarden en noteerden wat er in de doos zit, wat u nodig hebt om hem te laten draaien en wat er niet in zit. Elke handleiding is gelinkt vanaf de itempagina, dus u kunt elke regel controleren voordat u betaalt.
Wat “broncode van een HTML5-game” kan betekenen
Verkopers gebruiken het woord broncode losjes. Drie vragen maken duidelijk wat er werkelijk wordt verkocht.
Een build, een ontwikkelaarsbron, of allebei?
Een build is de afgewerkte game zoals de browser hem laadt: een index.html, scripts, afbeeldingen en geluidsbestanden. U kunt hem ongewijzigd hosten. Een ontwikkelaarsbron is de versie die is gemaakt om te worden bewerkt, met bestanden verdeeld naar taak. Een pakket met alleen de build kunt u uploaden maar niet gemakkelijk wijzigen. Een pakket met alleen bron kan eerst tools nodig hebben voordat het ook maar draait. De edities in deze gids zetten beide in één ZIP: meestal een map game/ om te publiceren en een map source/ om te bewerken (in Ricopop is game/ zelf de bron).
Leesbaar of geminificeerd?
Minificeren perst scripts samen tot een paar dichte regels met korte namen, wat sneller downloadt en afschuwelijk leest. Obfuscatie gaat verder en husselt namen met opzet. Geen van beide schaadt een live site. Beide schaden als u de code kocht om hem te wijzigen. Open vóór de betaling één script van de live demo in de ontwikkelaarstools van uw browser en kijk of u het zou kunnen volgen.
Gewone bestanden of een editorproject?
Sommige templates komen als project voor een specifieke game-editor en kunt u alleen in die editor openen. Andere zijn gewone webbestanden die elke code-editor opent. De edities in deze gids zijn van de tweede soort: HTML, CSS, JavaScript en JSON, in sommige met TypeScript.
Wat er in een Polar Games-pakket zit
Neem Velvet Pool, onze 8-ball-pooleditie. De handleiding beschrijft vier mappen in de ZIP:
- game/ is de uploadklare editie en de enige map die u publiceert.
- source/ is dezelfde game als bewerkbare ontwikkelaarseditie, met een README, een package.json en tests.
- documentation/ bevat de geïllustreerde gids en de bijbehorende afbeeldingen.
- THIRD-PARTY-LICENSES/ bevat de licentieteksten van de lettertypen en een samenvatting in README.txt.
In uw bibliotheek wordt hetzelfde pakket als twee downloads aangeboden: het complete pakket (bron en handleiding) of alleen de game, klaar om te hosten.
game/ en source/ delen dezelfde indeling. Voor Velvet Pool zegt de handleiding dat u bestanden in source/ bewerkt en de gewijzigde naar hetzelfde pad in game/ kopieert. Er wordt niets tussendoor gecompileerd.
In Velvet Pool: de bestandskaart
Een bestandskaart is de goedkoopste manier om een codebase te beoordelen voordat u hem koopt. Dit is die uit de handleiding van Velvet Pool, met paden ten opzichte van source/ of game/:
- src/core/physics.js: ballensimulatie, effect en reactie op de band.
- src/core/rules.js: 8-ball-regels en foutbeslissingen.
- src/core/ai.js: hoe de CPU een stoot kiest.
- src/game/controls.js: richten, kracht en effect.
- src/game/progress.js: prestaties, lakens, keuen en wedstrijdscore.
- src/game/i18n.js: de tekst in 14 talen.
- src/game/localRecords.js: de lokale scoregeschiedenis.
- src/game/audio.js: geluidseffecten en het afspelen van muziek.
- css/style.css en css/fonts.css: thema, responsieve indeling en lettertypedeclaraties.
- assets/: beeld, audio en lettertypen, met een submap logo/.
Let op de verdeling. Regels, natuurkunde en de CPU staan in src/core. Invoer, opgeslagen voortgang, teksten en geluid staan in src/game. De handleiding vraagt u één functie tegelijk te wijzigen, en deze indeling maakt dat realistisch: een aanpassing van de band en een vertaalcorrectie raken verschillende bestanden.
De handleiding stelt ook dat de code in source/src en game/src gewone, opgemaakte JavaScript is, zonder geminificeerde of gebundelde bestanden. Velvet Pool is vanilla JavaScript op WebGL2 en gebruikt geen codebibliotheek, Three.js inbegrepen. De changelog onderbouwt de bewering: versie 1.0.1 verdeelde lange enkelregelige strings in audio, vertalingen en shaders over leesbare regels, met ongewijzigd gedrag.
Puttide: dezelfde indeling, plus bibliotheken
Puttide, onze 3D-minigolfeditie, gebruikt dezelfde vier mappen en voegt één ding toe: twee bibliotheken van derden die de game nodig heeft. Three.js r186 (MIT) en Rapier 3D 0.21.0 (Apache-2.0) staan in lib/three/ en lib/rapier/, en de import map in index.html vertelt de browser waar ze te vinden zijn. De FAQ van Puttide stelt dat er niets van een CDN wordt geladen, dus de game heeft alleen uw eigen host nodig. De handleiding voegt toe dat de bibliotheekbestanden zijn opgemaakt zodat ze leesbaar zijn, met ongewijzigd gedrag.
De bestandskaart, opnieuw ten opzichte van source/ of game/:
- src/course/courses.js: volgorde van banen en ontgrendelvereisten.
- src/course/holes.js: geometrie, par en obstakels van de baan Ruins. pier.js, ice.js, lava.js en sky.js bevatten de andere vier.
- src/sim/constants.js: afstemming van de natuurkunde.
- src/game/economy.js: definities en prijzen van ballen, sporen en outfits.
- src/ui/i18n.js en drie andere woordenboekbestanden: de tekst per taal.
- css/style.css: interfacekleuren, lettertypen en responsieve stijlen.
- fonts/ en music/: de weblettertypen met hun licenties en twee muzieknummers.
Het recept van de handleiding voor een nieuwe hole: dupliceer een definitie in het juiste baanbestand, geef haar een unieke id, stel par, tee- en cuppositie in, voeg haar toe aan de baan en voeg dan haar naam en tip toe aan de taalwoordenboeken. Lees zo’n recept voordat u koopt. Ziet het eruit als werk dat u kunt doen, dan past het pakket bij u.
Wanneer de bron een buildstap nodig heeft
“Geen buildstap” geldt voor sommige edities en niet voor andere, dus controleer de editie, niet de winkel. Hier staan vijf van de onze naast elkaar, met hun lijstprijzen. Onze eigen winkel toont momenteel 10% korting op de lijstprijs, het studio direct-aanbod op elke itempagina: Velvet Pool toont bijvoorbeeld $35,10 in plaats van $39.
- Velvet Pool, lijstprijs $39: gewone JavaScript-modules op WebGL2. Bewerk source/, kopieer naar game/. Node.js 20+ alleen voor de optionele tests.
- Puttide, $39: gewone JavaScript-modules met Three.js en Rapier in lib/. Geen buildstap. Node.js is optioneel en alleen voor het beheren van de bibliotheekversies.
- Ricopop, $39: gewone HTML, CSS en JavaScript-modules, en game/ is zelf de bron. Optionele ontwikkelaarstools (Node.js 20+): een lokale server, een levelcontrole en tests.
- Pinloop, $24: TypeScript met Vite. De map game/ bevat leesbare JavaScript en CSS. Node.js 22.12+ en npm alleen om de bron te bewerken en opnieuw te bouwen.
- Sunset Rally, $39: TypeScript met Three.js r184 en Vite. De map game/ is al gebouwd en niet geminificeerd. Node.js alleen als u opnieuw bouwt.
Voor Sunset Rally raadt de handleiding Node.js 24 LTS aan. In source/ voert u npm ci, npm run typecheck en npm run build uit en publiceert u daarna alleen de inhoud van dist/. Ze vraagt u ook minify en cssMinify uit te laten staan wanneer u opnieuw bouwt, omdat de geleverde runtime voor leesbaarheid is opgemaakt. Upload het resultaat, nooit node_modules/.
Hosten: wat “statisch” in de praktijk betekent
Statische hosting betekent dat uw host alleen bestanden serveert. De handleidingen van Velvet Pool en Puttide geven de hele installatie in drie stappen:
- Pak de ZIP uit.
- Upload alles in game/ naar een map op uw site, bijvoorbeeld public_html/velvet-pool/, via FTP of de bestandsbeheerder van uw host, met behoud van de submappen.
- Open dat adres in een browser.
Er komen geen npm, terminal, buildstap, PHP, database of account bij kijken. Waar mensen volgens dezelfde handleidingen wel over struikelen:
- Dubbelklik niet op index.html. Browsers blokkeren gamemodules op file://. Voor een lokale test voert u python -m http.server 8765 uit in game/ en opent u http://localhost:8765/.
- Uw server moet .js-bestanden met een JavaScript-MIME-type sturen en .wasm als application/wasm. Een verkeerd MIME-type verschijnt als de foutmelding dat een module is geweigerd.
- Gebruik HTTPS voor openbare hosting.
- Opgeslagen voortgang hoort bij de oorsprong in de browser (protocol, host en poort). Verhuist u de game naar een ander domein, dan beginnen spelers bij nul.
- Een verse paginalading heeft nog steeds uw host nodig, dus dit is geen installeerbare offline app.
Waar het logo, de kleuren, de regels en de vertalingen staan
Elke handleiding heeft een aanpassingsonderdeel, en wat het dekt verschilt per editie. Dit zegt elk ervan.
Velvet Pool
- Logo en branding: vervang de bestanden in assets/logo/ en pas de bijbehorende afmetingen in de CSS aan.
- Stijlen van laken en keu: hun definities staan in progress.js. Houd de item-id’s stabiel zodat bewaarde cosmetica blijft werken.
- Gedrag van de CPU in ai.js, natuurkunde in physics.js. Voer na het wijzigen van regels of natuurkunde de 8-ball-tests uit.
- Vertalingen: src/game/i18n.js, met de talenlijst in LANGS.
Puttide
- Kleuren en lettertypen: css/style.css.
- Natuurkunde: src/sim/constants.js. Prijzen van cosmetica: src/game/economy.js, met behoud van bestaande id’s.
- Muziek: kopieer een gelicentieerd bestand naar music/ en werk de nummertoewijzing in src/audio/audio.js bij.
- Holes, par en ontgrendelingen: de hierboven beschreven baanbestanden.
Gridspark en Sunset Rally
In Gridspark staat, volgens de FAQ van het item, de interfacetekst in src/locales.js, staan regelconstanten en palet in src/config.js en de puzzelregels in game.js, board.js, generator.js en shapes.js. In Sunset Rally staan de campagnewedstrijden en sterrencondities in Campaign.ts, de locaties in Places.ts, de natuurkunde in physics.ts en de score in match.ts. De Engelse en Portugese teksten staan in src/i18n.ts, de andere 12 talen in src/locales/.
Let op wat de handleidingen weglaten. De handleiding van Puttide behandelt kleuren, natuurkunde, holes, prijzen en muziek, maar heeft geen stap om het logo te vervangen, en de handleiding van Sunset Rally heeft geen apart onderdeel over branding. Is branding het eerste wat u gaat wijzigen, vraag het dan vóór u koopt.
Geautomatiseerde tests: wat ze controleren en wat niet
De map source/ van Velvet Pool bevat een testsuite. Met Node.js 20 of nieuwer opent u een terminal in source/ en voert u npm test uit, wat hetzelfde is als node tests/run.js. Er hoeft geen afhankelijkheid te worden geïnstalleerd. Volgens de handleiding controleert de suite natuurkunde, 8-ball-regels, CPU-wedstrijden en de consistentie van vertaalsleutels, en vervangt ze het testen in browsers en op echte apparaten niet.
Een controle op vertaalsleutels is het soort test dat een game met 14 talen nodig heeft: voeg in één taal een sleutel toe, vergeet een andere, en een mens merkt het misschien wekenlang niet.
Niet elke editie heeft tests. De handleiding van Puttide beschrijft er geen, alleen handmatige controles. Pinloop en Beep Out noemen npm test onder hun ontwikkelaarscommando’s, en de ontwikkelaarstools van Ricopop bevatten een levelcontrole.
Licentie, vermeldingen van derden en de changelog
Volgens de winkelvoorwaarden geeft elke aankoop een eeuwigdurende, niet-exclusieve licentie om de editie te gebruiken in één eindproduct, van uzelf of van één klant. U mag de code, het beeld en het geluid erin wijzigen, en spelers mogen het gratis of via advertenties gebruiken. U mag de template, de bron of de assets niet los doorverkopen, delen of verspreiden, niet als template, kit of assetpakket en niet binnen een ander product dat voor ontwikkelaars bedoeld is. De licentie loopt niet af wanneer de support eindigt.
Onderdelen van derden houden hun eigen licenties, en u bewaart hun vermeldingen bij uw product. In Velvet Pool zijn dat twee lettertypen, Manrope en Fraunces, onder de SIL Open Font License 1.1, met de teksten in THIRD-PARTY-LICENSES/ en naast de lettertypen. In Puttide voegt de lijst Three.js (MIT), Rapier (Apache-2.0) en de lettertypen Rubik en Fredoka (OFL 1.1) toe.
De changelog laat zien hoe een pakket wordt onderhouden. Velvet Pool 1.0.1 (18 oktober 2026) verdeelde lange strings over leesbare regels en bracht de licentievermeldingen samen in één platte map. Versie 1.1.0 (22 oktober 2026) bracht de interface naar 14 talen. Die vermeldingen staan op de itempagina. De voorwaarden zeggen dat updates van dezelfde editie in uw bibliotheek verschijnen zodra ze zijn gepubliceerd, zonder belofte van updates voor een vaste periode.
Zo leest u in een uur de code van een gekochte game
Dit is een voorgesteld plan, geen beloofde timing. Het volgt de indeling van Velvet Pool en gebruikt alleen wat het pakket u geeft.
- Minuut 0 tot 10: pak de ZIP uit, blader door de README in source/ en de bestandskaart in de handleiding. Open index.html en bekijk welke scripts en stijlbladen hij laadt.
- Minuut 10 tot 20: voer npm test uit in source/ (Node.js 20+) voor een groene uitgangssituatie.
- Minuut 20 tot 35: lees src/core vóór src/game. Begin met rules.js, dan ai.js, dan physics.js. Dat is de game zelf. Besturing, voortgang, teksten en geluid zijn het leidingwerk eromheen.
- Minuut 35 tot 40: noteer dat item-id’s en opslagsleutels stabiel moeten blijven, anders verliezen spelers hun bewaarde cosmetica.
- Minuut 40 tot 55: doe één kleine wijziging, zoals een lakendefinitie in progress.js. Kopieer het bestand naar hetzelfde pad in game/, serveer game/ met python -m http.server 8765 en bekijk het resultaat. Open het nooit via file://.
- Minuut 55 tot 60: voer de tests opnieuw uit.
ES-modules noemen in hun importregels wat ze nodig hebben, dus u kunt de keten volgen vanaf het eerste script dat de pagina laadt. Daarom kan een editie met gewone bestanden in dit tempo worden gelezen.
Vragen voor u broncode koopt
- Kan ik de handleiding lezen en een demo spelen voordat ik betaal? Voor onze edities zijn beide gelinkt vanaf de itempagina.
- Is er een build die klaar is om te hosten en een aparte ontwikkelaarsbron?
- Is de code leesbaar of geminificeerd? Open één script en kijk.
- Heb ik Node.js, npm, PHP of een database nodig, en welke versies?
- Laadt de game iets van een CDN of een andere site?
- Welke bibliotheken van derden zitten erin, en onder welke licenties?
- In hoeveel projecten mag ik hem gebruiken, en mag ik hem verspreiden?
- Hoe lang duurt support en wat dekt ze? Bij ons 6 maanden, of 12 met de verlenging die u bij het afrekenen kiest, voor vragen over het installeren en gebruiken van de bestanden en reproduceerbare gebreken.
- Wat is weggelaten?
- Is er een changelog en een recente release?
- Wat is de terugbetalingsregel? Bij ons: templates zijn digitale producten, dus we betalen alleen terug als u de template nog niet hebt gedownload, of als er een gebrek in zit dat we niet kunnen verhelpen. U vraagt het aan door de studio te schrijven met uw licentienummer.
Wat deze edities niet bevatten
Sommige edities voegen optionele extra’s toe. Ricopop en Zabum bevatten een PHP-klassement in één bestand dat standaard uit staat. Het is een informeel gedeeld scorebord dat scores in een bestand opslaat, geen valsspeelbestendige ranglijst en geen live multiplayer.
Support dekt vragen over het installeren en gebruiken van de geleverde bestanden en het verhelpen van reproduceerbare gebreken in de geleverde game. Dat is een grens, en het is beter die op dag één te kennen.
Veelgestelde vragen
Wat is het verschil tussen de gamemap en de bronmap?
game/ is de build die u naar uw host uploadt. source/ is de bewerkbare ontwikkelaarseditie van dezelfde game. In Velvet Pool en Puttide delen ze dezelfde indeling, dus een bestand dat u in source/ bewerkt, kopieert u naar hetzelfde pad in game/. In TypeScript-edities zoals Sunset Rally is source/ een project dat u opnieuw bouwt, en publiceert u de nieuwe uitvoer.
Heb ik npm of Node.js nodig om de game te gebruiken?
Niet om hem te hosten. Node.js komt alleen voor bij de optionele tests in Velvet Pool (20 of nieuwer) of om TypeScript-edities zoals Sunset Rally (24 LTS aanbevolen) en Pinloop (22.12 of nieuwer) opnieuw te bouwen.
Is de broncode geminificeerd?
Niet in de hier behandelde edities. Velvet Pool en Puttide zijn gewone opgemaakte JavaScript, en versie 1.0.1 van beide verdeelde lange enkelregelige strings over leesbare regels. De runtime van Sunset Rally wordt opgemaakt geleverd, met minificatie uit.
Kan ik één aankoop voor meerdere projecten of klanten gebruiken?
De licentie dekt één eindproduct, van uzelf of van één klant. Een tweede product valt erbuiten.
Mag ik de broncode doorverkopen of delen?
Nee: niet los, niet als template, kit of assetpakket en niet binnen een ander product dat voor ontwikkelaars bedoeld is. U mag de code, het beeld en het geluid binnen uw eigen eindproduct wijzigen.
Kan ik de handleiding lezen voordat ik koop?
Ja. Elke itempagina linkt naar de handleiding en naar een speelbare demo van dezelfde editie.
Open een pakket voordat u er een koopt
Kies een editie, open de handleiding vanaf de itempagina, speel de demo en lees de bestandskaart naast de vragen hierboven. Beantwoordt de handleiding ze, dan zou het pakket dat ook moeten doen. Doet ze dat niet, schrijf de studio dan voordat u betaalt.