HTML5-Spiel Quellcode: Was in einem Paket steckt

HTML5-Spiel-Quellcode kann drei verschiedene Dinge bedeuten: einen Build, der sofort hochgeladen werden kann, die Entwicklerdateien, die Sie bearbeiten, oder ein Projekt, das sich nur in einem bestimmten Editor öffnet. Ein HTML5-Spiel-Template mit Quellcode aus unserem Marketplace ist die ersten beiden zusammen, als einfache Webdateien, und dieser Ratgeber öffnet echte Pakete, um zu zeigen, wie das aussieht.

Wir verkaufen diese Templates; lesen Sie dies also als Rundgang durch unsere eigenen Pakete und nicht als neutrale Marktübersicht. Wir sind mehrere Editionen durchgegangen, vor allem Velvet Pool, Puttide und Sunset Rally, haben ihre öffentlichen Handbücher und die Shop-Bedingungen gelesen und notiert, was in der Schachtel ist, was Sie zum Ausführen brauchen und was fehlt. Jedes Handbuch ist von seiner Produktseite verlinkt, sodass Sie jede Zeile vor dem Bezahlen prüfen können.

Was „HTML5-Spiel-Quellcode“ bedeuten kann

Anbieter verwenden das Wort Quellcode locker. Drei Fragen klären, was tatsächlich verkauft wird.

Ein Build, ein Entwickler-Quellcode oder beides?

Ein Build ist das fertige Spiel, wie der Browser es lädt: eine index.html, Skripte, Bilder und Sounddateien. Sie können ihn unverändert hosten. Der Entwickler-Quellcode ist die Fassung zum Bearbeiten, mit nach Aufgaben getrennten Dateien. Ein Paket nur mit dem Build können Sie hochladen, aber nicht bequem ändern. Ein Paket nur mit Quellcode braucht womöglich erst Werkzeuge, bevor es überhaupt läuft. Die Editionen in diesem Ratgeber legen beides in ein ZIP: meist einen Ordner game/ zum Veröffentlichen und einen Ordner source/ zum Bearbeiten (bei Ricopop ist game/ selbst der Quellcode).

Lesbar oder minimiert?

Minimieren presst Skripte in wenige dichte Zeilen mit kurzen Namen, was schneller lädt und furchtbar zu lesen ist. Verschleierung (Obfuskation) geht weiter und vertauscht Namen absichtlich. Beides schadet einer Live-Seite nicht. Beides schadet, wenn Sie den Code gekauft haben, um ihn zu ändern. Öffnen Sie vor dem Bezahlen ein Skript der Live-Demo in den Entwicklerwerkzeugen Ihres Browsers und prüfen Sie, ob Sie ihm folgen könnten.

Einfache Dateien oder ein Editor-Projekt?

Manche Templates kommen als Projekt für einen bestimmten Spiele-Editor und lassen sich nur dort öffnen. Andere sind einfache Webdateien, die jeder Code-Editor öffnet. Die Editionen in diesem Ratgeber gehören zur zweiten Art: HTML, CSS, JavaScript und JSON, bei manchen mit TypeScript.

Die Templates durchstöbern

Was in einem Polar-Games-Paket steckt

Nehmen wir Velvet Pool, unsere 8-Ball-Billard-Edition. Ihr Handbuch beschreibt vier Ordner im ZIP:

• game/ ist die zum Hochladen fertige Edition und der einzige Ordner, den Sie veröffentlichen.
• source/ ist dasselbe Spiel als bearbeitbare Entwickler-Edition, mit README, package.json und Tests.
• documentation/ enthält die bebilderte Anleitung und ihre Bilder.
• THIRD-PARTY-LICENSES/ enthält die Lizenztexte der Schriftarten und eine Zusammenfassung in README.txt.

In Ihrer Bibliothek wird dasselbe Paket als zwei Downloads angeboten: das vollständige Paket (Quellcode und Handbuch) oder nur das Spiel, fertig zum Hosten.

game/ und source/ haben denselben Aufbau. Für Velvet Pool sagt das Handbuch, dass Sie Dateien in source/ bearbeiten und die geänderten in denselben Pfad in game/ kopieren. Dazwischen wird nichts kompiliert.

Die Edition Velvet Pool ansehen

In Velvet Pool: die Dateikarte

Eine Dateikarte ist der günstigste Weg, eine Codebasis vor dem Kauf zu beurteilen. Das hier ist die aus dem Handbuch von Velvet Pool, mit Pfaden relativ zu source/ oder game/:

