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 exercițiul pentru acasă.

Recapitulare

1. Tablou cu pătrate

Scrie un program în Khan în care să desenezi un tablou cu dreptunghiuri ca în imagine.

Cum desenăm dreptunghiuri rotunjite la colț.

Apasă aici pentru a ascunde textul

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);

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.

Apasă aici pentru a arăta mai multe explicații

Apasă aici pentru a ascunde detaliile

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.

Perechi de imagini

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).

Apasă aici pentru indicații detaliate

Apasă aici pentru a ascunde indicațiile

Poți urma pașii de mai jos.

Variabile auxiliare:
1. o variabilă va număra câte imagini sunt selectate (de exemplu, selected); inițial, selected va fi 0
2. 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:
1. dacă selected este 2:
  1. ascunde imaginile corespunzătoare indicilor (i1, j1) și (i2, j2).
2. selected devine 1
3. reține indicii imaginii nou selectate în i1 și j1.
4. afișează imaginea de la indicii (i1, j1).
altfel, dacă selected este 1:
1. dacă s-a dat click pe aceeași imagine (indicii imaginii noi sunt egali cu i1 și j1):
  1. selected devine 0
  2. ascunde imaginea de la indicii (i1, j1).
2. altfel:
  1. selected devine 2
  2. reține indicii imaginii nou selectate în i2 și j2.
  3. afișează imaginea de la indicii (i2, j2).

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.

Apasă aici pentru indicații detaliate

Apasă aici pentru a ascunde indicațiile

Poți urma pașii de mai jos. Față de exercițiul anterior, lucrurile noi sunt scrise îngroșat.

Variabile auxiliare:
1. o variabilă va număra câte imagini sunt selectate (de exemplu, selected); inițial, selected va fi 0
2. 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ă:
1. Nu mai e nevoie să verifici dacă selected este 2, vei face asta mai jos
2. selected devine 1
3. reține indicii imaginii nou selectate în i1 și j1.
4. afișează imaginea de la indicii (i1, j1).
altfel, dacă selected este 1:
1. dacă s-a dat click pe aceeași imagine (indicii imaginii noi sunt egali cu i1 și j1):
  1. selected devine 0
  2. ascunde imaginea de la indicii (i1, j1).
2. altfel dacă imaginea nu este deja împerecheată corect:
  1. selected devine 2.
  2. reține indicii imaginii nou selectate în i2 și j2.
  3. afișează imaginea de la indicii (i2, j2).
  4. dacă imaginile (i1, j1) și (i2, j2) sunt pereche:
    1. selected devine 0
    2. imaginile sunt marcate ca pereche validă

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.