Jak stworzyć prostą grę w JavaScript? (kontynuacja - krok 5)
Więc kontynujemy tutorial. Oto kolejna, długo wyczekiwana część.
Poprzednie części:
Krok 0 - przygotowania
Krok 1 - ładowanie obrazków
Krok 2 - wyświetlanie obrazków na Canvasie, podstawowa animacja
Krok 3 - obsługa klawiatury
Krok 4 - wystrzeliwanie pocisków
Po ich zrobieniu powinniście widzieć coś takiego:
Jeśli tego nie macie, możecie ściągnąć paczkę zip z przerobionymi 4 poprzednimi krokami.
Czyli mamy statki ufo, mamy rakietę, możemy nią sterować strzałkami oraz strzelać za pomocą spacji. Brakuje jednak jeszcze czegoś. Efektu. Statki ufo powinny się rozwalać, inaczej nie ma to żadnego sensu. I teraz tak. Żeby rozwalać statki musimy jakoś wykryć zderzenie (ang. collision detection) między naszym pociskiem, a tak zwanym "ufem". Czyli w każdej klatce będziemy przelatywali przez obiekty i sprawdzali czy żaden z nich się nie zderza z innym. Jeśli się okazuje, że tak odpowiednio zaregujemy (np. zniszczymy statek kosmiczny).
Jak jednak wykryć taką kolizję? Jest na to mnóstwo sposób, bardziej lub mniej dokładnych (tudzież bardziej lub mniej skomplikowanych). Żeby zbytnio nie komplikować zrobimy to bardzo prostą metodą - potraktujemy każdy obiekt w ten sposób, jakby był prostokątem. A potem będziemy liczyć czy prostokąty się przecinają.
Jak pewnie zauważyłeś, nie będzie to dokładna metoda na wykrywanie zderzeń. Gdybyśmy byli bardziej dokładniejsi moglibyśmy zrobić kolizję pixel perfect. Ale na potrzeby tutoriala i naszej prostej gry prostokąty też będą okej.
Żeby nie robić bałaganu w kodzie wydzielimy funkcję checkCollisions():
Tym sposobem przy każdym przejściu pętli gry będziemy sprawdzać kolizje.
Jak widzicie dodaliśmy też poniżej kawałek kodu, który będzie miał za zadanie filtrować tablicę entities, żeby były w niej jedynie obiekty, które są "nie-martwe". To nam się przyda później, kiedy będziemy chcieli usunąć obiekty. Zrobimy to wtedy tak, że ustawimy w obiekcie właściwość dead na true, i dzięki temu kodowi powyżej automatycznie takie obiekty będą się usuwać.
Ponieważ obiekty na ekranie są różnego typu (pocisk, rakieta, ufo), potrzebujemy też jakiejś metody określenia typu obiektu. Dodajmy więc właściwość type do naszej definicji w funkcji createEntity:
A teraz przejdźmy do naszej funkcji checkCollisions. Dodamy teraz do niej funkcję pomocniczą isIntersection. Funkcja ta będzie przyjmowała dwa obiekty jako parametry i będzie liczyła, czy się nie zderzają. A tak w zasadzie, czy ich prostokąty otaczające się nie przecinają ze sobą.
Następnie zaś przeleciemy przez tablicę entities i po prostu sprawdzimy kolejne obiekty ze sobą w pętli. W zasadzie w dwóch pętlach. Zmienna i będzie indeksem pierwszego obiektu, zmienna j będzie indeksem drugiego.
Więc w zasadzie mamy już wszystko co potrzeba. Kolizje się już teoretycznie powinny wykrywać. Jednak jak teraz uruchomisz okazuje się, że się nic nie zmieniło. No tak, nie dodaliśmy jeszcze akcji. Nie zareagowaliśmy w żaden sposób na kolizję. Zróbmy to teraz:
Odpal teraz grę. Powinno dać już się strzelać, a po strzeleniu zarówno ufo, jak i pocisk znikałyby.
W razie problemów możesz ściągnąć gotową paczkę zip z kodem na tym etapie.
Poprzednie części:
Krok 0 - przygotowania
Krok 1 - ładowanie obrazków
Krok 2 - wyświetlanie obrazków na Canvasie, podstawowa animacja
Krok 3 - obsługa klawiatury
Krok 4 - wystrzeliwanie pocisków
Po ich zrobieniu powinniście widzieć coś takiego:
Jeśli tego nie macie, możecie ściągnąć paczkę zip z przerobionymi 4 poprzednimi krokami.
Czyli mamy statki ufo, mamy rakietę, możemy nią sterować strzałkami oraz strzelać za pomocą spacji. Brakuje jednak jeszcze czegoś. Efektu. Statki ufo powinny się rozwalać, inaczej nie ma to żadnego sensu. I teraz tak. Żeby rozwalać statki musimy jakoś wykryć zderzenie (ang. collision detection) między naszym pociskiem, a tak zwanym "ufem". Czyli w każdej klatce będziemy przelatywali przez obiekty i sprawdzali czy żaden z nich się nie zderza z innym. Jeśli się okazuje, że tak odpowiednio zaregujemy (np. zniszczymy statek kosmiczny).
Jak jednak wykryć taką kolizję? Jest na to mnóstwo sposób, bardziej lub mniej dokładnych (tudzież bardziej lub mniej skomplikowanych). Żeby zbytnio nie komplikować zrobimy to bardzo prostą metodą - potraktujemy każdy obiekt w ten sposób, jakby był prostokątem. A potem będziemy liczyć czy prostokąty się przecinają.
Jak pewnie zauważyłeś, nie będzie to dokładna metoda na wykrywanie zderzeń. Gdybyśmy byli bardziej dokładniejsi moglibyśmy zrobić kolizję pixel perfect. Ale na potrzeby tutoriala i naszej prostej gry prostokąty też będą okej.
Żeby nie robić bałaganu w kodzie wydzielimy funkcję checkCollisions():
Tym sposobem przy każdym przejściu pętli gry będziemy sprawdzać kolizje.
Jak widzicie dodaliśmy też poniżej kawałek kodu, który będzie miał za zadanie filtrować tablicę entities, żeby były w niej jedynie obiekty, które są "nie-martwe". To nam się przyda później, kiedy będziemy chcieli usunąć obiekty. Zrobimy to wtedy tak, że ustawimy w obiekcie właściwość dead na true, i dzięki temu kodowi powyżej automatycznie takie obiekty będą się usuwać.
Ponieważ obiekty na ekranie są różnego typu (pocisk, rakieta, ufo), potrzebujemy też jakiejś metody określenia typu obiektu. Dodajmy więc właściwość type do naszej definicji w funkcji createEntity:
A teraz przejdźmy do naszej funkcji checkCollisions. Dodamy teraz do niej funkcję pomocniczą isIntersection. Funkcja ta będzie przyjmowała dwa obiekty jako parametry i będzie liczyła, czy się nie zderzają. A tak w zasadzie, czy ich prostokąty otaczające się nie przecinają ze sobą.
Następnie zaś przeleciemy przez tablicę entities i po prostu sprawdzimy kolejne obiekty ze sobą w pętli. W zasadzie w dwóch pętlach. Zmienna i będzie indeksem pierwszego obiektu, zmienna j będzie indeksem drugiego.
Więc w zasadzie mamy już wszystko co potrzeba. Kolizje się już teoretycznie powinny wykrywać. Jednak jak teraz uruchomisz okazuje się, że się nic nie zmieniło. No tak, nie dodaliśmy jeszcze akcji. Nie zareagowaliśmy w żaden sposób na kolizję. Zróbmy to teraz:
Odpal teraz grę. Powinno dać już się strzelać, a po strzeleniu zarówno ufo, jak i pocisk znikałyby.
W razie problemów możesz ściągnąć gotową paczkę zip z kodem na tym etapie.
Komentarze
Prześlij komentarz