• src/core/physics.js: Ballsimulation, Effet und Bandenreaktion.
• src/core/rules.js: 8-Ball-Regeln und Foul-Entscheidungen.
• src/core/ai.js: wie die CPU einen Stoß wählt.
• src/game/controls.js: Eingabe für Zielen, Kraft und Effet.
• src/game/progress.js: Erfolge, Tücher, Queues und Partiewertung.
• src/game/i18n.js: der Text in 14 Sprachen.
• src/game/localRecords.js: der lokale Punkteverlauf.
• src/game/audio.js: Soundeffekte und Musikwiedergabe.
• css/style.css und css/fonts.css: Theme, responsives Layout und Schriftdeklarationen.
• assets/: Grafik, Audio und Schriftarten, mit einem Unterordner logo/.

Beachten Sie die Aufteilung. Regeln, Physik und CPU liegen in src/core. Eingabe, Speicherstände, Texte und Sound liegen in src/game. Das Handbuch bittet Sie, jeweils eine Funktion zu ändern, und dieser Aufbau macht das realistisch: Eine Bandenanpassung und eine Übersetzungskorrektur berühren verschiedene Dateien.

Das Handbuch hält auch fest, dass der Code in source/src und game/src einfaches, formatiertes JavaScript ist, ohne minimierte oder gebündelte Dateien. Velvet Pool ist Vanilla-JavaScript auf WebGL2 und nutzt keine Code-Bibliothek, auch nicht Three.js. Das Änderungsprotokoll belegt es: Version 1.0.1 teilte lange einzeilige Zeichenketten in Audio, Übersetzungen und Shadern in lesbare Zeilen auf, bei unverändertem Verhalten.

Puttide: derselbe Aufbau, plus Bibliotheken

Puttide, unsere 3D-Minigolf-Edition, nutzt dieselben vier Ordner und fügt eines hinzu: zwei Bibliotheken von Drittanbietern, die das Spiel braucht. Three.js r186 (MIT) und Rapier 3D 0.21.0 (Apache-2.0) liegen in lib/three/ und lib/rapier/, und die Import-Map in index.html sagt dem Browser, wo er sie findet. Die FAQ von Puttide hält fest, dass nichts von einem CDN geladen wird, das Spiel also nur Ihren eigenen Host braucht. Das Handbuch ergänzt, dass die Bibliotheksdateien lesbar formatiert sind, mit unverändertem Verhalten.

Seine Dateikarte, wieder relativ zu source/ oder game/:

• src/course/courses.js: Reihenfolge der Plätze und Freischaltbedingungen.
• src/course/holes.js: Geometrie, Par und Hindernisse des Platzes Ruins. pier.js, ice.js, lava.js und sky.js enthalten die anderen vier.
• src/sim/constants.js: Physik-Feinabstimmung.
• src/game/economy.js: Definitionen und Preise für Ball, Spur und Outfit.
• src/ui/i18n.js und drei weitere Wörterbuchdateien: der Sprachtext.
• css/style.css: Oberflächenfarben, Schriftarten und responsive Stile.
• fonts/ und music/: die Webschriften mit ihren Lizenzen und zwei Musikstücke.

Das Rezept des Handbuchs für ein neues Loch: eine Definition in der passenden Platzdatei duplizieren, ihr eine eindeutige ID geben, Par sowie Abschlag- und Lochposition festlegen, sie dem Platz hinzufügen und dann Namen und Tipp in die Sprachwörterbücher eintragen. Lesen Sie ein solches Rezept vor dem Kauf. Wirkt es wie Arbeit, die Sie leisten können, passt das Paket zu Ihnen.

Die Edition Puttide ansehen

Wenn der Quellcode einen Build-Schritt braucht

„Kein Build-Schritt“ stimmt für manche Editionen und für andere nicht; prüfen Sie also die Edition, nicht den Shop. Hier fünf von unseren nebeneinander, mit ihren Listenpreisen. Unser eigener Shop zeigt derzeit 10 % Rabatt auf den Listenpreis, das Studio-direct-Angebot auf jeder Produktseite: Velvet Pool zeigt zum Beispiel 35,10 $ statt 39 $.

• Velvet Pool, Listenpreis 39 $: einfache JavaScript-Module auf WebGL2. source/ bearbeiten, nach game/ kopieren. Node.js 20+ nur für die optionalen Tests.
• Puttide, 39 $: einfache JavaScript-Module mit Three.js und Rapier in lib/. Kein Build-Schritt. Node.js ist optional und nur für die Verwaltung der Bibliotheksversionen.
• Ricopop, 39 $: einfaches HTML, CSS und JavaScript-Module, und game/ ist selbst der Quellcode. Optionale Entwicklerwerkzeuge (Node.js 20+): ein lokaler Server, ein Level-Prüfer und Tests.
• Pinloop, 24 $: TypeScript mit Vite. Der Ordner game/ enthält lesbares JavaScript und CSS. Node.js 22.12+ und npm nur zum Bearbeiten und erneuten Bauen des Quellcodes.
• Sunset Rally, 39 $: TypeScript mit Three.js r184 und Vite. Der Ordner game/ ist bereits gebaut und nicht minimiert. Node.js nur, wenn Sie neu bauen.

