HTML5-spelkod: vad finns i ett riktigt paket?

HTML5-spelkod kan betyda tre olika saker: ett bygge som är klart att ladda upp, de utvecklarfiler du redigerar, eller ett projekt som bara öppnas i en viss redigerare. En HTML5-spelmall med källkod från vår marknadsplats är de två första samtidigt, som vanliga webbfiler, och den här guiden öppnar riktiga paket för att visa hur det ser ut.

Vi säljer de här mallarna, så läs det här som en rundtur i våra egna paket, inte en neutral genomgång av marknaden. Vi gick igenom flera utgåvor, främst Velvet Pool, Puttide och Sunset Rally, läste deras offentliga manualer och butiksvillkoren, och skrev ner vad som finns i paketet, vad du behöver för att köra det och vad som inte finns där. Varje manual är länkad från sin produktsida, så du kan kontrollera varje rad innan du betalar.

Vad ”HTML5-spelkod” kan betyda

Säljare använder ordet källkod löst. Tre frågor reder ut vad som faktiskt säljs.

Ett bygge, en utvecklarkälla eller båda?

Ett bygge är det färdiga spelet som webbläsaren laddar: en index.html, skript, bilder och ljudfiler. Du kan lägga upp det så som det är. Utvecklarkällan är versionen gjord för att redigeras, med filerna uppdelade efter uppgift. Ett paket med enbart bygget går att ladda upp men inte bekvämt att ändra. Ett paket med enbart källkod kan behöva verktyg innan det alls kör. Utgåvorna i den här guiden lägger båda i en ZIP-fil: oftast en mapp game/ att publicera och en mapp source/ att redigera (i Ricopop är game/ i sig källkoden).

Läsbar eller minifierad?

Minifiering pressar ihop skript till några täta rader med korta namn, vilket laddas ner snabbare och är fruktansvärt svårt att läsa. Obfuskering går längre och blandar namnen med avsikt. Ingen av dem skadar en live-sajt. Båda skadar om du köpte koden för att ändra den. Öppna ett skript i livedemon i webbläsarens utvecklarverktyg innan du betalar och se om du kan följa det.

Vanliga filer eller ett redigerarprojekt?

Vissa mallar levereras som ett projekt för en viss spelredigerare, och du kan bara öppna dem i just den redigeraren. Andra är vanliga webbfiler som vilken kodredigerare som helst öppnar. Utgåvorna i den här guiden är den andra sorten: HTML, CSS, JavaScript och JSON, med TypeScript i några av dem.

Bläddra bland mallarna

Vad som finns i ett Polar Games-paket

Ta Velvet Pool, vår utgåva av biljard med åtta bollar. Dess manual beskriver fyra mappar i ZIP-filen:

• game/ är utgåvan klar för uppladdning och den enda mapp du publicerar.
• source/ är samma spel som en redigerbar utvecklarutgåva, med en README, en package.json och tester.
• documentation/ innehåller den illustrerade guiden och dess bilder.
• THIRD-PARTY-LICENSES/ innehåller licenstexterna för typsnitten och en sammanfattning i README.txt.

I ditt bibliotek erbjuds samma paket som två nedladdningar: hela paketet (källkod och manual) eller bara spelet, klart att lägga upp.

game/ och source/ delar samma layout. För Velvet Pool säger manualen att du redigerar filer i source/ och kopierar de ändrade till samma sökväg i game/. Ingenting kompileras mellan stegen.

Se Velvet Pool-utgåvan

Inuti Velvet Pool: filkartan

En filkarta är det billigaste sättet att bedöma en kodbas innan du köper. Det här är den i Velvet Pool-manualen, med sökvägar relativa till source/ eller game/:

• src/core/physics.js: simulering av bollarna, spinn och kuddens respons.
• src/core/rules.js: reglerna för åtta bollar och beslut om regelbrott.
• src/core/ai.js: hur datorn väljer ett slag.
• src/game/controls.js: sikte, styrka och spinn.
• src/game/progress.js: prestationer, dukar, köer och poängsättning i matcher.
• src/game/i18n.js: texten på 14 språk.
• src/game/localRecords.js: historiken för lokala poäng.
• src/game/audio.js: ljudeffekter och uppspelning av musik.
• css/style.css och css/fonts.css: tema, responsiv layout och typsnittsdeklarationer.
• assets/: grafik, ljud och typsnitt, med en undermapp logo/.

Lägg märke till uppdelningen. Regler, fysik och datorn ligger i src/core. Indata, sparningar, texter och ljud ligger i src/game. Manualen ber dig ändra en funktion i taget, och layouten gör det realistiskt: en justering av kudden och en översättningsrättelse rör olika filer.

