HTML5-spilkildekode: vi åbnede en rigtig pakke

HTML5-spilkildekode kan betyde tre forskellige ting: en build, der er klar til upload, de udviklerfiler, man redigerer, eller et projekt, der kun åbner i en bestemt editor. En HTML5-spilskabelon med kildekode fra vores marketplace er de to første i ét, som almindelige webfiler, og denne guide åbner rigtige pakker for at vise, hvordan det ser ud.

Vi sælger disse skabeloner, så læs det her som en rundtur i vores egne pakker, ikke som en neutral oversigt over markedet. Vi gennemgik flere udgaver, primært Velvet Pool, Puttide og Sunset Rally, læste deres offentlige manualer og butiksvilkårene og noterede, hvad der er i pakken, hvad du skal bruge for at køre den, og hvad der ikke er med. Hver manual er linket fra sin vareside, så du kan kontrollere hver linje, før du betaler.

Hvad “HTML5-spilkildekode” kan betyde

Sælgere bruger ordet kildekode løst. Tre spørgsmål skiller tingene ad.

En build, en udviklerkildekode eller begge dele?

En build er det færdige spil, sådan som browseren indlæser det: en index.html, scripts, billeder og lydfiler. Du kan hoste den, som den er. Udviklerkildekode er versionen, der er lavet, så folk kan redigere den, med filer delt op efter opgave. En pakke med kun build kan du uploade, men ikke nemt ændre. En pakke med kun kildekode kan kræve værktøjer, før den overhovedet kører. Udgaverne i denne guide lægger begge dele i én ZIP: typisk en game/-mappe, der skal publiceres, og en source/-mappe, der skal redigeres (i Ricopop er game/ selv kildekoden).

Læsbar eller minificeret?

Minificering presser scripts ind i nogle få tætte linjer med korte navne, hvilket downloader hurtigere og er forfærdeligt at læse. Obfuskering går længere og blander navnene med vilje. Ingen af delene skader en live-side. Begge dele skader, hvis du har købt koden for at ændre den. Før du betaler, så åbn et script fra den live demo i din browsers udviklerværktøjer og se, om du kunne følge det.

Almindelige filer eller et editorprojekt?

Nogle skabeloner kommer som et projekt til en bestemt spileditor, og du kan kun åbne dem i den editor. Andre er almindelige webfiler, som enhver kodeeditor åbner. Udgaverne i denne guide er den anden slags: HTML, CSS, JavaScript og JSON, med TypeScript i nogle af dem.

Se skabelonerne

Hvad der er i en Polar Games-pakke

Tag Velvet Pool, vores 8-ball-udgave. Dens manual beskriver fire mapper i ZIP-filen:

• game/ er udgaven klar til upload og den eneste mappe, du publicerer.
• source/ er det samme spil som en redigerbar udviklerudgave, med en README, en package.json og tests.
• documentation/ indeholder den illustrerede guide og dens billeder.
• THIRD-PARTY-LICENSES/ indeholder licenstekster til skrifttyperne og en README.txt med et resumé.

I dit bibliotek tilbydes den samme pakke som to downloads: den komplette pakke (kildekode og manual) eller kun spillet, klar til hosting.

game/ og source/ har samme layout. For Velvet Pool siger manualen, at du redigerer filer i source/ og kopierer de ændrede til samme sti i game/. Intet bliver kompileret derimellem.

Se Velvet Pool-udgaven

Inde i Velvet Pool: filkortet

Et filkort er den billigste måde at vurdere en kodebase på, før du køber den. Dette er kortet fra Velvet Pool-manualen, med stier i forhold til source/ eller game/:

• src/core/physics.js: boldsimulering, spin og bandrespons.
• src/core/rules.js: 8-ball-regler og afgørelser om fejl.
• src/core/ai.js: hvordan CPU'en vælger et stød.
• src/game/controls.js: sigte, styrke og spin-input.
• src/game/progress.js: præstationer, dugene, køllerne og kampscoringen.
• src/game/i18n.js: teksten på 14 sprog.
• src/game/localRecords.js: den lokale scorehistorik.
• src/game/audio.js: lydeffekter og musikafspilning.
• css/style.css og css/fonts.css: tema, responsivt layout og skriftdeklarationer.
• assets/: grafik, lyd og skrifttyper, med en undermappe logo/.

Læg mærke til opdelingen. Regler, fysik og CPU'en ligger i src/core. Input, gemte data, tekster og lyd ligger i src/game. Manualen beder dig om at ændre én funktion ad gangen, og denne layout gør det realistisk: en justering af banden og en rettelse af en oversættelse rører ved forskellige filer.

