Build a GPU

Un gioco in cui costruisci una scheda video, pezzo per pezzo

Cosa fa

Gioco educativo nel browser: costruendo una scheda video si impara come funziona davvero un processore grafico.

Come guadagna

Presentato su Hacker News dal suo creatore, che non dichiara incassi. Idee nostre per guadagnare con un progetto simile: versione per scuole e corsi, livelli avanzati a pagamento.

Rendilo tuo

• Lo stesso approccio per spiegare altre cose complesse giocando: come funziona internet, una centrale elettrica, il corpo umano.
• Per gli istituti tecnici italiani.

Le frasi da scrivere all'AI

1. Base del sito e grafica

Crea un'app web in italiano chiamata "Costruisci la GPU": un gioco educativo nel browser: livello dopo livello si costruisce una scheda video semplificata e si capisce perché le GPU sono così veloci (tante unità che fanno la stessa cosa insieme), fino a disegnare un'immagine. Usa React, Vite, TypeScript e Tailwind CSS.

Pagine da creare:
1. Pagina iniziale con l'animazione e "Inizia"
2. Mappa dei livelli: dal singolo calcolo ai pixel, ai thread, alla memoria
3. Livello: componenti da collegare, programma da scrivere, risultato da ottenere
4. Simulazione passo passo con i registri che si illuminano
5. Area scuole

Stile: da circuito elettronico: sfondo verde scuro #052E16 come una scheda, piste dorate #EAB308, LED colorati, carattere "JetBrains Mono" per il codice e "Space Grotesk" 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:
- "progressi": livello, completato, numero di cicli usati, collegati all'utente
- "classi": insegnante, codice, studenti
- "profili": piano

Regole di sicurezza obbligatorie:
- ogni utente vede solo i suoi progressi; l'insegnante quelli della sua classe
- il gioco gira tutto nel browser
- 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. Tante corsie, un'istruzione

Il cuore del gioco è un piccolo simulatore di GPU (codice nei Dettagli tecnici): più "corsie" eseguono la stessa istruzione nello stesso momento, ognuna su un pixel diverso. Il giocatore scrive programmi brevissimi in un linguaggio semplice (somma, moltiplica, confronta, scrivi colore) e vede le corsie lavorare insieme.

Livelli: 1) una corsia colora un pixel; 2) 4 corsie colorano 4 pixel nello stesso tempo; 3) una sfumatura su tutta l'immagine; 4) le corsie che prendono strade diverse con "se...allora" e perché rallenta (divergenza); 5) la memoria condivisa; 6) disegnare un cerchio, poi un piccolo frattale.

Ogni livello ha un obiettivo e un numero massimo di cicli: meno cicli, più stelle.

4. Simulazione passo passo e scuole

La simulazione si può eseguire un ciclo alla volta: si illuminano le corsie attive, i registri cambiano valore, e l'immagine si riempie. Spiegazioni brevi a fine livello collegano il gioco alle GPU vere.

Area scuole: l'insegnante crea una classe e vede i livelli completati dagli studenti, con schede didattiche scaricabili.

5. Pagamenti con Stripe

Aggiungi un pagamento singolo di 4,99 € una volta sola. I primi 5 livelli sono gratis; il pagamento sblocca tutti i 20 livelli, la modalità libera e l'area scuole.

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. Didattica: fai provare i primi 5 livelli a una persona che non sa nulla di informatica: deve riuscire a finirli solo con le spiegazioni del gioco.
Correggi quello che non va e scrivimi cosa hai cambiato.

Dettagli tecnici

Un mini-simulatore di GPU

Tutte le corsie eseguono la stessa istruzione allo stesso ciclo, ognuna con i suoi registri. Con "se" alcune corsie si spengono (maschera): così si vede perché la divergenza rallenta.

type Istruzione =
  | { op: "carica_x" | "carica_y"; r: number }                  // r = coordinata del pixel della corsia
  | { op: "somma" | "molt"; r: number; a: number; b: number }
  | { op: "costante"; r: number; valore: number }
  | { op: "se_minore"; a: number; b: number }                    // spegne le corsie dove a >= b
  | { op: "fine_se" }
  | { op: "colore"; r: number };                                 // scrive il registro come colore del pixel

export function esegui(programma: Istruzione[], larghezza: number, altezza: number) {
  const corsie = larghezza * altezza;                            // una corsia per pixel
  const registri = Array.from({ length: corsie }, () => new Float32Array(8));
  let attive = new Array(corsie).fill(true);
  const pile: boolean[][] = [];
  const immagine = new Float32Array(corsie);
  let cicli = 0;

  for (const ist of programma) {
    cicli++;                                                     // un ciclo per istruzione, per TUTTE le corsie
    if (ist.op === "se_minore") {
      pile.push(attive);
      attive = attive.map((a, i) => a && registri[i][ist.a] < registri[i][ist.b]);
      continue;
    }
    if (ist.op === "fine_se") { attive = pile.pop() ?? attive; continue; }
    for (let i = 0; i < corsie; i++) {
      if (!attive[i]) continue;                                  // corsia spenta: aspetta e basta
      const r = registri[i];
      if (ist.op === "carica_x") r[ist.r] = i % larghezza;
      else if (ist.op === "carica_y") r[ist.r] = Math.floor(i / larghezza);
      else if (ist.op === "costante") r[ist.r] = ist.valore;
      else if (ist.op === "somma") r[ist.r] = r[ist.a] + r[ist.b];
      else if (ist.op === "molt") r[ist.r] = r[ist.a] * r[ist.b];
      else if (ist.op === "colore") immagine[i] = r[ist.r];
    }
  }
  return { immagine, cicli };   // i cicli non dipendono dal numero di pixel: ecco la forza della GPU
}

Pezzi comuni a tutti i progetti

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

Glossario

GPU

Il processore della scheda video: fa migliaia di calcoli semplici tutti insieme.

Divergenza

Quando le unità di una GPU dovrebbero fare cose diverse e alcune devono aspettare le altre: rallenta tutto.