Minigolf-Spiel-Quellcode: Bahnen, Physik und 3D-Kurse

Ob Minigolf-Spiel-Quellcode taugt, entscheidet sich an einer einzigen Aufgabe: eine Bahn hinzufügen. Wer einen Kurs im eigenen Branding, ein saisonales Level oder das Logo eines Kunden auf dem Grün möchte, öffnet zuerst die Level-Dateien. Steckt eine Bahn tief im Engine-Code, kommt das Projekt ins Stocken. In Puttide, unserer 3D-Minigolf-Vorlage, hat jeder Kurs eine eigene Bahndatei in reinem JavaScript, und das Handbuch erklärt, wie man eine Bahn ergänzt.

Dieser Leitfaden geht das Paket so durch, wie Entwickler es kennenlernen: Ordner, Bibliotheken, Kursdateien, Reihenfolge der Änderungen, Hosting und Lizenz. Die Dateinamen stammen aus dem Käuferhandbuch, das dem Spiel beiliegt.

Die Kurzfassung für Eilige: Puttide ist formatiertes JavaScript mit Three.js für die Grafik und Rapier für die Ballphysik, beide mitgeliefert. Kein Build-Schritt, kein CDN und kein Servercode.

Was der Minigolf-Spiel-Quellcode enthält

Puttide ist ein fertiges Spiel mit 30 Bahnen auf fünf Inselkursen: Sunlit Ruins, Lantern Pier, Frost Peaks, Cloud Garden und Volcano Forge, je sechs Bahnen. Rampen, Portale, Bumper und Windmühlen machen aus den Bahnen kleine Rätsel. Jede Bahn vergibt drei Sterne (Abschluss, Par oder besser, die versteckte Münze), und Bronze-, Silber- und Goldmedaillen belohnen die besten Runden.

Dazu kommen eine tägliche Herausforderung mit Besonderheit (Wind, vereistes Grün, schwerer Ball, federnde Banden, Münzjagd oder Birdie-Jagd), ein Locker, in dem Münzen Bälle, Spuren und andere kosmetische Extras kaufen, sowie Runden für zwei bis vier Spieler abwechselnd an einem Gerät. Die Oberfläche gibt es in 14 Sprachen.

• game/: der fertige Build zum Hochladen, der einzige Ordner, den Sie veröffentlichen.
• source/: dasselbe Spiel als Entwickler-Edition, mit README und package.json.
• documentation/: ein bebildertes Handbuch auf Englisch und Portugiesisch.
• THIRD-PARTY-LICENSES/: Lizenztexte für Bibliotheken und Schriften.
• Version 1.1.0, aktualisiert am 22. Oktober 2026.

Puttide ansehen: Demo, Handbuch und Preis

Three.js, Rapier und der Rest des Stacks

Den Ball simuliert Rapier 3D 0.21.0, das als WebAssembly läuft; die Szene zeichnet Three.js r186. Beide liegen mit ihren Lizenzdateien in lib/three/ und lib/rapier/, und index.html enthält eine Import-Map, die das Spiel darauf verweist. Laut Handbuch ist das Verhalten der Bibliotheken unverändert; sie sind nur formatiert, damit man sie lesen kann.

Das ist aus zwei Gründen wichtig. Erstens wird nichts von einem CDN geladen, ein Portal oder ein Kunde mit strenger Sicherheitsrichtlinie braucht also nur Ihren Host. Zweitens ist ein Bibliotheks-Update ein bewusster, manueller Schritt: source/package.json nennt die genauen Versionen, Sie kopieren die neuen Moduldateien über den passenden lib/-Ordner und behalten die Pfade der Import-Map bei.

• Three.js r186: MIT-Lizenz.
• Rapier 3D compat 0.21.0, WebAssembly eingebettet: Apache-2.0-Lizenz.
• Webschriften Rubik und Fredoka: SIL Open Font License 1.1.
• Zwei Musikstücke: music/menu.mp3 und music/play-1.mp3.

Wo Bahnen, Münzen und Texte liegen

Die Pfade sind in source/ und game/ identisch. Die Kursdaten sind nach Inseln aufgeteilt, sodass jede Datei kurz genug bleibt, um sie in einem Zug zu lesen.

