System kolizji - Gra Canvas

pytanie zadane 4 lipca 2020 w JavaScript przez Bakkit Dyskutant (7,600 p.)

Witam. W ramach nauki js'a postanowiłem napisać sobie prowizoryczną grę. Skaczemy sobie kwadracikiem dopóki nie dotkniemy kolców, które same w naszą stronę podążają.

Chciałem się dowiedzieć w jaki sposób mógłbym napisać system kolizji, aby po dotknięciu kolca gra uruchamiała się ponownie. Pozdrawiam.

komentarz 4 lipca 2020 przez Comandeer Guru (601,590 p.)

Byłoby zdecydowanie łatwiej coś odpowiedzieć, gdybyś pokazał kod tej gry, bo np. czy wiadomo, gdzie znajdują się kolce (w sensie: czy informacje o ich współrzędnych są zapisywane, czy są wykorzystywane tylko do narysowania ich)?

komentarz 5 lipca 2020 przez Bakkit Dyskutant (7,600 p.)

Na początku gry rysują się po prawej stronie planszy i co 30 milisekund rysują się na nowych współrzędnych (coraz bliżej gracza).

komentarz 5 lipca 2020 przez Comandeer Guru (601,590 p.)

Czyli rozumiem, że znasz przez cały czas współrzędne kolców?

komentarz 5 lipca 2020 przez Bakkit Dyskutant (7,600 p.)

Oczywiście

komentarz 5 lipca 2020 przez _Pita_ Stary wyjadacz (11,410 p.)

Pokazałbyś kod odpowiedzialny za ciągły ruch kolców?

2 odpowiedzi

odpowiedź 5 lipca 2020 przez Comandeer Guru (601,590 p.)
wybrane 5 lipca 2020 przez Bakkit

Najlepsza

Jeśli znasz współrzędne kolców, to tak po prawdzie to jest głównie sama matematyka.

Osobiście prawdopodobnie użyłbym podejścia uproszczonego, czyli traktował ten kolec jako prostokąt. To, co prawda, nieco powiększy jego hit box, ale myślę, że akceptowalnie. Natomiast mocno uprości obliczenia. Jeśli gracz będzie w osi x w rejonie od kolec.x do kolec.x + kolec.width i w osi y w rejonie od kolec.y do kolec.y + kolec.height, to wiadomo, że doszło do kolizji.

komentarz 5 lipca 2020 przez _Pita_ Stary wyjadacz (11,410 p.)

@Comandeer, Dlaczego moje rozwiązanie nie zadziała a Twoje tak?

komentarz 5 lipca 2020 przez Comandeer Guru (601,590 p.)

Nie, Ty zasugerowałeś całkowite przepisanie logiki gry + zaproponowałeś obliczenia oparte o połowę boku trójkąta (co np. da złe obliczenia dla wysokości).

komentarz 5 lipca 2020 przez _Pita_ Stary wyjadacz (11,410 p.)

W oparciu o połowę, ponieważ pobiera się lokalizacje właśnie środka danej figury

komentarz 5 lipca 2020 przez Comandeer Guru (601,590 p.)

…co dalej da złe obliczenia dla wysokości.

Poza tym zapominasz, że współrzędne są w dwóch osiach – Twoja propozycja mówi po prostu o "współrzędnych".

odpowiedź 4 lipca 2020 przez _Pita_ Stary wyjadacz (11,410 p.)

Ja wstawiłbym cały kod gry do funkcji, która aktywowałaby się dwa razy:

Od razu po załadowaniu strony
Kiedy współrzędne kwadratu są równe współrzędnym kwadratu +- bok tego trójkąta równobocznego

Przykładowy kod sprawdzający kolizję:

/* a = połowa boku trójkąta
x = współrzędne kwadratu
y = współrzędne trójkąta */


If(y <= a+x && y>=x-a){funkcja()}

komentarz 4 lipca 2020 przez Comandeer Guru (601,590 p.)

A w jaki sposób aktywowałbyś funkcję w momencie kolizji?

