Minigolf game broncode: holes, fysica en 3D-baankaart

Broncode van een minigolfgame staat of valt met één taak: een hole toevoegen. Een koper die een gebrandmerkte baan, een seizoensniveau of het logo van een klant op het groen wil, opent eerst de levelbestanden, en als een hole begraven ligt in enginecode, loopt het project vast. In Puttide, ons 3D-minigolftemplate, heeft elke baan een eigen holebestand in gewoon JavaScript, en de handleiding loopt stap voor stap door het toevoegen van er een.

Deze gids volgt het pakket zoals een ontwikkelaar het tegenkomt: de mappen, de bibliotheken, de baanbestanden, de volgorde van wijzigingen, hosting en de licentie. Bestandsnamen komen uit de kopersgids die bij het spel zit.

Het korte antwoord voor wie haast heeft: Puttide is net opgemaakt JavaScript met Three.js voor het tekenen en Rapier voor de natuurkunde van de bal, beide meegebundeld. Geen buildstap, geen CDN en geen servercode.

Wat de broncode van de minigolfgame bevat

Puttide is een afgewerkt spel met 30 holes op vijf eilandbanen: Sunlit Ruins, Lantern Pier, Frost Peaks, Cloud Garden en Volcano Forge, elk met zes holes. Hellingen, portalen, bumpers en windmolens maken van holes kleine puzzels. Elke hole kent drie sterren toe (finish, par of beter, de verborgen munt), en brons-, zilver- en goudmedailles belonen de beste rondes.

Bovenop de banen is er een dagelijkse uitdaging met een twist (winderig, ijzig groen, zware bal, stuiterende wanden, coin rush of birdie hunt), een Locker (de kluis) waar munten ballen, sporen en andere cosmetica kopen, en rondes voor twee tot vier spelers die om de beurt op één apparaat spelen. De interface komt in 14 talen.

• game/: de klaar-om-te-uploaden build, de enige map die je publiceert.
• source/: hetzelfde spel als ontwikkelaarseditie, met een README en package.json.
• documentation/: één geïllustreerde gids in Engels en Portugees.
• THIRD-PARTY-LICENSES/: licentieteksten voor de bibliotheken en lettertypen.
• Versie 1.1.0, bijgewerkt op 22 oktober 2026.

Open de Puttide-vermelding: demo, handleiding en prijs

Three.js, Rapier en de rest van de stack

De bal wordt gesimuleerd door Rapier 3D 0.21.0, dat als WebAssembly draait, en de scène wordt getekend met Three.js r186. Beide staan in lib/three/ en lib/rapier/ met hun licentiebestanden, en index.html heeft een import map die het spel naar die bestanden wijst. De handleiding zegt dat de bibliotheekbestanden in gedrag ongewijzigd zijn en alleen zo zijn opgemaakt dat ze leesbaar zijn.

Dat telt om twee redenen. Ten eerste laadt niets van een CDN, dus een portal of een klant met een streng beveiligingsbeleid heeft alleen je host nodig. Ten tweede is het upgraden van een bibliotheek een handmatige, bewuste stap: source/package.json somt de exacte versies op, en je kopieert nieuwe modulebestanden over de bijbehorende map lib/ en houdt de paden in de import map intact.

• Three.js r186: MIT-licentie.
• Rapier 3D compat 0.21.0, WebAssembly ingesloten: Apache-2.0-licentie.
• Rubik en Fredoka webfonts: SIL Open Font License 1.1.
• Twee muziektracks: music/menu.mp3 en music/play-1.mp3.

Waar de holes, munten en teksten staan

De paden zijn in source/ en game/ hetzelfde. De baangegevens zijn per eiland gesplitst, zodat elk bestand kort genoeg blijft om in één keer te lezen.

• src/course/courses.js: de volgorde van de banen en de vereisten om banen vrij te spelen.
• src/course/holes.js: de holes van Sunlit Ruins, met geometrie, par en obstakels.
• src/course/pier.js, ice.js, lava.js en sky.js: de holes van de andere vier banen.
• src/sim/constants.js: de natuurkundige afstelling.
• src/game/economy.js: ballen, sporen en outfits, met hun prijzen.
• src/ui/i18n.js en de bijbehorende bestanden: de 14 taalwoordenboeken, inclusief holenamen en tips.
• src/game/localRecords.js: baanrecords die in de browser worden bewaard.
• src/audio/audio.js: effecten en de muziekkoppeling, in probeTracks.
• css/style.css: interfacekleuren, lettertypen en responsieve stijlen.

Een hole toevoegen, stap voor stap

Dit is de wijziging die de meeste kopers maken, en de handleiding beschrijft het in een paar regels. Wij hebben het uitgebreid tot de volgorde die wijzelf zouden aanhouden.

1. Kies het baanbestand waar de nieuwe hole bij hoort, bijvoorbeeld lava.js voor Volcano Forge.
2. Dupliceer een bestaande holedefinitie die dicht bij wat je wilt ligt.
3. Geef hem een unieke id. Een hergebruikte id verwart de opgeslagen voortgang.
4. Stel par, de tee-positie en de cup-positie in, en verplaats of vervang de obstakels.
5. Voeg de hole toe aan zijn baan in courses.js.
6. Voeg de weergavenaam en tip toe aan de taalwoordenboeken, in elke taal die je levert.
7. Speel hem: test botsingen, herstel bij buiten het veld en alle drie de sterren, inclusief de verborgen munt.

