Guida

Codice sorgente di un puzzle color sort: cosa cambiare per primo

Mochi Monsters come esempio pratico: le regole, i file, l'unico file di configurazione e le modifiche che richiedono una build.

Illustrazione di Mochi Monsters: mostriciattoli di gelatina sorridenti su un prato di caramelle, accanto a tre barattoli di vetro con Mochi gialli, blu e verdi già ordinati.

Comprare il codice sorgente di un puzzle color sort ha senso quando vuoi un gioco in stile water sort sul tuo sito senza scrivere da zero le regole delle mosse, il generatore di livelli e il sistema di salvataggio. Mochi Monsters è un pacchetto di questo tipo: 60 livelli in tre mondi, una modalità Endless, TypeScript leggibile e una cartella di gioco pronta da pubblicare, a $39 di listino.

La regola alla base di water sort, ball sort e Mochi Monsters è la stessa: puoi spostare solo su un contenitore vuoto o su una cima dello stesso tipo. A distinguere un template dall'altro è tutto ciò che sta intorno a questa regola. Questa guida percorre il pacchetto nell'ordine in cui lo scopre chi lo compra e si chiude con le modifiche che fai in cinque minuti e quelle che richiedono uno sviluppatore.

La regola dell'ordinamento e le due varianti in più

Il giocatore tocca un nido, poi un altro. Il gruppo di amici di gelatina in cima salta solo se il nido di destinazione è vuoto o se l'amico in cima è della stessa specie. Uno schema è risolto quando ogni nido contiene una sola specie. Suggerimento, Annulla e Riavvia sono già inclusi.

Due meccaniche evitano che i 60 livelli sembrino lo stesso livello ripetuto. Un coperchio a conchiglia chiude un nido e si apre quando lo riempi con la specie indicata sul coperchio; Annulla può richiuderlo. I nidi di marea collegati si scambiano di posto quando uno dei due si svuota, e il tavolo cambia sotto il piano del giocatore.

Per chi compra contano perché sono già scritte e testate. Aggiungere una variante del genere a un semplice gioco di ordinamento è il tipo di lavoro che richiede più del previsto, soprattutto nei casi limite legati ad Annulla.

Prova la demo di Mochi Monsters

Cosa include il codice sorgente del puzzle color sort

  • 60 livelli di campagna in Sugar Meadow, Bubble Beach e Mushroom Village, 20 per mondo.
  • Una modalità Endless generata da seed, che si apre dopo il livello 20.
  • Un album da collezione, un giardino interattivo e sei cappelli da comprare con le Sugar Drops guadagnate giocando.
  • Controlli touch e mouse, salvataggi locali e un'opzione per ridurre le animazioni.
  • Una cartella game/ pronta da pubblicare, sorgente JavaScript e TypeScript leggibile, configurazione, test e note di licenza.
  • Una guida illustrata offline in 14 lingue, con schermate in inglese.

L'interfaccia ha 14 lingue: inglese, portoghese, spagnolo, francese, tedesco, italiano, olandese, polacco, turco, russo, indonesiano, giapponese, coreano e cinese semplificato. La guida si apre automaticamente nella lingua di chi la legge.

Lo stack è TypeScript e JavaScript su Canvas 2D, con Web Audio. I file sono HTML, CSS, JavaScript, JSON, TypeScript, WebP, PNG e MP3.

Com'è organizzato il progetto

Pensa al pacchetto come a tre livelli, ognuno con un diverso impegno di lavoro.

Livello 1: il gioco pubblicato

La cartella game/ è completa. Carica il suo contenuto su un hosting statico HTTP(S) e il gioco parte. Qui non serve nessuna build.

Livello 2: il file di configurazione

mochi.config.js si trova accanto a index.html. Definisce il titolo nel browser, il logo, la lingua iniziale e la chiave di salvataggio. Cambi un valore, carichi il file, ricarichi la pagina. Ancora nessuna build.

Livello 3: il sorgente TypeScript

Regole, grafica, livelli e prezzi dei cappelli stanno nel sorgente. Modificarli significa intervenire sul TypeScript e rifare la build con npm, che richiede Node.js 22.13 o superiore. Il sorgente include strumenti per generare i livelli e 52 test automatici su regole, livelli, salvataggi e traduzioni.

Cosa cambiare per primo in un template color sort

Ecco l'ordine che suggeriamo, dalle modifiche senza build al lavoro da sviluppatore.

  1. Titolo e logo in mochi.config.js, così la scheda del browser e la schermata iniziale portano il tuo marchio.
  2. Lingua iniziale nello stesso file, se la maggior parte dei tuoi giocatori non parla inglese.
  3. Chiave di salvataggio: impostala una volta prima del lancio e poi non toccarla più. Cambiarla su un sito già online fa perdere i progressi ai giocatori.
  4. Grafica e colori degli amici di gelatina, se ti serve un reskin completo. È lavoro sul sorgente.
  5. Prezzi dei cappelli ed economia delle ricompense, anche questi nel sorgente.
  6. Nuovi livelli, con gli strumenti di generazione, e poi i test.

