Kildekode til minigolfspil: huller, fysik og et 3D-banekort

Kildekode til minigolfspil står eller falder med én opgave: at tilføje et hul. En køber, der vil have en brandet bane, et sæsonniveau eller en kundes logo på greenen, åbner først niveaufilerne, og hvis et hul er begravet i motorkode, går projektet i stå. I Puttide, vores 3D-minigolfskabelon, har hver bane sin egen hulfil i ren JavaScript, og manualen gennemgår, hvordan du tilføjer et.

Denne guide følger pakken, sådan som en udvikler møder den: mapperne, bibliotekerne, banefilerne, rækkefølgen af ændringer, hosting og licensen. Filnavnene kommer fra købervejledningen, der følger med spillet.

Det korte svar til den utålmodige: Puttide er formateret JavaScript med Three.js til tegning og Rapier til boldens fysik, begge medleveret. Intet build-trin, intet CDN og ingen serverkode.

Hvad kildekoden til minigolfspillet indeholder

Puttide er et færdigt spil med 30 huller fordelt på fem øbaner: Sunlit Ruins, Lantern Pier, Frost Peaks, Cloud Garden og Volcano Forge, seks huller hver. Rampe, portaler, bumpere og vindmøller gør hullerne til små puslespil. Hvert hul giver tre stjerner (gennemført, par eller bedre, den skjulte mønt), og bronze-, sølv- og guldmedaljer belønner de bedste runder.

Ud over banerne er der en daglig udfordring med en drejning (vind, isglat green, tung bold, hoppende vægge, coin rush eller birdie hunt), en Locker (garderobe), hvor mønter køber bolde, spor og andre kosmetiske ting, og runder for to til fire spillere, der skiftes på én enhed. Grænsefladen findes på 14 sprog.

• game/: den færdige build, der er klar til upload, den eneste mappe du udgiver.
• source/: det samme spil som en udvikleredition, med en README og package.json.
• documentation/: én illustreret vejledning på engelsk og portugisisk.
• THIRD-PARTY-LICENSES/: licenstekster til bibliotekerne og skrifttyperne.
• Version 1.1.0, opdateret 22. oktober 2026.

Åbn Puttide-siden: demo, manual og pris

Three.js, Rapier og resten af stakken

Bolden simuleres af Rapier 3D 0.21.0, der kører som WebAssembly, og scenen tegnes med Three.js r186. Begge ligger i lib/three/ og lib/rapier/ med deres licensfiler, og index.html har en import map, der peger spillet hen til dem. Manualen bemærker, at bibliotekfilerne er uændrede i adfærd og kun formateret, så de kan læses.

Det betyder noget af to grunde. For det første hentes intet fra et CDN, så en portal eller en kunde med en streng sikkerhedspolitik kun har brug for din host. For det andet er opgradering af et bibliotek et manuelt og bevidst skridt: source/package.json lister de præcise versioner, og du kopierer nye modulfiler over den tilsvarende lib/-mappe og beholder importstierne i import map'et.

• Three.js r186: MIT-licens.
• Rapier 3D compat 0.21.0, WebAssembly indlejret: Apache-2.0-licens.
• Rubik og Fredoka webskrifttyper: SIL Open Font License 1.1.
• To musiknumre: music/menu.mp3 og music/play-1.mp3.

Hvor hullerne, mønterne og teksterne ligger

Stierne er de samme i source/ og game/. Banedataene er delt op efter ø, hvilket holder hver fil kort nok til at læse i ét hug.

• src/course/courses.js: rækkefølgen af baner og krav til at låse dem op.
• src/course/holes.js: hullerne på Sunlit Ruins, med geometri, par og forhindringer.
• src/course/pier.js, ice.js, lava.js og sky.js: hullerne på de fire andre baner.
• src/sim/constants.js: fysikjusteringer.
• src/game/economy.js: bolde, spor og outfits, med deres priser.
• src/ui/i18n.js og dens følgefiler: de 14 sprogordbøger, inklusive hulnavne og tips.
• src/game/localRecords.js: banerekorder, der gemmes i browseren.
• src/audio/audio.js: effekter og musikmappingen i probeTracks.
• css/style.css: grænsefladefarver, skrifttyper og responsive stilarter.

Tilføj et hul, trin for trin

Det er den ændring, de fleste købere foretager, og manualen beskriver den på få linjer. Vi har udvidet den til den rækkefølge, vi selv ville følge.

1. Vælg banefilen, det nye hul hører til, for eksempel lava.js for Volcano Forge.
2. Dupliker en eksisterende hulbeskrivelse, der ligner det, du vil have.
3. Giv det et unikt id. Genbrug af et id forvirrer gemte fremskridt.
4. Sæt par, udslagsstedet og hullets position, og flyt eller erstat forhindringerne.
5. Tilføj hullet til sin bane i courses.js.
6. Tilføj dets visningsnavn og tip til sprogordbøgerne, i hvert sprog du leverer.
7. Spil det: test kollisioner, genopretning ved udenfor-banen og alle tre stjerner, inklusive den skjulte mønt.