• src/course/courses.js: Reihenfolge der Kurse und Freischaltbedingungen.
• src/course/holes.js: die Bahnen von Sunlit Ruins mit Geometrie, Par und Hindernissen.
• src/course/pier.js, ice.js, lava.js und sky.js: die Bahnen der anderen vier Kurse.
• src/sim/constants.js: Feinabstimmung der Physik.
• src/game/economy.js: Bälle, Spuren und Outfits mit ihren Preisen.
• src/ui/i18n.js und die zugehörigen Dateien: die Wörterbücher der 14 Sprachen, inklusive Bahnnamen und Tipps.
• src/game/localRecords.js: Kursrekorde, im Browser gespeichert.
• src/audio/audio.js: Effekte und die Musikzuordnung in probeTracks.
• css/style.css: Farben der Oberfläche, Schriften und responsive Stile.

Eine Bahn hinzufügen, Schritt für Schritt

Das ist die Änderung, die die meisten Käufer vornehmen, und das Handbuch beschreibt sie in wenigen Zeilen. Wir haben sie in die Reihenfolge gebracht, der wir selbst folgen würden.

1. Wählen Sie die Kursdatei, zu der die neue Bahn gehört, etwa lava.js für Volcano Forge.
2. Duplizieren Sie eine bestehende Bahndefinition, die Ihrem Ziel nahekommt.
3. Vergeben Sie eine eindeutige id. Eine doppelt verwendete id bringt gespeicherte Fortschritte durcheinander.
4. Legen Sie Par, Abschlagpunkt und Lochposition fest und verschieben oder ersetzen Sie dann die Hindernisse.
5. Tragen Sie die Bahn in courses.js bei ihrem Kurs ein.
6. Ergänzen Sie Anzeigename und Tipp in den Sprachwörterbüchern, in jeder Sprache, die Sie ausliefern.
7. Spielen Sie sie: Kollisionen, Rückkehr nach dem Aus und alle drei Sterne prüfen, auch die versteckte Münze.

Bearbeiten Sie in source/, kopieren Sie die geänderten Dateien an dieselben Pfade in game/ und stellen Sie den Ordner zum Testen per HTTP bereit. Die package.json hat ein serve-Skript, alternativ geht python -m http.server 8765. Node.js ist optional und nur nötig, wenn npm die Bibliotheksversionen verwalten soll.

Die übrigen Änderungen in sinnvoller Reihenfolge

1. Marke und Farben: Logo, Farben und Schriften in css/style.css. White Label ist erlaubt, Ihre Marke darf also unsere ersetzen.
2. Preise im Locker: economy.js. Günstigere Extras machen eine Casual-Seite freundlicher, teurere strecken eine lange Kampagne.
3. Texte: Formulierungen und Tipps in den i18n-Dateien.
4. Musik: Die zwei enthaltenen Stücke lassen sich durch Aufnahmen ersetzen, für die Sie eine Lizenz haben. Datei kopieren und die explizite Zuordnung in audio.js (probeTracks) anpassen; Szenenmusik fällt auf das Gameplay-Stück zurück.
5. Physik: constants.js, zuletzt und in kleinen Schritten, weil jede Bahn auf die aktuellen Werte abgestimmt ist.

Für ein verwandtes Projekt mit demselben Ansatz in reinem JavaScript, ganz ohne 3D-Bibliothek, ist unsere Billard-Vorlage genauso aufgebaut.

Velvet Pool: 8-Ball-Billard in reinem JavaScript und WebGL2

Sunset Rally: 3D-Tischtennis mit einer Kampagne aus neun Matches

Hosting, MIME-Typen und App-Wrapper

Laden Sie den gesamten Inhalt von game/ in einen Ordner wie public_html/puttide/, behalten Sie die Unterordner bei und öffnen Sie die Adresse per HTTPS. Auf dem Server sind weder npm noch PHP, Datenbank oder Konto nötig. index.html direkt von der Festplatte zu öffnen funktioniert nicht, weil Browser Module unter file:// blockieren.

Puttide hat ein Hosting-Detail, das ein 2D-Spiel nicht hat: Die Physik läuft als WebAssembly. Ihr Server muss .js-Dateien mit einem JavaScript-MIME-Typ ausliefern und .wasm als application/wasm. Ein falsch konfigurierter Host zeigt einen leeren Bildschirm oder einen Modulfehler, prüfen Sie das also gleich am ersten Tag.