Für Sunset Rally empfiehlt das Handbuch Node.js 24 LTS. In source/ führen Sie npm ci, npm run typecheck und npm run build aus und veröffentlichen dann nur den Inhalt von dist/. Es bittet Sie außerdem, minify und cssMinify beim erneuten Bauen ausgeschaltet zu lassen, weil die gelieferte Laufzeit zum Lesen formatiert ist. Laden Sie das Ergebnis hoch, nie node_modules/.

Die Edition Sunset Rally ansehen

Hosten: was „statisch“ in der Praxis heißt

Statisches Hosting heißt, dass Ihr Host nur Dateien ausliefert. Die Handbücher von Velvet Pool und Puttide beschreiben die ganze Installation in drei Schritten:

1. Das ZIP entpacken.
2. Alles aus game/ in einen Ordner auf Ihrer Website hochladen, zum Beispiel public_html/velvet-pool/, per FTP oder im Dateimanager Ihres Hosts, dabei die Unterordner beibehalten.
3. Diese Adresse in einem Browser öffnen.

Es sind weder npm, Terminal, Build-Schritt, PHP, Datenbank noch Konto im Spiel. Woran es laut denselben Handbüchern hakt:

• Doppelklicken Sie nicht auf index.html. Browser blockieren Spielmodule unter file://. Für einen lokalen Test führen Sie python -m http.server 8765 in game/ aus und öffnen http://localhost:8765/.
• Ihr Server muss .js-Dateien mit einem JavaScript-MIME-Typ und .wasm als application/wasm ausliefern. Ein falscher MIME-Typ zeigt sich als Fehler „module refused“.
• Nutzen Sie HTTPS für öffentliches Hosting.
• Speicherstände gehören zum Ursprung des Browsers (Protokoll, Host und Port). Zieht das Spiel auf eine andere Domain um, beginnen die Spieler bei null.
• Ein frisches Laden der Seite braucht weiterhin Ihren Host, es ist also keine installierbare Offline-App.

Wo Logo, Farben, Regeln und Übersetzungen liegen

Jedes Handbuch hat einen Abschnitt zur Anpassung, und was er abdeckt, unterscheidet sich von Edition zu Edition. Das sagt jedes einzelne.

Velvet Pool

• Logo und Branding: die Dateien in assets/logo/ ersetzen und die passenden Maße im CSS anpassen.
• Tuch- und Queue-Stile: Ihre Definitionen stehen in progress.js. Halten Sie die Artikel-IDs stabil, damit gespeicherte Kosmetika weiter funktionieren.
• CPU-Verhalten in ai.js, Physik in physics.js. Führen Sie nach Änderungen an Regeln oder Physik die 8-Ball-Tests aus.
• Übersetzungen: src/game/i18n.js, mit der Sprachliste in LANGS.

Puttide

• Farben und Schriftarten: css/style.css.
• Physik: src/sim/constants.js. Preise der Kosmetika: src/game/economy.js, dabei bestehende IDs beibehalten.
• Musik: eine lizenzierte Datei nach music/ kopieren und die Titelzuordnung in src/audio/audio.js aktualisieren.
• Löcher, Par und Freischaltungen: die oben beschriebenen Platzdateien.

Gridspark und Sunset Rally

In Gridspark liegen laut der FAQ seiner Produktseite die Oberflächentexte in src/locales.js, Regelkonstanten und Palette in src/config.js und die Rätselregeln in game.js, board.js, generator.js und shapes.js. In Sunset Rally stehen die Kampagnenspiele und Sternbedingungen in Campaign.ts, die Orte in Places.ts, die Physik in physics.ts und die Wertung in match.ts. Die englischen und portugiesischen Texte liegen in src/i18n.ts, die anderen 12 Sprachen in src/locales/.

Beachten Sie, was die Handbücher auslassen. Das Handbuch von Puttide behandelt Farben, Physik, Löcher, Preise und Musik, hat aber keinen Schritt zum Austausch des Logos, und das Handbuch von Sunset Rally hat keinen eigenen Abschnitt zum Branding. Wenn das Branding das Erste ist, was Sie ändern werden, fragen Sie vor dem Kauf nach.

