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

29 minuti rimanenti

Informazioni su questo codelab

Ultimo aggiornamento: mag 13, 2025

Scritto da: Riccardo Carlesso

Questa pagina è stata tradotta dall'API Cloud Translation.

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à "Codifica avanzata" [video]:

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

In questo codelab, imparerai a "codice di vibrazione" una semplice app per bambini, partendo da un prompt comune e personalizzandola in base ai tuoi gusti. Testeremo l'app su p5.js. Infine, trasferiremo queste modifiche a Firebase Hosting. La cosa più sorprendente è che l'intero stack è attualmente senza costi.

Obiettivi didattici

Utilizza Gemini 2.5 per creare il codice di un'app di gioco.
Testa il codice su p5js.org
Come eseguire l'iterazione e perfezionare il prompt / l'app.
Come ospitare un'applicazione statica su Firebase

Tieni presente che questo codelab utilizza codice generato con l'IA, che non è deterministico, pertanto questo codelab contiene linee guida in quanto l'output è sconosciuto all'autore. Inoltre, NON utilizzare questo codice in produzione.

Se ti piace questo codelab, dai un'occhiata a 🔥 Firebase Studio, che offre un'esperienza di programmazione elegante e integrata.

2. Prerequisiti

Questo codelab è suddiviso in due fasi:

Sviluppo solo sul web. Qui ti divertirai di più e non sono necessarie competenze di programmazione. Per farlo, utilizzeremo la nostra UI di Gemini ( gemini.google.com) e p5.js.
Ambiente di programmazione locale. A questo punto sono necessarie alcune competenze di programmazione / scripting, oltre all'installazione e all'utilizzo di npm / npx e di un editor locale, come vscode o IntelliJ o qualsiasi altro. Questa seconda parte è facoltativa e necessaria solo se vuoi che la tua applicazione persista per consentire ad amici e familiari di giocarci da dispositivi mobili o computer.

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

Interfaccia utente di Gemini

gemini.google.com è una piattaforma fantastica in cui puoi provare tutti i modelli Gemini più recenti e creare le tue immagini e i tuoi video. È dotato di un'ampia gamma di integrazioni Google, come Google Maps e Hotel/Voli/Recensioni, che lo rendono il compagno ideale per pianificare la tua prossima vacanza.

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

p5.js

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

Codifica locale [facoltativa]

Se vuoi mantenere l'applicazione, è necessaria una configurazione aggiuntiva:

Un editor di codice locale ( Visual Studio Code, IntelliJ e così via)
Un account Git ( github / gitlab / bitbucket) in cui conservare il codice.
Un npm installato localmente, meglio se nello spazio utente (tramite npx o tecnologia equivalente).

Inoltre, configureremo un account Firebase in un secondo momento.

Sono inoltre richieste 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 sembra complicato, ricorda: gli LLM sono molto utili per aiutarti. Ad esempio, puoi utilizzare il modello "Gemini 2.0 flash" o un modello equivalente per ricevere suggerimenti. Se la procedura è ancora troppo complessa, puoi saltare completamente la fase 2. La Fase 1 dovrebbe essere sufficientemente gratificante.

3. Creiamo la nostra prima partita.

Apri gemini.google.com e scegli un modello compatibile con il codice, ad esempio 2.5. Questa scelta potrebbe variare in base a disponibilità, costo e data. Al momento della stesura di questo documento, la scelta migliore è:

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

Puoi trovare ulteriori informazioni sui nostri modelli Gemini qui.

Il nostro primo prompt per i giochi

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' il messaggio:

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

Dopo aver incollato il prompt nel browser, dovresti osservare che Gemini ragiona.Esatto, Gemini 2.5 è un modello pensante, quindi avvierà una serie di attività che puoi osservare nel tempo. Puoi fare clic sul menu a discesa in evoluzione per vedere cosa succede o semplicemente attendere il risultato:

Alla fine, dovresti avere un codice 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 accadere due cose: il codice funziona o non funziona. Segui le istruzioni a seconda dei casi:

Il codice non va a buon fine
Il codice funziona al primo tentativo.

