====== Lecția 5: Joc aplicativ (1) ======
Astăzi vom face o recapitulare a noțiunilor de vector și tablou construind un mic joc. La începutul lecției, vom verifica **[[module:08-vectori-si-tablouri:lectia-03#exercitiu-pentru-casa|exercițiul pentru acasă]]**.
===== Recapitulare =====
==== 1. Tablou cu pătrate ====
**Scrie** un program în [[https://www.khanacademy.org/cs/new|Khan]] în care să desenezi un tablou cu dreptunghiuri ca în imagine.
Pentru a desena dreptunghiuri rotunjit, poți scrie funcția ''rect'' cu încă un parametru la final. În imaginea din exemplu, dreptunghiurile au colțurile rotunjite cu valoarea 10:
rect(x_coord, y_coord, width, height, 10);
{{ :module:08-liste-si-vectori:m08-l04-e01.png?nolink |}}
===== Jocul Matching pairs =====
Astăzi vei scrie un joc numit "Matching pairs" (în română se traduce prin "Găsește perechile").
**Scopul jocului** este să găsești toate imaginile care sunt perechi din cât mai puțini pași.
La **un pas**, poți întoarce 2 cărți cu fața în sus. Dacă sunt pereche, ele rămân cu fața în sus, altfel ele sunt întoarse cu fața în jos după scurt timp.
La final, va fi afișat un text cu numărul de pași efectuați.
==== 2. Desenează perechi de imagini ====
Modifică programul de la exercițiul anterior pentru a desena 8 perechi de imagini diferite pe fiecare pătrat.
Pentru a rezolva jocul, vei avea nevoie de un tablou cu indicii imaginilor.
Programul de mai jos desenează imaginea din stânga. **Modifică** programul pentru a obține imaginea din dreapta.
Programul creează și inițializează un tablou cu perechi de valori random, **tu vei desena** dreptunghiurile de la exercițiul 1 și peste ele imaginile din vectorul de imagini care corespund cu indicii.
{{ :module:08-liste-si-vectori:m08-l04-e02.jpg?nolink |}}
Made using: Khan Academy Computer Science.
==== 3. Verificarea stării mouse-ului ====
Îți mai aduci aminte cum puteai verifica **dacă s-a făcut click** cu mouse-ul? Dar care sunt **coordonatele mouse-ului**?
* Atunci când se apasă și se eliberează butonul de la mouse se va apela automat funcția **''mouseClicked''**.
* Coordonata x a mouse-ului se obține cu ajutorul variabilei **''mouseX''**.
* Coordonata y a mouse-ului se obține cu ajutorul variabilei **''mouseY''**.
**Uită-te** în exemplul de mai jos cum este făcut acest lucru. Dă de mai multe ori click pe dreptunghi pentru a observa ce se întâmplă.
După ce ți-ai amintit cum funcționează ''mouseClicked'', ''mouseX'' și ''mouseY'', **modifică** programul de la exercițiul 2 astfel încât toate imaginile să poată fi afișate în acest mod.
Verificare stare mouse
Made using: Khan Academy Computer Science.
==== 4. Afișarea a maxim 2 imagini simultan ====
**Modifică** programul de la exercițiul 3 pentru a nu afișa decât maxim 2 imagini simultan. când vei face click pe imaginea a treia, cele anterioare vor dispărea (chiar dacă sunt pereche).
Poți urma pașii de mai jos.
* Variabile auxiliare:
- o variabilă va număra câte imagini sunt selectate (de exemplu, ''selected''); inițial, ''selected'' va fi 0
- 2 perechi de indici pentru imaginile curente selectate (de exemplu, ''i1'', ''j1'', ''i2'', ''j2'')
* Mod de gândire: adaugă în funcția ''mouseClicked'' niște condiții (''if''-uri) care să verifice cum vei schimba starea jocului.
- dacă ''selected'' este 0 sau 2:
- dacă ''selected'' este 2:
- ascunde imaginile corespunzătoare indicilor ''(i1, j1)'' și ''(i2, j2)''.
- ''selected'' devine 1
- reține indicii imaginii nou selectate în ''i1'' și ''j1''.
- afișează imaginea de la indicii ''(i1, j1)''.
- altfel, dacă ''selected'' este 1:
- dacă s-a dat click pe aceeași imagine (indicii imaginii noi sunt egali cu ''i1'' și ''j1''):
- ''selected'' devine 0
- ascunde imaginea de la indicii ''(i1, j1)''.
- altfel:
- ''selected'' devine 2
- reține indicii imaginii nou selectate în ''i2'' și ''j2''.
- afișează imaginea de la indicii ''(i2, j2)''.
{{ :module:08-liste-si-vectori:m08-l04-e04-inter.jpg?nolink |}}
==== 5. Reguli joc ====
Acum modifică programul de la exercițiul 4 pentru a nu afișa decât:
* toate perechile găsite
* maxim alte 2 imagini simultan (ultimele pe care s-a făcut click); când vei face click pe imaginea a treia, cele anterioare vor dispărea (dacă nu sunt pereche)
* **Nu uita!** Păstrează afișate imaginile care sunt pereche în cazul unei selecții noi.
Poți urma pașii de mai jos. Față de exercițiul anterior, lucrurile noi sunt scrise **îngroșat**.
* Variabile auxiliare:
- o variabilă va număra câte imagini sunt selectate (de exemplu, ''selected''); inițial, ''selected'' va fi 0
- 2 perechi de indici pentru imaginile curente selectate (de exemplu, ''i1'', ''j1'', ''i2'', ''j2'')
* Mod de gândire: adaugă în funcția ''mouseClicked'' niște condiții (''if''-uri) care să verifice cum vei schimba starea jocului.
- dacă ''selected'' este 0 sau 2 **și s-a dat click pe imagine neîmperecheată**:
- **Nu mai e nevoie să verifici dacă ''selected'' este 2, vei face asta mai jos**
- ''selected'' devine 1
- reține indicii imaginii nou selectate în ''i1'' și ''j1''.
- afișează imaginea de la indicii ''(i1, j1)''.
- altfel, dacă ''selected'' este 1:
- dacă s-a dat click pe aceeași imagine (indicii imaginii noi sunt egali cu ''i1'' și ''j1''):
- ''selected'' devine 0
- ascunde imaginea de la indicii ''(i1, j1)''.
- altfel **dacă imaginea nu este deja împerecheată corect**:
- ''selected'' devine 2.
- reține indicii imaginii nou selectate în ''i2'' și ''j2''.
- afișează imaginea de la indicii ''(i2, j2)''.
- **dacă imaginile ''(i1, j1)'' și ''(i2, j2)'' sunt pereche:**
- **''selected'' devine 0**
- **imaginile sunt marcate ca pereche validă**
{{ :module:08-liste-si-vectori:m08-l04-e04.jpg?nolink |}}
===== Bonus =====
==== 6. Finalizare ====
**Afișează la final** un mesaj după ce au fost găsite toate perechile.
Dacă te simți în stare, **afișează la final** câte perechi de imagini au fost încercate pentru a termina.
Dacă nu îți plac imaginile alese, pune tu altele.
===== Exercițiu pentru acasă =====
Termină acest joc dacă nu l-ai terminat.