Główna zawartość
Kurs: Programowanie > Rozdział 4
Lekcja 4: Gra typu side-scroller: Skaczący bóbrBó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?
Gdzie można znaleźć więcej informacji na temat zderzenia obiektów?(0 głosów)
Chyba musisz improwizować. Obliczaj na podstawie wysokości, szerokości, pozycji, funkcjidist(). Polecam też używanie klasyPVectordo tego(zajrzyj do Symulacji Natury).(1 głos)