Tutorial 44 - Realizzazione di un gioco matematico (indovina le frazioni) (array,random,funzioni matematiche...)

Benvenuti in questo nuovo tutorial !!!

Questa volta facciamo nuovamente qualcosa di diverso; prendendo spunto dall'idea di  un professore di matematica andremo a creare un vero e proprio gioco con App Inventor

Ovviamente il gioco sarà anche il pretesto per imparare meglio dei concetti base della programmazione , come le liste, gli indici, le variabili e le procedure.


Tutto questo sarà ovviamente realizzato in App Inventor con lo scopo di far avvicinare alla programmazione gli studenti del mio amico professore e perché no, dimostrare che a volte la matematica può anche essere divertente.

Il gioco lo abbiamo chiamato "Indovina le frazioni" e consiste appunto nell'indovinare il risultato di 10 frazioni in un tempo massimo di 20 secondi.
Ovviamente più frazioni si indovinano e più velocemente lo si fa e più il punteggio finale sarà alto.

Partiamo dal primo video in cui realizzeremo l'interfaccia (anche detta GUI) della nostra app, visto che lo scopo del gioco è quello di dare velocemente la risposta, abbiamo escogitato un metodo di inserimento del risultato molto rapido che si basa sulla creazione di un tastierino numerico usando i "button" di AI.

Ad ogni pressione di uno dei pulsanti da 0 a 9 andremo a "riempire" l'array "RispostaList" creato appunto con il componente "make a list", inserendo il numero corrispondente ed incrementando di 1 l'indice dell'array (chiamato "rispostaindex")
In questo array avremo la risposta inserita tramite tastierino dall'utente che visualizzeremo tramite le tra label "Lb_Dig1" "Lb_Dig2" e "Lb_Dig3" usando la select list item e prendendo appunto gli elementi dall'array precedente.

Completeremo il tastierino per il gioco con due pulsanti "Del" per cancellare tutto e "Inizia" che da il via al gioco vero e proprio.

Guardatevi quindi ora la creazione della parte di interfaccia grafica:

Passiamo ora alla seconda parte, quella della logica vera e propria del gioco e quella del calcolo delle frazioni e dei punteggi di gioco.

Si parte dalla creazione della frazione da indovinare, ovvero della domanda da formulare all'utente.

Usiamo la funzione "random integer" per generare un numero da 1 a 9 e la richiamiamo due volte per generare il numeratore ed il denominatore in due variabili distinte. Con "format as decimal" formattiamo a due cifre decimali il risultato della frazione.

Creeremo poi il risultato in forma di array con ancora "make a list" e "segment" (segment estrae da una stringa di testo uno o più caratteri) per prendere le prime 3 cifre significative della risposta.
Ad esempio se la frazione generata casualmente è 2/3 = 0,67 , in "Risultato" avremo 0,67 ma nell'array "RisultatoList" avendo usato le funzioni segment per estrarre il primo, terzo e quarto carattere avremo i valori (0 6 7)

In questo modo sarà estremamente semplice confrontare il risultato inserito dall'utente con il risultato corretto della frazione.

Infatti a questo punto, premendo il tasto "Ok" per dare la risposta che ipotizziamo esatta della nostra frazione basterà confrontare il valore dell'array memorizzato in "RispostaList" con "RisultatoList" usando il controllo "if"

Se la risposta è giusta (basta usare la funzione matematica "=") incrementiamo il punteggio, visualizziamo un messaggio all'utente con un notifier e prepariamo la domanda con la frazione successiva.
Se la risposta non è esatta, mostriamo quale sarebbe stata la risposta esatta (così chi usa l'app impara meglio le frazioni) , ed aspettiamo che l'utente prema il tasto "Prossima" per generare la prossima frazione.

Il resto dell'app prevede la gestione del clock e appunto dei punteggi, per cui vi invito a studiare attentamente il video (spero non risulti troppo noioso) per capire bene tutto quello che è stato fatto.
Se avete domande usate i commenti o il forum

Riassumo tutti gli elementi che abbiamo utilizzato che vi torneranno utili in moltissime altre applicazioni visto che si tratta di logica di programmazione generica (quindi valida anche al di fuori di App Inventor)

Design Editor:
dalla palette Basic:

• clock
• label
• button

dalla palette Other stuff:

• Notifier

Blocks Editor:
dalla palette Lists:

• make a list
• select list item
• replace list item

dalla palette Math:

• random integer
• format as decimal

dalla palette Control:

• if
• ifelse

dalla palette Text:

• segment

dalla palette Definition:

• procedure
• procedureWithResult

Se volete scaricare il sorgente del progetto per testarlo di persona, lo trovate QUA

Ovviamente il progetto può essere modificato e migliorato a piacere e viene fornito solo a scopo didattico