← Tutte le idee Giochi e hobby

Monster Kitchen

Un gioco puzzle nel browser: 100 ricette e mostriciattoli da collezionare

Cosa fa

Gioco HTML5 che si gioca nel browser: l'obiettivo è completare 100 piatti risolvendo puzzle, sbloccando 12 piccoli mostri da collezionare.

Come guadagna

I giochi nel browser come questo di solito guadagnano con la pubblicità sui portali di giochi o vendendo la licenza a un portale. Il progetto è in vendita su SideProjectors, con prezzo su richiesta.

Rendilo tuo

  • A tema cucina italiana: pizza, pasta, dolci regionali, con i nomi veri dei piatti.
  • Pubblicalo sui portali di giochi senza esclusiva per avere giocatori subito.

Le frasi da scrivere all'AI

1. Base del sito e grafica

Crea un'app web in italiano chiamata "Cucina dei Mostri": un gioco puzzle nel browser: per completare 100 piatti bisogna combinare gli ingredienti giusti nell'ordine giusto, sbloccando piccoli mostri cuochi da collezionare. Usa React, Vite, TypeScript e Tailwind CSS.

Pagine da creare:
1. Pagina iniziale con "Gioca subito" e i mostri da sbloccare
2. Mappa dei livelli (100 piatti in 5 cucine del mondo)
3. Livello: ingredienti, strumenti (taglia, cuoci, mescola) e il piatto da ottenere
4. Collezione dei mostri
5. Impostazioni e progressi

Stile: cartone animato tenero: sfondo azzurro cielo #BAE6FD, arancione #FB923C, verde menta #6EE7B7, carattere "Baloo 2", pulsanti tondi e grandi, animazioni morbide. Nessuna immagine generica di stock.

Tutto deve funzionare perfettamente da telefono. Tutti i testi in italiano, chiari e senza parole tecniche.

2. Database, account e sicurezza

Collega il progetto a Supabase e attiva la registrazione con email e password.

Crea queste tabelle:
- "progressi": livello, stelle ottenute (1–3), mosse usate, collegati all'utente (facoltativo: si gioca anche senza account)
- "profili": piano (gratis o completo)

Regole di sicurezza obbligatorie:
- ogni utente vede solo i suoi progressi
- senza account i progressi si salvano nel browser e si trasferiscono alla registrazione
- il piano non si modifica dal browser

Usa esattamente il codice SQL che trovi nei "Dettagli tecnici" di questa scheda: eseguilo nel SQL Editor di Supabase prima di continuare, poi collega le pagine alle tabelle.

3. Come funziona un livello

Ogni livello è descritto da dati: ingredienti disponibili, strumenti e la ricetta da ottenere come sequenza di trasformazioni (es. pomodoro → taglia → cuoci + basilico → mescola = sugo). Il giocatore trascina ingredienti sugli strumenti; il gioco controlla le combinazioni con una funzione unica (codice nei Dettagli tecnici).

Stelle: 3 se si finisce con il numero minimo di mosse, 2 o 1 se ne servono di più. Ogni 5 livelli si sblocca un mostro cuoco con un'animazione.

Il gioco è in HTML5 con React e funziona su telefono, tablet e computer, anche offline dopo il primo caricamento. Così si può pubblicare anche su portali di giochi come CrazyGames o itch.io.

4. Mappa, collezione e progressi

Mappa dei livelli divisa in 5 cucine (italiana, giapponese, messicana, indiana, francese), con le stelle di ogni livello. Collezione dei mostri con nome e una frase buffa.

Senza account si gioca e si salva nel browser; con la registrazione i progressi passano sul server e si ritrovano su altri dispositivi.

5. Pagamenti con Stripe

Aggiungi un pagamento singolo di 2,99 € una volta sola. I primi 20 livelli sono gratis; il pagamento sblocca tutti i 100 livelli e toglie la pubblicità.

A pagamento riuscito il webhook imposta "piano" a "pro" nella tabella "profili", sulla riga dell'utente indicata in client_reference_id.

Per la sessione di pagamento e il webhook segui la guida "Pagamenti con Stripe" di Fattibile.

6. Controlli specifici di questo progetto

Oltre ai controlli della guida "Controllo finale", verifica in particolare:
1. Livelli: gioca ogni livello con la soluzione minima: tutti devono essere risolvibili e dare 3 stelle.
Correggi quello che non va e scrivimi cosa hai cambiato.

Dettagli tecnici

Livelli descritti da dati

Un livello è solo un oggetto con ingredienti, strumenti e ricette: aggiungere livelli non richiede nuovo codice. La funzione applica una mossa e dice se il piatto è pronto.

type Mossa = { strumento: "taglia" | "cuoci" | "mescola" | "frulla"; ingredienti: string[] };
type Ricetta = { da: string[]; strumento: Mossa["strumento"]; risultato: string };

export type Livello = {
  numero: number;
  ingredienti: string[];
  ricette: Ricetta[];              // trasformazioni valide in questo livello
  obiettivo: string;               // es. "pasta al pomodoro"
  mosseMinime: number;
};

// Applica una mossa: restituisce il nuovo elenco di cose sul tavolo, o null se non funziona
export function applicaMossa(tavolo: string[], mossa: Mossa, livello: Livello): string[] | null {
  const ricetta = livello.ricette.find(
    (r) => r.strumento === mossa.strumento &&
      r.da.length === mossa.ingredienti.length &&
      [...r.da].sort().join() === [...mossa.ingredienti].sort().join(),
  );
  if (!ricetta) return null;
  const resto = [...tavolo];
  for (const i of mossa.ingredienti) {
    const pos = resto.indexOf(i);
    if (pos === -1) return null;   // ingrediente non disponibile
    resto.splice(pos, 1);
  }
  return [...resto, ricetta.risultato];
}

export const stelle = (mosse: number, minime: number) =>
  mosse <= minime ? 3 : mosse <= minime + 2 ? 2 : 1;

Progressi con il miglior risultato

Salva solo il risultato migliore di ogni livello: rigiocare peggio non toglie stelle.

create table progressi (
  utente_id uuid not null references auth.users(id) on delete cascade,
  livello int not null check (livello between 1 and 100),
  stelle int not null check (stelle between 1 and 3),
  mosse int not null,
  primary key (utente_id, livello)
);
alter table progressi enable row level security;
create policy "le mie righe" on progressi
  for all using (auth.uid() = utente_id) with check (auth.uid() = utente_id);

-- Salva tenendo il risultato migliore
insert into progressi (utente_id, livello, stelle, mosse)
values (auth.uid(), 12, 3, 7)
on conflict (utente_id, livello) do update
  set stelle = greatest(progressi.stelle, excluded.stelle),
      mosse = least(progressi.mosse, excluded.mosse);

Pezzi comuni a tutti i progetti

Glossario

HTML5
Giochi e app che girano direttamente nel browser, senza installare nulla.