Källkod till färgsorteringspussel (Water Sort): vad du ändrar först
Mochi Monsters som genomgånget exempel: reglerna, filerna, den enda konfigurationsfilen och de ändringar som kräver en ny byggning.
Att köpa källkod till ett färgsorteringspussel är en bra idé när du vill ha ett spel i Water Sort-stil på din egen sajt, utan att själv skriva reglerna för flyttar, nivågeneratorn och sparsystemet. Mochi Monsters är ett sådant paket: 60 nivåer i tre världar, ett Endless mode (oändligt läge), läsbar TypeScript och en färdig spelmapp att hosta, för 39 USD till listpris.
Regeln bakom water sort, ball sort och Mochi Monsters är densamma: du kan bara flytta till en tom behållare eller ovanpå en matchande topp. Det som skiljer en mall från en annan är allt runt den regeln. Den här guiden går igenom paketet i den ordning en köpare möter det och slutar med de ändringar du kan göra på fem minuter och de som kräver en utvecklare.
Sorteringsregeln och de två vridningarna ovanpå den
Spelarna trycker på ett bo och sedan på ett annat. Gruppen av gelékompisar överst hoppar bara över om målboet är tomt eller om dess översta kompis är samma art. Ett bräde är löst när varje bo bara innehåller en art. Hint (ledtråd), Undo (ångra) och Restart (starta om) finns inbyggda.
Två mekaniker gör att de 60 nivåerna inte känns som en och samma nivå upprepad. Ett skalock täcker ett bo och öppnas när du fyller det boet med arten som visas på locket; Undo kan stänga det igen. Länkade tidvattensbon byter plats när en av dem blir tom, vilket ändrar brädet under spelarens plan.
Det här betyder något för köparen, eftersom det redan är skrivet och testat. Att lägga till en vridning som den här i ett vanligt sorteringsspel är ett arbete som tar längre tid än väntat, främst i kantfallen kring ångra.
Vad källkoden till färgsorteringspusslet innehåller
- 60 kampanjnivåer i Sugar Meadow, Bubble Beach och Mushroom Village, 20 i varje värld.
- Ett seedat Endless mode (oändligt läge) som öppnas efter nivå 20.
- Ett samlingsalbum, en interaktiv trädgård och sex hattar som köps med Sugar Drops (sockerdroppar) som tjänas i spelet.
- Styrning med touch och mus, lokala sparningar och ett alternativ med minskad rörelse.
- En färdig spelmapp game/ att hosta, läsbar JavaScript- och TypeScript-källkod, konfiguration, tester och licensnotiser.
- En illustrerad offlineguide på 14 språk, med skärmbilder på engelska.
Gränssnittet har 14 språk: engelska, portugisiska, spanska, franska, tyska, italienska, nederländska, polska, turkiska, ryska, indonesiska, japanska, koreanska och förenklad kinesiska. Guiden följer läsarens språk automatiskt.
Stacken är TypeScript och JavaScript på Canvas 2D, med Web Audio. Filerna omfattar HTML, CSS, JavaScript, JSON, TypeScript, WebP, PNG och MP3.
Så är projektet uppbyggt
Tänk på paketet som tre lager, där varje lager kräver olika mycket arbete.
Lager 1: det hostade spelet
Mappen game/ är komplett. Ladda upp innehållet till statisk HTTP(S)-hosting så spelar det. Inget här kräver en byggning.
Lager 2: konfigurationsfilen
mochi.config.js ligger bredvid index.html. Den anger webbläsarens titel, logotypen, startspråket och sparnyckeln. Ändra ett värde, ladda upp filen och ladda om sidan. Fortfarande ingen byggning.
Lager 3: TypeScript-källkoden
Regler, grafik, nivåer och hattpriser ligger i källkoden. Att ändra dem innebär att redigera TypeScript och bygga om med npm, vilket kräver Node.js 22.13 eller nyare. Källkoden innehåller verktyg för att baka nivåer och 52 automatiska tester som täcker regler, nivåer, sparande och översättningar.
Vad du ändrar först i en mall för färgsortering
Här är ordningen vi föreslår, från ändringar utan byggning till utvecklararbete.
- Titel och logotyp i mochi.config.js, så att webbläsarfliken och startskärmen bär ditt varumärke.
- Startspråk i samma fil, om de flesta av dina spelare inte talar engelska.
- Sparnyckel: ställ in den en gång före lansering och rör den sedan inte. Om du ändrar den på en levande sajt förlorar spelarna sina framsteg.
- Grafik och färger för gelékompisarna, om du behöver en fullständig omklädnad. Det här är källkodsarbete.
- Hattpriser och belöningsekonomin, också i källkoden.
- Nya nivåer, med verktygen för att baka nivåer, och sedan testerna.
För många sajter är de tre första stegen hela jobbet. En fullständig omklädnad innebär däremot att varje varelse, bo och bakgrund i tre världar byts ut, och där går större delen av tiden. Planera för det ärligt innan du lovar en kund ett datum.
White label är tillåtet: ditt namn och din logotyp, eller din kunds, kan ersätta våra var som helst i spelet.
Hosting, inbäddning och vidareutveckling
Ladda upp innehållet i game/ till vilken statisk HTTP(S)-host som helst, i en undermapp om du vill. Ingen databas, PHP-tjänst eller Node.js-tjänst behövs för att spela. Att öppna filerna från disken med file:// fungerar inte, så testa från en lokal eller riktig webbserver.
Spelet körs i aktuella versioner av Chrome, Edge, Firefox och Safari på dator, surfplatta eller telefon. Framsteg sparas i webbläsarens lokala lagring, utan synkronisering mellan enheter. Det är ingen installerbar offlineapp: spelarna laddar den från din webbadress.
Det finns inget projekt för native-app i paketet. Om du vill ha det i en appbutik, kopplat till en portal-SDK eller installerat på din server offererar vi det arbetet per projekt.
Begär en offert för en omklädnad, hosting eller en appversion
Vad Mochi Monsters inte innehåller
Utgåvan har inga onlinekonton, molnsparningar, globala ranglistor, köp för riktiga pengar eller reklam-SDK. Projekt för native-appar, hosting och anpassad utveckling ingår inte. Det finns inga spelbara kampanjer utöver de tre världarna; Endless mode är det som håller spelet igång efter dem.
Om du planerar att visa annonser ger licensen rätt att tjäna pengar på reklam i din slutprodukt, men att koppla ett annonsnätverk är arbete på din sida eller ett offererat jobb hos oss.
Licens och pris i ett stycke
Ett köp ger en evig, icke-exklusiv licens att använda utgåvan i en slutprodukt, din egen eller en kunds. Spelare får spela gratis eller med intäkter från reklam. Du får ändra koden, grafiken och ljudet i den produkten, men du får inte sälja vidare eller dela mallen, dess källkod eller tillgångar på egen hand, som ett kit eller inuti en annan produkt för utvecklare. Supporten varar 6 månader, eller 12 med tillägget i kassan, och omfattar installation och användning av filerna samt rättning av reproducerbara fel. Licensen upphör inte när supporten gör det. Listpriset är 39 USD. Till och med 30 november 2026 ger en Black Friday-kampanj 15 % rabatt på alla mallar, så Mochi Monsters kostar 33,15 USD. Från 1 december går priserna tillbaka till listpriset.
Vanliga frågor
Är Mochi Monsters ett Water Sort-spel?
Det använder samma kärnregel: en grupp kan bara flytta till ett tomt bo eller ovanpå en matchande kompis. I stället för vätska i rör sorterar spelarna gelévarelser i bon, med skalock och tidvattensbon som läggs till ovanpå.
Behöver jag bygga spelet innan jag laddar upp det?
Nej. Ladda upp innehållet i game/ till HTTP(S)-hosting. Att utveckla källkoden är valfritt.
Vad kan jag ändra utan ny byggning?
Webbläsarens titel, logotypen, startspråket och sparnyckeln, allt i mochi.config.js. Regler, grafik, nivåer och hattpriser kräver TypeScript-källkoden och en ny byggning med npm.
Kan jag lägga till fler världar eller nivåer?
Utgåvan har 60 nivåer i tre världar. Att lägga till fler innebär att man redigerar källkoden, med de medföljande verktygen för att baka nivåer. Ytterligare kampanjer ingår inte i paketet.
Var sparas spelarnas framsteg?
I den aktuella webbläsarens lokala lagring. Molnsynkronisering ingår inte.
Fungerar det på telefoner?
Ja. Det körs i aktuella mobilwebbläsare med touchstyrning, och på dator med mus.
Vem bör välja ett färgsorteringspussel, och vad mer att titta på
Ett färgsorteringspussel passar casual-portaler, familjesajter och varumärken som vill ha ett lugnt spel med korta sessioner. Det ser bra ut på en telefon, och regeln får plats i en mening.
Om du vill ha ett pussel med mer planering är Beep Out ett 3D-parkeringspussel med 30 nivåer och matchning av passagerare, 35 USD till listpris. Om din publik gillar siffror är Tenguin ett sifferpussel där spelarna parar lika tal eller två tal som ger tio, 39 USD till listpris.