Crea un gioco per bambini con Vibe Code e pubblicalo con Firebase.

1. Introduzione

Il 25 marzo 2025, Google ha lanciato Gemini 2.5. Uno degli aspetti più memorabili di questo lancio è stato che ha permesso a tutti di provare la funzionalità "Programmazione avanzata" [video]:

Gemini 2.5: crea il tuo gioco di dinosauri da un prompt di una sola riga

In questo codelab, imparerai a creare un'app semplice per bambini a partire da un prompt comune e a personalizzarla a tuo piacimento. Testeremo l'app su p5.js. Infine, eseguiremo il push di queste modifiche in Firebase Hosting. La cosa più spettacolare è che l'intero stack è attualmente senza costi.

Obiettivi didattici

Usa Gemini 2.5 per creare un vibe-code per un'app di gioco.
Testa il codice su p5js.org
Come eseguire iterazioni e perfezionare il prompt / l'app.
Come ospitare un'applicazione statica su Firebase

Tieni presente che questo codelab utilizza codice generato dall'AI; questo è non deterministico, quindi il codelab contiene linee guida in quanto l'output è sconosciuto all'autore. Inoltre, NON utilizzare questo codice in produzione.

2. Prerequisiti

Questo codelab è suddiviso in due fasi:

Sviluppo solo web. È qui che ti divertirai di più e non sono richieste competenze di programmazione. Per farlo, utilizzeremo la nostra UI Gemini ( gemini.google.com) e p5.js.
Ambiente di programmazione locale. È qui che sono necessarie un po' di competenze di programmazione / scripting, oltre all'installazione e all'utilizzo di npm / npx e di un editor locale, come vscode o IntelliJ o altro. Questa seconda parte è facoltativa e necessaria solo se vuoi rendere persistente la tua app in modo che amici e parenti possano giocarci da dispositivo mobile o computer.

L'unico prerequisito per la fase 1 è un browser e un computer (uno schermo grande è utile). Per la fase 2, continua a leggere.

UI di Gemini

gemini.google.com è un'ottima piattaforma dove puoi provare tutti i modelli Gemini più recenti e creare anche immagini e video personalizzati. È dotato di integrazioni con Google, come Google Maps e Hotel/Voli/Recensioni, il che lo rende il compagno ideale per pianificare la tua prossima vacanza.

Suggerimento:se ti piace la programmazione, ti consigliamo di provare anche AI Studio, un'interfaccia simile in cui puoi creare prototipi di interazione con un LLM (ad es. creare un'immagine) e ottenere subito il codice Python dalla pagina.

p5.js

p5.js è una libreria JavaScript open source senza costi che rende la programmazione creativa accessibile e inclusiva per artisti, designer, insegnanti e chiunque altro. Si basa sul linguaggio di programmazione Processing e semplifica il processo di creazione di contenuti visivi e interattivi utilizzando il codice nel browser web.

Codifica locale [facoltativa]

Se vuoi rendere persistente la tua applicazione, è necessaria una configurazione aggiuntiva:

Un editor di codice locale ( Visual Studio Code, IntelliJ, ecc.)
Un account Git ( github / gitlab / bitbucket) in cui archiviare il codice.
Un npmpacchetto installato localmente, meglio se nello spazio utente (tramite npx o tecnologia equivalente).

Inoltre, configureremo un account Firebase in un secondo momento.

Richiediamo anche alcune competenze di programmazione, ad esempio:

Possibilità di installare un pacchetto npm
Possibilità di interagire con il file system (creare cartelle e file)
Possibilità di interagire con git (git add, git commit, git push).

Se qualcosa ti spaventa, ricorda che i modelli linguistici di grandi dimensioni possono aiutarti. Puoi utilizzare "Gemini 2.0 flash" o un modello equivalente, ad esempio, per ricevere suggerimenti. Se è ancora troppo difficile, puoi saltare completamente la fase 2. La fase 1 dovrebbe essere sufficientemente gratificante.

3. Creiamo il nostro primo gioco.

Apri gemini.google.com e scegli un modello in grado di gestire il codice, ad esempio 2.5. Questa scelta può variare in base a disponibilità, costi e data. Al momento della stesura, la scelta migliore sarebbe:

Gemini 2.5 Flash (iterazione più rapida)
Gemini 2.5 Pro (output migliore).

Per ulteriori informazioni sui nostri modelli Gemini, visita questa pagina.

Il nostro primo prompt di gioco

Come puoi vedere in questo video, un prompt iniziale può essere semplice come questo:

Make me a captivating endless runner game. Key instructions on the screen.
p5js scene, no HTML. I like pixelated dinosaurs and interesting backgrounds.

Non esitare a personalizzare un po' questo messaggio:

