Digital Kids

Această pagină poate fi doar citită. Poți vedea sursa, dar nu poți modifica pagina. Consultă administratorul dacă ești de părere că ceva este în neregulă.
====== Lecția 3: Aplicatie ======

Astăzi vom crea jocul [[http://www.freesimon.org/ | Simon]].

==== Task 1 ====
Definiți următoarele variabile de care vom avea nevoie în continuare:
  - **''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.
  - **''speed''** = viteza cu care vor fi arătate butoanele în etapa de afișare.
  - **''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.
  - **''colorsSelected''** = matricea în care vom păstra culorile butoanelor dacă sunt apăsate. Alegeți culori apropiate ca nuanță cu cele din matricea ''colors''.
  - **''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".
  - **''coords''** = lista de coordonate ale butoanelor care trebuiesc apăsate. Pentru început îl inițializăm la lista goală [].
  - **''playerCoords''** = lista de coordonate ale butoanelor care au fost apăsate de jucator. Pentru început îl inițializăm la lista goală [].

<note tip>
Să ne aducem aminte!

O matrice cu 3 rânduri și 4 coloane se declară astfel:
<code>
var m = [[1, 2, 3, 4],
         [5, 6, 7, 8],
         [9, 0, 1, 2]];
</code>
</note>

==== Task 2 ====
Pentru a continua mai departe vom avea nevoie de câteva funcții.
  - **''drawBegin''** va desena un mesaj de început, spre exemplu: "Apăsați Enter pentru a începe."
  - **''drawFail''** va desena un mesaj pentru cazul în care jucătorul a pierdut.
  - **''drawWin''** va desena un mesaj pentru cazul în care jucătorul a câștigat.
  - **''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.
  - **''drawGame''** va desena cele 4 butoane pe ecran. Nu uitați să desenați și fundalul!

<note tip>
Să ne aducem aminte!

O funcție se declară astfel:
<code>
var f = function (param1, param2) {
    // corpul funcției
};
</code>
</note>

==== Task 3 ====
În continuare vom realiza interacțiunea cu mouse-ul. Vom face în felul următor:
  - atunci când apăsăm pe mouse (press), butonul de sub mouse se va selecta.
    - vom avea nevoie deci de funcția **''mousePressed''**
    - butonul se va colora cu culoarea corespunzătoare din **''colorsSelected''**
    - va trebui să calculați indicii x și y ai pătratelor pentru a putea găsi culoarea potrivită.
  - atunci când ridicăm degetul de pe mouse (release), vom colora butonul în culoarea inițială (din matricea **''colors''**)
    - va trebui să calculați indicii x și y ai pătratelor pentru a putea găsi culoarea potrivită.
    - de asemenea, coordonatele x și y le adăugăm în lista **''playerCoords''**

<note tip>
Pentru a adăuga un element la o listă folosiți .push(). Spre exemplu:
<code>
lista.push(3);
lista.push([x, y]);
</code>
</note>

==== Task 4 ====
În continuare vom scrie funcția draw. Aceasta va conține un switch după starea în care ne aflăm.
<note tip>
Să ne amintim!

Instrucțiunea switch este definită astfel:
switch(variabila){
  case valoare1:
    // bloc de instrucțiuni
  case valoare2:
    // bloc de instrucțiuni
  default:
    // bloc de instrucțiuni
}
</note>

<note warning>Înainte de a începe funcția draw, inițializați o variabilă i = 0. Prin aceasta vom număra numărul de frame-uri (cadre) care s-au afișat și ne va ajuta la afișarea pattern-ului cu o anumită viteză.</note>

  - starea jocului e 0:
    - afișam mesajul de început (funcția ''drawBegin'')
    - trecem în starea 1 (state = 1)
  - starea jocului e 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.
    - dacă jucatorul a apăsat pe ce trebuie, atunci:
      - afișăm jocul (funcția ''drawGame'')
      - inițializăm ''coordsPlayer'' cu []
      - inițializăm ''i'' cu 0
      - 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))])''
      - trecem în starea 2
  - starea jocului e 2:
    - în această stare trebuie să afișăm butoanele pe care trebuie să dea click utilizatorul
    - 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''.
    - mai jos este codul pe care îl copiați în programul vostru, **după ce îl înțelegeți**. <code>
        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;
        }
</code>
  - starea este 3:
    - 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'').
    - faceți un ''for'' de la 0 la playerCoords.length și verificați dacă elementul din ''playerCoords'' este egal cu elementul ''coords''.
      - dacă întâlniți un element care nu apare și în ''coords'', treceți în starea 4.
    - 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
  - starea este 4:
    - afișăm mesajul că am pierdut și trecem în starea 0
  - starea este 5:
    - adăugăm coordonatele unui buton ales aleator în lista ''coords'', la fel ca la starea 1
    - inițializăm ''coordsPlayer'' cu [] - jucătorul trebuie să redea pattern-ul de la 0 când începem următoarea tură
    - trecem în starea 2

==== Bonus ====
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.
Digital Kids

Unelte utilizator

Unelte site

Unelte pagină