Manualen angiver også, at koden i source/src og game/src er almindelig, formateret JavaScript, uden minificerede eller bundtede filer. Velvet Pool er Vanilla JavaScript på WebGL2 og bruger ingen kodebiblioteker, heller ikke Three.js. Ændringsloggen (changelog) understøtter påstanden: version 1.0.1 delte lange enkeltlinjestrenge i lyd, oversættelser og shadere op i læselige linjer, uden at opførslen ændrede sig.

Puttide: samme layout, plus biblioteker

Puttide, vores 3D-minigolfudgave, bruger de samme fire mapper og tilføjer én ting: to tredjepartsbiblioteker, som spillet har brug for. Three.js r186 (MIT) og Rapier 3D 0.21.0 (Apache-2.0) ligger i lib/three/ og lib/rapier/, og import map'et i index.html fortæller browseren, hvor de findes. Puttide-FAQ'en angiver, at intet indlæses fra et CDN, så spillet kun behøver din egen server. Manualen tilføjer, at bibliotekfilerne er formateret, så de kan læses, med uændret opførsel.

Dens filkort, igen i forhold til source/ eller game/:

• src/course/courses.js: banernes rækkefølge og krav til oplåsning.
• src/course/holes.js: geometri, par og forhindringer på Ruins-banen. pier.js, ice.js, lava.js og sky.js indeholder de fire andre.
• src/sim/constants.js: fysikindstillinger.
• src/game/economy.js: definitioner og priser for bolde, spor og outfits.
• src/ui/i18n.js og tre andre ordbogsfiler: sprogteksten.
• css/style.css: farver, skrifttyper og responsive stile.
• fonts/ og music/: webskrifttyperne med deres licenser og to musiknumre.

Manualens opskrift på en ny bane: dupliker en definition i den rigtige banefil, giv den et unikt id, sæt par og positioner for tee og hul, tilføj den til banen, og tilføj derefter navn og tip i sprogordbøgerne. Læs sådan en opskrift, før du køber. Hvis det virker som arbejde, du selv kan gøre, passer pakken til dig.

Se Puttide-udgaven

Når kildekoden kræver et byggetrin

“Intet byggetrin” gælder for nogle udgaver og ikke for andre, så tjek udgaven, ikke butikken. Her er fem af vores side om side med deres listepriser.

• Velvet Pool, listepris 39 $: almindelige JavaScript-moduler på WebGL2. Rediger source/, kopier til game/. Node.js 20+ kun til de valgfrie tests.
• Puttide, 39 $: almindelige JavaScript-moduler med Three.js og Rapier i lib/. Intet byggetrin. Node.js er valgfrit og kun til at styre bibliotekversionerne.
• Ricopop, 39 $: almindelige HTML-, CSS- og JavaScript-moduler, og game/ er selv kildekoden. Valgfrie udviklerværktøjer (Node.js 20+): en lokal server, et banetjek og tests.
• Pinloop, 24 $: TypeScript med Vite. Mappen game/ indeholder læsbar JavaScript og CSS. Node.js 22.12+ og npm kun for at redigere og genopbygge kildekoden.
• Sunset Rally, 39 $: TypeScript med Three.js r184 og Vite. Mappen game/ er allerede bygget og ikke minificeret. Node.js kun hvis du genopbygger.

For Sunset Rally anbefaler manualen Node.js 24 LTS. Inde i source/ kører du npm ci, npm run typecheck og npm run build og publicerer derefter kun indholdet af dist/. Den beder dig også holde minify og cssMinify slået fra, når du genopbygger, fordi den leverede runtime er formateret, så den kan læses. Upload resultatet, aldrig node_modules/.

Se Sunset Rally-udgaven

Hosting: hvad “statisk” betyder i praksis

Statisk hosting betyder, at din server kun leverer filer. Manualerne til Velvet Pool og Puttide giver hele installationen i tre trin:

1. Udpak ZIP-filen.
2. Upload alt inde i game/ til en mappe på dit site, for eksempel public_html/velvet-pool/, via FTP eller din hosts filhåndtering, og behold undermapperne.
3. Åbn adressen i en browser.

Der er ingen npm, terminal, byggetrin, PHP, database eller konto involveret. Det, der ifølge de samme manualer skaber problemer, er:

• Dobbeltklik ikke på index.html. Browsere blokerer spilmoduler på file://. Til en lokal test kører du python -m http.server 8765 inde i game/ og åbner http://localhost:8765/.
• Din server skal sende .js-filer med en JavaScript-MIME-type og .wasm som application/wasm. En forkert MIME-type viser sig som en fejl om, at et modul blev afvist.
• Brug HTTPS til offentlig hosting.
• Gemte data hører til browserens origin (protokol, vært og port). Flytter du spillet til et andet domæne, starter spillerne forfra.
• En frisk sideindlæsning kræver stadig din server, så dette er ikke en app, der kan installeres og bruges offline.