Manualen säger också att koden i source/src och game/src är vanlig, formaterad JavaScript, utan minifierade eller sammanslagna filer. Velvet Pool är Vanilla JavaScript på WebGL2 och använder inget kodbibliotek, Three.js inkluderat. Ändringsloggen stödjer påståendet: version 1.0.1 delade upp långa enradssträngar i ljud, översättningar och shaders i läsbara rader, utan att beteendet ändrades.

Puttide: samma layout, plus bibliotek

Puttide, vår 3D-utgåva av minigolf, använder samma fyra mappar och lägger till en sak: två tredjepartsbibliotek som spelet behöver. Three.js r186 (MIT) och Rapier 3D 0.21.0 (Apache-2.0) ligger i lib/three/ och lib/rapier/, och import-kartan i index.html talar om för webbläsaren var de finns. Puttide-FAQ:n säger att inget laddas från ett CDN, så spelet behöver bara din egen värd. Manualen tillägger att bibliotekens filer är formaterade så att de går att läsa, med oförändrat beteende.

Dess filkarta, även den relativ till source/ eller game/:

• src/course/courses.js: banordning och krav för att låsa upp banor.
• src/course/holes.js: geometri, par och hinder för banan Ruins. pier.js, ice.js, lava.js och sky.js innehåller de fyra andra.
• src/sim/constants.js: finjustering av fysiken.
• src/game/economy.js: definitioner och priser för bollar, spår och utstyrsel.
• src/ui/i18n.js och tre ordboksfiler till: språktexten.
• css/style.css: gränssnittets färger, typsnitt och responsiva stilar.
• fonts/ och music/: webbtypsnitten med deras licenser och två musikspår.

Manualens recept för ett nytt hål: duplicera en definition i rätt banfil, ge den ett unikt id, sätt par och positioner för tee och hål, lägg till den i banan och lägg sedan till dess namn och tips i ordböckerna för språken. Läs ett sådant recept innan du köper. Om det ser ut som arbete du kan göra passar paketet dig.

Se Puttide-utgåvan

När källkoden kräver ett byggsteg

”Inget byggsteg” stämmer för vissa utgåvor och inte för andra, så kontrollera utgåvan, inte butiken. Här är fem av våra sida vid sida, med deras listpriser.

• Velvet Pool, listpris 39 USD: vanliga JavaScript-moduler på WebGL2. Redigera source/, kopiera till game/. Node.js 20 eller senare behövs bara för de valfria testerna.
• Puttide, 39 USD: vanliga JavaScript-moduler med Three.js och Rapier i lib/. Inget byggsteg. Node.js är valfritt och bara för att hantera versionerna av biblioteken.
• Ricopop, 39 USD: vanlig HTML, CSS och JavaScript-moduler, och game/ är i sig källkoden. Valfria utvecklarverktyg (Node.js 20 eller senare): en lokal server, en kontroll av nivåer och tester.
• Pinloop, 24 USD: TypeScript med Vite. Mappen game/ har läsbar JavaScript och CSS. Node.js 22.12 eller senare och npm behövs bara för att redigera och bygga om källkoden.
• Sunset Rally, 39 USD: TypeScript med Three.js r184 och Vite. Mappen game/ är redan byggd och ominifierad. Node.js behövs bara om du bygger om.

För Sunset Rally rekommenderar manualen Node.js 24 LTS. Inne i source/ kör du npm ci, npm run typecheck och npm run build, och publicerar sedan bara innehållet i dist/. Den ber dig också hålla minify och cssMinify avstängda när du bygger om, eftersom den levererade körtiden är formaterad för läsning. Ladda upp resultatet, aldrig node_modules/.

Se Sunset Rally-utgåvan

Att lägga upp det: vad ”statisk” betyder i praktiken

Statisk hosting innebär att din värd bara serverar filer. Manualerna för Velvet Pool och Puttide ger hela installationen i tre steg:

1. Packa upp ZIP-filen.
2. Ladda upp allt i game/ till en mapp på din sajt, till exempel public_html/velvet-pool/, med FTP eller värdens filhanterare, och behåll undermapparna.
3. Öppna den adressen i en webbläsare.

Ingen npm, terminal, byggsteg, PHP, databas eller konto är inblandat. Det som får folk att snubbla, enligt samma manualer:

• Dubbelklicka inte på index.html. Webbläsare blockerar spelmoduler på file://. För ett lokalt test, kör python -m http.server 8765 inne i game/ och öppna http://localhost:8765/.
• Din server måste skicka .js-filer med en JavaScript-MIME-typ och .wasm som application/wasm. En felaktig MIME-typ visar sig som ett fel om att modulen avvisats.
• Använd HTTPS för publik hosting.
• Sparningar hör till webbläsarens ursprung (protokoll, värd och port). Flyttar du spelet till en annan domän börjar spelarna från noll.
• En ny sidinläsning behöver fortfarande din värd, så det här är inte en installerbar offlineapp.