Ambientazioni medievali / futuristiche / cyberpunk
Pieno di emoji o di una in particolare?
Ami il colore giallo o varie tonalità di viola.
Magari tuo figlio adora gli unicorni, i dinosauri o i Pokémon.

Una volta incollato il prompt nel browser, dovresti vedere Gemini pensare.Esatto, Gemini 2.5 è un modello di pensiero, quindi avvierà una serie di attività che potrai osservare cambiare nel tempo. Puoi fare clic sul menu a discesa in evoluzione per vedere cosa sta succedendo oppure puoi semplicemente attendere il risultato:

Alla fine, dovresti avere un javascript funzionante.

Ora puoi fare clic sul pulsante di copia in alto:

Testare il gioco su p5.js

Ora è il momento di testare il gioco.

Apri l'editor p5.js qui: https://editor.p5js.org/
Seleziona ed elimina il codice sketch.js esistente.
Incolla il codice

La pagina dovrebbe avere il seguente aspetto:

Infine, puoi premere il pulsante RIPRODUCI.

Ora possono succedere due cose: il codice funziona o non funziona. Seguiamo le istruzioni a seconda dei due casi:

Il tuo codice non funziona
Il tuo codice funziona al primo tentativo.

Nei prossimi due paragrafi vedremo come gestire entrambe le condizioni.

(caso 1) Il mio codice non funziona.

Se ricevi un errore come questo, puoi semplicemente copiarlo e incollarlo in Gemini. Lascia che ti corregga il codice.

(caso 2) Il mio codice funziona.

Se il codice funziona, dovresti vedere un gioco visivo all'estremità destra della pagina.

👏 Congratulazioni, stai giocando alla tua prima partita con l'AI.

Nota:mentre hai il codice, l'app funziona solo nel browser. Se vuoi mostrare l'app a familiari e amici, hai bisogno di una soluzione di hosting. Fortunatamente, abbiamo un'ottima opzione per te. Continua a leggere.

Ora puoi passare al capitolo successivo.

Ulteriori iterazioni

È il momento di salvare il codice da qualche parte, nel caso in cui lo rompi. Se vuoi, puoi fare un'iterazione. Ad esempio, l'autore ama molto il doppio salto di Super Mario, quindi potresti aggiungere qualcosa del genere:

The game is great, thanks! Please allow for my character to double jump.

Puoi modificare tutto ciò che vuoi, non ci sono limiti. Magari vuoi salvare il nome del personaggio per i punteggi più alti o aumentare la velocità nel tempo per rendere il gioco più difficile e così via. L'inglese è l'unica lingua in cui puoi scrivere i prompt.

Suggerimento:Gemini tende a fornirti solo la modifica che devi applicare (ad es. questa è la modifica per la funzione XYZ). Potresti voler impostare il prompt in modo che ti fornisca l'intero codice aggiornato, ad esempio

"Please give me the entire updated code, not just the changed function"

. In questo modo, l'esperienza di copia e incolla sarà più semplice.

Avvertenze

Potresti voler aggiungere la chat con Gemini ai preferiti. Magari vuoi rinominarlo in "p5js il mio primo gioco" o annotare il permalink a Gemini, ad esempio " https://gemini.google.com/app/abcdef123456789" per dopo.

4. Eseguiamo questo codice localmente

A questo punto, dovresti avere:

Una finestra del browser Gemini aperta con del codice funzionante.
Una finestra del browser p5.js aperta con un gioco funzionante
Un ambiente di codifica locale con npm installato.

Questa è la parte più difficile del codelab. È richiesta una minima esperienza di programmazione.

Installa le dipendenze

Se non hai npm e node, la soluzione migliore è installare npm tramite un gestore di versioni, ad esempio nvm . Segui le istruzioni di installazione per il tuo sistema operativo.

Supponiamo inoltre che tu stia utilizzando un IDE di programmazione. Utilizzeremo Visual Studio Code negli screenshot e negli esempi, ma qualsiasi strumento va bene.

Configura l'ambiente locale

Questo è il momento in cui puoi creare la tua struttura di file.

A scopo illustrativo, viene fornito uno script di configurazione. Puoi farlo manualmente creando cartelle e file:

# This works for Mac and Linux. For Windows, please use other tools.
mkdir my-first-vibecoding-project/
cd my-first-vibecoding-project/
git init 
touch README.md PROMPT.md 
mkdir public/
cd public/ 
touch index.html sketch.js style.css
git add .
# Skipping quotes which can be tricky
git commit -a -m committing_empty_skeleton

La struttura finale delle cartelle dovrebbe essere simile alla seguente:

my-first-vibecoding-project/
├── PROMPT.md
├── README.md
└── public
    ├── index.html
    ├── sketch.js
    └── style.css

