Puoi fare un gioco giocabile con l’IA senza scrivere una sola riga di codice: Gemini disegna le immagini, tu le dai a Claude perché ne faccia un gioco, e giochi nel browser. La prima versione giocabile del gioco qui sotto era pronta in meno di 10 minuti. Una cosa così, prima, richiedeva qualche settimana.
Questo è il gioco di cui parlo. Clicca una volta e gioca: il clic sinistro spara, il destro lancia una granata. Nella barra in alto c’è un pulsante per lo schermo intero.
L’idea: un’IA disegna, un’altra IA costruisce
Un’IA di chat scrive benissimo il codice di un piccolo gioco, ma non sa disegnarti una città in rovina cupa, un branco di zombie e una torretta laser nello stesso stile. Un’IA per le immagini disegna tutto questo, ma non può far muovere le immagini. Così ho usato due strumenti e ho dato a ciascuno il lavoro che gli riesce meglio.
- Gemini ha disegnato le immagini: lo sfondo, gli zombie e le armi.
- Claude ha preso quelle immagini, le ha tagliate in pezzi separati, ha montato la scena e ha fatto i livelli.
Non sei legato a questi due. Qualsiasi IA che fa immagini può disegnare e qualsiasi IA di chat che scrive codice può costruire. ChatGPT e Gemini possono scrivere anche la parte di codice e vanno bene per giochi più semplici, fatti di forme e colori piatti. Sono le immagini a far sembrare un gioco un gioco vero.
Cosa ti serve
- Un’IA che fa immagini. Io ho usato Gemini.
- Un’IA di chat che scrive codice. Io ho usato Claude, e vanno bene anche ChatGPT o Gemini.
- Il browser Chrome. Non devi installare nessun programma.
Puoi iniziare gratis, ma i piani gratuiti hanno limiti giornalieri su immagini e messaggi, e le regole cambiano da piano a piano. Molti strumenti per immagini permettono l’uso commerciale delle immagini solo con un piano a pagamento, quindi leggi cosa dice il tuo se pensi di condividere o vendere il gioco. Questo articolo parla di come fare in fretta un gioco con l’IA, non è una consulenza legale.
Per l’hosting, il posto su internet dove il gioco è conservato perché chiunque possa aprirlo, ho usato il mio sito web, lo stesso su cui stai leggendo. Puoi fare lo stesso con il tuo, e ci sono altre opzioni, che spiego più avanti.
Se non hai ancora un sito web, ti serve prima un hosting. Un modo semplice è Bluehost. È una società di hosting il cui costruttore di siti con IA abbina l’hosting a un sito di partenza, così salti la pagina bianca, e la maggior parte dei piani di hosting ti lascia caricare i tuoi file, per esempio un singolo file di gioco. Guarda sulla loro pagina i piani e i prezzi attuali prima di decidere, perché le offerte cambiano.
Passaggio 1: decidi il gioco, poi chiedi le immagini all’IA per le immagini
Prima di disegnare qualsiasi cosa, pensa che tipo di gioco vuoi. Un gioco di difesa in cui tieni un muro contro i nemici, uno sparatutto spaziale, un labirinto, un gioco di carte? E che aspetto deve avere: una città in rovina cupa, una foresta luminosa, lo spazio? Di quali personaggi hai bisogno: un eroe, qualche nemico, un boss? Non devi decidere tutto da solo. Chiedi prima delle idee all’IA e in pochi secondi ne avrai una manciata.
Puoi partire con una richiesta come questa: “Voglio fare un gioco semplice che giri nel browser, in un solo file HTML. Dammi cinque idee di giochi facili da costruire. Per ognuna, di’ in una frase cosa fa il giocatore, come sarebbe lo sfondo e di quali personaggi o oggetti avrei bisogno di immagini.”
Scegli l’idea che ti piace di più, cambia quello che vuoi e ora sai esattamente quali immagini chiedere. Un gioco semplice ne richiede tre tipi: uno sfondo, i nemici e le armi. Chiedi ognuno separatamente e chiedi sempre lo stesso stile, così sembra tutto della stessa famiglia. Ecco il tipo di richiesta che funziona.
Per lo sfondo ho chiesto qualcosa del genere: “Disegna uno sfondo di gioco visto dall’alto per un gioco di difesa della base: una strada in rovina e crepata in alto e un solido muro di metallo con un cancello in basso. Stile pixel art scuro e sporco, immagine larga 16:9, senza testo e senza personaggi.”
Per i nemici: “Disegna un foglio di sprite di un cyber-zombie verde in sei pose: due che camminano, una con le braccia tese, una che attacca e altre due. Lo stesso personaggio e la stessa dimensione in ogni posa, visto di fronte, con uno spazio netto tra le pose, su uno sfondo grigio piatto. Lo stesso stile pixel art dello sfondo.”
E per le armi e gli effetti: “Disegna una torretta fantascientifica in sei fotogrammi, ferma e mentre spara, un cancello laser luminoso, un’esplosione in quattro fotogrammi e un fulmine di energia blu. Lo stesso stile pixel art, su uno sfondo grigio piatto.”
Una cosa che ho imparato: se chiedi uno “sfondo trasparente”, molti strumenti per immagini dipingono nell’immagine una finta scacchiera grigia e bianca, come se fosse parte del disegno. Un colore piatto funziona meglio. Claude può toglierlo dopo.
Passaggio 2: dai le immagini all’IA di chat
Apri Claude, allega le immagini e descrivi il gioco con parole semplici. Non devi sapere come funziona un gioco. Di’ cosa vuoi vedere e fare, e lascia il codice all’IA. Per esempio:
“Ecco tre immagini: uno sfondo, un foglio di sprite di zombie e un foglio della torretta. Taglia tu i fogli in immagini separate e fai un gioco per browser in un solo file. Una torretta in basso difende un muro da zombie che arrivano in 10 ondate. La torretta mira con il mouse e spara con il tasto sinistro, il destro lancia una granata. Ogni zombie dà crediti con cui comprare potenziamenti. Aggiungi effetti sonori e un boss nelle ondate 5 e 10. Fai una schermata iniziale e una di vittoria o fine partita.”
Nel mio caso Claude ha tagliato i fogli in pezzi, ha messo lo sfondo, ha montato la scena e ha scritto i livelli. Pochi minuti dopo la prima versione era già giocabile. Poi ho dedicato più tempo agli extra, che è il passaggio 4.
Passaggio 3: gioca senza salvare nulla
Claude mostra molte risposte in un’anteprima direttamente nella chat. Se il tuo codice viene invece da ChatGPT o da Gemini, c’è un modo ancora più veloce: AI Code Harvester, la nostra estensione gratuita di Chrome, trova il codice nella risposta e il pulsante Mostra lo avvia dal vivo in una nuova scheda. Non salvi nessun file e non copi e incolli niente.
Per questo Harvester è un potente aiuto per tutto ciò che può girare nel browser senza salvare file: un gioco, un piccolo strumento, il progetto di una pagina. Chiedi, premi Mostra, guardi il risultato, chiedi una modifica e guardi di nuovo. Funziona sulle pagine di ChatGPT e Gemini, e la nostra guida Come eseguire il codice HTML di ChatGPT o Gemini e vedere la pagina dal vivo lo spiega passo per passo.
Passaggio 4: miglioralo una richiesta alla volta
La prima versione non è mai quella finale, ed è questo il bello. Dopo la prima versione ho cambiato il gioco con richieste semplici, una alla volta. Alcune:
- “Mostra piccole lettere dei tasti ai bordi dello schermo, con un breve testo, così il giocatore sa quale tasto compra cosa.”
- “Aggiungi un soldato che lancia da solo granate sullo zombie più vicino.” Per lui ho dato a Claude nuove immagini fatte con Gemini.
- “Aggiungi una torretta automatica che mira e spara da sola, ma più lentamente di quella principale.”
- “Gli zombie devono perdere energia solo quando li colpisco al corpo o alla testa, non alle gambe.”
- “Aggiungi un pulsante di pausa nell’angolo in alto a sinistra e un pulsante per lo schermo intero.”
- “Rendi l’ultima ondata molto più grande.”
La regola che fa risparmiare più tempo: chiedi una modifica, provala e poi chiedi la successiva. Se qualcosa si rompe, di’ “annulla l’ultima modifica”. L’IA ricorda cosa ha fatto e può sistemarlo.
Provalo sul tuo computer prima di metterlo online
Prima di condividere il gioco, provalo a casa, dove nessuno vede gli errori. Un gioco così è una pagina web, e il tuo computer può aprirla senza nessun server.
- Salva il codice in un unico file, per esempio
game.html. Se il gioco usa immagini da una cartella, tieni la cartella accanto al file. Oppure chiedi all’IA: “Metti le immagini dentro il file, in modo che sia un file solo.” Così non c’è niente da perdere. - Fai doppio clic sul file. Si apre nel tuo browser.
- Clicca una volta sul gioco e poi usa i tasti. Il browser ha bisogno di quel primo clic perché il gioco possa sentire la tastiera.
- Controlla tutto: il mouse e i tasti, l’audio, lo schermo intero, la pausa e se si riesce a giocare fino alla fine.
- Correggi ciò che non va dicendo all’IA esattamente cosa hai visto.
Quando funziona, mettilo online perché anche gli altri possano giocare. Per questo ti serve un web hosting, che è semplicemente un posto su internet che conserva i tuoi file e dà loro un indirizzo. Un singolo file di gioco funziona su quasi tutti gli hosting, anche quelli gratuiti. La nostra guida Dove pubblicare la pagina web creata dalla tua IA passa in rassegna le opzioni con parole semplici. Sul nostro sito usiamo Firebase Hosting.
Per mostrare il gioco dentro una pagina del tuo sito, aggiungilo così:
<iframe src="https://yoursite.com/game.html" width="1024" height="572" allow="fullscreen"></iframe>La parte allow="fullscreen" permette ai giocatori di usare il pulsante dello schermo intero. Se carichi una nuova versione e vedi ancora la vecchia, premi Ctrl+F5 per far ricaricare tutto al browser.
Non ci sono limiti
Una volta pronta la base, tutto il resto è a una richiesta di distanza: un nuovo nemico, un nuovo sfondo per il livello successivo, un boss più duro, un’altra arma, un nuovo tipo di gioco. Per un nuovo aspetto, chiedi all’IA per le immagini un altro set di immagini e dallo all’IA di chat. Quello che una volta richiedeva una squadra e settimane di lavoro oggi richiede una serata e un po’ di fantasia.
Da sapere prima di iniziare
- L’IA sbaglia. Qualcosa non funzionerà al primo colpo. Descrivi quello che vedi e chiedi di nuovo, è normale.
- La prima versione è veloce, la rifinitura richiede più tempo. La prima versione giocabile del mio gioco ha richiesto meno di 10 minuti. Gli extra sono arrivati dopo.
- Giochi così sono fatti per mouse e tastiera. Per il telefono, chiedi all’IA i controlli touch.
- Le regole sulle immagini sono diverse. Controlla cosa permettono il tuo strumento per immagini e il tuo piano prima di vendere o pubblicizzare un gioco.
Cosa fare del gioco lo decidi tu
Quando il gioco è pronto, cosa farne lo decidi tu. Condividilo sui social, manda il link agli amici, mettilo sul tuo sito oppure tienilo solo per te. Non esiste una risposta giusta, e il bello è che l’hai fatto tu.
Domande frequenti
Sì. Descrivi il gioco con parole semplici, l’IA scrive il codice e tu provi il risultato e chiedi modifiche. Non devi capire il codice, solo dire cosa vuoi vedere.
Puoi iniziare gratis, ma i piani gratuiti hanno limiti giornalieri su immagini e messaggi, e un gioco più grande può richiedere più di un giorno con un piano gratuito. Molti strumenti per immagini permettono inoltre l’uso commerciale solo con un piano a pagamento, quindi controlla il tuo.
Qualsiasi IA che fa immagini può disegnarle e qualsiasi IA di chat che scrive codice può costruire il gioco. Io ho usato Gemini per le immagini e Claude per il gioco. Anche ChatGPT e Gemini possono scrivere il codice.
Per un gioco semplice fatto di forme e colori, sì. Per un gioco con una grafica vera servono immagini da un’IA per le immagini, che poi dai all’IA di chat perché le inserisca nel gioco.
Sì. Un gioco così è di solito un solo file HTML, che funziona su quasi tutti gli hosting web, anche quelli gratuiti. Puoi anche mostrarlo dentro una pagina con un iframe.
I giochi fatti così sono pensati per mouse e tastiera. Se lo vuoi sul telefono, chiedi all’IA di aggiungere i controlli touch.
Dipende dalle regole degli strumenti che hai usato per immagini e codice, e cambiano da piano a piano. Questo articolo non dà consulenza legale, quindi leggi i termini dei tuoi strumenti prima di vendere o pubblicizzare un gioco.
AI Code Harvester — Gratis, Locale, Senza Account
Creato da GetPlugzz. Solo elaborazione locale: nulla viene caricato, nulla viene tracciato.
