M9 | L7 – Happy beaver III

Astăzi vom afla despre:

  • Coliziunea cu betele

Aplicațiile pe care le vom folosi sunt:

Khan Academy

PROIECTE:

Happy Beaver

Exemplu: https://www.khanacademy.org/computer-programming/happy-beaver-03/4551621408145408

Coliziunea cu betele

Avem castorul sărit, avem bastoanele afișate – trebuie doar să le reunim pe cele două. Vrem să știm ori de câte ori castorul nostru reușește să treacă peste un băț, astfel încât să putem conta asta ca pe o bătaie de succes. Asta înseamnă că trebuie să facem o verificare de bază a coliziunii celor două obiecte. Există o mulțime de locuri în care am putea programa această funcționalitate, deoarece tratează două obiecte – ca funcție globală, ca metodă pe obiectul Stick, ca metodă pe obiectul Beaver. Să-l lipim pe castor pentru moment:

Beaver.prototype.checkForStickGrab = function(stick) {

  // if beaver is over stick, do something

};

În această funcție, trebuie mai întâi să scriem o condiție care va fi adevărată dacă castorul și bățul s-au ciocnit și fals în caz contrar. Am putea să-l facem complex sau strict, pe baza locației mâinii castorului, de exemplu, dar să rămânem de bază pentru moment. Ar trebui să „se ciocnească” dacă:

  • Poziția centrului x al bățului este între cele două părți ale castorului.
  • Poziția centrală a bastonului este între partea de sus și de jos a castorului.

Stick-ul este desenat folosind comanda rect, deci de obicei, asta ar însemna că proprietățile sale x și y reprezentau coordonatele colțului din stânga sus. Cu toate acestea, pentru a simplifica calculul coliziunii, putem trece la un mod în care rectul este tras din centru:

rectMode(CENTER);

rect(this.x, this.y, 5, 40);

Imaginea pentru castor este, de asemenea, desenată în mod implicit din colțul din stânga sus, dar vom păstra acel mod, deoarece funcționează bine pentru calculul nostru. Pentru a verifica prima condiție, pe poziția x, putem face o verificare ca aceasta, în care verificăm dacă stick-ul x este mai mare sau egal cu partea stângă a castorului (x) și mai mic sau egal cu partea dreaptă a castorului ( x + 40)

stick.x >= this.x && stick.x <= (this.x + 40)

Pentru a verifica poziția y, putem face o verificare similară, unde vedem dacă bățul y este mai mare sau egal cu partea superioară a castorului (y) și mai mică sau egală cu partea inferioară a castorului (y + 40):

stick.y >= this.y && stick.y <= (this.y + 40)

Acum, ce ar trebui să facem de fapt, după ce am detectat o coliziune între castor și băț? Vrem efectiv să scoatem stick-ul de pe ecran și să prevenim coliziunile ulterioare. O modalitate simplă de a face acest lucru este să împingeți butonul de pe ecran, schimbându-i coordonata y:

stick.y = -400;

În același timp, vrem să ne amintim câte bețe a „apucat” castorul, așa că vom incrementa proprietatea de bețe interne:

this.sticks++;

În cele din urmă, trebuie să apelăm această metodă la un moment oportun – ce zici de imediat după ce am desenat fiecare stick?

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

        sticks[i].draw();

        beaver.checkForStickGrab(sticks[i]);

        sticks[i].x -= 1;

    }

https://www.khanacademy.org/computer-programming/happy-beaver-03/4551621408145408