04 - Toro "vedorosso".
Logo di scratch
04 - Toro "vedorosso". /1
Logo di scratch
immagine

Ecco una bella App!


La pallina nera è il toro "vedorosso" che l'utente può muovere inclinando il dispositivo.
La piccola pallina rossa è l'obiettivo verso il quale muovere il toro.
La piccola pallina rossa cambia posizione ogni 5 secondi e la posizione è sempre casuale.
Quando il toro incorna il telo rosso: il pubblico grida "Olè!" fino a far vibrare il dispositivo, viene assegnato un punto e la piccoola pallina rossa ri-compare da un'altra parte.


Te la senti?


Prima di cominciare devo dirti che se per testare questa App
è indispensabile un dispositivo
perchè l'emulatore non può essere inclinato!!


Bene, avvia un nuovo progetto e chiamalo "toro_vedorosso".


La sezione delle proprietà all'inizio è relativa allo screen: modifica subito la sua proprietà title come nell'immagine in alto.


Aggiungi al progetto un canvas (con width ed height a Fill parent)
e su di essa due elementi Ball.

immagine

La prima la chiami PallinaUtente
e la seconda PallinaDaColpire.

Per modificare il nome di un elemento
selezionalo nella sezione Components
e fai click sul tasto rename.

Poi imposta il colore di PallinaDaColpire a rosso
e la proprietà Radius di PallinaUtente a 15.

04 - Toro "vedorosso". /2
Logo di scratch

Adesso ci occuperemo della gestione della pallina da colpire.
Questa pallina compare in coordinate a caso ogni 5 secondi.


immagine

Dalla sezione Sensors della Palette
trascina sul tuo screen un elemento Clock
Esso apparirà sotto lo screen come qui accanto.


Imposta la sua proprietà TimeInterval a 5000 (5 secondi).


immagine

Passa in modalità Bloks.


immagine

Con questi blocchi
andiamo a spostare la nostra pallina rossa alle nuove coordinate
ogni volta che scade il timer.


Posto che non conosciamo le dimensioni dello schermo del dispositivo in uso,
come fare a scegliere una coppia di coordinate tra tutte quelle possibili?

immagine

Consideriamo che se moltiplichiamo la larghezza dello schermo per 0.5 siamo giusto alla metà del monitor.

Se invece che moltiplicare per 0.5 moltiplichiamo per un numero a caso
tra 0.01 e 1.00 abbiamo un punto qualsiasi lungo tutto lo schermo.

immagine

Realizza le due procedure (una per l'ascissa e una per l'ordinata)
e invoca le due procedure nel blocco relativo allo scadere del timer.


immagine

Adesso testa l'app.

04 - Toro "vedorosso". /3
Logo di scratch

Occupiamoci ora di muovere la pallina grande.


immagine

Vai in modalità Designer
e aggiungi un elemento OrientationSensor.


Torna in modalità Blocks e aggiungi il seguente blocco.

immagine

Hai provato l'app?

Hai provato un senso di frustrazione
nel vedere che la pallina nera si muove in modo lentissimo?

immagine

Bene,
allora accelera


E quando la pallina grande tocca la pallina piccola?

Per intercettare questo evento scegli il blocco CollideWith di PallinaUtente.

immagine

Questo blocco ha il parametro other
che serve per indicare
(e riferirsi)
all'oggetto con il quale stiamo collidendo.

Trattieniti su other e scegli set other to.
A questo blocco aggancerai il blocco identificativo di PallinaDaColpire
(che è l'ultimo suo blocco).


Cosa deve accadere quando si toccano?

Per prima cosa dobbiamo resettare il timer
e far apparire la pallina piccola da qualche altra parte.

Poi vogliamo visualizzare il messaggio "Olè!"

Poi vogliamo sentire vibrare il dispositivo.

Infine vogliamo vedere aumentare il nostro punteggio.

04 - Toro "vedorosso". /4
Logo di scratch

Cominciamo con la gestione del timer.

immagine

Per resettare il timer lo disabilitiamo e poi lo riabilitiamo subito dopo

Se aggiungiamo questo due blocchi al blocco di gestione della collisione
la pallina rossa resterà lì ferma per altri 5 secondi!

Dobbiamo spostarla in un altro punto a caso.

Poichè deve succedere esattamente quello che succede quando scade il timer
realizziamo una procedura (con il codice vecchio)
e invochiamola in entrambi i casi.

immagine

Per far comparire un popup a video dobbiamo usare l'elemento Notifier.

immagine

Vai in modalità Designer e nella sezione User Interface
della Palette di elementi, scegli Notifier.

immagine

Torna in modalità Blocks
e produci il blocco qui accanto.


Per far vibrare il dispositivo useremo un elemento Sound.

immagine

Vai in modalità Designer
e seleziona un elemento Sound della Palette (sezione Media).

immagine

Torna in modalità Blocks
e realizza il blocco a sinsitra
per far vibrare il dispositivo per 25 millisecondi.


Non resta che occuparsi della gestione del punteggio.

Qui la questione è su due fronti:
dobbiamo gestire una variabile globale che tiene traccia del punteggio
e dobbiamo gestire una etichetta di testo a video che riporta il punteggio stesso.

04 - Toro "vedorosso". /5
Logo di scratch
immagine

Per creare una variabile e contestualmente inizializzarla all'avvio dell'app,
in modalità Blocks vai in Built-in | Variables
e piazza questo blocco separato da tutti gli altri.


Questa variabile globale deve essere incrementata di uno
ogni volta che la pallina nera tocca la pallina rossa.

immagine

Aggiungi quindi questo blocco al blocco che gestisce la collisione.


Per avere traccia di questo variabile sul video,
andiamo in modalità Designer
e aggiungiamo al progetto un elemento di tipo Label (in User Interface).

immagine

Andiamo poi ad intervenire sulle seguenti proprietà:
BackgroundColor diventa gray e TextColor diventa White;
su Text scriviamo "PUNTEGGIO" senza i doppi apici;
TextAlignment viene portato a center;
e Width a FillParent;


Successivamente, in modalità Blocks andiamo a posizionare
il seguente blocco in coda ai blocchi da eseguire
all'atto della collissione.

immagine

Bene, abbiamo finito!

Quando ti sei stufato di giocare puoi rendere la tua app re-distribuibile.

04 - Toro "vedorosso". /6
Logo di scratch

Per installare un'app prodotta con AppInventor su un dispositivo Android
bisogna avere il file .apk dell'app.


Produci il file .apk sul PC così come mostrato in figura.

immagine

Fai arrivare questo file .apk sul dispostivo Android
(anche via email va bene)
e poi toccalo per installare l'applicazione.


Attenzione!
Per poter installare i tuoi .apk è indispensabile che le impostazioni del tuo telefono consentano l'installazione da fonti diverse da Google Play.


Siamo giunti alla sfida.


Devi modificare questa app affinchè la pallina da colpire possa essere di due tipi.

Un primo tipo è quello che conosciamo:
il suo colore è il rosso, la sua durata è 5 secondi e dà dritto a un punto.

Il nuovo tipo di pallina da colpire è di colore blu,
dura solo due secondi e mezzo e dà ben 5 punti.

Poichè la pallina blu è evidentemente più preziosa
avrà il 25% di probabilità d'uscita
mentre quella rossa avrà il restante 75%.