Broncode color sort-puzzel: wat je eerst aanpast (Water Sort-stijl)
Mochi Monsters als uitgewerkt voorbeeld: de regels, de bestanden, het ene configuratiebestand en de wijzigingen die een build nodig hebben.
Broncode van een color sort-puzzel kopen heeft zin als je een Water Sort-achtig spel op je eigen site wilt, zonder zelf de zetregels, de levelgenerator en het opslagsysteem te schrijven. Mochi Monsters is zo'n pakket: 60 levels in drie werelden, een Endless-modus, leesbare TypeScript en een kant-en-klare spelmap, voor $39 tegen de lijstprijs.
De regel achter water sort, ball sort en Mochi Monsters is dezelfde: je kunt alleen verplaatsen naar een lege container of naar een passende bovenkant. Wat het ene template van het andere onderscheidt, is alles eromheen. Deze gids loopt het pakket door in de volgorde waarin een koper het tegenkomt, en eindigt met de wijzigingen die je in vijf minuten doet en die waarvoor je een ontwikkelaar nodig hebt.
De sorteerregel, en de twee wendingen erbovenop
Spelers tikken op het ene nest en daarna op het andere. De groep gelei-vriendjes bovenop springt alleen over als het doelnest leeg is of het bovenste vriendje dezelfde soort is. Een bord is opgelost wanneer elk nest één soort bevat. Hint, Ongedaan maken en Opnieuw starten zijn ingebouwd.
Twee mechanismen zorgen ervoor dat de 60 levels niet aanvoelen als één level dat steeds terugkomt. Een schelpdeksel bedekt een nest en gaat open zodra je dat nest vult met de soort die op het deksel staat; Ongedaan maken kan het weer sluiten. Gekoppelde getijdennesten wisselen van plaats wanneer een van beide leeg wordt, wat het bord verandert onder het plan van de speler.
Deze dingen tellen voor een koper omdat ze al geschreven en getest zijn. Zo'n wending toevoegen aan een gewoon sorteerspel is het soort werk dat langer duurt dan verwacht, vooral door de randgevallen rond ongedaan maken.
Speel de demo van Mochi Monsters
Wat de broncode van de color sort-puzzel bevat
- 60 campagnelevels verdeeld over Sugar Meadow, Bubble Beach en Mushroom Village, 20 in elke wereld.
- Een Endless-modus met seed, die opent na level 20.
- Een verzamelalbum, een interactieve tuin en zes hoeden die je koopt met Sugar Drops die je in het spel verdient.
- Touch- en muisbediening, lokale opslag en een optie voor verminderde beweging.
- Een kant-en-klare map game/, leesbare JavaScript- en TypeScript-broncode, configuratie, tests en licentieverklaringen.
- Een geïllustreerde offline gids in 14 talen, met screenshots in het Engels.
De interface heeft 14 talen: Engels, Portugees, Spaans, Frans, Duits, Italiaans, Nederlands, Pools, Turks, Russisch, Indonesisch, Japans, Koreaans en vereenvoudigd Chinees. De gids volgt automatisch de taal van de lezer.
De stack is TypeScript en JavaScript op Canvas 2D, met Web Audio. De bestanden zijn HTML, CSS, JavaScript, JSON, TypeScript, WebP, PNG en MP3.
Zo is het project opgebouwd
Zie het pakket als drie lagen, elk met een ander niveau van inspanning.
Laag 1: het gehoste spel
De map game/ is compleet. Upload de inhoud naar statische HTTP(S)-hosting en het speelt. Hier is geen build nodig.
Laag 2: het configuratiebestand
mochi.config.js staat naast index.html. Het stelt de browsertitel, het logo, de startertaal en de opslagsleutel in. Pas een waarde aan, upload het bestand en laad de pagina opnieuw. Nog steeds geen build.
Laag 3: de TypeScript-broncode
Regels, beeld, levels en hoedprijzen staan in de broncode. Wijzigen betekent TypeScript bewerken en opnieuw bouwen met npm, wat Node.js 22.13 of nieuwer vraagt. De broncode bevat gereedschap om levels te genereren en 52 geautomatiseerde tests die regels, levels, opslaan en vertalingen dekken.
Wat je eerst aanpast in een color sort-template
Dit is de volgorde die we aanraden, van wijzigingen zonder build naar ontwikkelwerk.
- Titel en logo in mochi.config.js, zodat het browsertabblad en het startscherm je merk dragen.
- Startertaal in hetzelfde bestand, als de meeste spelers geen Engelstaligen zijn.
- Opslagsleutel: stel die één keer in vóór de lancering en laat hem daarna staan. Die op een live site wijzigen laat spelers hun voortgang verliezen.
- Beeld en kleuren van de gelei-vriendjes, als je een volledige reskin nodig hebt. Dit is broncodewerk.
- Hoedprijzen en de beloningseconomie, ook in de broncode.
- Nieuwe levels, met het gereedschap voor levelgeneratie, daarna de tests.
Voor veel sites is de klus met de eerste drie stappen klaar. Een volledige reskin betekent daarentegen elk wezen, nest en elke achtergrond in drie werelden vervangen, en daar zit het meeste werk. Reken dat eerlijk door voordat je een klant een datum belooft.
White label is toegestaan: jouw naam en logo, of die van je klant, kunnen overal in het spel het onze vervangen.
Hosten, insluiten en verder ontwikkelen
Upload de inhoud van game/ naar elke statische HTTP(S)-host, desnoods in een submap. Er is geen database, PHP- of Node.js-service nodig om te spelen. Bestanden openen vanaf schijf met file:// werkt niet, dus test via een lokale of echte webserver.
Het spel draait in de actuele versies van Chrome, Edge, Firefox en Safari op een computer, tablet of telefoon. De voortgang wordt bewaard in de lokale opslag van de browser, zonder synchronisatie tussen apparaten. Het is geen installeerbare offline app: spelers laden het via je webadres.
Er zit geen native app-project in het pakket. Als je het in een app store wilt, gekoppeld aan een portal-SDK of op je eigen server, offreren we dat werk per project.
Vraag een offerte aan voor een reskin, hosting of een app-versie
Wat Mochi Monsters niet bevat
De editie heeft geen online accounts, cloudopslag, wereldwijde ranglijsten, betalingen met echt geld of advertentie-SDK. Native app-projecten, hosting en maatwerkontwikkeling zijn niet inbegrepen. Er zijn geen speelbare campagnes buiten de drie werelden; de Endless-modus houdt het spel daarna gaande.
Als je van plan bent advertenties te tonen, staat de licentie advertentiemonetisatie van je eindproduct toe, maar een advertentienetwerk koppelen is werk aan jouw kant of een offerteklus bij ons.
Licentie en prijs in één alinea
Eén aankoop geeft een eeuwigdurende, niet-exclusieve licentie om de editie te gebruiken in één eindproduct, van jou of van één klant. Spelers mogen gratis of via advertentiemonetisatie spelen. Je mag de code, het beeld en de audio binnen dat product wijzigen, maar je mag het template, de broncode of de assets niet op zichzelf doorverkopen of delen, als kit of binnen een ander product voor ontwikkelaars. Support duurt 6 maanden, of 12 met de verlenging bij het afrekenen, en dekt het installeren en gebruiken van de bestanden en het oplossen van reproduceerbare defecten; de licentie eindigt niet met de support. De lijstprijs is $39; tot en met 30 november 2026 geldt een Black Friday-actie van 15% korting op elk template, dus Mochi Monsters kost $33,15, en vanaf 1 december gelden weer de lijstprijzen.
Veelgestelde vragen
Is Mochi Monsters een water sort-spel?
Het gebruikt dezelfde kernregel: een groep kan alleen naar een leeg nest of op een passend vriendje. In plaats van vloeistof in buizen sorteren spelers gelei-wezens in nesten, met schelpdeksels en getijdennesten erbovenop.
Moet ik het spel bouwen voordat ik upload?
Nee. Upload de inhoud van game/ naar HTTP(S)-hosting. Broncodeontwikkeling is optioneel.
Wat kan ik wijzigen zonder build?
De browsertitel, het logo, de startertaal en de opslagsleutel, allemaal in mochi.config.js. Regels, beeld, levels en hoedprijzen vragen om de TypeScript-broncode en een npm-build.
Kan ik meer werelden of levels toevoegen?
De editie heeft 60 levels in drie werelden. Meer toevoegen betekent de broncode bewerken, met het meegeleverde gereedschap voor levelgeneratie. Extra campagnes horen niet bij het pakket.
Waar wordt de voortgang van spelers opgeslagen?
In de lokale opslag van de huidige browser. Cloudsynchronisatie zit er niet bij.
Werkt het op telefoons?
Ja. Het draait in actuele mobiele browsers met touchbediening, en op de desktop met een muis.
Wie moet een color sort-puzzel kiezen, en wat je verder bekijkt
Een color sort-puzzel past bij casual portals, gezinssites en merken die een rustig spel met korte sessies willen. Het leest goed op een telefoon, en de regel past in één zin.
Wil je een puzzel met meer planning, dan is Beep Out een 3D-parkeerpuzzel met 30 levels en het matchen van passagiers, $35 tegen de lijstprijs. Heeft je publiek iets met getallen, dan is Tenguin een getallenpuzzel waarin spelers gelijke getallen of twee die samen tien maken koppelen, $39 tegen de lijstprijs.
Bekijk Beep Out, de 3D-parkeerpuzzel