Var logotypen, färgerna, reglerna och översättningarna finns

Varje manual har ett avsnitt om anpassning, och vad det täcker skiljer sig mellan utgåvorna. Så här säger varje manual.

Velvet Pool

• Logotyp och varumärke: ersätt filerna i assets/logo/ och justera motsvarande mått i CSS:en.
• Duk- och kölstilar: deras definitioner finns i progress.js. Behåll objekt-ID:na stabila så att sparad kosmetik fortsätter att fungera.
• Datorns beteende i ai.js, fysiken i physics.js. Efter att ha ändrat regler eller fysik, kör testerna för åtta bollar.
• Översättningar: src/game/i18n.js, med språklistan i LANGS.

Puttide

• Färger och typsnitt: css/style.css.
• Fysik: src/sim/constants.js. Priser på kosmetik: src/game/economy.js, med de befintliga ID:na kvar.
• Musik: kopiera en licensierad fil till music/ och uppdatera spårkopplingen i src/audio/audio.js.
• Hål, par och upplåsningar: banfilerna som beskrivs ovan.

Gridspark och Sunset Rally

I Gridspark ligger gränssnittstexten, enligt produktens FAQ, i src/locales.js, regelkonstanter och palett i src/config.js, och pusselreglerna i game.js, board.js, generator.js och shapes.js. I Sunset Rally finns kampanjens matcher och stjärnvillkor i Campaign.ts, platserna i Places.ts, fysiken i physics.ts och poängsättningen i match.ts. Dess engelska och portugisiska strängar finns i src/i18n.ts, de övriga 12 språken i src/locales/.

Lägg märke till vad manualerna utelämnar. Puttide-manualen täcker färger, fysik, hål, priser och musik, men den saknar ett steg för att byta logotyp, och Sunset Rally-manualen har inget särskilt avsnitt om varumärkesprofil. Om varumärket är det första du kommer att ändra, fråga innan du köper.

Se Gridspark-utgåvan

Automatiserade tester: vad de kontrollerar och vad de inte gör

Velvet Pools mapp source/ innehåller en testsvit. Med Node.js 20 eller senare öppnar du en terminal i source/ och kör npm test, vilket är samma sak som node tests/run.js. Ingen installation av beroenden behövs. Enligt manualen kontrollerar sviten fysiken, reglerna för åtta bollar, matcher mot datorn och att översättningsnycklarna stämmer överens, och den ersätter inte tester i webbläsare och på riktiga enheter.

En kontroll av översättningsnycklar är just den sorts test ett spel med 14 språk behöver: lägg till en nyckel på ett språk, glöm ett annat, och en människa kanske inte märker det på flera veckor.

Inte alla utgåvor har tester. Puttide-manualen beskriver inga, bara manuella kontroller. Pinloop och Beep Out listar npm test bland sina utvecklarkommandon, och Ricopops utvecklarverktyg inkluderar en kontroll av nivåer.

Licens, tredjepartsmeddelanden och ändringsloggen

Enligt butiksvillkoren ger varje köp en evig, icke-exklusiv licens att använda utgåvan i en slutprodukt, din egen eller en kunds. Du får ändra koden, grafiken och ljudet i den, och spelarna får använda den gratis eller genom annonser. Du får inte sälja, dela eller vidaredistribuera mallen, dess källkod eller tillgångarna var för sig, som mall, kit eller tillgångspaket, eller i en annan produkt avsedd för utvecklare. Licensen går inte ut när supporten upphör.

Tredjepartsdelar behåller sina egna licenser, och du behåller deras meddelanden tillsammans med din produkt. I Velvet Pool gäller det två typsnitt, Manrope och Fraunces, under SIL Open Font License 1.1, med texterna i THIRD-PARTY-LICENSES/ och bredvid typsnitten. I Puttide tillkommer Three.js (MIT), Rapier (Apache-2.0) och typsnitten Rubik och Fredoka (OFL 1.1).

Ändringsloggen visar hur ett paket underhålls. Velvet Pool 1.0.1 (18 oktober 2026) delade upp långa strängar i läsbara rader och samlade licensmeddelandena i en platt mapp. Version 1.1.0 (22 oktober 2026) förde gränssnittet till 14 språk. De posterna finns på produktsidan. Villkoren säger att uppdateringar av samma utgåva dyker upp i ditt bibliotek när de publiceras, utan löfte om uppdateringar under en viss tid.

Så läser du koden till ett spel du köpt på en timme

Det här är en föreslagen plan, inte utlovad tid. Den följer Velvet Pool-layouten och använder bara det paketet ger dig.