Die Edition Gridspark ansehen

Automatisierte Tests: was sie prüfen und was nicht

Der Ordner source/ von Velvet Pool enthält eine Testsuite. Mit Node.js 20 oder neuer öffnen Sie ein Terminal in source/ und führen npm test aus, was dasselbe ist wie node tests/run.js. Eine Installation von Abhängigkeiten ist nicht nötig. Laut Handbuch prüft die Suite Physik, 8-Ball-Regeln, CPU-Partien und die Konsistenz der Übersetzungsschlüssel, und sie ersetzt das Testen in Browsern und auf echten Geräten nicht.

Eine Prüfung der Übersetzungsschlüssel ist die Art Test, die ein Spiel mit 14 Sprachen braucht: Ein Schlüssel wird in einer Sprache ergänzt, eine andere vergessen, und ein Mensch merkt es womöglich wochenlang nicht.

Nicht jede Edition hat Tests. Das Handbuch von Puttide beschreibt keine, nur manuelle Prüfungen. Pinloop und Beep Out führen npm test unter ihren Entwicklerbefehlen auf, und zu den Entwicklerwerkzeugen von Ricopop gehört ein Level-Prüfer.

Lizenz, Hinweise von Drittanbietern und das Änderungsprotokoll

Nach den Shop-Bedingungen gibt jeder Kauf eine unbefristete, nicht exklusive Lizenz, die Edition in einem Endprodukt zu nutzen, Ihrem eigenen oder dem eines Kunden. Sie dürfen Code, Grafik und Audio darin ändern, und Spieler dürfen es kostenlos oder über Werbung nutzen. Sie dürfen das Template, seinen Quellcode oder seine Assets nicht für sich allein weiterverkaufen, teilen oder weitergeben, weder als Template, Kit oder Asset-Paket noch innerhalb eines anderen Produkts für Entwickler. Die Lizenz läuft nicht ab, wenn der Support endet.

Teile von Drittanbietern behalten ihre eigenen Lizenzen, und Sie belassen deren Hinweise bei Ihrem Produkt. Bei Velvet Pool sind das zwei Schriftarten, Manrope und Fraunces, unter der SIL Open Font License 1.1, mit den Texten in THIRD-PARTY-LICENSES/ und neben den Schriften. Bei Puttide kommen in der Liste Three.js (MIT), Rapier (Apache-2.0) und die Schriften Rubik und Fredoka (OFL 1.1) hinzu.

Das Änderungsprotokoll zeigt, wie ein Paket gepflegt wird. Velvet Pool 1.0.1 (18. Oktober 2026) teilte lange Zeichenketten in lesbare Zeilen auf und sammelte die Lizenzhinweise in einem flachen Ordner. Version 1.1.0 (22. Oktober 2026) brachte die Oberfläche in 14 Sprachen. Diese Einträge stehen auf der Produktseite. Die Bedingungen sagen, dass Updates derselben Edition nach der Veröffentlichung in Ihrer Bibliothek erscheinen, ohne Zusage von Updates für einen festen Zeitraum.

Wie Sie den Code eines gekauften Spiels in einer Stunde lesen

Das ist ein Vorschlag, keine zugesagte Zeitplanung. Er folgt dem Aufbau von Velvet Pool und nutzt nur das, was das Paket mitbringt.

1. Minute 0 bis 10: das ZIP entpacken, die README in source/ und die Dateikarte des Handbuchs überfliegen. index.html öffnen und sehen, welche Skripte und Stylesheets sie lädt.
2. Minute 10 bis 20: npm test in source/ ausführen (Node.js 20+), um einen grünen Ausgangspunkt zu haben.
3. Minute 20 bis 35: src/core vor src/game lesen. Mit rules.js beginnen, dann ai.js, dann physics.js. Das ist das Spiel selbst. Steuerung, Fortschritt, Texte und Sound sind die Installation drumherum.
4. Minute 35 bis 40: festhalten, dass Artikel-IDs und Speicherschlüssel stabil bleiben müssen, sonst verlieren Spieler ihre gespeicherten Kosmetika.
5. Minute 40 bis 55: eine kleine Änderung vornehmen, etwa eine Tuchdefinition in progress.js. Die Datei in denselben Pfad in game/ kopieren, game/ mit python -m http.server 8765 ausliefern und das Ergebnis ansehen. Nie über file:// öffnen.
6. Minute 55 bis 60: die Tests noch einmal ausführen.

ES-Module nennen in ihren Import-Zeilen, was sie brauchen, sodass Sie der Kette vom ersten Skript an folgen können, das die Seite lädt. Deshalb lässt sich eine Edition aus einfachen Dateien in diesem Tempo lesen.

