Billardspiel-Quellcode: ein 8-Ball-Paket in HTML5 von innen

Billardspiel-Quellcode lohnt sich, wenn drei Dinge in getrennten, lesbaren Dateien liegen: die Kugelphysik, die 8-Ball-Regeln und der Computergegner. Sind sie ineinander verwoben, wird jede Änderung an der Tuchfarbe oder der CPU-Stärke zur Fehlersuche. Velvet Pool, unsere 8-Ball-Vorlage, hält sie auseinander, und dieser Ratgeber geht das Paket Datei für Datei durch.

Wir zeigen, wie der Code aufgebaut ist, was Käufer meist zuerst ändern, wie Sie das Spiel hosten oder als App verpacken, was die Lizenz erlaubt und was die Edition weglässt. Jeder Dateiname unten stammt aus dem Käuferhandbuch, das dem Spiel beiliegt.

Kurz gesagt: Velvet Pool ist reines JavaScript auf WebGL2, ohne 3D-Bibliothek und ohne Build-Schritt. Sie bearbeiten eine Datei, kopieren sie in den Spielordner und laden die Seite neu.

Was dieser Billardspiel-Quellcode enthält

Velvet Pool ist ein fertiges 8-Ball-Spiel, keine Engine und kein Starterkit. Der Download enthält vier Ordner: game/ ist der fertige Build zum Hochladen, source/ ist dasselbe Spiel als Entwickleredition mit README, package.json und Tests, documentation/ enthält das bebilderte Handbuch auf Englisch und Portugiesisch, und THIRD-PARTY-LICENSES/ bewahrt die Lizenztexte der Schriften auf.

Gespielt wird 8-Ball mit Fouls, Ball in Hand sowie Vollen und Halben. Es gibt drei CPU-Stufen (Easy, Medium und Hard), einen freien Trainingstisch mit Rückgängig, Kugelplatzierung und Neuaufbau sowie Partien zu zweit an einem Gerät. Die Spieler geben der weißen Kugel Nachläufer, Rückläufer oder Seiteneffet, und lokale Erfolge schalten fünf Tuchfarben und fünf Queue-Stile frei. Die Oberfläche gibt es in 14 Sprachen.

• Stack: Vanilla-JavaScript, ES-Module und WebGL2. Kein Three.js und keine andere Code-Bibliothek.
• Code: einfaches, formatiertes JavaScript in source/src und game/src. Nichts ist minifiziert oder gebündelt.
• Tests: optional, mit Node.js 20 oder neuer. Sie prüfen Physik, 8-Ball-Regeln, CPU-Partien und Übersetzungsschlüssel.
• Version zum Zeitpunkt dieses Artikels: 1.1.0, aktualisiert am 22. Oktober 2026.

Velvet Pool mit Demo und Handbuch ansehen

Wie die Dateien aufgebaut sind

game/ und source/ haben dieselbe Struktur, ein Pfad im einen Ordner zeigt also auf dieselbe Datei im anderen. Für ein Billardspiel ist die wichtigste Trennung die zwischen src/core/ (Simulation und Regeln) und src/game/ (alles, was der Spieler berührt).

• src/core/physics.js: Kugelsimulation, Effet und Bandenverhalten.
• src/core/rules.js: 8-Ball-Regeln und Foul-Entscheidungen.
• src/core/ai.js: wie die CPU ihren Stoß wählt.
• src/game/controls.js: Eingaben für Zielen, Kraft und Effet.
• src/game/progress.js: Erfolge, Tücher, Queues und Partiewertung.
• src/game/i18n.js: die Texte in 14 Sprachen, aufgeführt in LANGS.
• src/game/localRecords.js: der lokale Punkteverlauf.
• src/game/audio.js: Wiedergabe von Effekten und Musik.
• css/style.css und css/fonts.css: Theme, responsives Layout und Schriftdeklarationen.
• assets/: Grafik, Audio und Schriften, die Logodateien in assets/logo/.

