Källkod till minigolfspel: hål, fysik och en 3D-banöversikt

Källkod till minigolfspel står och faller med en uppgift: att lägga till ett hål. En köpare som vill ha en varumärkesbana, en säsongsnivå eller en kunds logotyp på greenen öppnar nivåfilerna först, och om ett hål är begravt i motorkod stannar projektet. I Puttide, vår 3D-minigolfmall, har varje bana sin egen hålfil i vanlig JavaScript, och manualen går igenom hur du lägger till ett.

Den här guiden följer paketet så som en utvecklare möter det: mapparna, biblioteken, banfilerna, ordningen för ändringar, hosting och licensen. Filnamnen kommer från köpguiden som följer med spelet.

Det korta svaret för den otåliga: Puttide är formaterad JavaScript med Three.js för ritning och Rapier för bollfysiken, båda medlevererade. Inget byggsteg, inget CDN och ingen serverkod.

Vad källkoden till minigolfspelet innehåller

Puttide är ett färdigt spel med 30 hål på fem öbanor: Sunlit Ruins, Lantern Pier, Frost Peaks, Cloud Garden och Volcano Forge, sex hål vardera. Rampar, portaler, bumpers och väderkvarnar gör hålen till små pussel. Varje hål ger tre stjärnor (i mål, par eller bättre, och det dolda myntet), och brons-, silver- och guldmedaljer belönar de bästa ronderna.

Utöver banorna finns en daglig utmaning med en vridning (blåsigt, isigt grön, tung boll, studsande väggar, coin rush eller birdie hunt), ett Locker (förråd) där mynt köper bollar, spår och andra kosmetiska föremål, och rundor för två till fyra spelare som turas om på en enhet. Gränssnittet finns på 14 språk.

• game/: det färdiga bygget som laddas upp, den enda mapp du publicerar.
• source/: samma spel som en utvecklarutgåva, med en README och package.json.
• documentation/: en illustrerad guide på engelska och portugisiska.
• THIRD-PARTY-LICENSES/: licenstexter för biblioteken och typsnitten.
• Version 1.1.0, uppdaterad 22 oktober 2026.

Öppna Puttide-sidan: demo, manual och pris

Three.js, Rapier och resten av stacken

Bollen simuleras av Rapier 3D 0.21.0, som körs som WebAssembly, och scenen ritas med Three.js r186. Båda ligger i lib/three/ och lib/rapier/ med sina licensfiler, och index.html har en import map som pekar spelet mot dem. Manualen påpekar att biblioteksfilerna är oförändrade i beteendet och bara formaterade så att de går att läsa.

Det här spelar roll av två skäl. För det första laddas inget från ett CDN, så en portal eller en kund med en strikt säkerhetspolicy behöver bara din värd. För det andra är en uppgradering av ett bibliotek ett manuellt och medvetet steg: source/package.json listar de exakta versionerna, och du kopierar nya modulfiler över motsvarande mapp i lib/ och behåller importmap-sökvägarna.

• Three.js r186: MIT-licens.
• Rapier 3D compat 0.21.0, WebAssembly inbäddat: Apache-2.0-licens.
• Rubik och Fredoka som webbtypsnitt: SIL Open Font License 1.1.
• Två musikspår: music/menu.mp3 och music/play-1.mp3.

Var hålen, mynten och texterna finns

Sökvägarna är desamma i source/ och game/. Banddatan är uppdelad per ö, vilket håller varje fil tillräckligt kort för att läsas på en gång.

• src/course/courses.js: bankordning och upplåsningskrav.
• src/course/holes.js: hålen för Sunlit Ruins, med geometri, par och hinder.
• src/course/pier.js, ice.js, lava.js och sky.js: hålen för de andra fyra banorna.
• src/sim/constants.js: fysikens inställningar.
• src/game/economy.js: bollar, spår och outfits, med deras priser.
• src/ui/i18n.js och tillhörande filer: de 14 språkordlistorna, inklusive hålnamn och tips.
• src/game/localRecords.js: banrekord som sparas i webbläsaren.
• src/audio/audio.js: effekter och musikkopplingen, i probeTracks.
• css/style.css: gränssnittets färger, typsnitt och responsiva stilar.

Lägga till ett hål, steg för steg

Det här är den ändring de flesta köpare gör, och manualen beskriver den på några rader. Vi har utökat den till den ordning vi själva skulle följa.

1. Välj banfilen som det nya hålet hör till, till exempel lava.js för Volcano Forge.
2. Duplicera en befintlig hålsdefinition som liknar det du vill ha.
3. Ge den ett unikt id. Att återanvända ett id förvirrar sparade framsteg.
4. Ange par, startposition och hålposition, och flytta eller ersätt hindren.
5. Lägg till hålet i sin bana i courses.js.
6. Lägg till dess visningsnamn och tips i språkordlistorna, på varje språk du levererar.
7. Spela det: testa kollisioner, återhämtning när bollen går utanför banan och alla tre stjärnorna, inklusive det dolda myntet.

