Cat Games
Il telefono diventa un gioco per il tuo gatto
Incasso mensile: 948 USD (fonte indicata nella scheda)
Cosa fa
Giochi da far toccare al gatto sullo schermo del telefono o del tablet: topi, pesci e lucine che si muovono.
Come guadagna
Ha entrate ricorrenti ogni mese, verificate su TrustMRR. Prezzi e piani esatti sono indicati sul sito del progetto.
Rendilo tuo
- Registra i video del gatto mentre gioca, da condividere sui social.
- Giochi per cani con suoni, sullo stesso principio.
Le frasi da scrivere all'AI
1. Base del sito e grafica
Crea un'app web in italiano chiamata "Gioca Micio": giochi da far toccare al gatto sullo schermo del tablet o del telefono: topolini, pesci, coccinelle e lucine che si muovono in modo imprevedibile. Usa React, Vite, TypeScript e Tailwind CSS.
Pagine da creare:
1. Pagina iniziale con un video di gatti che giocano e il prezzo
2. Scelta del gioco con anteprime grandi
3. Schermata di gioco a tutto schermo
4. Impostazioni: velocità, numero di prede, suoni
5. Statistiche: quante prede ha preso il gatto
Stile: giocoso ma semplice: menu con sfondo bianco, arancione gatto #F97316, carattere "Fredoka"; giochi su sfondi scuri con colori che i gatti distinguono bene (blu e giallo). 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:
- "profili": piano (gratis o completo), collegato all'utente
- "partite": gioco, durata, prede prese, data
Regole di sicurezza obbligatorie:
- ogni utente vede solo le sue partite
- 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. I giochi
Crea 6 giochi a tutto schermo disegnati su canvas: topolino che corre e si nasconde, pesci in un acquario, coccinella, puntino laser, piuma, lucciole. Le prede si muovono con cambi di direzione improvvisi e pause, come una preda vera (codice nei Dettagli tecnici).
Quando il gatto tocca una preda: piccola animazione, suono leggero facoltativo, la preda scappa e ne compare un'altra. Si contano le prede prese.
Per non far uscire il gatto dal gioco: pagina a schermo intero, nessun pulsante visibile, e per uscire serve tenere premuto 3 secondi l'angolo in alto a sinistra. Lo schermo non si spegne durante il gioco (Wake Lock).
4. Impostazioni e statistiche
Impostazioni: velocità (calmo, normale, veloce), numero di prede contemporanee, suoni sì o no, durata della partita con fine automatica.
Statistiche: prede prese per partita e per settimana, gioco preferito. Consiglio nella pagina: "Proteggi lo schermo con una pellicola e tieni le unghie del gatto spuntate".
5. Pagamenti con Stripe
Aggiungi un pagamento singolo di 3,99 € una volta sola. Il pagamento sblocca tutti e 6 i giochi e le impostazioni; gratis si gioca con il topolino.
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. Tocco: prova i giochi su un tablet con tocchi rapidi e ripetuti: niente zoom, niente selezione del testo, niente menu che si aprono.
Correggi quello che non va e scrivimi cosa hai cambiato.
Dettagli tecnici
Una preda che si muove come quella vera
Il topolino cambia direzione all'improvviso, si ferma e riparte, e scappa quando viene toccato. Tutto disegnato su canvas a 60 fotogrammi al secondo.
type Preda = { x: number; y: number; vx: number; vy: number; pausa: number };
export function avviaGioco(tela: HTMLCanvasElement, velocita = 4, onPresa: () => void) {
const ctx = tela.getContext("2d")!;
const nuova = (): Preda => ({
x: Math.random() * tela.width, y: Math.random() * tela.height, vx: velocita, vy: 0, pausa: 0,
});
let preda = nuova();
function muovi() {
if (preda.pausa > 0) { preda.pausa--; return; } // ferma, come un topo in agguato
if (Math.random() < 0.02) { // cambio di direzione improvviso
const angolo = Math.random() * Math.PI * 2;
preda.vx = Math.cos(angolo) * velocita;
preda.vy = Math.sin(angolo) * velocita;
}
if (Math.random() < 0.005) preda.pausa = 30 + Math.random() * 60;
preda.x += preda.vx; preda.y += preda.vy;
if (preda.x < 20 || preda.x > tela.width - 20) preda.vx *= -1; // rimbalza sui bordi
if (preda.y < 20 || preda.y > tela.height - 20) preda.vy *= -1;
}
function disegna() {
ctx.fillStyle = "#0B1220";
ctx.fillRect(0, 0, tela.width, tela.height);
ctx.fillStyle = "#FACC15"; // giallo: ben visibile ai gatti
ctx.beginPath();
ctx.ellipse(preda.x, preda.y, 26, 16, Math.atan2(preda.vy, preda.vx), 0, Math.PI * 2);
ctx.fill();
}
tela.addEventListener("pointerdown", (e) => {
const r = tela.getBoundingClientRect();
const x = (e.clientX - r.left) * (tela.width / r.width);
const y = (e.clientY - r.top) * (tela.height / r.height);
if (Math.hypot(x - preda.x, y - preda.y) < 60) { onPresa(); preda = nuova(); }
});
let attivo = true;
(function ciclo() {
if (!attivo) return;
muovi(); disegna();
requestAnimationFrame(ciclo);
})();
return () => { attivo = false; };
}Pezzi comuni a tutti i progetti
Glossario
- Canvas
- Una tela del browser su cui il codice disegna e anima figure, adatta ai giochi semplici.
- Wake Lock
- La funzione che impedisce allo schermo di spegnersi mentre si usa l'app.