Tischtennis-Spiel mit Quellcode: Sunset Rally Datei für Datei
Ein 3D-Tischtennisspiel für den Browser, Datei für Datei geöffnet: wo Physik, Punktezählung, Kampagne und Schauplätze liegen und was Sie zuerst ändern sollten.
Wenn Sie den Quellcode eines Tischtennis-Spiels suchen, den Sie selbst hosten und anpassen können: Sunset Rally ist ein fertiges 3D-Tischtennisspiel für den Browser mit einer Kampagne aus neun Matches, drei Computergegnern, einer Werkstatt und dem kompletten TypeScript-Projekt, zum Listenpreis von $39. Der Spielordner ist bereits gebaut und nicht minifiziert. Sie können ihn also zuerst hochladen und später in Ruhe lesen.
Sportspiele lassen sich schwerer anpassen, als es aussieht, denn der Spielspaß steckt in der Physik und der Steuerung, nicht in den Menüs. Dieser Leitfaden zeigt, wo diese Teile im Sunset-Rally-Projekt liegen, was Sie gefahrlos ändern können und was diese Ausgabe nicht enthält.
So spielt sich das Tischtennisspiel
Gespielt wird bis sieben Punkte gegen einen Computergegner. Den Schläger steuert man mit dem Mauszeiger oder durch Ziehen, die Schläge erfolgen automatisch. Nach oben schieben gibt mehr Kraft, seitliche Bewegung platziert den Ball, nach unten ziehen spielt einen Stoppball, und ein hoch abspringender Ball wartet nur darauf, geschmettert zu werden.
Eine optionale Hilfe, die sich während des Matches ein- und ausschalten lässt, bringt den Schläger auf die Höhe des Balls. Für eine öffentliche Website ist das wichtig: Auch wer zum ersten Mal am Handy spielt, bekommt den Ball zurück.
Es gibt drei Computergegner mit eigenem Stil: den geduldigen Capi, die verspielte Nori und den präzisen Miso, jeweils in Leicht, Normal oder Schwer. Im Trainingsmodus spielt ein Partner jeden Ball zurück. Nach dem Match zeigt eine Wiederholung noch einmal den entscheidenden Punkt.
Was das Paket mit dem Quellcode des Tischtennis-Spiels enthält
- Einen hostfertigen Ordner game/, bereits gebaut und nicht minifiziert.
- Den TypeScript-Quellcode für Entwickler mit Vite-Setup und den Spiel-Assets, in source/.
- Bebilderte Handbücher auf Englisch und Portugiesisch mit echten Screenshots.
- Schriften und Audiodateien, die zum Spiel gehören.
- Lizenzhinweise für Drittanbieter-Komponenten und ein Changelog.
Der Stack besteht aus TypeScript, Three.js r184, Vite und WebGL2. Die Dateien sind HTML, CSS, JavaScript, TypeScript und JSON. Die Oberfläche gibt es in 14 Sprachen: Englisch, Portugiesisch, Spanisch, Französisch, Deutsch, Italienisch, Niederländisch, Polnisch, Türkisch, Russisch, Indonesisch, Japanisch, Koreanisch und vereinfachtes Chinesisch. Die Handbücher liegen nur auf Englisch und Portugiesisch vor.
Auch alles rund um die Matches gehört zum Paket: ein Sunset Circuit mit neun Matches in drei Etappen, drei Schauplätze (der Garten im Sonnenuntergang, der Kirschblütengarten und das Café am Meer) am Morgen, am Nachmittag, in der Nacht oder bei Regen, und eine Werkstatt, in der Münzen aus Siegen Schlägerfarben, Beläge, Formen, Griffe, Hölzer, Kantenbänder, Aufkleber sowie Ball- und Tischdesigns freischalten.
Wo was im Code liegt
Das Handbuch ordnet jeden Teil des Spiels einer Datei zu. Diese Liste sollten Sie beim Arbeiten offen haben:
- Campaign.ts: die neun Kampagnen-Matches und ihre Sternziele.
- Places.ts: das Aussehen jedes Schauplatzes.
- physics.ts: die Physik von Ball und Schläger.
- match.ts: Punktezählung und Spielregeln.
- i18n.ts: Oberflächentexte auf Englisch und Portugiesisch; die übrigen Sprachen liegen im Ordner locales.
- styles.css: das Styling von Menüs und Bildschirmen.
Jedes Kampagnen-Match bringt bis zu drei Sterne: gewinnen, drei Ecken treffen und einen Ballwechsel über zehn Schläge spielen. Das ergibt 27 Sterne, und wer einen Schauplatz abschließt, erhält einen Preis für die Werkstatt. Da die Sternbedingungen in einer einzigen Kampagnendatei stehen, können Sie die Kampagne leichter oder schwerer machen, ohne den Code zu durchsuchen.
Was Sie an einer Tischtennis-Vorlage zuerst ändern sollten
Wir empfehlen diese Reihenfolge, vom geringsten zum höchsten Risiko.
- Oberflächentexte und Spielname, in i18n.ts und im Ordner locales.
- Farben und Bildschirme, in styles.css.
- Werkstatt-Designs für Schläger, Bälle und Tische, damit die Ausrüstung Ihre Marke trägt.
- Die Optik der Schauplätze, in Places.ts.
- Kampagnen-Matches und Sternziele, in Campaign.ts.
- Physik und Punktezählung, in physics.ts und match.ts, nur wenn sich das Spiel anders anfühlen soll.
Das Handbuch nennt drei Regeln, an die Sie sich halten sollten. Lassen Sie Freischalt-IDs, Item-IDs und Speicherschlüssel unverändert, sonst verlieren die Spieler, was sie sich verdient haben. Legen Sie vor dem Start ein Backup an. Ändern Sie immer nur eine Funktion, damit Sie wissen, welche Änderung was bewirkt hat.
White Label ist erlaubt: Ihr Name und Logo oder die Ihres Kunden dürfen unsere ersetzen.
Neu bauen, hosten und einbetten
Zum Spielen muss nichts gebaut werden. Laden Sie den Inhalt von game/ auf einen beliebigen HTTP(S)-Host, der statische Dateien ausliefert, behalten Sie die relativen Pfade bei und rufen Sie die Adresse auf. PHP, Datenbank oder Benutzerkonto sind nicht nötig.
Um den Quellcode zu ändern, brauchen Sie Node.js (empfohlen wird 24 LTS) und npm. Bearbeiten Sie das TypeScript, bauen Sie mit Vite neu und ersetzen Sie den gehosteten Ordner game/ durch die neue Ausgabe.
Der Browser braucht JavaScript, ES-Module und WebGL2. Touch- und Maussteuerung werden beide unterstützt, und die Steuerung passt sich der Bildschirmgröße an. Die Leistung hängt von Browser und Gerät ab. Testen Sie also auf den Handys, die Ihre Spieler nutzen.
- Laden Sie game/ in einen Testordner auf Ihrem Host.
- Spielen Sie ein Match im Desktop-Browser und eines auf dem Handy.
- Nehmen Sie Ihre Text- und Designänderungen in source/ vor und bauen Sie neu.
- Ersetzen Sie den kompletten Testordner und spielen Sie erneut.
- Verschieben Sie das Spiel an die endgültige Adresse.
Was diese Ausgabe nicht enthält
Diese Ausgabe wird gegen den Computer gespielt: Kampagne, freies Match und Training. Online-Mehrspieler, Online-Räume, Online-Bestenlisten und Cloud-Konten gehören nicht zum Paket, und einen Zwei-Spieler-Modus gibt es nicht. Werbe-SDKs oder Werbekonten sind nicht enthalten, ebenso wenig native Apps und Hosting.
Der Fortschritt bleibt im Browser des Spielers: Kampagnensterne, Ergebnisse, Statistiken, Wiederholungen und Werkstatt-Gegenstände. Es werden weder Server noch Konten verwendet, nach dem Start gibt es also nichts zu warten.
Wenn Sie einen Online-Modus, ein Portal-SDK, eine App-Store-Version oder die Installation auf Ihrem Server brauchen, ist das eine eigene Dienstleistung, die wir pro Projekt anbieten.
Angebot für eine Sonderanfertigung anfragen
Lizenz, Support und Preis in einem Absatz
Ein Kauf gibt Ihnen eine unbefristete, nicht exklusive Lizenz für ein Endprodukt, Ihres oder das eines Kunden, das Spieler kostenlos oder mit Werbemonetarisierung nutzen dürfen. Sie dürfen Code, Grafik und Audio innerhalb dieses Produkts ändern, die Vorlage, ihren Quellcode oder ihre Assets aber nicht für sich allein weiterverkaufen oder weitergeben. Der Support läuft 6 Monate, mit der Verlängerung an der Kasse 12, und umfasst Installation und Nutzung der Dateien sowie die Behebung reproduzierbarer Fehler; Anpassungen, Hosting und die Integration von SDKs oder Portalen werden separat angeboten. Der Listenpreis beträgt $39; bis zum 30. November 2026 gibt es mit einer Black-Friday-Aktion 15 % Rabatt auf jede Vorlage, Sunset Rally kostet also $33.15, und ab dem 1. Dezember gelten wieder die Listenpreise.
Vollständige Bedingungen lesen
Häufig gestellte Fragen
Muss ich etwas bauen, um dieses Tischtennisspiel zu nutzen?
Nein. Der Ordner game/ ist bereits gebaut. Laden Sie seinen Inhalt auf einen statischen Webhost und rufen Sie die Adresse auf. Node.js und npm brauchen Sie nur, wenn Sie das TypeScript ändern und neu bauen.
Gibt es einen Zwei-Spieler- oder Online-Modus?
Nein. Diese Ausgabe wird gegen den Computer gespielt: in der Kampagne, in freien Matches und im Training.
Kann ich die Kampagne und die Sternziele ändern?
Ja. Matches und Sternbedingungen stehen in Campaign.ts. Danach mit Node.js neu bauen.
Kann ich ändern, wie sich der Ball verhält?
Ja. Die Physik steckt in physics.ts, die Zählregeln in match.ts. Ändern Sie immer nur eine Sache und testen Sie gegen jeden Gegner.
Läuft es auf Handys?
Ja, mit Touch-Steuerung, die sich dem Bildschirm anpasst. WebGL2 ist Voraussetzung, und die Leistung hängt vom Gerät ab. Testen Sie also auf den Handys Ihrer Zielgruppe.
Wo wird der Fortschritt gespeichert?
Im Browser des Spielers. Es werden weder Server noch Konten verwendet.
Weitere Sport-Vorlagen zum Vergleich
Wenn Sie auf Ihrer Website eine Sportecke aufbauen, passen zwei weitere Vorlagen gut zu Sunset Rally. Velvet Pool ist ein 8-Ball-Billardspiel mit Computergegner und lokalem Zwei-Spieler-Modus, geschrieben in reinem JavaScript mit WebGL2, Listenpreis $39. Puttide ist ein 3D-Minigolfspiel mit 30 Bahnen auf Basis von Three.js und Rapier, Listenpreis $39. Beide haben eine Oberfläche in 14 Sprachen.
Sunset Rally passt zu Portalen und Websites, die ein Sportspiel mit kurzen Matches suchen, zu Studios, die einem Kunden ein Spiel im eigenen Branding liefern, und zu Entwicklern, die ein gut lesbares TypeScript- und Three.js-Projekt zum Lernen oder Erweitern wollen. Wenn zwei Spieler am selben Gerät spielen sollen: Velvet Pool hat diesen Modus, Sunset Rally nicht.
Velvet Pool ansehen, das 8-Ball-Spiel
Puttide ansehen, das 3D-Minigolfspiel
Wer zwei oder mehr Vorlagen in einer Bestellung kauft, zahlt pro Lizenz weniger: 5 % Rabatt bei zwei, 10 % bei drei, 15 % bei vier und 20 % ab fünf.