HTML5-spill med kildekode: hva som ligger i en ekte pakke
En titt inni ekte pakker fra Polar Games-markedsplassen: mapper, filer, byggesteg, lisenser og spørsmålene det lønner seg å stille før betaling.
Kildekode for HTML5-spill kan bety tre ulike ting: et bygg som er klart for opplasting, utviklerfilene man redigerer, eller et prosjekt som bare åpnes i én bestemt editor. En HTML5-spillmal med kildekode fra markedsplassen vår er de to første samtidig, som vanlige nettfiler, og denne guiden åpner ekte pakker for å vise hvordan det ser ut.
Vi selger malene, så les dette som en omvisning i våre egne pakker, ikke som en nøytral oversikt over markedet. Vi gikk gjennom flere utgaver, hovedsakelig Velvet Pool, Puttide og Sunset Rally, leste de offentlige manualene og butikkvilkårene, og noterte hva som ligger i esken, hva som trengs for å kjøre den, og hva som ikke finnes der. Hver manual er lenket fra produktsiden, så hver linje kan kontrolleres før betaling.
Hva «HTML5-spill med kildekode» kan bety
Selgere bruker ordet kildekode løst. Tre spørsmål sorterer hva som faktisk selges.
Et bygg, en utviklerkilde, eller begge?
Et bygg er det ferdige spillet slik nettleseren laster det: en index.html, skript, bilder og lydfiler. Det kan legges ut som det er. Utviklerkilden er versjonen laget for å redigeres, med filer delt etter oppgave. En pakke med bare bygget kan lastes opp, men ikke endres komfortabelt. En pakke med bare kilde kan trenge verktøy før den kjører i det hele tatt. Utgavene i denne guiden legger begge i én ZIP: vanligvis en mappe game/ å publisere og en mappe source/ å redigere (i Ricopop er game/ selv kilden).
Lesbar eller minifisert?
Minifisering presser skript inn i noen få tette linjer med korte navn, noe som laster raskere og er forferdelig å lese. Obfuskering går lenger og blander navnene med vilje. Ingen av delene skader et levende nettsted. Begge skader hvis man kjøpte koden for å endre den. Før betaling åpnes ett skript fra den levende demoen i nettleserens utviklerverktøy, og man ser om det kan følges.
Vanlige filer eller et editorprosjekt?
Noen maler kommer som et prosjekt for en bestemt spilleditor, og de kan bare åpnes i den editoren. Andre er vanlige nettfiler som et hvilket som helst kodeeditor åpner. Utgavene i denne guiden er den andre typen: HTML, CSS, JavaScript og JSON, med TypeScript i noen av dem.
Hva som ligger i en Polar Games-pakke
Ta Velvet Pool, vår biljardutgave med åtteball. Manualen beskriver fire mapper i ZIP-filen:
- game/ er utgaven klar for opplasting, og den eneste mappen som publiseres.
- source/ er det samme spillet som en redigerbar utviklerutgave, med en README, en package.json og tester.
- documentation/ inneholder den illustrerte veiledningen og bildene.
- THIRD-PARTY-LICENSES/ inneholder lisenstekstene for skriftene og en README.txt-oppsummering.
I biblioteket tilbys samme pakke som to nedlastinger: den komplette pakken (kilde og manual) eller bare spillet, klart til webhost.
game/ og source/ har samme oppsett. For Velvet Pool sier manualen at filer redigeres i source/, og de endrede kopieres til samme sti i game/. Ingenting kompileres mellom.
Inni Velvet Pool: filkartet
Et filkart er den billigste måten å vurdere en kodebase på før kjøp. Dette er kartet i Velvet Pool-manualen, med stier i forhold til source/ eller game/:
- src/core/physics.js: simulering av baller, spinn og respons fra banden.
- src/core/rules.js: 8-ball-regler og avgjørelser om feil.
- src/core/ai.js: hvordan CPU-en velger et støt.
- src/game/controls.js: sikting, styrke og spinn-inndata.
- src/game/progress.js: prestasjoner, duker, køer og kampscore.
- src/game/i18n.js: teksten på 14 språk.
- src/game/localRecords.js: den lokale poenghistorikken.
- src/game/audio.js: lydeffekter og avspilling av musikk.
- css/style.css og css/fonts.css: tema, responsivt oppsett og skriftdeklarasjoner.
- assets/: grafikk, lyd og skrifter, med en undermappe logo/.
Legg merke til delingen. Regler, fysikk og CPU-en ligger i src/core. Input, lagringer, tekster og lyd ligger i src/game. Manualen ber om at man endrer én funksjon om gangen, og dette oppsettet gjør det realistisk: en justering av banden og en oversettelsesrettelse rører ulike filer.
Manualen sier også at koden i source/src og game/src er ren, formatert JavaScript, uten minifiserte eller samlede filer. Velvet Pool er ren JavaScript på WebGL2 og bruker ingen kodebibliotek, Three.js inkludert. Endringsloggen støtter påstanden: versjon 1.0.1 delte lange enkeltlinjestrenger i lyd, oversettelser og shadere opp i lesbare linjer, uten at oppførselen endret seg.
Puttide: samme oppsett, pluss biblioteker
Puttide, vår 3D-utgave av minigolf, bruker de samme fire mappene og legger til én ting: to tredjepartsbiblioteker spillet trenger. Three.js r186 (MIT) og Rapier 3D 0.21.0 (Apache-2.0) ligger i lib/three/ og lib/rapier/, og import map i index.html forteller nettleseren hvor de finnes. Puttide-FAQ-en sier at ingenting lastes fra et CDN, så spillet trenger bare egen host. Manualen legger til at bibliotekfilene er formatert slik at de kan leses, uten endret oppførsel.
Filkartet, igjen i forhold til source/ eller game/:
- src/course/courses.js: rekkefølgen på banene og krav for å låse dem opp.
- src/course/holes.js: geometri, par og hindringer på Ruins-banen. pier.js, ice.js, lava.js og sky.js inneholder de fire andre.
- src/sim/constants.js: justering av fysikken.
- src/game/economy.js: definisjoner og priser for baller, spor og drakter.
- src/ui/i18n.js og tre ordbokfiler til: språkteksten.
- css/style.css: farger i grensesnittet, skrifter og responsive stiler.
- fonts/ og music/: webskriftene med lisensene og to musikkspor.
Manualens oppskrift for et nytt hull: dupliser en definisjon i riktig banefil, gi den en unik id, sett par og posisjoner for utslag og hull, legg den til i banen, og legg så til navnet og tipset i språkordbøkene. Les en oppskrift som dette før kjøp. Ser det ut som arbeid man kan gjøre, passer pakken.
Når kilden trenger et byggesteg
«Ingen byggesteg» gjelder for noen utgaver og ikke for andre, så sjekk utgaven, ikke butikken. Her er fem av våre side om side, med listeprisene. Vår egen butikk viser for tiden 10 % rabatt på listeprisen, prisen «studio direct» på hver produktside: Velvet Pool vises for eksempel til US$ 35,10 i stedet for US$ 39.
- Velvet Pool, listepris US$ 39: rene JavaScript-moduler på WebGL2. Rediger source/, kopier til game/. Node.js 20+ bare for de valgfrie testene.
- Puttide, US$ 39: rene JavaScript-moduler med Three.js og Rapier i lib/. Ingen byggesteg. Node.js er valgfritt og bare for å administrere bibliotekversjonene.
- Ricopop, US$ 39: ren HTML-, CSS- og JavaScript-moduler, og game/ er selv kilden. Valgfrie utviklerverktøy (Node.js 20+): en lokal server, en nivåkontroll og tester.
- Pinloop, US$ 24: TypeScript med Vite. Mappen game/ har lesbar JavaScript og CSS. Node.js 22.12+ og npm bare for å redigere og bygge kilden på nytt.
- Sunset Rally, US$ 39: TypeScript med Three.js r184 og Vite. Mappen game/ er allerede bygget og uminifisert. Node.js bare hvis man bygger på nytt.
For Sunset Rally anbefaler manualen Node.js 24 LTS. Inne i source/ kjører man npm ci, npm run typecheck og npm run build, og publiserer deretter bare innholdet i dist/. Den ber også om at minify og cssMinify er slått av ved ombygging, fordi kjøretiden som leveres, er formatert for lesing. Last opp resultatet, aldri node_modules/.
Hosting: hva «statisk» betyr i praksis
Statisk hosting betyr at webhosten bare serverer filer. Manualene til Velvet Pool og Puttide gir hele installasjonen i tre steg:
- Pakk ut ZIP-filen.
- Last opp alt inne i game/ til en mappe på nettstedet, for eksempel public_html/velvet-pool/, med FTP eller hostens filbehandler, og behold undermappene.
- Åpne den adressen i en nettleser.
Ingen npm, terminal, byggesteg, PHP, database eller konto er involvert. Det som vanligvis skaper problemer, ifølge de samme manualene:
- Ikke dobbeltklikk på index.html. Nettlesere blokkerer spillmoduler på file://. For en lokal test kjøres python -m http.server 8765 inne i game/, og http://localhost:8765/ åpnes.
- Serveren må sende .js-filer med en JavaScript-MIME-type og .wasm som application/wasm. Feil MIME-type vises som en feil om at modulen avvises.
- Bruk HTTPS for offentlig hosting.
- Lagringer hører til nettleseropprinnelsen (protokoll, vert og port). Flyttes spillet til et annet domene, starter spillerne fra null.
- En ny sidelasting trenger fortsatt hosten, så dette er ikke en app som kan installeres og brukes uten nett.
Hvor logoen, farger, regler og oversettelser ligger
Hver manual har et avsnitt om tilpasning, og det det dekker, varierer fra utgave til utgave. Her er hva hver sier.
Velvet Pool
- Logo og merkevare: erstatt filene i assets/logo/ og juster de tilsvarende dimensjonene i CSS-en.
- Duk- og køstiler: definisjonene ligger i progress.js. Hold element-ID-ene stabile, slik at lagrede kosmetiske ting fortsatt fungerer.
- CPU-oppførsel i ai.js, fysikk i physics.js. Etter endringer i regler eller fysikk, kjøres 8-ball-testene.
- Oversettelser: src/game/i18n.js, med språklisten i LANGS.
Puttide
- Farger og skrifter: css/style.css.
- Fysikk: src/sim/constants.js. Priser på kosmetikk: src/game/economy.js, med eksisterende ID-er beholdt.
- Musikk: kopier en lisensiert fil til music/ og oppdater sporkartleggingen i src/audio/audio.js.
- Hull, par og opplåsinger: banefilene beskrevet over.
Gridspark og Sunset Rally
I Gridspark ligger, ifølge produktets FAQ, grensesnittteksten i src/locales.js, regelkonstanter og palett i src/config.js, og puslespillreglene i game.js, board.js, generator.js og shapes.js. I Sunset Rally ligger kampanjekampene og stjernekravene i Campaign.ts, stedene i Places.ts, fysikken i physics.ts og poengsummen i match.ts. De engelske og portugisiske strengene ligger i src/i18n.ts, de andre 12 språkene i src/locales/.
Legg merke til hva manualene utelater. Puttide-manualen dekker farger, fysikk, hull, priser og musikk, men har ingen steg for å bytte logo, og Sunset Rally-manualen har ingen egen merkevareseksjon. Er merkevaren det første man vil endre, spør før kjøp.
Automatiske tester: hva de sjekker, og hva de ikke sjekker
Velvet Pool-mappen source/ inneholder en testpakke. Med Node.js 20 eller nyere åpnes en terminal inne i source/, og npm test kjøres, som er det samme som node tests/run.js. Ingen avhengighetsinstallasjon trengs. Ifølge manualen sjekker pakken fysikk, 8-ball-regler, CPU-kamper og konsistens i oversettelsesnøkler, og den erstatter ikke testing i nettlesere og på ekte enheter.
En sjekk av oversettelsesnøkler er den typen test et spill med 14 språk trenger: legg til en nøkkel i ett språk, glem et annet, og et menneske merker det kanskje ikke på flere uker.
Ikke alle utgaver har tester. Puttide-manualen beskriver ingen, bare manuelle sjekker. Pinloop og Beep Out lister npm test blant utviklerkommandoene sine, og Ricopops utviklerverktøy inkluderer en nivåkontroll.
Lisens, merknader fra tredjeparter og endringsloggen
Etter butikkvilkårene gir hvert kjøp en evigvarende, ikke-eksklusiv lisens til å bruke utgaven i ett sluttprodukt, enten kjøperens eget eller én klients. Koden, grafikken og lyden kan endres, og spillerne kan bruke det gratis eller gjennom annonser. Man kan ikke selge, dele eller videredistribuere malen, kildekoden eller ressursene alene, som mal, sett eller ressurspakke, eller inne i et annet produkt beregnet på utviklere. Lisensen utløper ikke når støtten tar slutt.
Tredjepartsdeler beholder sine egne lisenser, og merknadene skal følge med produktet. I Velvet Pool gjelder det to skrifter, Manrope og Fraunces, under SIL Open Font License 1.1, med tekstene i THIRD-PARTY-LICENSES/ og ved siden av skriftene. I Puttide legger listen til Three.js (MIT), Rapier (Apache-2.0) og skriftene Rubik og Fredoka (OFL 1.1).
Endringsloggen viser hvordan en pakke vedlikeholdes. Velvet Pool 1.0.1 (18. oktober 2026) delte lange strenger opp i lesbare linjer og samlet lisensmerknadene i én flat mappe. Versjon 1.1.0 (22. oktober 2026) førte grensesnittet til 14 språk. Oppføringene står på produktsiden. Vilkårene sier at oppdateringer til samme utgave vises i biblioteket når de publiseres, uten løfte om oppdateringer for en fast periode.
Hvordan lese koden i et spill man har kjøpt, på en time
Dette er en foreslått plan, ikke en lovet tid. Den følger oppsettet til Velvet Pool og bruker bare det pakken gir.
- Minutt 0 til 10: pakk ut ZIP-filen, skum README-en i source/ og manualens filkart. Åpne index.html og se hvilke skript og stilark den laster.
- Minutt 10 til 20: kjør npm test inne i source/ (Node.js 20+) for å få en grønn startsituasjon.
- Minutt 20 til 35: les src/core før src/game. Start med rules.js, deretter ai.js, og så physics.js. Det er selve spillet. Kontroller, fremdrift, tekster og lyd er rørleggerarbeidet rundt det.
- Minutt 35 til 40: merk at element-ID-er og lagringsnøkler må være stabile, ellers mister spillerne lagrede kosmetiske ting.
- Minutt 40 til 55: gjør én liten endring, for eksempel en duk-definisjon i progress.js. Kopier filen til samme sti i game/, server game/ med python -m http.server 8765 og se resultatet. Åpne aldri gjennom file://.
- Minutt 55 til 60: kjør testene på nytt.
ES-moduler nevner det de trenger i importlinjene sine, så man kan følge kjeden fra det første skriptet siden laster. Det er grunnen til at en utgave med vanlige filer kan leses i dette tempoet.
Spørsmål å stille før man kjøper kildekode
- Kan man lese manualen og spille en demo før betaling? For våre utgaver er begge lenket fra produktsiden.
- Finnes et ferdig bygg klart for webhost, og en egen utviklerkilde?
- Er koden lesbar eller minifisert? Åpne ett skript og se.
- Trengs Node.js, npm, PHP eller en database, og hvilke versjoner?
- Laster spillet noe fra et CDN eller et annet nettsted?
- Hvilke tredjepartsbiblioteker ligger inni, og under hvilke lisenser?
- I hvor mange prosjekter kan det brukes, og kan det videredistribueres?
- Hvor lenge varer støtten, og hva dekker den? Vår varer 6 måneder, eller 12 med forlengelsen valgt i kassen, og dekker spørsmål om installasjon og bruk av filene samt reproduserbare feil.
- Hva er utelatt?
- Finnes en endringslogg og en nylig utgivelse?
- Hva er refusjonsregelen? Vår: malene er digitale produkter, så vi refunderer bare hvis malen ikke er lastet ned ennå, eller hvis den har en feil vi ikke kan rette. Man spør ved å skrive til studioet med lisensnummeret.
Hva disse utgavene ikke inkluderer
Noen utgaver har valgfrie tillegg. Ricopop og Zabum inkluderer en PHP-ledertavle i én fil, av som standard. Den er en uformell felles poengtavle som lagrer poengsummer i en fil, ikke en juksesikker rangering, og ikke flerspiller i sanntid.
Støtten dekker spørsmål om installasjon og bruk av de leverte filene og retting av reproduserbare feil i det leverte spillet. Det er en grense, og det er bedre å vite den fra dag én.
Ofte stilte spørsmål
Hva er forskjellen på spillmappen og kildemappen?
game/ er bygget man laster opp til hosten. source/ er den redigerbare utviklerutgaven av samme spill. I Velvet Pool og Puttide har de samme oppsett, så en fil som redigeres i source/, kopieres til samme sti i game/. I TypeScript-utgaver som Sunset Rally er source/ et prosjekt man bygger på nytt, og man publiserer den nye leveransen.
Trengs npm eller Node.js for å bruke spillet?
Ikke for å legge det ut. Node.js dukker bare opp i de valgfrie testene i Velvet Pool (20 eller nyere), eller for å bygge TypeScript-utgaver på nytt, som Sunset Rally (24 LTS anbefalt) og Pinloop (22.12 eller nyere).
Er kildekoden minifisert?
Ikke i utgavene som dekkes her. Velvet Pool og Puttide er ren, formatert JavaScript, og versjon 1.0.1 av begge delte lange enkeltlinjestrenger opp i lesbare linjer. Kjøretiden til Sunset Rally leveres formatert, med minifisering av.
Kan man bruke ett kjøp til flere prosjekter eller klienter?
Lisensen dekker ett sluttprodukt, enten kjøperens eget eller én klients. Et andre produkt er utenfor.
Kan man videreselge eller dele kildekoden?
Nei: ikke alene, ikke som mal, sett eller ressurspakke, og ikke inne i et annet produkt beregnet på utviklere. Koden, grafikken og lyden kan endres inne i sitt eget sluttprodukt.
Kan man lese manualen før kjøp?
Ja. Hver produktside lenker til manualen og til en spillbar demo av samme utgave.
Åpne en pakke før man kjøper en
Velg en utgave, åpne manualen fra produktsiden, spill demoen, og les filkartet mot spørsmålene over. Besvarer manualen dem, bør pakken også gjøre det. Gjør den ikke det, skriv til studioet før betaling.