Lecția 3: Aplicatie

Astăzi vom crea jocul Simon.

Definiți următoarele variabile de care vom avea nevoie în continuare:

1. n = numărul de linii/coloane pe care le vom avea în joc. Pentru jocul clasic Simon, n = 2 (roșu și verde pe prima linie, albastru și galben pe a doua). Puteți să vă jucați cu mai multe valori dacă vreți după ce construim tot jocul.
2. speed = viteza cu care vor fi arătate butoanele în etapa de afișare.
3. colors = matricea în care vom păstra culorile butoanelor inițiale. Alegeți ce culori vreți, și aranjați-le pe 2 rânduri și două coloane.
4. colorsSelected = matricea în care vom păstra culorile butoanelor dacă sunt apăsate. Alegeți culori apropiate ca nuanță cu cele din matricea colors.
5. state = starea în care ne aflăm în joc (vom avea un ecran de început, apoi perioada în care se afișează culorile în ordine, apoi perioada în care trebuie să apăsăm noi pe butoane). Pentru început o inițializăm cu 0, sau „start“.
6. coords = lista de coordonate ale butoanelor care trebuiesc apăsate. Pentru început îl inițializăm la lista goală [].
7. playerCoords = lista de coordonate ale butoanelor care au fost apăsate de jucator. Pentru început îl inițializăm la lista goală [].

var m = [[1, 2, 3, 4],
         [5, 6, 7, 8],
         [9, 0, 1, 2]];

Pentru a continua mai departe vom avea nevoie de câteva funcții.

1. drawBegin va desena un mesaj de început, spre exemplu: „Apăsați Enter pentru a începe.“
2. drawFail va desena un mesaj pentru cazul în care jucătorul a pierdut.
3. drawWin va desena un mesaj pentru cazul în care jucătorul a câștigat.
4. drawButton va desena un buton. Această funcție va primi ca parametru indicii x și y, precum și matricea de culori din care să extragă culoarea potrivită. Vom apela această funcție atât în momentul în care desenăm butoanale de început, cât și atunci când selectăm un buton.
5. drawGame va desena cele 4 butoane pe ecran. Nu uitați să desenați și fundalul!

var f = function (param1, param2) {
    // corpul funcției
};

În continuare vom realiza interacțiunea cu mouse-ul. Vom face în felul următor:

1. atunci când apăsăm pe mouse (press), butonul de sub mouse se va selecta.
   1. vom avea nevoie deci de funcția mousePressed
   2. butonul se va colora cu culoarea corespunzătoare din colorsSelected
   3. va trebui să calculați indicii x și y ai pătratelor pentru a putea găsi culoarea potrivită.
2. atunci când ridicăm degetul de pe mouse (release), vom colora butonul în culoarea inițială (din matricea colors)
   1. va trebui să calculați indicii x și y ai pătratelor pentru a putea găsi culoarea potrivită.
   2. de asemenea, coordonatele x și y le adăugăm în lista playerCoords

lista.push(3);
lista.push([x, y]);

În continuare vom scrie funcția draw. Aceasta va conține un switch după starea în care ne aflăm.

switch(variabila){
  case valoare1:
    // bloc de instrucțiuni
  case valoare2:
    // bloc de instrucțiuni
  default:
    // bloc de instrucțiuni
}

1. starea jocului e 0:
   1. afișam mesajul de început (funcția drawBegin)
   2. trecem în starea 1 (state = 1)
2. starea jocului e 1:
   1. în această stare trebuie să așteptam input de la utilizator că e gata să înceapă. Alegeți dacă jucatorul trebuie să apese pe mouse sau pe o tastă, și faceți verificarea corespunzătoare într-o instrucțiune if.
   2. dacă jucatorul a apăsat pe ce trebuie, atunci:
      1. afișăm jocul (funcția drawGame)
      2. inițializăm playerCoords cu []
      3. inițializăm i cu 0
      4. adăugăm la coords un nou set de coordonate random (puteți face acest lucru astfel: coords.push([floor(random(0, n)), floor(random(0, n))])
      5. trecem în starea 2
3. starea jocului e 2:
   1. în această stare trebuie să afișăm butoanele pe care trebuie să dea click utilizatorul
   2. aici vom folosi variabila i pentru a ne spune câte frame-uri au fost desenate. Ca să afișam mai rar butoanele apăsate, vom afișa unul câte unul la un anumit număr de frame-uri. Viteza este dată de variabila speed.
   3. mai jos este codul pe care îl copiați în programul vostru, după ce îl înțelegeți.

              var index = floor(i/speed);
              var x = coords[index][0];
              var y = coords[index][1];
              drawButton(x, y, colorsSelected);
              i = i + 1;
              if (i % speed === 0) {
                  drawButton(x, y, colors);
              }
              if (floor(i/speed) >= coords.length) {
                  i = 0;
                  state = 3;
              }

4. starea este 3:
   1. trebuie să verificăm dacă secvența de coordonate introdusă de utilizator (ce se află în lista playerCoords) este aceeași cu secvența inițială (ce se află în lista coords).
   2. faceți un for de la 0 la playerCoords.length și verificați dacă elementul din playerCoords este egal cu elementul coords.
      1. dacă întâlniți un element care nu apare și în coords, treceți în starea 4.
   3. ultima verificare pe care o facem, în afara for-ului este dacă cele două liste coords și playerCoords au aceeași lungime. Dacă da, atunci am câștigat runda și trecem în starea 5
5. starea este 4:
   1. afișăm mesajul că am pierdut și trecem în starea 0
6. starea este 5:
   1. adăugăm coordonatele unui buton ales aleator în lista coords, la fel ca la starea 1
   2. inițializăm coordsPlayer cu [] - jucătorul trebuie să redea pattern-ul de la 0 când începem următoarea tură
   3. trecem în starea 2

1. Adăugați funcționalitate astfel încât să apară și scorul utilizatorului.
2. Adăugați funcționalitate astfel încât să apară și scorul maxim obținut al utilizatorului.