Vediamo nei prossimi due paragrafi 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 corregga il codice per te.

(Caso 2) Il mio codice funziona

Se il codice funziona, dovresti vedere un gioco visivo nella parte destra della pagina.

👏 Congratulazioni, hai pubblicato il tuo primo gioco con l'IA.

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

Ora è il momento di salvare il codice da qualche parte, nel caso in cui lo interrompi. Se vuoi, puoi eseguire un'iterazione. Ad esempio, all'autore piace molto il doppio salto di Super Mario, quindi potresti aggiungere qualcosa di simile:

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

Puoi modificare tutto ciò che vuoi, non ci sono limiti. Ad esempio, potresti salvare il nome del personaggio per punteggi più elevati, aumentare la velocità nel tempo per renderlo più difficile e così via. La lingua inglese è il limite del tuo prompt.

Suggerimento:Gemini tende a fornirti solo la modifica da applicare (ad es. questa è la modifica per la funzione XYZ). Ti consigliamo di 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 taglio e incolla sarà più semplice.

Avvertenze

Ti consigliamo di aggiungere la chat di Gemini ai preferiti. Potresti rinominarlo in "p5js my first game" o annotare il permalink a Gemini, ad esempio " https://gemini.google.com/app/abcdef123456789" per utilizzarlo in un secondo momento.

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 programmazione locale con npm installato.

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

Installa le dipendenze

Se mancano npm e node, ti consigliamo di installare npm tramite un gestore delle versioni, ad esempio nvm . Segui le istruzioni di installazione per il tuo sistema operativo.

Inoltre, presupponiamo che tu stia utilizzando un IDE per la programmazione. Utilizzeremo Visual Studio Code negli screenshot e negli esempi, ma qualsiasi IDE va bene.

Configura l'ambiente locale

È il momento di creare la tua struttura di file.

Uno script di configurazione è riportato a scopo illustrativo. 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 di cartelle finale 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 di Gemini e qui metterai la pagina di destinazione dell'app quando sarà disponibile.
PROMPT.md ← Qui puoi aggiungere tutti i prompt, separati da un paragrafo H2. Se vuoi spiegare il motivo per cui hai fornito un determinato prompt, puoi racchiuderlo tra tre barre verticali ( esempio).
**public/index.html** ← copia qui il codice HTML
**public/sketch.js** ← copia qui il tuo codice JS
**public/style.css** ← copia qui il codice CSS

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

5. Configura e esegui il deployment in Firebase

Configura Firebase (solo la prima volta)

Assicurati di avere installato npm sul computer.

In un terminale, digita una delle seguenti opzioni (entrambe 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, segui le documentazioni pubbliche.

Inizializza Firebase

In questa sezione configureremo Firebase Hosting. Si tratta di un flusso molto semplice, ma la prima volta potrebbe essere necessario un po' di tempo per acquisire familiarità con questa procedura.

Assicurati di trovarti nella directory direttamente sopra la directory public/ contenente i tuoi file. La scheda (ls -al o dir) dovrebbe mostrare qualcosa di simile al seguente:

$ ls 
PROMPT.md
README.md
public/

[passaggio 1] Nella console, digita: firebase init

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

Nota: se hai già un progetto Cloud, potrebbe non essere un progetto Firebase. I progetti Firebase sono un sottoinsieme dei progetti Google Cloud. Devi eseguire ulteriori operazioni per trasformarli in un progetto Firebase, ed è a questo che serve l'opzione 3.
Se hai dubbi, utilizza "Crea un nuovo progetto" e aggiungi un nome come "p5js-TUO NOME-TUA APP" (ad es. "p5js-riccardo-tetris").

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

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

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

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

[passaggio 7] ? File public/index.html already exists. Overwrite? (y/N)
Premi Invio (no).
AVVERTENZA 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 vedere questo:

Queste azioni dovrebbero aver creato alcuni file:

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

In particolare, .firebaserc deve contenere l'ID progetto che puoi estrarre in modo programmatico con questo: 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 file index.html da Git o dall'editor p5js.

Test locale

Per ridurre la latenza del loop di feedback, ti consigliamo di provare prima a livello locale.

A tal fine, puoi provare la potente suite CLI del team di Firebase. Ad esempio:

$ firebase emulators:start

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

Esegui il deployment in Firebase

Ora è il momento del comando finale:

$ firebase deploy

Ciò dovrebbe attivare una serie di azioni. Le ultime righe dovrebbero avere il seguente aspetto:

$ 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 è andato a buon fine, ma noti una pagina vuota o un deployment altrimenti non funzionante, 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 ]

