LEZIONI E FORMAZIONE DAI DOCENTI PER I DOCENTI

Scopri WeTurtle, la community di educatori dove trovare e condividere risorse innovative

home - tutorial - TUTORIAL - SCHIACCIA LA ZANZARA CON APP INVENTOR

TUTORIAL - SCHIACCIA LA ZANZARA CON APP INVENTOR

In questo tutorial vedremo come realizzare con App Inventor 2, un’applicazione che simuli un semplice gioco, tipo Schiaccia La Zanzara: prova a colpire la zanzara che si muove sullo schermo del tuo smartphone! Attenzione, il gioco conterà tutte le volte che con il dito non riesci a colpirla.

  by Luca Balestra
App Inventor 2

Tempo di lettura/visione: 6 min

Introduzione

In questo tutorial vedremo come realizzare con App Inventor 2, un’applicazione che simuli un semplice gioco, tipo Schiaccia La Zanzara: prova a colpire la zanzara che si muove sullo schermo del tuo smartphone! Attenzione, il gioco conterà tutte le volte che con il dito non riesci a colpirla.

Nello specifico tratteremo:
  • Step preliminari
  • Progettazione dell’interfaccia grafica
  • Stesura del codice
  • Possibili sviluppi
Tecnologia:
Se sei interessato alla creazione di giochi con App Inventor, ti consigliamo anche il tutorial LA PALLA 8 MAGICA CON APP INVENTOR.

Step preliminari

Per poter realizzare una nuova applicazione devi seguire questi step preliminari:
  • collegati al sito https://appinventor.mit.edu/;
  • clicca su Create Apps in alto ed esegui l’accesso tramite un account Gmail;
  • clicca su My Projects in alto e poi su Start new project per passare ad una finestra dove inserire il nome del tuo progetto;
  • conferma tramite il bottone OK per passare alla schermata della modalità Designer;
  • utilizza questa schermata per realizzare la tua interfaccia grafica, trasferendo i componenti dalla Palette alla Viewer.

Progettazione dell’interfaccia grafica

Prima di poter passare alla fase di stesura del codice, è indispensabile progettare la GUI (graphical user interface), ovvero l’interfaccia con cui desideri l’utente interagisca durante l’utilizzo dell’applicazione.
Al termine di questa fase, lo Screen1 avrà un aspetto simile a quello di figura 1.
Nella modalità Designer, hai bisogno dei seguenti componenti:
  • un Canvas, che trovi nella sezione Drawing and Animation, e che permette di creare un pannello bidimensionale sensibile al tocco dove poter far muovere degli sprite (imposta Fill Parent nella proprietà Height, imposta Fill Parent nella proprietà Width);
  • un ImageSprite, che trovi nella sezione Drawing and Animation (rinominalo ImageSprite_Zanzara, imposta 60 pixels nella proprietà Height, imposta 60 pixels nella proprietà Width, inserisci un’immagine nella proprietà Picture);
  • un HorizontalArrangement, che trovi nella sezione Layout (imposta Center nella proprietà AlighHorizontal, imposta Center nella proprietà AlignVertical, imposta Fill Parent nella proprietà Width);
  • un Button, che trovi nella sezione User Interface (trascinalo dentro l’HorizontalArrangement, rinominalo Button_Ricomincia, scrivi RICOMINCIA nella proprietà Text, imposta Center nella proprietà TextAlignment);
  • un HorizontalArrangement, che trovi nella sezione Layout (imposta Center nella proprietà AlighHorizontal, imposta Center nella proprietà AlignVertical, imposta Fill Parent nella proprietà Width);
  • un Label, che trovi nella User Interface (trascinalo dentro l’HorizontalArrangement, rinominalo con Label_ZanzareColpite, scrivi “ZANZARE COLPITE:” nella proprietà Text);
  • un Label, che trovi nella User Interface (trascinalo dentro l’HorizontalArrangement a destra della Label_ZanzareColpite, rinominalo con Label_NumeroZanzareColpite, scrivi “0” nella proprietà Text);
  • un HorizontalArrangement, che trovi nella sezione Layout (imposta Center nella proprietà AlighHorizontal, imposta Center nella proprietà AlignVertical, imposta Fill Parent nella proprietà Width);
  • un Label, che trovi nella User Interface (trascinalo dentro l’HorizontalArrangement, rinominalo con Label_ZanzareMancate, scrivi “ZANZARE MANCATE:” nella proprietà Text);
  • un Label, che trovi nella User Interface (trascinalo dentro l’HorizontalArrangement a destra della Label_ZanzareMancate, rinominalo con Label_NumeroZanzareM, scrivi “0” nella proprietà Text);
  • un Clock (componente invisibile), che trovi nella sezione Sensors, e che permette di generare un evento dopo un intervallo di tempo prestabilito;
  • un Sound (componente invisibile), che trovi nella sezione Media, e che permette di far vibrare lo smartphone per un intervallo di tempo prestabilito.
