M9 | L9 – Joc de memorie I

Astăzi vom afla despre:

  • Placile intoarse pe spate

Aplicațiile pe care le vom folosi sunt:

Khan Academy

PROIECTE:

Joc de memorie

Exemplu: https://www.khanacademy.org/computer-programming/joc-memorie-01/4723200519782400

Placile intoarse pe spate

Primul pas al jocului „Memorie” este de a amesteca aleatoriu toate piesele, apoi de a le așeza într-o grilă dreptunghiulară, cu fața în jos, astfel încât să nu putem vedea ce imagine este de cealaltă parte a fiecărei piese.

Pentru a începe programarea jocului, să ne facem griji cu privire la crearea de faianțe cu fața în jos și să ne dăm seama cum să faceți diferitele imagini mai târziu.

„Placa” este un obiect suficient de important în jocul „Memorie”, încât vom folosi principiile orientate pe obiecte pentru a defini un obiect Tile și apoi vom crea mai multe instanțe ale acestuia. Apoi vom putea asocia atât proprietățile (cum ar fi locația și imaginea), cât și comportamentul (cum ar fi desenarea lor) cu fiecare dintre plăci.

Pentru a începe, vom defini funcția constructor de plăci. Deoarece nu avem de-a face încă cu imaginile, îi vom transmite doar argumente x și y. Ne vom aminti, de asemenea, dimensiunea țiglelor (o constantă) într-o proprietate de pe obiect.

var Tile = function(x, y) {

  this.x = x;

  this.y = y;

  this.size = 50;

};

Acum, după ce am definit constructorul, îl putem folosi într-o buclă pentru a crea dale la pozițiile corespunzătoare x și y. De fapt, vom folosi două pentru bucle – o buclă imbricată – deoarece acest lucru face din punct de vedere conceptual generarea de coordonate pentru o rețea.

Mai întâi trebuie să declarăm o matrice de plăci goală, pentru a stoca toate aceste plăci:

var tiles = [];

Bucla noastră externă iterează pentru câte coloane dorim, bucla noastră interioară iterează pentru fiecare dintre rânduri și fiecare nouă placă este inițializată cu un x și y care corespund acelui rând și coloană.

var NUM_COLS = 5;

var NUM_ROWS = 4;

for (var i = 0; i < NUM_COLS; i++) {

  for (var j = 0; j < NUM_ROWS; j++) {

    var tileX = i * 54 + 5;

    var tileY = j * 54 + 40;

    tiles.push(new Tile(tileX, tileY));

  }

}

Dar, uh, este greu de știut dacă plăcile vor arăta bine, deoarece nu avem încă niciun cod care să le deseneze! De fapt, poate ar fi trebuit să facem asta mai întâi. Uneori, în programare, este greu să știi ce să faci mai întâi, da? Să adăugăm acum o metodă la obiectul Tile care desenează o țiglă cu fața în jos pe pânză. Vom desena un dreptunghi rotunjit cu o frunză drăguță de Khan deasupra, în locația atribuită.

Tile.prototype.draw = function() {

  fill(214, 247, 202);

  strokeWeight(2);

  rect(this.x, this.y, this.size, this.size, 10);

  image(getImage(„avatars/leaf-green”),

        this.x, this.y, this.size, this.size);

};

Suntem atât de aproape de a putea verifica cum arată aspectul plăcilor noastre! Să adăugăm o nouă buclă for care iterează prin toate plăcile și apelează metoda de desenare pe ele:

for (var i = 0; i < tiles.length; i++) {

    tiles[i].draw();

}

Iată cum arată programul nostru, cu tot acel cod. Încercați să modificați diferitele numere din bucla imbricată pentru a vedea cum schimbă grila sau cum modifică modul în care sunt desenate (sigla diferită, poate?)