Weil Physik, Regeln und CPU getrennte Module sind, können Sie die CPU nachsichtiger machen, ohne die Kugelbewegung anzufassen, oder eine Foulregel ändern, ohne die Banden neu abzustimmen. Diese Trennung ist das Wichtigste, worauf Sie bei gekauftem Billard-Code achten sollten.

Was Käufer zuerst ändern

Die meisten Projekte folgen derselben Reihenfolge. Zuerst kommt, was die Spieler sehen, dann, was sie spüren, und die Regeln zuletzt, weil man dort am leichtesten einen Fehler einbaut.

1. Branding: Ersetzen Sie die Logodateien in assets/logo/ und passen Sie die zugehörigen Größen im CSS an. White Label ist erlaubt, Ihr Name oder der Ihres Kunden kann also unseren ersetzen.
2. Aussehen des Tischs: Farben und Schriften liegen in css/style.css. Tücher und Queues sind in progress.js definiert. Lassen Sie deren IDs unverändert, sonst verlieren Spieler bereits freigeschaltete Designs.
3. Texte und Sprachen: Jeder String steht in i18n.js. Passen Sie die nötigen Formulierungen an; die Sprachliste steht in LANGS.
4. CPU-Stärke: Die Stoßauswahl liegt in ai.js. Stimmen Sie eine Stufe nach der anderen ab und spielen Sie jeweils eine ganze Partie dagegen.
5. Physik: Reibung, Effet und Bandenverhalten liegen in physics.js. Kleine Änderungen wirken hier stark, also lassen Sie nach jeder die Tests laufen.
6. Regeln: Hausregeln gehören in rules.js. Testen Sie Fouls und Ball in Hand von Hand und mit der Testsuite.

Der Ablauf ist immer derselbe: Datei in source/ bearbeiten, an denselben Pfad in game/ kopieren, den Ordner per HTTP ausliefern und neu laden. Das Käuferhandbuch empfiehlt, eine Funktion nach der anderen zu ändern und nach jeder Änderung Menü, eine Partie, Pause, Ergebnisbildschirm und ein Neuladen zu testen.

Hosten, einbetten oder als App verpacken

Das Hosting ist der einfachste Teil. Laden Sie den gesamten Inhalt von game/ in einen Ordner wie public_html/velvet-pool/, behalten Sie die Unterordner bei und öffnen Sie die Adresse. Auf dem Server braucht es kein npm, kein Terminal, kein PHP, keine Datenbank und kein Konto. Ein Tarif, der statische Dateien per HTTPS ausliefert, genügt.

• Öffnen Sie index.html nicht per Doppelklick: Browser blockieren die Spielmodule unter file://. Für einen lokalen Test führen Sie python -m http.server 8765 in game/ aus.
• Bleibt der Bildschirm leer, prüfen Sie, ob WebGL2 aktiviert ist und die Dateinamen ihre Groß- und Kleinschreibung behalten haben.
• Lehnt der Browser ein Modul ab, liefert Ihr Server .js mit dem falschen MIME-Typ aus.
• In einem iframe auf einem Portal erlauben Sie Vollbild und Autoplay.

Alles, was das Spiel zur Laufzeit braucht, liegt in game/, es wird also nichts von einem CDN oder einer anderen Website geladen. Ein frischer Seitenaufruf geht trotzdem an Ihren Host, es ist also keine installierbare Offline-App. Auf Touchscreens läuft es: Die Spieler zielen auf dem Tisch und ziehen am Kraftregler.

Native App-Projekte gehören nicht zum Paket. Wenn Sie das Spiel bei Google Play oder im App Store wollen, ist ein Wrapper wie Capacitor ein üblicher Weg; seine Macher beschreiben ihn als plattformübergreifende native Laufzeitumgebung, um mobile Apps mit Webcode zu bauen. Das Store-Projekt zu bauen und zu pflegen ist Ihre Aufgabe oder eine Leistung, für die wir separat ein Angebot machen.

Was die Edition weglässt

Velvet Pool ist die lokale Browser-Edition. Sie hat keinen Online-Mehrspielermodus und keine privaten Räume, keine Online-Rangliste, keine Cloud-Konten und kein Werbe-SDK. Zwei Personen können an einem Gerät spielen, und persönliche Punkte aus gewerteten CPU-Partien werden im Browser gespeichert. Training und Partien am selben Gerät speichern keine Punkte.

