Luke J. Li

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ę? Jes...

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 wpros...

Załadowaliśmy grafikę, teraz możemy ją wyświetlać wtedy, kiedy tylko chcemy. Jednak grafika to tylko wygląd, a potrzebna jest pewna logika gry. Nie chcemy mieć statycznych obrazków, a raczej obiekty, które coś robią, ruszają się w jakiś sposób, odpowiadają na zdarzenia. Dlatego w tym kroku stworzymy tzw. pętlę gry (game loop), czyli odpalaną 60 razy na sekundę funkcję JavaScript, która zajmie się poruszaniem i wyświetlaniem Jednostek . Jednostką (ang. Entity) zaś nazywamy tutaj każdy animowany i biorący w rozgrywce obiekt gry - w tym wypadku będzie to gracz (rakieta) oraz statki ufo. Każda taka jednostka będzie osobnym obiektem i będzie miała metodę draw() , metodę move() oraz parę właściwości, takie jak pozycja na ekranie (x,y) oraz prędkość pozioma i pionowa (vx, vy). Ponieważ w JavaScript nie ma klas, będziemy działać na tzw. prototypach. Utworzymy teraz prototyp, z którego będziemy tworzyć jednostki. Nazwiemy go EntityPrototype i zaopatrzymy go w metody draw() i move()...

W poprzedniej części stworzyliśmy podstawową strukturę plików potrzebnych do naszej gry. W tej części zaczniemy już programować naprawdę, tworząc kod potrzebny do załadowania obrazków. Następnie (w dalszych częściach tutorialu) skorzystamy z obiektu <canvas> , który będzie naszym takim "płótnem" do rysowania grafiki. Wtedy to właśnie będziemy mogli załadowane uprzednio obrazki wyświetlić na ekranie komputera (za pomocą funkcji drawImage ). Teraz jednak wróćmy do ładowania obrazków. Uwaga: Jeśli jesteś trochę bardziej zaawansowanym użytkownikiem i nieobcy ci jest koncept image preloadera, proponuję, żebyś przeskoczył od razu do kodu , zamiast czytać łopatologiczne, i być może nudne, wprowadzenie teoretyczne ;) W idealnym świecie jeśli mielibyśmy do załadowania 10 plików graficznych z Internetu, załadowalibyśmy najpierw pierwszy plik z listy, później drugi, później trzeci, aż w końcu przystąpiliśmy do załadowania dziesiątego pliku. Niestety nie żyjemy w idealn...

W tym tutorialu utworzymy prostą grę w JavaScript, z użyciem elementu Canvas. Gra będzie polegać na kosmicznym locie i strzelaniu w statki przeciwnika . Mało oryginalne, ale od czegoś trzeba zaczać, prawda? Klasyczne pomysły są najlepsze do nauki. A więc zaczynamy. Będziemy potrzebować: edytora tekstu z kolorowaniem składni (np. Notepad++, Sublime Text oraz wiele innych) grafiki (weźmiemy darmową grafikę z Internetu) podstawowej znajomości języka JavaScript, oraz języków HTML i CSS. Krok 0: Przygotowania Załóż nowy folder i nazwij go spaceshooter . Wejdź do folderu, utwórz w nim 3 pliki i nazwij je: index.html - tu będzie podstawowa struktura strony w HTML index.js - tu będzie nasz kod JavaScript index.css - tu będą definicje stylów CSS Do pliku index.html wklej ten kod: Pozostałe pliki (index.js, index.css) pozostaw na razie puste. grafika będziemy potrzebować grafiki statku gracza: player.png oraz grafiki statków wroga: ufo.png Są to przeskalowane grafiki ze...