♾️ Esegui l'iterazione.

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

È importante tenere presente alcune cose:

Il ciclo di iterazione è molto più veloce nel ciclo Gemini > p5.js > Gemini rispetto a Gemini > host locale > esegui il deployment in Cloud Run > testa l'app sul browser (premi Aggiorna).
Utilizza Git per il controllo della versione sia del prompt che del codice. Potresti voler tornare al prompt N e al codice N. In particolare, devi eseguire il commit di ogni singolo sketch.js che effettui il push, poiché potrebbero esserci bug non rilevati.

Tieni presente che alcuni giochi funzionano bene con una tastiera, ma non con il mouse o con i tocchi sul cellulare. Questo è un ottimo momento per migliorare il codice.

6. Suggerimenti per i prompt

Ecco alcuni suggerimenti dopo aver creato già diversi giochi.

Eseguire il controllo della versione del prompt

È probabile che tu trovi errori nel prompt originale. Avere una versione git. Esistono diversi percorsi di codice:

Se ti piace quello che vedi e vuoi eseguire l'iterazione con gemini con i prompt secondari successivi, potrebbe essere interessante trovarli tutti da qualche parte (prompt 1,2,3 - esempio1 con 3 foto - example2).
Se invece non ti preoccupi dell'app creata da prompt1, potresti perfezionare il prompt, eliminare il codice e riavviare con il codice modificato (prompt 1 v1, prompt1 v2, prompt1 v3 e così via).

Ovviamente, puoi combinare i due approcci.

Funzionalità per il mobile

A seconda del gioco creato, potresti dover interagire con l'utente. Questa interazione richiede una tastiera? In alternativa, può essere utilizzato semplicemente toccando lo schermo (ad es. con un dispositivo mobile)? Assicurati di essere esplicito al riguardo nel prompt. Potresti dover creare alcuni pulsanti sulla tastiera (vedi il mio esempio di Tetris 3D). Consulta anche i problemi relativi alla compatibilità mobile con dungemoji.

Inviare feedback su errori / screenshot di JavaScript 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 apportato modifiche all'interfaccia utente (ad esempio hai reso il titolo più piccolo o abbassato 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 sia facile creare un gioco con Gemini e come Firebase fornisca una semplice soluzione di hosting per mantenere e condividere il tuo 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 la tua ultima partita (your-project.web.app) su LinkedIn o Twitter con l'hashtag #VibeCodeAGameWithGemini (e magari tagghi l'autore su LinkedIn)? In questo modo potremo capire quanto sia accattivante questo codelab e, eventualmente, scriverne altri di questo tipo.

Ne voglio di più.

Se stai cercando altre risorse, dai un'occhiata a questi giochi e prompt:

Crea cinque giochi per bambini con Gemini 2.5 e p5.js in un fine settimana. Questo articolo ti guiderà nella procedura di creazione di un gioco con 6 esempi.
palladius/genai-googlecloud-scripts (repo GitHub con circa 10 app, codice e prompt): Tetris, Pacman, Quattro e persino un clone di Rogue per i nostalgici. che contiene i prompt di tutti questi giochi. Scegli il tuo preferito, adatta il prompt e goditi l'atmosfera.

Se quello che hai fatto oggi ti sembra troppo impegnativo, puoi anche provare 🔥 Firebase Studio, dove il ciclo idea > prompt > codice > app è tutto contenuto in un'unica finestra del browser.

Ecco alcuni giochi di esempio che puoi creare:

Il gioco finale potrebbe avere il seguente aspetto:

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

Anche in questo caso, l'inglese è il limite.

🎉 Buona programmazione!

Segnala un errore