Online-Spiel braucht einen eigenen Server und Entwicklung. Das ist ein echtes Projekt, planen Sie das Budget also von Anfang an ein, statt zu erwarten, dass die Vorlage dahin wächst. Wenn Ihr Katalog weitere Sportspiele braucht: Diese beiden gibt es ebenfalls als fertig hostbare Browser-Editionen.

Puttide: 3D-Minigolf mit 30 Bahnen, ebenfalls in reinem JavaScript

Golazo: Tischfußball mit 50 Nationalteams

Lizenz und Preis in einem Absatz

Velvet Pool kostet laut Liste 39 US$. Bis zum 30. November 2026 gibt es mit einer Black-Friday-Aktion 15 % auf jede Vorlage, damit kostet es 33,15 US$, und Bestellungen ab zwei Vorlagen erhalten zusätzlich 5 % bis 20 % Rabatt. Jeder Kauf ist eine unbefristete, nicht exklusive Lizenz für ein Endprodukt, Ihr eigenes oder das eines Kunden. Sie dürfen Code, Grafik und Audio in diesem Produkt ändern und Ihre eigene Marke daraufsetzen. Spieler können es kostenlos oder über Werbung nutzen. Die Vorlage oder ihren Code allein dürfen Sie nicht weiterverkaufen. Sechs Monate Support sind enthalten, mit Verlängerung beim Kauf 12; Individualarbeit, Hosting und SDK- oder Portal-Integration werden separat angeboten.

Vollständige Lizenz- und Supportbedingungen lesen

Häufig gestellte Fragen

Ist der Billardspiel-Quellcode lesbar oder minifiziert?

Lesbar. Das JavaScript in source/src und game/src ist einfach und formatiert, ohne minifizierte oder gebündelte Dateien.

Brauche ich Node.js oder einen Build-Schritt?

Nein. Sie bearbeiten die Dateien in source/ und kopieren sie nach game/. Node.js 20 oder neuer brauchen Sie nur für die optionalen Tests.

Kann ich die CPU leichter oder schwerer machen?

Ja. Die Stoßauswahl der CPU liegt in src/core/ai.js, getrennt von der Physik, Sie können sie also abstimmen, ohne die Kugelbewegung zu ändern.

Läuft es auf Smartphones?

Ja. Touch-Eingabe wird unterstützt, und die Steuerung passt sich dem Bildschirm an. WebGL2 ist Voraussetzung, und die Leistung hängt vom Gerät ab, testen Sie also die Smartphones, die Ihre Spieler nutzen.

Behalten Spieler ihren Fortschritt, wenn ich das Spiel auf eine neue Domain umziehe?

Nein. Spielstände gehören zum Ursprung im Browser, ein Domainwechsel lässt Spieler also neu beginnen. Legen Sie die endgültige Adresse vor dem Start fest.

Kann ich einen Online-Mehrspielermodus ergänzen?

Nicht mit dieser Edition allein. Dafür braucht es einen eigenen Server und Entwicklung. Wir können das als Individualarbeit anbieten.

Für wen dieser Billard-Code passt

Er passt zu einem Portal oder einer Website, die ein 8-Ball-Spiel im Katalog haben will, zu einer Agentur, die ein gebrandetes Billardspiel an einen Kunden liefert, und zu Entwicklern, die lesen wollen, wie Billardphysik und -regeln geschrieben sind, ohne dass eine 3D-Bibliothek im Weg steht. Weniger gut passt er, wenn Ihr Plan von Online-Partien oder einer gemeinsamen Rangliste abhängt.

Spielen Sie die Demo vor dem Kauf auf einem Smartphone und einem Laptop, und öffnen Sie die Dateiübersicht im Handbuch. Wenn die Trennung von Physik, Regeln und CPU zu Ihrer Arbeitsweise passt, ist der Rest eine Sache von ein paar Nachmittagen.

Velvet-Pool-Demo testen und Lizenz kaufen

Änderungen oder mehrere Lizenzen nötig? Angebot anfragen