Per inserire un’immagine nella proprietà Picture del componente ImageSprite_Zanzara:
  • scarica da internet un’immagine di una zanzara (in formato .png) e rinominala ZANZARA;
  • clicca sul bottone Upload File nella sezione Media, sotto la sezione Components;
  • clicca sul bottone Sfoglia per aprire l’immagine e conferma tramite il bottone OK;
  • seleziona l’immagine appena caricata nella proprietà Picture del componente ImageSprite_Zanzara.

Stesura del codice

Terminata la progettazione dell’interfaccia, non resta che scrivere il codice per definire il comportamento dei componenti inseriti.
Per prima cosa devi implementare una procedura che definisca il movimento casuale dell’ImageSprite_Zanzara all’interno del Canvas1 (figura 2):
  • passa dunque alla modalità Blocks, cliccando sul bottone dedicato che trovi in alto a destra della schermata;
  • trascina nella Viewer il blocco “to procedure do”, che trovi nella sezione Procedures, e rinominalo “to Movimento_Zanzara do”;
  • inserisici di fianco al do il blocco “call ImagineSprite_Zanzara.Move to”, che trovi tra le funzionalità del componente ImageSprite_Zanzara;
  • inserisci di fianco a x il blocco “random integer from 1 to 100”, che trovi nella sezione Maths, scrivendo “0” al posto di “1” e inserendo il blocco “difference” (che trovi sempre nella sezione Maths) al posto di “100”;
  • completa il blocco “difference” con il blocco Canvas1.Width, che trovi tra le funzionalità del componente Canvas1, e con il blocco ImageSprite_Zanzara.Width, che trovi tra le funzionalità del componente ImageSprite_Zanzara;
  • inserisci di fianco a y il blocco “random integer from 1 to 100”, che trovi nella sezione Maths, scrivendo “0” al posto di “1” e inserendo il blocco “difference” (che trovi sempre nella sezione Maths) al posto di “100”;
  • completa il blocco “difference” con il blocco Canvas1.Height, che trovi tra le funzionalità del componente Canvas1, e con il blocco ImageSprite_Zanzara.Height, che trovi tra le funzionalità del componente ImageSprite_Zanzara.
Per implementare il movimento del componente ImageSprite_Zanzara all’avvio dell’applicazione (figura 3):
  • trascina nella Viewer il blocco “when Screen1.Initialize do”, che trovi tra le funzionalità del componente Screen1;
  • inserisci di fianco al do il blocco “Call Movimento_Zanzara”, che trovi nella sezione Procedures, come mostrato nella figura 3.
Per implementare il movimento del componente ImageSprite_Zanzara allo scadere dell’intervallo di tempo definito nelle Properties del componente Clock1 (figura 4):
  • trascina nella Viewer il blocco “when Clock1.Timer do”, che trovi tra le funzionalità del componente Clock1;
  • inserisci di fianco al do il blocco “Call Movimento_Zanzara”, che trovi nella sezione Procedures.
