Jeśli widzisz tę wiadomość oznacza to, że mamy problemy z załadowaniem zewnętrznych materiałów na naszej stronie internetowej.

If you're behind a web filter, please make sure that the domains *.kastatic.org and *.kasandbox.org are unblocked.

Główna zawartość

Bóbr łapie patyk, czyli "zderzenia" dwóch obiektów

Nasz bóbr już skacze, patyki są wyświetlane - teraz wypadałoby to połączyć. Chcemy wiedzieć kiedy nasz bóbr znajdzie się na patyku, aby móc uznać to za złapanie patyka. Oznacza to, że musimy zrobić podstawowe sprawdzenie kolizji dla tych dwóch obiektów. Jest mnóstwo miejsc, w których moglibyśmy zaprogramować to, gdyż zawiera interakcję między dwoma obiektami - może to być funkcja globalna, metoda przy obiekcie patyka lub metoda przy obiekcie bobra. Na razie wybierzmy tą ostatnią opcję:
Beaver.prototype.checkForStickGrab = function(stick) {
  // jeśli bóbr jest na patyku, zrób coś
};
W tej funkcji wpierw musimy napisać warunek, który będzie spełniony gdy bóbr i patyk wejdą w interakcję. Możemy zrobić to w sposób złożony lub bardzo surowy, oparty dla przykładu na lokalizacji ręki bobra, ale na razie skupmy się na czymś bardziej podstawowym. Powinny "kolidować", gdy:
  • Wartość środkowej pozycji x patyka powinna być pomiędzy lewą a prawą granicą bobra.
  • Pozycja środkowa y patyka znajduje się pomiędzy górną granicą a dolną granicą bobra.
Patyk jest rysowany za pomocą metody rect, co zwykle oznacza, że jego koordynaty x i y odnoszą się do jego lewego górnego rogu. Jednak w celu uproszczenia naszych wyliczeń sprawdzających kolizję, przestawmy się na tryb, gdzie rect oznacza lokalizację od środka:
rectMode(CENTER);
rect(this.x, this.y, 5, 40);
Obrazek bobra też jest rysowany domyślnie od lewego górnego rogu, ale zostawmy to w ten sposób, gdyż nie przeszkodzi to w naszych obliczeniach. By sprawdzić pierwszy warunek, możemy dla przykładu sprawdzić następującą rzecz: jeżeli pozycjia x patyka jest większa lub równa koordynacie lewej strony obrazka bobra(x) i mniejsza lub równa koordynacie prawej strony obrazka bobra(x+40)
stick.x >= this.x && stick.x <= (this.x + 40)
Aby sprawdzić pozycję y, możemy przeprowadzić podobne sprawdzenie: sprawdzimy, czy wartość y patyka jest większa lub równa koordynacie y rysunku bobra oraz czy jest mniejsza lub równa dolnego końca obrazka bobra(y+40):
stick.y >= this.y && stick.y <= (this.y + 40)
Dobrze, tak więc co powinniśmy zrobić, gdy wykryjemy kolizję między bobrem a patykiem? Chcemy skutecznie usunąć patyk z ekranu i zapobiec dalszej kolizji. Prostym sposobem na osiągnięcie tego celu będzie wypchanie patyka poza ekran, zmieniając wartość jego położenia y:
stick.y = -400;
W tym samym czasie chcielibyśmy zapamiętać ile nasz bóbr "zebrał" patyków, więc zwiększymy ilość patyków:
this.sticks++;
Musimy jeszcze wywołać tą metodę w odpowiednim momencie - może tuż po tym, jak narysujemy wszystkie patyki?
    for (var i = 0; i < sticks.length; i++) {
sticks[i].draw();
beaver.checkForStickGrab(sticks[i]);
sticks[i].x -= 1;
}
Oto cały kod - sprawdźcie, co się dzieje gdy bóbr przeskoczy nad patykiem - patyk znika!

Chcesz dołączyć do dyskusji?

Rozumiesz angielski? Kliknij tutaj, aby zobaczyć więcej dyskusji na angielskiej wersji strony Khan Academy.