Fragen vor dem Kauf von Quellcode

• Kann ich das Handbuch lesen und eine Demo spielen, bevor ich bezahle? Bei unseren Editionen sind beide von der Produktseite verlinkt.
• Gibt es einen sofort hostbaren Build und einen getrennten Entwickler-Quellcode?
• Ist der Code lesbar oder minimiert? Öffnen Sie ein Skript und sehen Sie nach.
• Brauche ich Node.js, npm, PHP oder eine Datenbank, und in welchen Versionen?
• Lädt das Spiel etwas von einem CDN oder einer anderen Seite?
• Welche Bibliotheken von Drittanbietern stecken darin, und unter welchen Lizenzen?
• In wie vielen Projekten darf ich es nutzen, und darf ich es weitergeben?
• Wie lange gilt der Support, und was deckt er ab? Unserer gilt 6 Monate oder 12 mit der an der Kasse gewählten Verlängerung und umfasst Fragen zur Installation und Nutzung der Dateien sowie reproduzierbare Fehler.
• Was ist ausgelassen?
• Gibt es ein Änderungsprotokoll und einen aktuellen Release?
• Wie lautet die Erstattungsregel? Unsere: Templates sind digitale Produkte, daher erstatten wir nur, wenn Sie das Template noch nicht heruntergeladen haben oder es einen Fehler hat, den wir nicht beheben können. Sie fragen an, indem Sie dem Studio mit Ihrer Lizenznummer schreiben.

Was diese Editionen nicht enthalten

Manche Editionen enthalten optionale Extras. Ricopop und Zabum enthalten eine PHP-Rangliste in einer Datei, die standardmäßig ausgeschaltet ist. Sie ist eine lockere gemeinsame Punktetafel, die Punktestände in einer Datei speichert, keine manipulationssichere Rangliste und kein Live-Mehrspieler.

Der Support umfasst Fragen zur Installation und Nutzung der gelieferten Dateien und die Behebung reproduzierbarer Fehler im gelieferten Spiel. Das ist eine Grenze, und es ist besser, sie am ersten Tag zu kennen.

FAQ

Was ist der Unterschied zwischen dem Spielordner und dem Quellordner?

game/ ist der Build, den Sie auf Ihren Host hochladen. source/ ist die bearbeitbare Entwickler-Edition desselben Spiels. Bei Velvet Pool und Puttide haben sie denselben Aufbau, sodass eine Datei, die Sie in source/ bearbeiten, in denselben Pfad in game/ kopiert wird. Bei TypeScript-Editionen wie Sunset Rally ist source/ ein Projekt, das Sie neu bauen, und Sie veröffentlichen die neue Ausgabe.

Brauche ich npm oder Node.js, um das Spiel zu nutzen?

Zum Hosten nicht. Node.js taucht nur für die optionalen Tests in Velvet Pool (20 oder neuer) oder zum erneuten Bauen von TypeScript-Editionen wie Sunset Rally (24 LTS empfohlen) und Pinloop (22.12 oder neuer) auf.

Ist der Quellcode minimiert?

Nicht in den hier behandelten Editionen. Velvet Pool und Puttide sind einfaches formatiertes JavaScript, und Version 1.0.1 von beiden teilte lange einzeilige Zeichenketten in lesbare Zeilen auf. Die Laufzeit von Sunset Rally wird formatiert und ohne Minimierung geliefert.

Kann ich einen Kauf für mehrere Projekte oder Kunden nutzen?

Die Lizenz deckt ein Endprodukt ab, Ihr eigenes oder das eines Kunden. Ein zweites Produkt liegt außerhalb.

Darf ich den Quellcode weiterverkaufen oder teilen?

Nein: nicht für sich allein, nicht als Template, Kit oder Asset-Paket und nicht innerhalb eines anderen Produkts für Entwickler. Innerhalb Ihres eigenen Endprodukts dürfen Sie Code, Grafik und Audio ändern.

Kann ich das Handbuch lesen, bevor ich kaufe?

Ja. Jede Produktseite verlinkt ihr Handbuch und eine spielbare Demo derselben Edition.

Öffnen Sie ein Paket, bevor Sie eines kaufen

Wählen Sie eine Edition, öffnen Sie ihr Handbuch von der Produktseite, spielen Sie die Demo und lesen Sie die Dateikarte vor dem Hintergrund der obigen Fragen. Wenn das Handbuch sie beantwortet, sollte das Paket es auch tun. Wenn nicht, schreiben Sie dem Studio vor dem Bezahlen.

Alle Templates durchstöbern