Bewerk in source/, kopieer de gewijzigde bestanden naar dezelfde paden in game/, en serveer de map via HTTP om te testen. Het package.json heeft een serve-script, of je draait python -m http.server 8765. Node.js is optioneel en alleen nodig als je wilt dat npm de bibliotheekversies beheert.

De overige wijzigingen, in een logische volgorde

1. Merk en kleuren: logo, kleuren en lettertypen in css/style.css. White label is toegestaan, dus je merk mag het onze vervangen.
2. Prijzen in de Locker: economy.js. Goedkopere cosmetica maken een casual site vriendelijker; duurdere rekken een lange campagne uit.
3. Teksten: formuleringen en tips in de i18n-bestanden.
4. Muziek: de twee meegeleverde tracks kunnen worden vervangen door opnamen waarvoor je een licentie hebt. Kopieer het bestand en werk de expliciete koppeling bij in audio.js (probeTracks); scènemuziek valt terug op de speelmuziek.
5. Natuurkunde: constants.js, als laatste, en in kleine stappen, omdat elke hole is afgestemd op de huidige waarden.

Voor een verwant project met dezelfde gewone JavaScript-aanpak en helemaal geen 3D-bibliotheek is onze biljarttemplate op dezelfde manier gebouwd.

Velvet Pool: 8-ball-biljart in gewoon JavaScript en WebGL2

Sunset Rally: 3D-tafeltennis met een campagne van negen wedstrijden

Hosting, MIME-types en app-omhulsels

Upload alles binnen game/ naar een map zoals public_html/puttide/, behoud de submappen, en open het adres via HTTPS. Op de server is geen npm, PHP, database of account nodig. index.html openen vanaf schijf werkt niet, omdat browsers de modules op file:// blokkeren.

Puttide heeft één hostingdetail dat een 2D-spel niet heeft: de natuurkunde draait als WebAssembly. Je server moet .js-bestanden verzenden met een JavaScript-MIME-type en .wasm als application/wasm. Een host die dit verkeerd doet, toont een leeg scherm of een modulefout, dus controleer het op de eerste dag.

• Browservereisten: JavaScript, ES-modules, WebAssembly en WebGL2.
• In een portal-iframe: sta volledig scherm en automatisch afspelen toe.
• Op touchschermen: slepen om te richten en te putten, twee vingers om de camera te draaien, knijpen om in en uit te zoomen.
• Geen installeerbare offline-app: bij elke nieuwe keer laden bereikt het verkeer nog steeds je host.

Native app-projecten zitten niet in het pakket. Als je een winkelrelease overweegt, reken dan op het omhulsel en het testen op echte telefoons, want een 3D-natuurkundespel is zwaarder dan een kaartspel op oudere apparaten.

Niet inbegrepen, en de licentie

Dit is de lokale browserversie: geen online multiplayer of online kamers, geen online ranglijst, geen cloudaccounts, geen advertentie-SDK, geen native apps en geen hosting. Baanrecords, dagelijkse voortgang en rondes op hetzelfde apparaat blijven in de browser van de speler, en er wordt geen score geüpload. Opslag hoort bij de browser-origin, dus verhuizen naar een ander domein laat spelers opnieuw beginnen.

Puttide kost $39; tot en met 30 november 2026 brengt de Black Friday-actie het op $33,15, en bij twee of meer templates in één bestelling geldt een pakketkorting van 5% tot 20%. De licentie is eeuwigdurend en niet-exclusief voor één eindproduct, van jou of van één klant. Je mag het van merk veranderen, de code, het beeldmateriaal en de audio wijzigen, en spelers gratis of met advertenties laten spelen, maar je mag het template of zijn code niet alleen doorverkopen. Support loopt zes maanden, of twaalf met de verlenging; eigen holes, integraties en hosting zijn op aanvraag geoffreerd.

Licentie-, support- en terugbetalingsvoorwaarden volledig

Veelgestelde vragen

Is de minigolf-broncode in TypeScript?

Nee. Puttide is gewoon, netjes opgemaakt JavaScript in source/src en game/src, zonder geminificeerde of gebundelde bestanden van onze kant.

Kan ik mijn eigen holes of banen toevoegen?

Ja. Dupliceer een hole in het baanbestand, geef hem een unieke id, stel par, tee en cup in, voeg hem toe aan courses.js en zet de naam en tip in de taalbestanden.

Laadt het Three.js van een CDN?

Nee. Three.js, Rapier, de lettertypen en de muziek zitten allemaal in game/, zodat het spel alleen je host nodig heeft.

Waarom toont mijn host een leeg scherm?

Meestal de MIME-types. Serveer .js als JavaScript en .wasm als application/wasm, open het spel via HTTP(S), en controleer of WebGL2 aan staat.

Kunnen vrienden samen spelen?

Ja, twee tot vier spelers beurten om beurt op hetzelfde apparaat. Online spelen hoort niet bij deze editie.

Is het de juiste minigolfbasis voor jou?

Puttide past bij een gezins- of sportportal, een bureau dat een gebrandmerkte baan voor één klant bouwt, en een ontwikkelaar die wil zien hoe Three.js en Rapier samenwerken in leesbare code. Het past minder goed bij een project dat vanaf dag één online rondes of een gedeelde ranglijst nodig heeft.

Speel een volledige baan in de demo op een telefoon, en lees daarna de handleidingsparagraaf over het toevoegen van een hole. Lijkt dat je een middag werk, dan is de rest van het spel al gebouwd.

Speel de Puttide-demo en koop de licentie