• Browser-Anforderungen: JavaScript, ES-Module, WebAssembly und WebGL2.
• Im iframe eines Portals Vollbild und Autoplay erlauben.
• Auf Touchscreens: ziehen zum Zielen und Putten, zwei Finger zum Drehen der Kamera, Zwei-Finger-Geste zum Zoomen.
• Keine installierbare Offline-App: Jeder neue Aufruf geht weiterhin an Ihren Host.

Native App-Projekte sind nicht im Paket. Wenn Sie eine Veröffentlichung in den Stores planen, kalkulieren Sie den Wrapper und Tests auf echten Smartphones ein, denn ein 3D-Physikspiel ist auf älteren Geräten schwerer als ein Kartenspiel.

Was nicht enthalten ist, und die Lizenz

Dies ist die lokale Browser-Edition: kein Online-Multiplayer und keine Online-Räume, keine Online-Bestenliste, keine Cloud-Konten, kein Werbe-SDK, keine nativen Apps und kein Hosting. Kursrekorde, Tagesfortschritt und Runden am selben Gerät bleiben im Browser des Spielers, und es werden keine Punkte hochgeladen. Spielstände gehören zum Browser-Origin; wer auf eine andere Domain umzieht, lässt die Spieler von vorn beginnen.

Puttide kostet regulär $39; bis zum 30. November 2026 senkt die Black-Friday-Aktion den Preis auf $33.15, und wer zwei oder mehr Vorlagen in einer Bestellung kauft, erhält zusätzlich 5 % bis 20 % Paketrabatt. Die Lizenz ist unbefristet und nicht exklusiv, für ein Endprodukt, Ihres oder das eines Kunden. Sie dürfen das Spiel umbranden, Code, Grafik und Audio ändern und es kostenlos oder mit Werbung anbieten, aber die Vorlage oder ihren Code nicht für sich allein weiterverkaufen. Der Support läuft sechs Monate, mit Verlängerung zwölf; eigene Bahnen, Integrationen und Hosting bieten wir auf Anfrage an.

Lizenz-, Support- und Erstattungsbedingungen vollständig lesen

Häufig gestellte Fragen

Ist der Minigolf-Quellcode in TypeScript geschrieben?

Nein. Puttide ist reines, formatiertes JavaScript in source/src und game/src, ohne von uns minifizierte oder gebündelte Dateien.

Kann ich eigene Bahnen oder Kurse hinzufügen?

Ja. Duplizieren Sie eine Bahn in der Kursdatei, vergeben Sie eine eindeutige id, legen Sie Par, Abschlag und Loch fest, tragen Sie sie in courses.js ein und ergänzen Sie Name und Tipp in den Sprachdateien.

Wird Three.js von einem CDN geladen?

Nein. Three.js, Rapier, die Schriften und die Musik liegen alle in game/, das Spiel braucht also nur Ihren Host.

Warum zeigt mein Host einen leeren Bildschirm?

Meist liegt es an den MIME-Typen. Liefern Sie .js als JavaScript und .wasm als application/wasm aus, öffnen Sie das Spiel per HTTP(S) und prüfen Sie, ob WebGL2 aktiviert ist.

Können Freunde zusammen spielen?

Ja, zwei bis vier Spieler abwechselnd am selben Gerät. Online-Spiel gehört nicht zu dieser Edition.

Ist das die richtige Minigolf-Basis für Sie?

Puttide passt zu einem Familien- oder Sportportal, zu einer Agentur, die für einen Kunden einen gebrandeten Kurs baut, und zu Entwicklern, die sehen wollen, wie Three.js und Rapier in lesbarem Code zusammenarbeiten. Weniger geeignet ist es für ein Projekt, das vom ersten Tag an Online-Runden oder eine gemeinsame Bestenliste braucht.

Spielen Sie in der Demo einen ganzen Kurs auf dem Smartphone und lesen Sie dann den Abschnitt des Handbuchs über das Hinzufügen einer Bahn. Wenn das für Sie nach einem Nachmittag Arbeit aussieht, ist der Rest des Spiels bereits fertig.

Puttide-Demo spielen und Lizenz kaufen