Hvor logo, farver, regler og oversættelser ligger

Hver manual har et afsnit om tilpasning, og hvad det dækker, varierer fra udgave til udgave. Her er, hvad hver af dem siger.

Velvet Pool

• Logo og branding: erstat filerne i assets/logo/ og tilpas de tilsvarende mål i CSS'en.
• Dug- og køllestile: deres definitioner ligger i progress.js. Behold item-id'erne uændrede, så gemte kosmetiske varer stadig virker.
• CPU-adfærd i ai.js, fysik i physics.js. Efter at have ændret regler eller fysik, kør 8-ball-testene.
• Oversættelser: src/game/i18n.js, med sprogslisten i LANGS.

Puttide

• Farver og skrifttyper: css/style.css.
• Fysik: src/sim/constants.js. Priser på kosmetik: src/game/economy.js, og behold de eksisterende id'er.
• Musik: kopier en licenseret fil til music/ og opdater sporkortlægningen i src/audio/audio.js.
• Baner, par og oplåsninger: banefilerne beskrevet ovenfor.

Gridspark og Sunset Rally

I Gridspark ligger grænsefladeteksten ifølge FAQ'en på varesiden i src/locales.js, regelkonstanter og palet i src/config.js, og puzzlereglerne i game.js, board.js, generator.js og shapes.js. I Sunset Rally ligger kampagnekampene og stjernebetingelserne i Campaign.ts, stederne i Places.ts, fysikken i physics.ts og scoringen i match.ts. Dens engelske og portugisiske tekster ligger i src/i18n.ts, og de øvrige 12 sprog i src/locales/.

Læg mærke til, hvad manualerne udelader. Puttide-manualen dækker farver, fysik, baner, priser og musik, men har intet trin for at skifte logoet, og Sunset Rally-manualen har ingen egentlig brandingsektion. Hvis branding er det første, du vil ændre, så spørg, før du køber.

Se Gridspark-udgaven

Automatiske tests: hvad de kontrollerer, og hvad de ikke gør

Velvet Pools source/-mappe indeholder en testpakke. Med Node.js 20 eller nyere åbner du en terminal i source/ og kører npm test, hvilket er det samme som node tests/run.js. Der skal ikke installeres afhængigheder. Ifølge manualen kontrollerer pakken fysik, 8-ball-regler, CPU-kampe og konsistens i oversættelsesnøgler, og den erstatter ikke test i browsere og på rigtige enheder.

En kontrol af oversættelsesnøgler er den slags test, et spil med 14 sprog har brug for: tilføj en nøgle på ét sprog, glem et andet, og et menneske bemærker det måske ikke i flere uger.

Ikke alle udgaver har tests. Puttide-manualen beskriver ingen, kun manuelle kontroller. Pinloop og Beep Out viser npm test blandt deres udviklerkommandoer, og Ricopops udviklerværktøjer inkluderer et banetjek.

Licens, tredjepartsnoter og changelog

Under butiksvilkårene giver hvert køb en evig, ikke-eksklusiv licens til at bruge udgaven i ét slutprodukt, dit eget eller én kundes. Du må ændre koden, grafikken og lyden i den. Spillerne må spille gratis eller gennem reklamer. Du må ikke videresælge, dele eller videredistribuere skabelonen, dens kildekode eller dens aktiver alene, som skabelon, kit eller aktivpakke, eller i et andet produkt, der er beregnet til udviklere. Licensen udløber ikke, når supporten stopper.

Tredjepartsdele beholder deres egne licenser, og du beholder deres noter sammen med dit produkt. I Velvet Pool drejer det sig om to skrifttyper, Manrope og Fraunces, under SIL Open Font License 1.1, med teksterne i THIRD-PARTY-LICENSES/ og ved siden af skrifttyperne. I Puttide tilføjer listen Three.js (MIT), Rapier (Apache-2.0) og skrifttyperne Rubik og Fredoka (OFL 1.1).

Changeloggen viser, hvordan en pakke vedligeholdes. Velvet Pool 1.0.1 (18. oktober 2026) delte lange strenge op i læselige linjer og samlede licensnoterne i én flad mappe. Version 1.1.0 (22. oktober 2026) bragte grænsefladen op på 14 sprog. Disse poster findes på varesiden. Vilkårene siger, at opdateringer til samme udgave dukker op i dit bibliotek, når de er udgivet, uden løfte om opdateringer i en fast periode.

Sådan læser du koden i et spil, du har købt, på en time

Dette er en foreslået plan, ikke en lovet tidsangivelse. Den følger Velvet Pool-layoutet og bruger kun det, pakken giver dig.

