Joc de memorie cu jQuery


Am văzut zilele trecute un interesant şi simplu efect jQuery care permite de exemplu să îţi faci o pagină de portofoliu, în care să ai capturi ale siturilor (sau tablourilor sau şuruburilor pe care le faci) şi când mouse-ul trece peste imagine, ea să gliseze lăsând loc unui text. Pagina de exemplu o găsiţi aici. Uitându-mă la ea m-am gândit încă o dată la realizarea unui joc memo (sau concentration) cu jQuery. M-am ambiţionat şi aşa am ajuns după ceva vreme la un elegant joc memo. Mai mult mi-a luat găsirea unor imagini (am apelat la seturi de iconiţe gratuite de pe internet) decât scrierea codului. Cu jQuery munca mi-a fost mult simplificată.

img90

De fapt din efectul iniţial, de la care am pornit, am păstrat cel mai mult partea de CSS, partea JavaScript fiind evident complet rescrisă. Pentru webmasterii care doresc să pătrundă în partea de detalii, iată câteva:

  • Am folosit trei şiruri unidimensionale (nu e nevoie neapărat să fie bidimensionale, deşi avem o matrice de fapt afişată). Într-unul am piesele, de fapt numerele de la 1 la câte perechi sunt; iniţial am pus aceste numere crescător, după care le-am amestecat aleator – aceasta înseamnă că la fiecare joc piesele vor fi altcumva dispuse pe "tablă". Mai am apoi un şir în care ţin situaţia pe tablă: 0 dacă piesa e întoarsă (ascunsă) şi 1 dacă e afişată. În fine, al treilea e pentru a avea o evidenţă a pieselor identificate corect (în pereche). Când toate sunt identificate în pereche jocul se termină.
  • Am folosit, mă repet, efectul din tutorialul care m-a incitat la a scrie jocul memo, dar la fel de bine se poate folosi orice alt efect, din jQuery UI, pentru "dezvelirea" unei piese. Am folosit de fapt în cele din urmă jQuery UI pentru efectul de final: când tabla e rezolvată piesele "pâlpâie" de trei ori. Nu am folosit altceva în plus, decât desigur jQuery în sine.
  • Frumuseţea folosirii librăriei jQuery pentru a scrie jocul memo vine din uşurinţa analizării elementelor dintr-o pagină şi a animării lor. Cei ce se vor uita mai atent în cod vor vedea că tabelul este de fapt o… listă (ul), iar imaginile sunt elemente în listă (li). Într-un astfel de element de listă am pus div-uri (ascunse sau vizibile, după nevoie) în care mi-am pus informaţiile necesare. Astfel poţi manipula cu uşurinţă întoarcerea unei anumite piese de pe tablă. Respectiv re-ascunderea a două piese dacă nu formează o pereche. Practic tot codul jQuery e de doar aproximativ 30 de linii!
  • Restul de cod JavaScript ţine de pregătirea jocului. Am făcut să fie uşor de schimbat un set de imagini. (Mai sus vedeţi capturi cu două seturi.) În plus, dacă un set are să zicem 20 de imagini, iar tabla cere doar 6 imagini, la fiecare joc nou se aleg alte 6 imagini din cele 20. Astfel noutatea e crescută şi sunt folosite în timp toate imaginile existente. Desigur jocul nu e teribil de finisat (afişez totuşi numărul de mutări), pentru că mai mult m-a interesat să văd cât de greu e de făcut cu jQuery. Codul poate fi uşor adaptat dacă aveţi un sit şi doriţi să oferiţi posibilitatea navigatorilor să se joace cu nişte imagini alese de Dvs (copiilor mei de exemplu le place mult să joace memo cu… poze de familie). Atenţie: nu am testat codul în toate navigatoarele de pe pământ, doar în Chrome şi Firefox 3.
  • A, era să uit: scriptul permite de asemenea cu uşurinţă diverse dimensiuni pentru tablă – de la table mici (minim 2×2) până la mari, cât vă duce ecranul.

Cam atât… acum e timpul să vă jucaţi. Click aici!


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (2 evaluări, media: 5,00 din 5)
Loading...Loading...

2 comentarii

  1. Vlad N spune:

    Codul sursa pentru joculetul de mai sus se poate gasi undeva?


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *