Elevators

Un gioco dove devi gestire gli ascensori di un palazzo

Cosa fa

Un gioco nel browser in cui si programmano gli ascensori per portare le persone ai piani giusti nel minor tempo possibile. Oltre 1.600 voti su Hacker News.

Come guadagna

Presentato su Hacker News dal suo creatore, che non dichiara incassi. Idee nostre per guadagnare con un progetto simile: livelli a pagamento, versione per insegnare la logica nelle scuole.

Rendilo tuo

Lo stesso tipo di gioco per altri sistemi quotidiani: semafori, casse del supermercato, metropolitana.
Per insegnare la programmazione ai ragazzi in modo divertente.

Le frasi da scrivere all'AI

1. Base del sito e grafica

Crea un'app web in italiano chiamata "Programma l'Ascensore": un gioco di programmazione nel browser: si scrive un piccolo codice JavaScript che comanda gli ascensori di un palazzo, per portare le persone ai piani giusti nel minor tempo possibile, livello dopo livello. Usa React, Vite, TypeScript e Tailwind CSS.

Pagine da creare:
1. Pagina iniziale con l'animazione del palazzo e "Gioca"
2. Livello: editor di codice a sinistra, palazzo animato a destra, obiettivo in alto
3. Documentazione dei comandi disponibili (vai al piano, fermati, quando qualcuno chiama...)
4. Classifica dei livelli
5. Pagina Pro

Stile: da videogioco retrò: sfondo blu notte #0F172A, palazzo in pixel art, ascensori gialli #FACC15, editor con tema scuro, carattere "JetBrains Mono" per il codice e "Press Start 2P" per i titoli. 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:
- "soluzioni": livello, codice, risultato (tempo medio di attesa, persone trasportate), data, collegate all'utente
- "profili": piano

Regole di sicurezza obbligatorie:
- ogni utente vede solo il suo codice; la classifica mostra solo nome e risultato
- il codice dei giocatori gira in un ambiente isolato nel browser, mai sul server
- 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. Eseguire il codice del giocatore in sicurezza

Il giocatore scrive una funzione che riceve gli ascensori e i piani e reagisce agli eventi ("qualcuno ha chiamato al piano 5", "l'ascensore è vuoto"). L'editor è Monaco (lo stesso di VS Code) con l'autocompletamento dei comandi.

Il codice del giocatore gira in un Web Worker separato dalla pagina, senza accesso al sito, con un tempo massimo: se va in un ciclo infinito viene fermato (codice nei Dettagli tecnici). La simulazione manda gli eventi al worker e riceve i comandi.

Ogni livello ha un obiettivo ("trasporta 50 persone in 60 secondi con al massimo 15 secondi di attesa media") e la simulazione si può accelerare.

4. Livelli, classifica e Pro

20 livelli di difficoltà crescente: più piani, più ascensori, ora di punta, capienza limitata. Classifica per livello con tempo medio di attesa: per evitare imbrogli, il risultato si ricalcola facendo girare il codice con un seme casuale fisso.

Pro: livelli avanzati, modalità sfida con amici sullo stesso livello, e salvataggio di più soluzioni per livello.

5. Pagamenti con Stripe

Aggiungi un pagamento singolo di 3,99 € una volta sola. Il pagamento sblocca i livelli dal 11 al 20, la modalità sfida e le soluzioni multiple.

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: scrivi nel gioco un ciclo infinito e un codice che prova a leggere i cookie o a fare richieste: il primo deve essere fermato, il secondo non deve avere accesso.
Correggi quello che non va e scrivimi cosa hai cambiato.

Dettagli tecnici

Il codice del giocatore in un recinto

Il codice gira in un Web Worker creato al volo: non può toccare la pagina, e se non risponde entro 50 millisecondi viene terminato. Per un isolamento completo (niente accesso ai dati salvati del sito), crea il worker dentro un iframe con sandbox="allow-scripts", che ha un'origine separata.

// Codice del worker: riceve gli eventi della simulazione e chiama la funzione del giocatore
const RECINTO = `
  self.fetch = undefined; self.XMLHttpRequest = undefined; self.importScripts = undefined;
  let gioco;
  self.onmessage = (e) => {
    if (e.data.tipo === "codice") {
      gioco = new Function("return (" + e.data.codice + ")")();   // { init, evento }
      return;
    }
    const comandi = [];
    const ascensori = e.data.ascensori.map((a, i) => ({ ...a, vaiAl: (piano) => comandi.push({ i, piano }) }));
    gioco.evento(e.data.evento, ascensori, e.data.piani);
    self.postMessage(comandi);
  };
`;

export function creaRecinto(codiceGiocatore: string) {
  const url = URL.createObjectURL(new Blob([RECINTO], { type: "text/javascript" }));
  let worker = new Worker(url);
  worker.postMessage({ tipo: "codice", codice: codiceGiocatore });

  return function evento(dati: object): Promise<{ i: number; piano: number }[]> {
    return new Promise((ok, errore) => {
      const timer = setTimeout(() => {                 // ciclo infinito o codice troppo lento
        worker.terminate();
        errore(new Error("Il tuo codice ci mette troppo: controlla i cicli"));
      }, 50);
      worker.onmessage = (e) => { clearTimeout(timer); ok(e.data); };
      worker.onerror = (e) => { clearTimeout(timer); errore(new Error(e.message)); };
      worker.postMessage(dati);
    });
  };
}

Pezzi comuni a tutti i progetti

Glossario

Web Worker: Un programma che gira in parallelo alla pagina, separato da essa: ideale per eseguire codice di altri in sicurezza.
Monaco: L'editor di codice di VS Code, usabile anche dentro un sito.