Per implementare il conteggio delle zanzare colpite e delle zanzare mancate (figura 5):
  • trascina nella Viewer il blocco “when Canvas1.Touched do”, che trovi tra le funzionalità del componente Canvas1;
  • inserisci di fianco al do il blocco “if … then … else …”, che trovi nella sezione Control;
  • inserisci di fianco all’if il blocco “get touchedAnySprite”, che trovi nel blocco “when Canvas1.Touched do” cliccando su “touchedAnySprite”;
  • inserisci di fianco al then il blocco “set Label_NumeroZanzareColpite.Text to”, che trovi tra le funzionalità del componente Label_NumeroZanzareColpite;
  • inserisci di fianco al to il blocco “sum”, che trovi nella sezione Maths;
  • completa il blocco “sum” con il blocco “Label_NumeroZanzareColpite.Text”, che trovi tra le funzionalità del componente Label_NumeroZanzareColpite, e con il blocco “number” (scrivendo “1” al suo interno), che trovi nella sezione Maths;
  • inserisci di fianco all’else il blocco “set Label_NumeroZanzareMancate.Text to”, che trovi tra le funzionalità del componente Label_NumeroZanzareMancate;
  • inserisci di fianco al to il blocco “sum”, che trovi nella sezione Maths;
  • completa il blocco “sum” con il blocco “Label_NumeroZanzareMancate.Text”, che trovi tra le funzionalità del componente Label_NumeroZanzareMancate, e con il blocco “number” (scrivendo “1” al suo interno), che trovi nella sezione Maths.
Per implementare la vibrazione dello smarthphone quando la zanzara viene colpita (figura 6):
  • trascina nella Viewer il blocco “when ImageSprite_Zanzara.Touched do”, che trovi tra le funzionalità del componente ImageSprite_Zanzara;
  • inserisci di fianco al do il blocco “call Sound1. Vibrate millisecs”, che trovi tra le funzionalità del componente Sound1;
  • inserisci di fianco a millisecs il blocco “number” (scrivendo “100” al suo interno), che trovi nella sezione Maths.
Per implementare il funzionamento del componente Button_Ricomincia con l’azzaremento di tutti i conteggi (figura 7):
  • trascina nella Viewer il blocco “when Button_Ricomincia.Click do”, che trovi tra le funzionalità del componente Button_Ricomincia;
  • inserisci di fianco al do il blocco “set Label_NumeroZanzareColpite.Text to”, che trovi tra le funzionalità del componente Label_NumeroZanzareColpite, e il blocco “set Label_NumeroZanzareMancate.Text to”, che trovi tra le funzionalità del componente Label_NumeroZanzareMancate;
  • inserisci di fianco ai to i blocchi “number”, che trovi nella sezione Maths.

Possibili sviluppi

L’applicazione presenta dei possibili sviluppi:
  • è possibile inserire nell’interfaccia grafica dei componenti Label per tenere traccia e visualizzare il numero di zanzare apparse;
  • è possibile inserire nell’interfaccia grafica dei componenti Button per aumentare o diminuire la velocità delle zanzare;
  • è possibile inserire nell’interfaccia grafica un altro componente ImageSprite, con l’immagine di un altro animale (per esempio una coccinella) che l’utente non deve colpire.
Prova a implementare questi sviluppi e raccontaci come è andata a info@weturtle.org!

A questo link puoi scaricare il file del gioco creato da noi.

Riferimenti e links

Se vuoi maggiori informazioni o una consulenza o se vuoi far parte della famiglia We Turtle scrivi all'indirizzo email: info@weturtle.org

Per restare sempre aggiornato iscriviti alla piattaforma e segui We Turtle e TALENT su Facebook.

Vuoi leggere il tutorial quando vuoi, anche offline?





Vuoi fare una domanda all'autore?

oppure


GLI ALTRI UTENTI HANNO CHIESTO