Cerca con Google

Translate

5 aprile 2013

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

8 commenti:

  1. Ciao :) ho iniziato da poco con questo programma e sono ancora alle basi ma volevo sapere se é possibile creare un app in cui inserendo un limite o una derivata e perché no un integrale questa sia in grado di risolverlo magari con qualche passaggio XD

    RispondiElimina
    Risposte
    1. devi controllare nelle funzioni matematiche (della palette "math") cos'hai a disposizione, non mi pare ci siano direttamente delle funzioni che ti permettono di risolvere questo tipo di operazioni matematiche.
      Però se trovi ad esempio un algoritmo in c++ o in java che lo risolve, si può trasportare abbastanza agilmente anche in AI.
      Ti consiglio di vedere bene la parte matematica di AI per farti un idea più chiara, puoi cominciare guardando l'help ufficiale a questo indirizzo:

      http://beta.appinventor.mit.edu/learn/reference/blocks/math.html

      Elimina
  2. Ciao Sebastiano
    Non so se lo ritieni opportuno ma vorrei chiederti un tutorial dove si possa fare questo gioco in modalità multiplayer. Per spiegarmi meglio in modo che 2 o più giocatori possano sfidarsi contemporaneamente e vedere chi è più veloce e bravo ad indovinare il risultato corretto.... L'app con questa funzionalità richiede l'oggetto TiniyWebDB ? Se si, sarebbe interessante anche per capire meglio questo componente.

    Grazie mille e come sempre complimenti!

    RispondiElimina
  3. Ciao Sebastiano! mi sono studiata questa lezione, visto che brava! :D
    molto chiara e utile al mio caso!
    Grazie davvero per questi tutorial che ci metti a disposizione, quando me ne capita l'occasione ti farò pubblicità !

    A questo punto farei la maledetta e ti chiederei un'ultima cosa.. giuro che è l'ultima!
    Come faccio a far comparire sullo stesso punto dello schermo, 5 immagini una alla volta, a rotazione, una ogni tot millisecondi?
    Devo creare un movimento, un libro che si sfoglia... con un tasto start ed uno stop.. azz!
    le gif animate mi sa che non vanno vero?
    Sto provando col clock ma mi fuma il cervello e non succede nulla di interessante..... :-O



    RispondiElimina
    Risposte
    1. non son sicuro che le gif animate vadano (e siano la soluzione migliore)
      ti conviene fare così,
      metti un elemento immagine,
      crei una lista dove ogni elemento è il nome di una delle 5 immagini, quindi diciamo img1.gif, img2.gif e così via ad esempio...
      metti un elemento clock
      all'evento clock.timer cambi il source dell'immagine con l'elemento con la lista delle immagini incrementato del valore 1,
      metti un controllo if e controlli if numero immagine > numero ultima immagine then numero immagine = 1
      (in modo da ricominciare dall'inizio con la prima immagine dopo che hai visualizzato l'ultima)
      Insomma ora devi impratichirti con liste e clock...
      in bocca al lupo!

      Elimina
  4. Ok credo di aver capito.. ci provo!
    GRAZIE MILLE! TECNOFENOMENO!! :-)

    RispondiElimina
    Risposte
    1. Forse ho capito perche non ci sto capendo niente con le procedure e le variabili, sto usando app inventor da 2 settimane quindi non faccio testo.. ma sto usando ai2, da quanto ho capito il primo era piu semplice..

      Elimina