Minigolf-spill med kildekode: hull, fysikk og 3D-banekart

Minigolf-spill med kildekode står eller faller på én oppgave: å legge til et hull. En kjøper som vil ha en merkevarebygd bane, et sesongnivå eller en kundes logo på grønnen, åpner nivåfilene først, og hvis et hull er gravet ned i motorkode, stopper prosjektet. I Puttide, vår 3D-minigolfmal, har hver bane sin egen hullfil i ren JavaScript, og manualen går gjennom hvordan du legger til et.

Denne guiden følger pakken slik en utvikler møter den: mappene, bibliotekene, banefilene, rekkefølgen på endringene, hosting og lisensen. Filnavnene kommer fra kjøperguiden som følger med spillet.

Kort svar for de utålmodige: Puttide er formatert JavaScript med Three.js for tegning og Rapier for fysikken til ballen, begge pakket inn. Ingen byggesteg, ingen CDN og ingen serverkode.

Hva minigolf-kildekoden inneholder

Puttide er et ferdig spill med 30 hull på fem øybaner: Sunlit Ruins, Lantern Pier, Frost Peaks, Cloud Garden og Volcano Forge, seks hull hver. Ramper, portaler, støtfangere og vindmøller gjør hullene til små puslespill. Hvert hull gir tre stjerner (fullfør, par eller bedre, den skjulte mynten), og bronse-, sølv- og gullmedaljer belønner de beste rundene.

Oppå banene finnes en daglig utfordring med en vri (vind, isete grønn, tung ball, sprette vegger, myntrush eller birdiejakt), en Locker (skap) der mynter kjøper baller, spor og andre kosmetiske ting, og runder for to til fire spillere som tar tur på én enhet. Grensesnittet kommer på 14 språk.

• game/: den ferdige byggen klar for opplasting, den eneste mappen du publiserer.
• source/: samme spill som en utviklerutgave, med en README og package.json.
• documentation/: én illustrert guide på engelsk og portugisisk.
• THIRD-PARTY-LICENSES/: lisenstekster for bibliotekene og skriftene.
• Versjon 1.1.0, oppdatert 22. oktober 2026.

Åpne Puttide-oppføringen: demo, manual og pris

Three.js, Rapier og resten av stacken

Ballen simuleres av Rapier 3D 0.21.0, som kjører som WebAssembly, og scenen tegnes med Three.js r186. Begge ligger i lib/three/ og lib/rapier/ med sine lisensfiler, og index.html har et import map som peker spillet mot dem. Manualen sier at bibliotekfilene er uendret i oppførsel og bare formatert slik at de kan leses.

Dette betyr noe av to grunner. For det første lastes ingenting fra et CDN, så en portal eller en kunde med en streng sikkerhetspolicy trenger bare vertsen din. For det andre er oppgradering av et bibliotek et manuelt, bevisst steg: source/package.json lister de nøyaktige versjonene, og du kopierer nye modulfiler over den tilsvarende lib/-mappen og beholder banene i import map.

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

Hvor hullene, myntene og tekstene ligger

Stiene er de samme i source/ og game/. Banedataene er delt etter øy, noe som holder hver fil kort nok til å leses i én omgang.

• src/course/courses.js: banerekkefølge og krav for opplåsing.
• src/course/holes.js: hullene på Sunlit Ruins, med geometri, par og hindringer.
• src/course/pier.js, ice.js, lava.js og sky.js: hullene til de fire andre banene.
• src/sim/constants.js: finjustering av fysikken.
• src/game/economy.js: baller, spor og drakter, med prisene deres.
• src/ui/i18n.js og filene rundt den: de 14 språkordbøkene, inkludert hullnavn og tips.
• src/game/localRecords.js: banerekorder lagret i nettleseren.
• src/audio/audio.js: effekter og musikkmappingen, i probeTracks.
• css/style.css: grensesnittfarger, skrifter og responsive stiler.

Legge til et hull, steg for steg

Dette er endringen de fleste kjøpere gjør, og manualen beskriver den på noen få linjer. Vi har utvidet den til rekkefølgen vi selv ville fulgt.

1. Velg banefilen det nye hullet hører til, for eksempel lava.js for Volcano Forge.
2. Dupliser en eksisterende hulldefinisjon som ligner på det du vil ha.
3. Gi den en unik id. Gjenbruk av en id forvirrer lagret fremdrift.
4. Sett par, utslagsposisjonen og hullposisjonen, og flytt eller erstatt hindringene.
5. Legg hullet til sin bane i courses.js.
6. Legg visningsnavnet og tipset til i språkordbøkene, i hvert språk du leverer.
7. Spill det: test kollisjoner, gjenoppretting etter å ha gått utenfor banen og alle tre stjernene, inkludert den skjulte mynten.

Rediger i source/, kopier de endrede filene til de samme stiene i game/, og server mappen over HTTP for å teste. package.json har et serve-skript, eller du kan kjøre python -m http.server 8765. Node.js er valgfritt og trengs bare hvis du vil at npm skal styre bibliotekversjonene.