Redigér i source/, kopiér de ændrede filer til de samme stier i game/, og server mappen over HTTP for at teste. package.json har et serve-script, eller du kan køre python -m http.server 8765. Node.js er valgfrit og kun nødvendigt, hvis du vil have npm til at styre bibliotekversionerne.

De andre ændringer, i en fornuftig rækkefølge

1. Brand og farver: logo, farver og skrifttyper i css/style.css. White label er tilladt, så dit brand kan erstatte vores.
2. Priser i Locker: economy.js. Billigere kosmetiske ting gør en casual-side mere venlig; dyrere strækker en lang kampagne.
3. Tekster: formuleringer og tips i i18n-filerne.
4. Musik: de to medfølgende numre kan erstattes med optagelser, du har licens til. Kopiér filen og opdatér den eksplicitte mapping i audio.js (probeTracks); scenemusik falder tilbage til spilsporet.
5. Fysik: constants.js, til sidst og i små skridt, for hvert hul er indstillet mod de nuværende værdier.

Til et beslægtet projekt med samme ren-JavaScript-tilgang og slet intet 3D-bibliotek er vores poolskabelon bygget på samme måde.

Velvet Pool: 8-ball i ren JavaScript og WebGL2

Sunset Rally: 3D-bordtennis med en kampagne på ni kampe

Hosting, MIME-typer og app-indpakninger

Upload alt inde i game/ til en mappe såsom public_html/puttide/, behold undermapperne, og åbn adressen over HTTPS. Der kræves ingen npm, PHP, database eller konto på serveren. At åbne index.html fra disken virker ikke, fordi browsere blokerer modulerne på file://.

Puttide har én hosting-detalje, som et 2D-spil ikke har: fysikken kører som WebAssembly. Din server skal sende .js-filer med en JavaScript-MIME-type og .wasm som application/wasm. En host, der gør dette forkert, viser en tom skærm eller en modulfejl, så tjek det den første dag.

• Browseren skal understøtte: JavaScript, ES-moduler, WebAssembly og WebGL2.
• I en portal-iframe: tillad fuld skærm og automatisk afspilning.
• På touchskærme: træk for at sigte og putte, to fingre for at dreje kameraet, knib for at zoome.
• Ikke en installerbar offline-app: hver ny indlæsning går stadig til din host.

Native app-projekter er ikke en del af pakken. Hvis du planlægger en udgivelse i butik, så afsæt tid til indpakningen og testen på rigtige telefoner, for et 3D-fysikspil er tungere end et kortspil på ældre enheder.

Ikke inkluderet, og licensen

Dette er den lokale browserudgave: ingen online multiplayer eller online-rum, ingen online-rangliste, ingen cloud-konti, ingen annonce-SDK, ingen native apps og ingen hosting. Banerekorder, daglige fremskridt og runder på samme enhed bliver i spillerens browser, og ingen score uploades. Gemte data hører til browserens oprindelse, så en flytning til et andet domæne starter spillerne forfra.

Puttide koster 39 USD på listen; indtil 30. november 2026 bringer Black Friday-kampagnen den ned på 33,15 USD, og køber du to eller flere skabeloner i én ordre, får du en pakkerabat på 5 % til 20 %. Licensen er evig og ikke-eksklusiv for ét slutprodukt, dit eget eller én kundes. Du må give det dit brand, ændre dets kode, kunst og lyd og lade spillerne spille gratis eller med annoncer, men du må ikke videresælge skabelonen eller dens kode alene. Supporten varer seks måneder, eller tolv med forlængelsen; skræddersyede huller, integrationer og hosting tilbydes efter forespørgsel.

Licens-, support- og refusionsvilkår i deres helhed

Ofte stillede spørgsmål

Er kildekoden til minigolfspillet i TypeScript?

Nej. Puttide er ren, formateret JavaScript i source/src og game/src, uden minificerede eller samlede filer fra vores side.

Kan jeg tilføje mine egne huller eller baner?

Ja. Dupliker et hul i banefilen, giv det et unikt id, sæt par, udslagssted og hul, tilføj det til courses.js, og tilføj dets navn og tip til sprogfilerne.

Henter den Three.js fra et CDN?

Nej. Three.js, Rapier, skrifttyperne og musikken ligger alle inde i game/, så spillet kun har brug for din host.

Hvorfor viser min host en tom skærm?

Normalt MIME-typerne. Server .js som JavaScript og .wasm som application/wasm, åbn spillet over HTTP(S), og tjek at WebGL2 er slået til.

Kan venner spille sammen?

Ja, to til fire spillere skiftes på samme enhed. Online-spil er ikke en del af denne udgave.

Er det det rigtige minigolf-grundlag for dig?

Puttide passer til en familie- eller sportsportal, et bureau, der bygger en brandet bane til én kunde, og en udvikler, der vil se, hvordan Three.js og Rapier spiller sammen i læsbar kode. Det passer dårligere til et projekt, der fra dag ét har brug for online-runder eller en fælles rangliste.

Spil en hel bane i demoen på en telefon, og læs derefter manualens afsnit om at tilføje et hul. Hvis det afsnit ligner en eftermiddags arbejde for dig, så er resten af spillet allerede bygget.

Spil Puttide-demoen og køb licensen