Memory Game

 

Udite, udite, sono tornato a fare video!Emozionatissimo e si vede😂

Con gioia immensa, e con molta difficoltà, sono riuscito a realizzare un video su come creare un Memory 👉 VIDEO . 

Il blog mi permette di lavorare anche in orari strani e tempi morti, cosa che la realizzazione di un video non mi permette , senza parlare della post produzione ma sicuramente permette una spiegazione migliore e più arricchita, con minor spesa, rispetto alle parole scritte. 

Ho perso completamente la mano 😂 ( quel poco che avevo ) e sono stato di un lungo mai visto , come tornare a parlare con un amico dopo anni di lontananza.

Super contento ma voglio comunque realizzare anche la versione scritta per tutti gli amanti delle parole e quelli che non amano o non possono visualizzare un video.

Partiamo subito e vediamo come realizzare un Memory, prima di tutto le variabili, avremo score per salvare il punteggio, selectedcard per salvare le carte selezionate, TempList che accoglierà 16 numeri mescolati, una mega lista ListofButtons con tutti i componenti buttons che diventeranno le nostre tessere del gioco e la mega lista ListOfImages con tutti gli assets, nel nostro caso 8 coppie di carte diverse.

Scopo del gioco molto semplice, girando due carte alla volta bisogna trovare due immagini uguali altrimenti saranno coperte nuovamente per riprovare, si vince dopo aver scoperto tutte le coppie.

La parte grafica è molto semplice, ho utilizzato un table arrangement per posizionare velocemente a scacchiera 16 carte, ho usato i buttons, duplicandoli velocemente con ctrl+c e ctrl+v , nel video faccio vedere tutta la procedura ed eventuali errori o bug a cui poter andare incontro.

Un pulsante di avvio gioco, un clock e un notifier completano il pacchetto. Passiamo subito alla fase di inizializzazione dove grazie alla lista con tutti i pulsanti e i blocchi Any andremo a settare la grandezza delle nostre tessera in funzione della grandezza del display in uso , nel mio caso ho preferito impostare un piccolo bordino laterale e lasciare tutto lo spazio alle carte. Dividendo la larghezza dello screen per 4, perché una composizione di 4x4 carte, e sottraendo qualche pixel che andrà quindi a creare lo spessore del bordo. La dimensione così trovata sarà utilizzata sia per la larghezza che per l'altezza ma se volete potrete anche impostarle rettangolari o tonde, l'ultimo blocco any del for each imposta la visualizzazione del bordo per ogni carta.

La procedura alla fine è molto semplice quanto utile infatti la useremo spesso per settare velocemente tutti i pulsanti abilitati o meno grazie al valore condition che passiamo di volta in volta, in questo caso il valore false disabilita tutti i buttons per evitare click indesiderati. Il for each all'interno della procedura setta lo stato enable per tutti i pulsanti. Il pulsante Start ci permette di impostare correttamente tutti i dati prima della partita azzerando il punteggio, aggiornando la label per visualizzare il punteggio e, molto importante, azzerando la lista Temp . 

 L'utilizzo di una variabile locale e un for each da 1 a 16 ci permette di estrarre un numero casuale e poi tramite il while controllare se il valore estratto è presente nella lista temporanea. In questo caso il while continuerà ad estrarre valori fino a quando non troverà di volta in volta un numero ancora non presente nella lista, mescolando così i valori. Il valore estratto sarà aggiunto alla lista e ogni carta sarà impostata con l'immagine del dorso utilizzando number come indice così da essere sicuri di prelevare correttamente tutti e 16 i pulsanti. 

Impostiamo il pulsante non visibile e abilitiamo tutti i buttons infatti passiamo come valore true. 

Passiamo al pezzo forte, il click sulle carte, ad ogni selezione dovremo essere sicuri di interagire con le sole carte coperte, controllare il risultato e se le coppie sono uguali assegnare un punteggio altrimenti attendere per memorizzare la posizione per poi ricoprire le carte.

La prima condizione possiamo impostarla molto semplicemente con un if che verifica se l'immagine del pulsante cliccato è card.png ovvero il dorso, utilizzando la nuova ( ormai vecchie ) variabile che contiene tutti gli assets, la troviamo nei blocchi dello screen.

Il valore component ci velocizza tutte le operazioni riportando il direttamente il componente cliccato.

Subito dopo il click aggiungiamo il componente all'interno della lista delle carte selezionate e impostiamo l'immagine della carta. Lavoreremo con due liste fisse e una variabile ( TempList), con l'indice del componente selezionato andiamo nella lista temporanea a prelevare un valore sempre diverso ad ogni partita e con questo numero andare nella lista delle immagini per prelevare quella da mostrare al click. Ecco che entra in gioco la lista delle carte selezionate perché dopo il secondo click avremo due carte al suo interno e la verifica se lunghezza della lista =2 ci permette di capire che è il momento di effettuare il controllo delle immagini.  

Come anticipato avremo due possibili scenari, le carte girate sono uguali o diverse, quindi la prima cosa da fare è verificare se l'elemento uno e due della lista hanno la stessa immagine, verifica facilitata sempre grazie ai blocchi any in questo caso button.image.

Se le immagini corrispondono assegniamo il punteggio, aggiorniamo la label punteggio e molto importante azzeriamo la lista delle carte selezionate altrimenti non potremo effettuare una nuova selezione. Sempre all'interno del primo scenario dobbiamo introdurre un if per verificare quando il punteggio è uguale a 40 ( nel mio caso perché ho 8 coppie e assegno 5 punti a coppia, quindi 8x5 è il punteggio massimo ) in questo caso mostro il pulsante start per una nuova partita e mando una notifica di vittoria.

Nel caso contrario , se le immagini sono diverse disabilitiamo i pulsanti e attiviamo il clock che ci permetterà di creare un ritardo per memorizzare le carte e in seguito riposizionarle di dorso.

Nel codice del clock infatti abbiamo , il blocco del clock stesso per evitare errori , e un ciclo per impostare le due carte selezionate ( quindi tutte quelle in selectedcard ) nuovamente di dorso. Anche qui vediamo l'importanza di azzerare la lista delle carte selezionate e riabilitiamo i pulsanti per essere cliccati nuovamente.

Il tutorial è già finito, naturalmente le personalizzazioni le lascio a voi e altri piccoli particolari o curiosità le potrete trovare nel video e mi raccomando fatemi sapere cosa ne pensate.

Super apprezzato un like sul video e se vi fa piacere un commento, rimangono sempre attivi i soliti canali di comunicazione.

Sperando di pubblicare un altro video presto vi saluto.

Al prossimo tutorial

      Raffaele 

Hai apprezzato il mio lavoro?Se ti va puoi offrirmi un bel caffè 😍