1. Minut 0 til 10: udpak ZIP-filen, gennemgå README'en i source/ og manualens filkort. Åbn index.html og se, hvilke scripts og typografiark den indlæser.
2. Minut 10 til 20: kør npm test inde i source/ (Node.js 20+) for at få en grøn baseline.
3. Minut 20 til 35: læs src/core før src/game. Start med rules.js, så ai.js og derefter physics.js. Det er selve spillet. Kontrol, fremskridt, tekster og lyd er rørene omkring det.
4. Minut 35 til 40: notér, at item-id'er og gemte nøgler skal forblive stabile, ellers mister spillerne deres gemte kosmetik.
5. Minut 40 til 55: lav én lille ændring, for eksempel en dugdefinition i progress.js. Kopier filen til samme sti i game/, server game/ med python -m http.server 8765, og se resultatet. Åbn aldrig via file://.
6. Minut 55 til 60: kør testene igen.

ES-moduler navngiver det, de har brug for, i deres import-linjer, så du kan følge kæden fra det første script, siden indlæser. Derfor kan en udgave med almindelige filer læses i dette tempo.

Spørgsmål at stille, før du køber kildekode

• Kan jeg læse manualen og spille en demo, før jeg betaler? Til vores udgaver er begge linket fra varesiden.
• Findes der en færdig build klar til hosting og en separat udviklerkildekode?
• Er koden læsbar eller minificeret? Åbn et script og kig.
• Skal jeg bruge Node.js, npm, PHP eller en database, og hvilke versioner?
• Indlæser spillet noget fra et CDN eller et andet site?
• Hvilke tredjepartsbiblioteker er med, og under hvilke licenser?
• Hvor mange projekter må jeg bruge det i, og må jeg videredistribuere det?
• Hvor længe varer supporten, og hvad dækker den? Vores varer 6 måneder, eller 12 med udvidelsen, der vælges i kassen, og den dækker spørgsmål om installation og brug af filerne samt reproducerbare fejl.
• Hvad er ikke med?
• Findes der en changelog og en nylig udgivelse?
• Hvad er reglen for refusion? Vores: skabeloner er digitale produkter, så vi refunderer kun, hvis du ikke har downloadet skabelonen endnu, eller hvis den har en fejl, vi ikke kan rette. Du beder om det ved at skrive til studiet med dit licensnummer.

Hvad disse udgaver ikke indeholder

Nogle udgaver tilføjer valgfrie ekstra. Ricopop og Zabum indeholder en PHP-rangliste i én fil, som er slået fra som standard. Det er en uformel fælles resultattavle, der gemmer point i en fil, ikke en svindelsikker rangliste og ikke live-multiplayer.

Support dækker spørgsmål om installation og brug af de leverede filer samt rettelse af reproducerbare fejl i det leverede spil. Det er en grænse, og det er bedre at kende den på dag ét.

Ofte stillede spørgsmål

Hvad er forskellen på spilmappen og kildemappen?

game/ er buildet, du uploader til din server. source/ er den redigerbare udviklerudgave af samme spil. I Velvet Pool og Puttide har de samme layout, så en fil, du redigerer i source/, kopieres til samme sti i game/. I TypeScript-udgaver som Sunset Rally er source/ et projekt, du genopbygger, og du publicerer det nye output.

Skal jeg bruge npm eller Node.js for at bruge spillet?

Ikke for at hoste det. Node.js dukker kun op til de valgfrie tests i Velvet Pool (20 eller nyere) eller for at genopbygge TypeScript-udgaver som Sunset Rally (24 LTS anbefales) og Pinloop (22.12 eller nyere).

Er kildekoden minificeret?

Ikke i de udgaver, der dækkes her. Velvet Pool og Puttide er almindelig, formateret JavaScript, og version 1.0.1 af begge delte lange enkeltlinjestrenge op i læselige linjer. Sunset Rally-runtime leveres formateret, med minificering slået fra.

Kan jeg bruge ét køb til flere projekter eller kunder?

Licensen dækker ét slutprodukt, dit eget eller én kundes. Et andet produkt er uden for licensen.

Må jeg videresælge eller dele kildekoden?

Nej: ikke alene, ikke som skabelon, kit eller aktivpakke, og ikke i et andet produkt, der er beregnet til udviklere. Du må ændre koden, grafikken og lyden i dit eget slutprodukt.

Kan jeg læse manualen, før jeg køber?

Ja. Hver varside linker til sin manual og til en spilbar demo af samme udgave.

Åbn en pakke, før du køber en

Vælg en udgave, åbn dens manual fra varesiden, spil demoen, og læs filkortet op imod spørgsmålene ovenfor. Hvis manualen besvarer dem, bør pakken også gøre det. Hvis ikke, så skriv til studiet, før du betaler.

Se alle skabeloner