Dovresti riuscire a trovarlo anche qui.

Ora apri il tuo editor di codice preferito (ad es. code my-first-vibecoding-project/) e inizia a incollare i contenuti di editor.p5js.org nei tre file in public/:

README.md ← Qui puoi inserire il permalink della chat con Gemini e qui inserirai la pagina di destinazione dell'app quando sarà disponibile.
PROMPT.md ← Qui puoi aggiungere tutti i tuoi prompt, separati da un paragrafo H2. Se vuoi spiegare perché hai dato un determinato prompt, puoi racchiuderlo tra tre apici inversi ( esempio).
**public/index.html** ← copia qui il codice HTML
**public/sketch.js** ← copia qui il codice JS
**public/style.css** ← copia qui il codice CSS

La cartella pubblica potrebbe ospitare asset aggiuntivi, ad esempio un PNG personalizzato.

5. Configurare ed eseguire il deployment in Firebase

Configura Firebase (solo la prima volta)

Assicurati di aver installato npm sul tuo computer.

In un terminale, digita uno dei seguenti comandi (entrambi funzionano):

# to install on the machine (requires privilege)
npm install -g firebase-tools
# to install locally (low privilege needed but might need to repeat a few times)
npm install firebase-tools

Ora dovresti essere in grado di chiamare il comando firebase. In caso di problemi, consulta la documentazione pubblica.

Inizializzazione di Firebase

In questa sezione configureremo Firebase Hosting. Si tratta di un flusso molto semplice, ma la prima volta potrebbe volerci un po' di tempo per familiarizzare.

Assicurati di trovarti nella directory immediatamente sopra la directory public/ che contiene i tuoi file. La voce di elenco (ls -al o dir) dovrebbe mostrare qualcosa di simile a questo:

$ ls 
PROMPT.md
README.md
public/

[Passaggio 1] Sulla console, digita: firebase init

Spostati con i cursori verso il basso fino a "Hosting: .." e digita BARRA SPAZIATRICE e poi INVIO. (Perché? Poiché si tratta di una scelta multipla, devi selezionare e andare alla pagina successiva)
[Passaggio 2] Ora puoi scegliere un progetto esistente (opzione 1) o crearne uno nuovo (opzione 2):

Nota: se hai un progetto Cloud esistente, potrebbe non essere un progetto Firebase. I progetti Firebase sono un sottoinsieme dei progetti GCP. Devi eseguire ulteriori operazioni per trasformarli in un progetto Firebase, ed è a questo che serve l'opzione 3.
Se non hai ancora deciso, utilizza "Crea un nuovo progetto" e aggiungi un nome come "p5js-YOURNAME-YOURAPP" (ad es. "p5js-riccardo-tetris").

[step 3] What would you like to call your project? (defaults to your project ID) (p5js-riccardo-tetris)
Premi INVIO.

[step 4] ? What do you want to use as your public directory? (public)
Premi INVIO (abbiamo configurato public/ appositamente)

[step 5] ? Configure as a single-page app (rewrite all urls to /index.html)? No
premi INVIO (no)

[step 6] ? Set up automatic builds and deploys with GitHub? No
Premi INVIO - NO

[step 7] ? File public/index.html already exists. Overwrite? (y/N)
Premi INVIO (no).
AVVISO Questa operazione potrebbe essere soggetta a errori. Se lo sovrascrivi, il nuovo file index.html non sarà compatibile con p5js.

Se tutto funziona correttamente, dovresti visualizzare questo messaggio:

Queste azioni dovrebbero aver creato alcuni file:

.firebaserc
.gitignore
firebase.json
public/404.html

In particolare, .firebaserc deve contenere l'ID progetto, che puoi recuperare in modo programmatico con questo comando: cat .firebaserc | jq .projects.default -r

Avviso:controlla il file index.html. Se è più lungo di 16 righe e/o contiene la parola firebase, hai sovrascritto per errore i file p5js. Nessun problema, ricordati solo di recuperare il vecchio index.html da Git o dall'editor p5js.

Test locale

Per ridurre la latenza del ciclo di feedback, ti consigliamo di provare prima le modifiche in locale.

Per farlo, puoi provare la potente suite CLI del team Firebase. Ad esempio:

$ firebase emulators:start

