Anleitung

Quellcode für ein Farbsortier-Puzzle: was Sie zuerst ändern

Mochi Monsters als Praxisbeispiel: die Regeln, die Dateien, die eine Konfigurationsdatei und die Änderungen, die einen Build brauchen.

Mochi Monsters Key Art: lächelnde Gelee-Monster auf einer Bonbonwiese, daneben drei Gläser mit sortierten gelben, blauen und grünen Mochis.

Spiel-Quellcode für ein Farbsortier-Puzzle zu kaufen lohnt sich, wenn Sie ein Spiel im Water-Sort-Stil auf Ihrer eigenen Website wollen, ohne Zugregeln, Level-Generator und Speichersystem selbst zu schreiben. Mochi Monsters ist so ein Paket: 60 Levels in drei Welten, ein Endless-Modus, lesbares TypeScript und ein Spielordner, der sofort gehostet werden kann, für $39 zum Listenpreis.

Water Sort, Ball Sort und Mochi Monsters folgen derselben Regel: Ziehen geht nur auf einen leeren Behälter oder auf ein passendes oberstes Element. Was eine Vorlage von der anderen unterscheidet, ist alles rund um diese Regel. Dieser Leitfaden geht das Paket in der Reihenfolge durch, in der ein Käufer es kennenlernt, und endet mit den Änderungen, die in fünf Minuten erledigt sind, und denen, die einen Entwickler brauchen.

Die Sortierregel und zwei Kniffe obendrauf

Man tippt ein Nest an, dann ein zweites. Die oberste Gruppe Gelee-Freunde hüpft nur hinüber, wenn das Zielnest leer ist oder sein oberster Freund zur selben Art gehört. Ein Spielfeld ist gelöst, wenn jedes Nest nur noch eine Art enthält. Hinweis, Rückgängig und Neustart sind eingebaut.

Zwei Mechaniken sorgen dafür, dass sich die 60 Levels nicht wie ein einziges wiederholtes Level anfühlen. Ein Muscheldeckel verschließt ein Nest und öffnet sich, sobald das Nest mit der Art auf dem Deckel gefüllt ist; Rückgängig kann ihn wieder schließen. Verbundene Gezeitennester tauschen die Plätze, wenn eines davon leer wird, und verändern so das Spielfeld mitten im Plan des Spielers.

Für Käufer zählt das, weil beides schon geschrieben und getestet ist. So einen Kniff in ein einfaches Sortierspiel einzubauen dauert meist länger als gedacht, vor allem wegen der Sonderfälle rund um Rückgängig.

Die Demo von Mochi Monsters spielen

Was im Quellcode des Farbsortier-Puzzles enthalten ist

  • 60 Kampagnen-Levels in Sugar Meadow, Bubble Beach und Mushroom Village, 20 pro Welt.
  • Ein Endless-Modus mit festem Seed, der sich nach Level 20 öffnet.
  • Ein Sammelalbum, ein interaktiver Garten und sechs Hüte, die man mit im Spiel verdienten Sugar Drops kauft.
  • Touch- und Maussteuerung, lokale Spielstände und eine Option für reduzierte Bewegung.
  • Ein hostfertiger Ordner game/, lesbarer JavaScript- und TypeScript-Quellcode, Konfiguration, Tests und Lizenzhinweise.
  • Ein bebilderter Offline-Leitfaden in 14 Sprachen, mit Screenshots auf Englisch.

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. Der Leitfaden öffnet sich automatisch in der Sprache des Lesers.

Der Stack ist TypeScript und JavaScript auf Canvas 2D, mit Web Audio. Die Dateien sind HTML, CSS, JavaScript, JSON, TypeScript, WebP, PNG und MP3.

Wie das Projekt aufgebaut ist

Stellen Sie sich das Paket als drei Schichten vor, jede mit anderem Aufwand.

Schicht 1: das gehostete Spiel

Der Ordner game/ ist vollständig. Laden Sie seinen Inhalt auf ein statisches HTTP(S)-Hosting, und das Spiel läuft. Hier braucht es keinen Build.

Schicht 2: die Konfigurationsdatei

mochi.config.js liegt neben index.html. Darin stehen Browsertitel, Logo, Startsprache und Speicherschlüssel. Wert ändern, Datei hochladen, Seite neu laden. Immer noch kein Build.

Schicht 3: der TypeScript-Quellcode

Regeln, Grafik, Levels und Hutpreise stecken im Quellcode. Sie zu ändern heißt, TypeScript zu bearbeiten und mit npm neu zu bauen; dafür ist Node.js 22.13 oder neuer nötig. Der Quellcode enthält Werkzeuge zum Erzeugen der Levels und 52 automatische Tests für Regeln, Levels, Speichern und Übersetzungen.

Was Sie in einer Farbsortier-Spielvorlage zuerst ändern

Diese Reihenfolge empfehlen wir, von Änderungen ohne Build bis zur Entwicklerarbeit.

  1. Titel und Logo in mochi.config.js, damit Browser-Tab und Startbildschirm Ihre Marke tragen.
  2. Die Startsprache in derselben Datei, wenn die meisten Ihrer Spieler kein Englisch sprechen.
  3. Den Speicherschlüssel: einmal vor dem Start festlegen und danach nicht mehr anfassen. Ändern Sie ihn auf einer Live-Website, verlieren die Spieler ihren Fortschritt.
  4. Grafik und Farben der Gelee-Freunde, wenn Sie ein komplettes Reskin brauchen. Das ist Arbeit im Quellcode.
  5. Hutpreise und Belohnungssystem, ebenfalls im Quellcode.
  6. Neue Levels mit den Level-Werkzeugen, danach die Tests.

