Emanuel Mares

Tech - Fotografie - Timp liber

Parcursul FEND – Saptamana 6 Proiect memory game

De curand am terminat si proiectul cu numarul 3 al programului. Asta am cam facut aceasta saptamana, drumul pana si dupa proiectul cu numele ‘memory game’.

Proiectul cerea crearea unui joc de potrivire a 2 imagini identice pe o tabla de 4×4 carti. Se cerea: animatii pentru certile ce se potrivesc si cele ce nu, animatie pentru operatie de intoarcere a unei carti, generarea pozitiei aleatorie a imaginilor, un timer ce porneste la inceputul jocului, stabilirea numarului de mutari facute si un scor in sistemul a trei stele.

Cum am facut?

Pentru inceput am luat incoane de la font-awesome, am generat o lista cu numele icoanelor, o functie genereaza un set de 8 cifre, reprezentand 8 icoane folosite fiind atribuite de doua ori unei pozitii, de asemenea generata aleatoriu pana la 16 cifre(de exemplu [(8,15), (8,3), (5,1), (4,8)…] in care primul element din tupla e icoana si al doilea e pozitia in care se afla). Pentru numere aleatorii am folosit Math.random().

Ok, plansa e generata si icoanele au fost plasate. Acum urmeaza sa stim daca 2 carti se potrivesc, moment in care li se atribuie clasa ‘match’ altfel se adauga clasele ‘open’ si ‘show’ dupa care se elimina dupa o mica pauza, pentru a reveni la forma initiala, ascunsa.

La finalul jocului, cand toate cartile sunt potrivite, un pop-up apare si ne anunta ca am castigat, in ce timp, numarul de mutari si scorul. Am folosit aici un <dialog> si l-am ascuns si aratat cu atributele ‘open’ si ‘close’. In plus am mai adaugat o tabla de scoruri, o modalitate de a salva scorul avut sub un nume ales si publicarea lui apoi pe tabla. Am facut asta cu cod in php ce ‘asculta’ requesturi ajax POST ce ia datele si le insereaza intr-o baza de data Sqlite. Apoi o alta cerere e facuta, la initierea paginii, pentru a cere informatiile din baza de date si a le afisa.

Puteti vedea proiectul la aceasta pagina, sau pe github, si va astept sa imi bateti scorul.

Share