dovrebbe avviare un server web sulla porta 5000 ( http://127.0.0.1:5000/ ) in modo da poter eseguire test in locale prima del push.

Esegui il deployment in Firebase

Ora è il momento del comando finale:

$ firebase deploy

In questo modo, verranno attivate una serie di azioni. Le ultime righe dovrebbero essere simili a queste:

$ firebase deploy
[...]
✔  hosting[YOUR_PROJECT]: release complete 
✔  Deploy complete! 

Project Console: https://console.firebase.google.com/project/YOUR_PROJECT/overview
Hosting URL: https://YOUR_PROJECT.web.app

Dovresti visualizzare l'URL di hosting. Prova

Se il deployment va a buon fine, ma noti una pagina vuota o un deployment danneggiato, puoi fare alcune cose:

Apri gli "Strumenti per sviluppatori" del browser, individua l'errore e chiedi a Gemini di aiutarti a risolverlo con un prompt come questo:

I've deployed the script correctly with Firebase, but I now see a blank page with this error:

[ paste detailed JS console error ]

♾️ Itera!

Puoi ripetere questi passaggi tutte le volte che vuoi. Puoi continuare a inserire prompt finché i risultati non ti soddisfano.

È importante notare alcune cose:

Il ciclo di iterazione è molto più veloce nel ciclo Gemini > p5.js > Gemini rispetto a Gemini > localhost > deployment su Cloud Run > test dell'app sul browser (aggiorna).
Utilizza Git per il controllo delle versioni sia del prompt che del codice. Potresti voler tornare al prompt N e al codice N. In particolare, devi eseguire il commit Git di ogni sketch.js che invii, poiché potrebbero nascondersi bug non rilevati.

Tieni presente che alcuni giochi funzionano bene con una tastiera, ma non con il mouse o il tocco sul cellulare. È il momento ideale per migliorare il codice.

6. Suggerimenti per i prompt

Alcuni suggerimenti basati sulla mia esperienza di creazione di giochi.

Creare versioni del prompt

Probabilmente troverai errori nel prompt originale. Avere una versione git. Esistono alcuni percorsi del codice:

Se ti piace quello che vedi e vuoi iterare con Gemini con prompt secondari successivi, potrebbe essere interessante tenerli tutti traccia da qualche parte (prompt 1,2,3 - esempio 1 di 3 scatti - example2).
Se non tieni particolarmente all'app creata da prompt1, potresti perfezionare il prompt, eliminare il codice e ricominciare con il codice modificato (prompt 1 v1, prompt1 v2, prompt1, v3, ..)

Naturalmente, puoi combinare i due approcci.

Funzionalità mobile

A seconda del gioco che crei, potresti aver bisogno di un'interazione con l'utente. Questa interazione richiede una tastiera? Oppure può essere utilizzato semplicemente toccando lo schermo (ad es. con un cellulare)? Assicurati di specificarlo nel prompt. Potresti dover creare alcuni pulsanti sulla tastiera (vedi il mio esempio di Tetris 3D). Vedi anche dungemoji per la compatibilità con i dispositivi mobili.

Feedback sugli errori JavaScript / screenshot direttamente su Gemini

Poiché Gemini non può vedere la tua interazione con p5js, assicurati di incollare su Gemini eventuali errori JavaScript. Tieni presente che Gemini è multimodale, quindi se hai modifiche all'interfaccia utente (ad esempio, riduci le dimensioni del titolo o abbassa il punteggio), puoi anche allegare screenshot del gioco. Il feedback sul codice non è mai stato così divertente.

7. Complimenti!

🎉 Congratulazioni per aver completato il codelab.

Abbiamo visto quanto è facile creare un gioco con Gemini e come Firebase fornisca una soluzione di hosting semplice per salvare e condividere il gioco con altri.

Argomenti trattati

Crea un gioco tramite Gemini 2.5.
Esegui il deployment in Firebase

Ora è il momento di 👥 vantarti! Perché non condividi il tuo ultimo gioco (your-project.web.app) su LinkedIn o Twitter con l'hashtag #VibeCodeAGameWithGemini (e magari tagghi l'autore su LinkedIn)? In questo modo, potremo sapere quanto è accattivante questo codelab e magari scriverne altri di questo tipo.

Voglio di più.

Se stai cercando altre risorse, prova questi giochi e prompt:

Crea cinque giochi per bambini con Gemini 2.5 e p5.js in un fine settimana. Questo articolo ti guiderà nel processo di codifica dell'atmosfera di un gioco con sei esempi.
palladius/genai-googlecloud-scripts (repository GitHub con circa 10 app: codice e prompt): Tetris, Pacman, Forza 4 e persino un clone di Rogue per i nostalgici. Contiene i prompt di tutti questi giochi. Scegli il tuo preferito, adatta il prompt e goditi il momento.

Alcuni giochi di esempio che puoi creare:

Il gioco finale potrebbe avere questo aspetto:

Un Tetris 3D
Un gioco linguistico
Un clone non autorizzato
Un clone di Pac-Man.

Ancora una volta, l'inglese è il limite.

🎉 Buona programmazione!