Jak stworzyć prostą grę w JavaScript? (kontynuacja - krok 3)
Teraz zajmiemy się obsługą klawiatury.
Najpierw potrzebujemy wydzielić zmienną player, żeby móc się do niej później odwoływać. Na razie to tworzymy obiekt gracza, ale nigdzie nie zapamiętujemy (poza tablicą entities) tego obiektu.
Dodaj więc na początku skryptu tę linijkę:
potem, w funkcji initialize odnajdź linijkę, która wywołuje funkcję createEntity z pierwszym parametrem 'player' i przypisz utworzoną jednostkę do zmiennej player
jak możesz zauważyć, dodaliśmy również właśćiwość speed i zainicjalizowaliśmy ją do wartości 4*. To ważne, bo będzie nam to później potrzebne.
*Możesz spróbować z innymi wartościami, żeby przyśpieszyć/zwolnić ruch rakiety.
Bezpośrednio po tej linijce wstaw ten kod:
jest to metoda player.input i będzie ona wywołana za każdym razem, kiedy użytkownik wciśnie klawisz. W zależności od wciśniętego klawisza, poruszamy rakietę w lewo, w prawo, w górę bądź w dół.
Jak zapewne zauważyłeś, jest to pewna abstrakcja. Nie operujemy tu wprost na zdarzeniu keydown i nie obsługujemy żadnych kodów klawiszy (co jest "normalnym" sposobem obsługi zdarzeń klawiatury w JavaScript), a raczej tworzymy nakładkę, dodatkową warstwę abstrakcji, własną customową funkcję do obsługi inputów.
Czemu?
Ponieważ chcemy uniezależnić poruszanie obiektów od konkretnego urządzenia odpowiedzialnego za wejście. Teraz jest to klawiatura, później być może będziemy chcieli dodać możliwość sterowania myszą bądź dotykiem.
W takim razie oprócz warstwy abstrakcji, musimy mieć jakis "konkret", czyli konkretną funkcję odpowiedzialną za obsługę zdarzeń klawiatury (bądź innych urządzeń/metod wejścia), i przekazywanie tych zdarzeń do obiektu player.
Zmodyfikuj teraz funkcję $(document).ready(function() {.......}); do takiej postaci:
37, 38, 39, 40 to kody poszczególnych klawiszy ze strzałkami. Tłumaczymy te kody na bardziej proste nazwy ('left', 'up', 'right', 'down') i podajemy je do funkcji player.input()
Odpal teraz program. Jeśli dobrze wszystko zrobiłes, możesz sterować rakietą za pomocą strzałek :)
W następnych częściach zajmiemy się strzelaniem. A teraz tradycyjnie - w paczce *.zip cały kod programu na tym etapie.
Najpierw potrzebujemy wydzielić zmienną player, żeby móc się do niej później odwoływać. Na razie to tworzymy obiekt gracza, ale nigdzie nie zapamiętujemy (poza tablicą entities) tego obiektu.
Dodaj więc na początku skryptu tę linijkę:
potem, w funkcji initialize odnajdź linijkę, która wywołuje funkcję createEntity z pierwszym parametrem 'player' i przypisz utworzoną jednostkę do zmiennej player
jak możesz zauważyć, dodaliśmy również właśćiwość speed i zainicjalizowaliśmy ją do wartości 4*. To ważne, bo będzie nam to później potrzebne.
*Możesz spróbować z innymi wartościami, żeby przyśpieszyć/zwolnić ruch rakiety.
Bezpośrednio po tej linijce wstaw ten kod:
jest to metoda player.input i będzie ona wywołana za każdym razem, kiedy użytkownik wciśnie klawisz. W zależności od wciśniętego klawisza, poruszamy rakietę w lewo, w prawo, w górę bądź w dół.
Jak zapewne zauważyłeś, jest to pewna abstrakcja. Nie operujemy tu wprost na zdarzeniu keydown i nie obsługujemy żadnych kodów klawiszy (co jest "normalnym" sposobem obsługi zdarzeń klawiatury w JavaScript), a raczej tworzymy nakładkę, dodatkową warstwę abstrakcji, własną customową funkcję do obsługi inputów.
Czemu?
Ponieważ chcemy uniezależnić poruszanie obiektów od konkretnego urządzenia odpowiedzialnego za wejście. Teraz jest to klawiatura, później być może będziemy chcieli dodać możliwość sterowania myszą bądź dotykiem.
W takim razie oprócz warstwy abstrakcji, musimy mieć jakis "konkret", czyli konkretną funkcję odpowiedzialną za obsługę zdarzeń klawiatury (bądź innych urządzeń/metod wejścia), i przekazywanie tych zdarzeń do obiektu player.
Zmodyfikuj teraz funkcję $(document).ready(function() {.......}); do takiej postaci:
37, 38, 39, 40 to kody poszczególnych klawiszy ze strzałkami. Tłumaczymy te kody na bardziej proste nazwy ('left', 'up', 'right', 'down') i podajemy je do funkcji player.input()
Odpal teraz program. Jeśli dobrze wszystko zrobiłes, możesz sterować rakietą za pomocą strzałek :)
W następnych częściach zajmiemy się strzelaniem. A teraz tradycyjnie - w paczce *.zip cały kod programu na tym etapie.
Ten komentarz został usunięty przez autora.
OdpowiedzUsuń$(document).keydown(function(e) {
OdpowiedzUsuńkey = {37: 'left', 38: 'up', 39:'right', 40:'down'}[e.keyCode];
player.input(key) })
brakuje ; na końcu po wklejeniu nie działa