komentarz 4 lipca 2020 przez _Pita_ Stary wyjadacz (11,410 p.)

Po prostu przy każdym odświeżeniu pętli, odpowiedzialnej za ruch trójkątów, wykonywałby się zamieszczony przeze mnie if.

Funkcja "funkcja()" jest odpowiedzialna za restart gry, co nie jest według mnie trudne do zrobienia.

komentarz 4 lipca 2020 przez Comandeer Guru (601,590 p.)

Hm, ale jeśli cały kod gry wsadzisz do funkcji, to pętla renderująca też powinna być w tej funkcji… Więc w pętli renderującej odpalałbyś drugą pętlę renderującą. Musiałbyś zatem przerwać tę pierwszą.

komentarz 4 lipca 2020 przez _Pita_ Stary wyjadacz (11,410 p.)

Zasadniczo masz rację, nie jest to idealne rozwiązanie ale zadziała:p

A gdyby tak w rezultacie funkcji warunkowej użyć

 location.reload()

Jest to chyba kod jQuery, ale myślę, że nie powinno to sprawiać problemów...

komentarz 4 lipca 2020 przez Comandeer Guru (601,590 p.)

Nie, to nie jest kod jQuery. location to natywne API przeglądarek.

Poza tym to nie jest konieczne do przerwania pętli.

komentarz 4 lipca 2020 przez _Pita_ Stary wyjadacz (11,410 p.)

Z przerwaniem pętli to nie ma problemu, wystarczy użyć "break;" ale mi chodzi o to, żeby funkcja wykonała się ponownie... Ja kazałbym wywołać tę funkcję zaraz po break (lub nawet bez niego) jednak jak już powiedziałeś, nie jest to optymalne rozwiązanie

komentarz 4 lipca 2020 przez Comandeer Guru (601,590 p.)

Tylko że pętla renderujące nie opiera się na niczym, co można przerwać przez break…

komentarz 5 lipca 2020 przez _Pita_ Stary wyjadacz (11,410 p.)

Chodzi mi o taki kod:

Game(){

/* a = połowa boku trójkąta
x = współrzędne kwadratu
y = współrzędne trójkąta */
If(y <= a+x && y>=x-a){
Game()
}
/*Kod gry*/

}

Może coś takiego zadziała?

Ewentualnie kod gry zamknąć w else ale nie powinno być to wymagane...

komentarz 5 lipca 2020 przez Comandeer Guru (601,590 p.)

Nie, coś takiego nie zadziała, bo albo przeglądarka zwróci błąd o przepełnieniu stosu, albo wyglebi się główny wątek. Pętla renderująca musi być asynchroniczna.

komentarz 5 lipca 2020 przez Ehlert Ekspert (212,670 p.)

Przecież ruch jakiegoś obiektu to nie jest pętla. To zmiana wartości jego położenia w pętli stałokrokowej.

komentarz 5 lipca 2020 przez Comandeer Guru (601,590 p.)

https://youtu.be/_XHqN7RvAnM – tak mi się skojarzyło :p

Nie widzę za bardzo sensu w posiadaniu dodatkowej pętli do obliczeń fizycznych. W tak prostej grze można to bez problemu zrobić w pętli renderującej, znając po prostu różnicę czasu między poprzednim a obecnym jej cyklem.

komentarz 5 lipca 2020 przez Ehlert Ekspert (212,670 p.)

Tak naprawdę pętla stałokrokowa nie musi być oddzielną pętla, a zwykłym ifem, który wykona się po określonym czasie. W js można to jednak ograć poprzez setTimetout. Warto też zaznaczyć że nie ma sensu przy większej ilości fpsów wykonywać logiki w każdym cyklu renderującym.

komentarz 5 lipca 2020 przez _Pita_ Stary wyjadacz (11,410 p.)

Chodzi mi tylko o to, żeby po każdym ruchu, ewentualnie co kilka takich ruchów, zależy jak duże one są, wstawić mojego ifa. Jeśli przesuwanie się kolców działa, to to też zadziała...