Per molti siti i primi tre passi sono tutto il lavoro. Un reskin completo, invece, vuol dire sostituire ogni creatura, nido e sfondo in tre mondi, ed è lì che se ne va la maggior parte del tempo. Fai una stima onesta prima di promettere una data a un cliente.

Il white label è consentito: il tuo nome e logo, o quelli del tuo cliente, possono sostituire i nostri in tutto il gioco.

Pubblicarlo, incorporarlo e andare oltre

Carica il contenuto di game/ su un qualsiasi hosting statico HTTP(S), anche in una sottocartella. Per giocare non servono database, PHP né servizi Node.js. Aprire i file dal disco con file:// non funziona, quindi prova da un server web locale o reale.

Il gioco funziona nelle versioni attuali di Chrome, Edge, Firefox e Safari su computer, tablet o telefono. I progressi restano nella memoria locale del browser, senza sincronizzazione tra dispositivi. Non è un'app installabile offline: i giocatori lo caricano dal tuo indirizzo web.

Il pacchetto non contiene un progetto di app nativa. Se lo vuoi su un app store, collegato all'SDK di un portale o installato sul tuo server, quotiamo quel lavoro progetto per progetto.

Chiedi un preventivo per reskin, hosting o una versione app

Cosa non include Mochi Monsters

L'edizione non ha account online, salvataggi nel cloud, classifiche globali, acquisti con denaro reale né SDK pubblicitari. Progetti di app nativa, hosting e sviluppo su misura non sono inclusi. Non ci sono campagne giocabili oltre i tre mondi: è la modalità Endless a far proseguire il gioco dopo.

Se vuoi mostrare pubblicità, la licenza consente la monetizzazione pubblicitaria del tuo prodotto finale, ma collegare un network pubblicitario è un lavoro a carico tuo oppure un incarico che quotiamo noi.

Licenza e prezzo in un paragrafo

Un acquisto dà una licenza perpetua e non esclusiva per usare l'edizione in un solo prodotto finale, tuo o di un cliente. I giocatori possono giocare gratis o tramite monetizzazione pubblicitaria. Puoi modificare codice, grafica e audio all'interno di quel prodotto, ma non puoi rivendere né condividere il template, il suo sorgente o i suoi asset separatamente, come kit o dentro un altro prodotto per sviluppatori. L'assistenza dura 6 mesi, o 12 con l'estensione al momento dell'acquisto, e copre installazione e uso dei file e la correzione di difetti riproducibili; la licenza non scade con l'assistenza. Il prezzo di listino è $39; fino al 30 novembre 2026 una promozione Black Friday toglie il 15% a ogni template, quindi Mochi Monsters costa $33,15, e dal 1° dicembre i prezzi tornano a quelli di listino.

Leggi i termini completi

Domande frequenti

Mochi Monsters è un gioco water sort?

Usa la stessa regola di base: un gruppo può spostarsi solo in un nido vuoto o sopra un amico uguale. Invece del liquido nelle provette, i giocatori ordinano creature di gelatina nei nidi, con in più coperchi a conchiglia e nidi di marea.

Devo fare la build del gioco prima di caricarlo?

No. Carica il contenuto di game/ su un hosting HTTP(S). Lo sviluppo sul sorgente è facoltativo.

Cosa posso cambiare senza rifare la build?

Il titolo nel browser, il logo, la lingua iniziale e la chiave di salvataggio, tutti in mochi.config.js. Regole, grafica, livelli e prezzi dei cappelli richiedono il sorgente TypeScript e una nuova build con npm.

Posso aggiungere altri mondi o livelli?

L'edizione ha 60 livelli in tre mondi. Aggiungerne altri significa modificare il sorgente, con gli strumenti di generazione dei livelli inclusi. Campagne aggiuntive non fanno parte del pacchetto.

Dove vengono salvati i progressi dei giocatori?

Nella memoria locale del browser in uso. La sincronizzazione nel cloud non è inclusa.

Funziona sui telefoni?

Sì. Funziona nei browser mobili attuali con i controlli touch, e su desktop con il mouse.

Per chi è un puzzle color sort, e cos'altro guardare

Un puzzle di ordinamento per colore è adatto a portali casual, siti per famiglie e marchi che vogliono un gioco rilassante con partite brevi. Si legge bene sul telefono e la regola sta in una frase.

Se cerchi un puzzle che richieda più pianificazione, Beep Out è un puzzle di parcheggio 3D con 30 livelli e abbinamento dei passeggeri, a $35 di listino. Se il tuo pubblico ama i numeri, Tenguin è un puzzle di abbinamento numeri in cui si accoppiano numeri uguali o due che fanno dieci, a $39 di listino.

Scopri Beep Out, il puzzle di parcheggio 3D

Scopri Tenguin, il puzzle con i numeri

Acquista il codice sorgente color sort di Mochi Monsters