De andre endringene, i en fornuftig rekkefølge

1. Merkevare og farger: logo, farger og skrifter i css/style.css. White label er tillatt, så merkevaren din kan erstatte vår.
2. Priser i Locker: economy.js. Billigere kosmetikk gjør en casual-side vennligere; dyrere strekker en lang kampanje.
3. Tekster: ordlyd og tips i i18n-filene.
4. Musikk: de to inkluderte sporene kan erstattes med opptak du har lisens til. Kopier filen og oppdater den eksplisitte mappingen i audio.js (probeTracks); scenemusikk faller tilbake til spillesporet.
5. Fysikk: constants.js, sist, og i små steg, fordi hvert hull ble justert mot de nåværende verdiene.

For et beslektet prosjekt med samme tilnærming i ren JavaScript og uten noe 3D-bibliotek, er poolmalen vår bygget på samme måte.

Velvet Pool: 8-ball-pool i ren JavaScript og WebGL2

Sunset Rally: 3D-bordtennis med en kampanje på ni kamper

Hosting, MIME-typer og app-innpakninger

Last opp alt inne i game/ til en mappe som public_html/puttide/, behold undermappene, og åpne adressen over HTTPS. Ingen npm, PHP, database eller konto trengs på serveren. Å åpne index.html fra disk fungerer ikke, fordi nettlesere blokkerer modulene på file://.

Puttide har ett hostingdetalj som et 2D-spill ikke har: fysikken kjører som WebAssembly. Serveren din må sende .js-filer med en JavaScript-MIME-type og .wasm som application/wasm. En vert som gjør dette feil viser en tom skjerm eller en modulfeil, så sjekk det første dag.

• Nettleserkrav: JavaScript, ES-moduler, WebAssembly og WebGL2.
• I en portal-iframe, tillat fullskjerm og autoplay.
• På berøringsskjermer: dra for å sikte og putte, to fingre for å rotere kameraet, klyp for å zoome.
• Ikke en installerbar offline-app: hver ny lasting når fortsatt vertsen din.

Native app-prosjekter er ikke med i pakken. Hvis du planlegger en butikklansering, sett av budsjett til innpakningen og testingen på ekte telefoner, for et 3D-fysikkspill er tyngre enn et kortspill på eldre enheter.

Ikke inkludert, og lisensen

Dette er den lokale nettleserutgaven: ingen flerspiller på nett eller nettbaserte rom, ingen nettbasert rangering, ingen skykontoer, ingen annonse-SDK, ingen native apper og ingen hosting. Banerekorder, daglig fremdrift og runder på samme enhet blir i spillerens nettleser, og ingen poengsum lastes opp. Lagringer hører til nettleserens origin, så flytting til et annet domene starter spillerne på nytt.

Puttide koster 39 USD; til 30. november 2026 gjør Black Friday-kampanjen den til 33,15 USD, og kjøp av to eller flere maler i samme bestilling gir en pakkerabatt på 5 % til 20 %. Lisensen er evigvarende og ikke-eksklusiv for ett sluttprodukt, ditt eller én kundes. Du kan gi den nytt merke, endre koden, kunsten og lyden, og la spillerne spille gratis eller med annonser, men du kan ikke videreselge malen eller koden alene. Support varer seks måneder, eller tolv med utvidelsen; egne hull, integrasjoner og hosting gis tilbud på forespørsel.

Lisens-, support- og refusjonsvilkårene i sin helhet

Vanlige spørsmål

Er minigolf-kildekoden i TypeScript?

Nei. Puttide er ren, formatert JavaScript i source/src og game/src, uten minifiserte eller pakkede filer fra vår side.

Kan jeg legge til egne hull eller baner?

Ja. Dupliser et hull i banefilen, gi det en unik id, sett par, utslag og hull, legg det til i courses.js, og legg navnet og tipset til i språkfilene.

Laster den Three.js fra et CDN?

Nei. Three.js, Rapier, skriftene og musikken ligger alle inne i game/, så spillet trenger bare vertsen din.

Hvorfor viser vertsen min en tom skjerm?

Vanligvis MIME-typene. Server .js som JavaScript og .wasm som application/wasm, åpne spillet over HTTP(S), og sjekk at WebGL2 er aktivert.

Kan venner spille sammen?

Ja, to til fire spillere tar tur på samme enhet. Nettbasert spill er ikke en del av denne utgaven.

Er dette riktig minigolf-grunnlag for deg?

Puttide passer en familie- eller sportsportal, et byrå som bygger en merkevarebygd bane for én kunde, og en utvikler som vil se hvordan Three.js og Rapier fungerer sammen i lesbar kode. Det passer dårligere for et prosjekt som trenger nettbaserte runder eller en felles rangering fra første dag.

Spill en full bane i demoen på en telefon, og les så manualens avsnitt om å legge til et hull. Hvis det avsnittet virker som en ettermiddags arbeid for deg, er resten av spillet allerede bygget.

Spill Puttide-demoen og kjøp lisensen