Für viele Websites sind die ersten drei Schritte schon die ganze Arbeit. Ein komplettes Reskin dagegen heißt, jede Kreatur, jedes Nest und jeden Hintergrund in drei Welten zu ersetzen, und dort geht die meiste Zeit hin. Planen Sie das ehrlich ein, bevor Sie einem Kunden einen Termin zusagen.

White Label ist erlaubt: Ihr Name und Logo oder die Ihres Kunden können unsere überall im Spiel ersetzen.

Hosten, einbetten und weiterentwickeln

Laden Sie den Inhalt von game/ auf einen beliebigen statischen HTTP(S)-Host, gern auch in einen Unterordner. Zum Spielen sind weder Datenbank noch PHP oder ein Node.js-Dienst nötig. Die Dateien per file:// von der Festplatte zu öffnen funktioniert nicht; testen Sie über einen lokalen oder echten Webserver.

Das Spiel läuft in aktuellen Versionen von Chrome, Edge, Firefox und Safari auf Computer, Tablet oder Handy. Der Fortschritt liegt im lokalen Speicher des Browsers, ohne Abgleich zwischen Geräten. Es ist keine installierbare Offline-App: Die Spieler laden es von Ihrer Webadresse.

Ein natives App-Projekt ist nicht im Paket. Wenn Sie das Spiel in einem App-Store, mit dem SDK eines Portals oder auf Ihrem Server installiert haben möchten, erstellen wir dafür ein Angebot pro Projekt.

Angebot für Reskin, Hosting oder eine App-Version anfragen

Was Mochi Monsters nicht enthält

Die Edition hat keine Online-Konten, keine Cloud-Spielstände, keine globalen Bestenlisten, keine Echtgeldkäufe und kein Werbe-SDK. Native App-Projekte, Hosting und individuelle Entwicklung sind nicht enthalten. Spielbare Kampagnen gibt es nur in den drei Welten; danach hält der Endless-Modus das Spiel am Laufen.

Wenn Sie Werbung zeigen wollen: Die Lizenz erlaubt Werbemonetarisierung Ihres Endprodukts, aber ein Werbenetzwerk anzubinden ist Arbeit auf Ihrer Seite oder ein Auftrag, den wir anbieten.

Lizenz und Preis in einem Absatz

Ein Kauf gibt Ihnen eine unbefristete, nicht exklusive Lizenz, die Edition in einem Endprodukt zu nutzen, Ihrem eigenen oder dem eines Kunden. Spieler können kostenlos oder über Werbemonetarisierung spielen. Sie dürfen Code, Grafik und Audio innerhalb dieses Produkts ändern, aber die Vorlage, ihren Quellcode oder ihre Assets nicht einzeln weiterverkaufen oder weitergeben, weder als Kit noch in einem anderen Produkt für Entwickler. 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; die Lizenz endet nicht mit dem Support. Der Listenpreis beträgt $39; bis zum 30. November 2026 gibt es mit einer Black-Friday-Aktion 15 % Rabatt auf jede Vorlage, Mochi Monsters kostet also $33,15. Ab dem 1. Dezember gelten wieder die Listenpreise.

Vollständige Bedingungen lesen

Häufig gestellte Fragen

Ist Mochi Monsters ein Water-Sort-Spiel?

Es nutzt dieselbe Grundregel: Eine Gruppe darf nur in ein leeres Nest oder auf einen passenden Freund ziehen. Statt Flüssigkeit in Röhrchen sortieren die Spieler Gelee-Wesen in Nester, dazu kommen Muscheldeckel und Gezeitennester.

Muss ich das Spiel vor dem Hochladen bauen?

Nein. Laden Sie den Inhalt von game/ auf ein HTTP(S)-Hosting. Die Arbeit am Quellcode ist optional.

Was kann ich ohne Neubau ändern?

Browsertitel, Logo, Startsprache und Speicherschlüssel, alles in mochi.config.js. Regeln, Grafik, Levels und Hutpreise brauchen den TypeScript-Quellcode und einen neuen Build mit npm.

Kann ich weitere Welten oder Levels hinzufügen?

Die Edition hat 60 Levels in drei Welten. Weitere hinzuzufügen heißt, den Quellcode mit den mitgelieferten Level-Werkzeugen zu bearbeiten. Zusätzliche Kampagnen gehören nicht zum Paket.

Wo wird der Fortschritt der Spieler gespeichert?

Im lokalen Speicher des jeweiligen Browsers. Ein Cloud-Abgleich ist nicht enthalten.

Läuft es auf Handys?

Ja. Es läuft in aktuellen mobilen Browsern mit Touchsteuerung und am Desktop mit der Maus.

Für wen ein Farbsortier-Puzzle passt, und was Sie sich noch ansehen sollten

Ein Farbsortier-Puzzle passt zu Casual-Portalen, Familienseiten und Marken, die ein ruhiges Spiel mit kurzen Runden suchen. Es ist auf dem Handy gut lesbar, und die Regel passt in einen Satz.

Wenn Sie ein Puzzle mit mehr Planung möchten: Beep Out ist ein 3D-Parkpuzzle mit 30 Levels und passenden Fahrgästen, $35 zum Listenpreis. Mag Ihr Publikum Zahlen, ist Tenguin ein Zahlen-Paar-Puzzle, in dem gleiche Zahlen oder zwei Zahlen mit der Summe zehn zusammengehören, $39 zum Listenpreis.

Beep Out ansehen, das 3D-Parkpuzzle

Tenguin ansehen, das Zahlenpuzzle

Den Farbsortier-Quellcode von Mochi Monsters kaufen