Redigera i source/, kopiera de ändrade filerna till samma sökvägar i game/ och servera mappen över HTTP för att testa. package.json har ett serve-skript, eller så kör du python -m http.server 8765. Node.js är valfritt och behövs bara om du vill att npm ska hantera biblioteksversionerna.

De övriga ändringarna, i en rimlig ordning

1. Varumärke och färger: logotyp, färger och typsnitt i css/style.css. White label är tillåtet, så ditt varumärke kan ersätta vårt.
2. Priser i Locker: economy.js. Billigare kosmetika gör en casualsida vänligare; dyrare sträcker ut en lång kampanj.
3. Texter: formuleringar och tips i i18n-filerna.
4. Musik: de två medföljande spåren kan bytas mot inspelningar du har licens för. Kopiera filen och uppdatera den explicita kopplingen i audio.js (probeTracks); scenmusiken faller tillbaka på spåret för spelandet.
5. Fysik: constants.js, sist, och i små steg, eftersom varje hål har justerats mot de nuvarande värdena.

För ett närliggande projekt med samma enkla JavaScript-upplägg och inget 3D-bibliotek alls är vår poolmall byggd på samma sätt.

Velvet Pool: 8-ball i vanlig JavaScript och WebGL2

Sunset Rally: 3D-bordtennis med en kampanj på nio matcher

Hosting, MIME-typer och appomslag

Ladda upp allt i game/ till en mapp som public_html/puttide/, behåll undermapparna och öppna adressen över HTTPS. Ingen npm, PHP, databas eller konto behövs på servern. Att öppna index.html från disk fungerar inte, eftersom webbläsare blockerar modulerna på file://.

Puttide har en hostingdetalj som ett 2D-spel inte har: fysiken körs som WebAssembly. Din server måste skicka .js-filer med en JavaScript-MIME-typ och .wasm som application/wasm. En värd som gör fel här visar en tom skärm eller ett modulfel, så kontrollera det första dagen.

• Webbläsaren behöver: JavaScript, ES-moduler, WebAssembly och WebGL2.
• I en portal-iframe: tillåt helskärm och autouppspelning.
• På pekskärmar: dra för att sikta och putta, två fingrar för att rotera kameran, nyp för att zooma.
• Ingen installerbar offlineapp: varje ny laddning når fortfarande din värd.

Native-appprojekt ingår inte i paketet. Om du planerar en butikslansering, räkna med omslaget och testning på riktiga telefoner, eftersom ett 3D-fysikspel är tyngre än ett kortspel på äldre enheter.

Ingår inte, och licensen

Det här är den lokala webbläsarutgåvan: inget onlinemultiplayer eller onlinerum, ingen onlineranking, inga molnkonton, ingen annons-SDK, inga native-appar och ingen hosting. Banrekord, dagliga framsteg och rundor på samma enhet stannar i spelarens webbläsare, och ingen poäng laddas upp. Sparningar hör till webbläsarens ursprung, så att flytta till en annan domän startar spelarna från början.

Puttide kostar 39 USD; till och med 30 november 2026 tar Black Friday-kampanjen det till 33,15 USD, och att köpa två eller fler mallar i samma beställning ger en paketrabatt på 5 % till 20 %. Licensen är tidsobegränsad och icke-exklusiv för en slutprodukt, din eller en kunds. Du får byta varumärke, ändra koden, grafiken och ljudet, och låta spelare spela gratis eller med annonser, men du får inte sälja vidare mallen eller dess kod på egen hand. Supporten varar i sex månader, eller tolv med tillägget; egna hål, integrationer och hosting offereras på begäran.

Licens-, support- och återbetalningsvillkor i sin helhet

Vanliga frågor

Är källkoden till minigolfspelet i TypeScript?

Nej. Puttide är vanlig, formaterad JavaScript i source/src och game/src, utan minifierade eller paketerade filer av oss.

Kan jag lägga till egna hål eller banor?

Ja. Duplicera ett hål i banfilen, ge det ett unikt id, ange par, start och hål, lägg till det i courses.js och lägg till dess namn och tips i språkfilerna.

Laddar det Three.js från ett CDN?

Nej. Three.js, Rapier, typsnitten och musiken finns alla i game/, så spelet behöver bara din värd.

Varför visar min värd en tom skärm?

Oftast beror det på MIME-typerna. Servera .js som JavaScript och .wasm som application/wasm, öppna spelet över HTTP(S) och kontrollera att WebGL2 är aktiverat.

Kan vänner spela tillsammans?

Ja, två till fyra spelare turas om på samma enhet. Onlinespel ingår inte i den här utgåvan.

Är det rätt minigolfbas för dig?

Puttide passar en familje- eller sportportal, en byrå som bygger en varumärkesbana för en kund och en utvecklare som vill se hur Three.js och Rapier fungerar tillsammans i läsbar kod. Det passar sämre för ett projekt som behöver onlinerundor eller en gemensam ranking från dag ett.

Spela en hel bana i demon på en telefon och läs sedan manualens avsnitt om att lägga till ett hål. Om det avsnittet ser ut som en eftermiddags arbete för dig är resten av spelet redan byggt.

Spela Puttide-demon och köp licensen