1. Minut 0 till 10: packa upp ZIP-filen, skumma README:n i source/ och manualens filkarta. Öppna index.html och se vilka skript och stilmallar den laddar.
2. Minut 10 till 20: kör npm test i source/ (Node.js 20 eller senare) för att få ett grönt utgångsläge.
3. Minut 20 till 35: läs src/core före src/game. Börja med rules.js, sedan ai.js och sedan physics.js. Det är själva spelet. Kontroller, framsteg, texter och ljud är rörsystemet runt omkring.
4. Minut 35 till 40: notera att objekt-ID:na och sparnycklarna måste hållas stabila, annars förlorar spelarna sin sparade kosmetik.
5. Minut 40 till 55: gör en liten ändring, till exempel en dukdefinition i progress.js. Kopiera filen till samma sökväg i game/, servera game/ med python -m http.server 8765 och titta på resultatet. Öppna den aldrig via file://.
6. Minut 55 till 60: kör testerna igen.

ES-moduler anger i sina importrader vad de behöver, så du kan följa kedjan från det första skript sidan laddar. Därför går det att läsa en utgåva med vanliga filer i den takten.

Frågor att ställa innan du köper källkod

• Kan jag läsa manualen och spela en demo innan jag betalar? För våra utgåvor är båda länkade från produktsidan.
• Finns ett färdigt bygge att lägga upp och en separat utvecklarkälla?
• Är koden läsbar eller minifierad? Öppna ett skript och titta.
• Behöver jag Node.js, npm, PHP eller en databas, och vilka versioner?
• Laddar spelet något från ett CDN eller en annan sajt?
• Vilka tredjepartsbibliotek ingår, och under vilka licenser?
• I hur många projekt får jag använda den, och får jag vidaredistribuera den?
• Hur länge varar supporten och vad täcker den? Vår är 6 månader, eller 12 med förlängningen som väljs i kassan, och den täcker frågor om hur man installerar och använder filerna samt reproducerbara fel.
• Vad är undantaget?
• Finns en ändringslogg och en nyligen gjord utgåva?
• Vad är återbetalningsregeln? Vår: mallar är digitala produkter, så vi återbetalar bara om du inte har laddat ner mallen ännu, eller om den har ett fel vi inte kan åtgärda. Du begär det genom att skriva till studion med ditt licensnummer.

Vad de här utgåvorna inte innehåller

Vissa utgåvor har valfria tillägg. Ricopop och Zabum innehåller en topplista i en enda PHP-fil som är avstängd som standard. Den är en avslappnad gemensam poängtavla som lagrar poäng i en fil, inte en ranking som är säker mot fusk, och inte flerspelarhandling i realtid.

Supporten täcker frågor om hur du installerar och använder de medföljande filerna samt rättning av reproducerbara fel i det levererade spelet. Det är en gräns, och det är bättre att veta det första dagen.

Vanliga frågor

Vad är skillnaden mellan spelmappen och källmappen?

game/ är bygget du laddar upp till din värd. source/ är utvecklarutgåvan av samma spel som går att redigera. I Velvet Pool och Puttide delar de samma layout, så en fil du redigerar i source/ kopieras till samma sökväg i game/. I TypeScript-utgåvor som Sunset Rally är source/ ett projekt du bygger om, och du publicerar det nya resultatet.

Behöver jag npm eller Node.js för att använda spelet?

Inte för att lägga upp det. Node.js behövs bara för de valfria testerna i Velvet Pool (20 eller senare) eller för att bygga om TypeScript-utgåvor som Sunset Rally (24 LTS rekommenderas) och Pinloop (22.12 eller senare).

Är källkoden minifierad?

Inte i de utgåvor som behandlas här. Velvet Pool och Puttide är vanlig, formaterad JavaScript, och version 1.0.1 av båda delade upp långa enradssträngar i läsbara rader. Körtiden i Sunset Rally levereras formaterad, med minifiering avstängd.

Kan jag använda ett köp till flera projekt eller kunder?

Licensen täcker en slutprodukt, din egen eller en kunds. En andra produkt ligger utanför den.

Får jag sälja eller dela källkoden vidare?

Nej: inte på egen hand, inte som mall, kit eller tillgångspaket, och inte i en annan produkt avsedd för utvecklare. Du får ändra koden, grafiken och ljudet i din egen slutprodukt.

Kan jag läsa manualen innan jag köper?

Ja. Varje produktsida länkar till sin manual och till en spelbar demo av samma utgåva.

Öppna ett paket innan du köper ett

Välj en utgåva, öppna dess manual från produktsidan, spela demon och jämför filkartan med frågorna ovan. Om manualen besvarar dem bör paketet göra det också. Om den inte gör det, skriv till studion innan du betalar.

Bläddra bland alla mallar