Destroy Any Website

Un omino che distrugge qualsiasi sito web, per gioco

Cosa fa

Un giochino in cui un omino stilizzato salta dentro una pagina web e la distrugge pezzo per pezzo. Pura diversione, molto condivisibile.

Come guadagna

Presentato su Hacker News dal suo creatore, che non dichiara incassi. Idee nostre per guadagnare con un progetto simile: pubblicità e versioni a tema; serve soprattutto a portare visite e notorietà.

Rendilo tuo

• Versione per sfogarsi a fine giornata: "distruggi la tua lista di cose da fare".
• I giochi virali sono ottimi per farsi conoscere e poi lanciare altro.

Le frasi da scrivere all'AI

1. Base del sito e grafica

Crea un'app web in italiano chiamata "Omino Distruttore": un giochino da condividere: un omino stilizzato salta dentro qualsiasi pagina web aperta e la distrugge pezzo per pezzo, con pugni, calci ed esplosioni. Niente viene rotto davvero: è solo un effetto sulla propria schermata. Usa React, Vite, TypeScript e Tailwind CSS.

Pagine da creare:
1. Pagina iniziale con il video dell'omino in azione e il pulsante da trascinare nei preferiti
2. Pagina di prova con un finto sito da distruggere
3. Personaggi e armi
4. Classifica dei punteggi
5. Pagina Pro

Stile: cartoon esplosivo: sfondo bianco, nero spesso per l'omino, giallo #FACC15 e rosso #EF4444 per le esplosioni, carattere "Bangers" per i titoli e "Inter" per i testi. 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:
- "punteggi": nome, punteggio, elementi distrutti, data
- "profili": piano

Regole di sicurezza obbligatorie:
- la distruzione avviene solo nel browser dell'utente, sulla sua copia della pagina: non tocca il sito vero
- la classifica è pubblica con solo nome e punteggio
- 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. Il bookmarklet

Il gioco si avvia con un bookmarklet: un preferito che, cliccato su qualsiasi pagina, carica lo script del gioco su quella pagina (codice nei Dettagli tecnici). Spiega bene nella pagina che tutto avviene solo sullo schermo dell'utente: ricaricando, la pagina torna come prima.

L'omino si muove con le frecce e salta; con i tasti colpisce. Ogni elemento della pagina (immagini, paragrafi, pulsanti) ha "punti vita": colpito, trema, si crepa e poi cade con un'animazione e un'esplosione di pezzi. Punti per ogni elemento distrutto, bonus a catena.

Lo script non legge e non invia nulla della pagina: solo il punteggio finale, se l'utente vuole entrare in classifica.

4. Personaggi e classifica

Personaggi e armi sbloccabili (martello, laser, dinosauro). Alla fine il punteggio con il pulsante "Condividi" che crea un breve video o una GIF della distruzione.

Pagina di prova con un finto sito per chi non vuole usare il bookmarklet, utile anche su telefono, dove i preferiti con codice sono scomodi.

5. Pagamenti con Stripe

Aggiungi un pagamento singolo di 1,99 € una volta sola. Il pagamento sblocca tutti i personaggi e le armi.

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. Sicurezza: verifica che lo script non invii mai contenuti della pagina visitata (solo il punteggio) e che non funzioni dentro campi di password o pagine di pagamento.
Correggi quello che non va e scrivimi cosa hai cambiato.

Dettagli tecnici

Bookmarklet e caduta degli elementi

Il bookmarklet carica lo script del gioco sulla pagina aperta. La seconda parte fa "cadere" un elemento colpito, solo sullo schermo dell'utente.

// Il bookmarklet (da trascinare nei preferiti): carica lo script del gioco
// javascript:(()=>{const s=document.createElement('script');s.src='https://omino.it/gioco.js?'+Date.now();document.body.appendChild(s)})()

// Nel gioco: un elemento colpito trema e poi cade con una rotazione casuale
export function colpisci(el: HTMLElement, onDistrutto: (punti: number) => void) {
  const vita = Number(el.dataset.vita ?? 3) - 1;
  el.dataset.vita = String(vita);

  if (vita > 0) {
    el.animate(
      [{ transform: "translateX(0)" }, { transform: "translateX(-6px)" }, { transform: "translateX(6px)" }, { transform: "translateX(0)" }],
      { duration: 150 },
    );
    return;
  }

  const r = el.getBoundingClientRect();
  const giro = (Math.random() - 0.5) * 720;
  el.style.pointerEvents = "none";
  el.animate(
    [
      { transform: "translate(0, 0) rotate(0deg)", opacity: 1 },
      { transform: "translate(" + (Math.random() - 0.5) * 300 + "px, " + (innerHeight - r.top + 200) + "px) rotate(" + giro + "deg)", opacity: 0.8 },
    ],
    { duration: 1200, easing: "cubic-bezier(.5,0,.9,.5)", fill: "forwards" },   // accelera come se cadesse
  );
  onDistrutto(Math.round(Math.sqrt(r.width * r.height)));   // elementi grandi valgono di più
}

// Elementi bersaglio: solo quelli visibili e mai campi sensibili
export const bersagli = () =>
  [...document.querySelectorAll<HTMLElement>("img, p, h1, h2, h3, button, a, li, video")]
    .filter((el) => el.offsetWidth > 20 && !el.closest("form"));

Pezzi comuni a tutti i progetti

• Pagamenti con Stripe
• Profili, piano e crediti
• Controllo finale prima di pubblicare

Glossario

Bookmarklet

Un preferito del browser che, invece di aprire un sito, esegue un piccolo programma sulla pagina aperta.