Luke J. Li

Teraz będziemy strzelać :) Najpierw wgraj do podfolderu images ten oto plik: missile.png To będzie grafika naszego pocisku. Musimy ją też załadować. Więc odnajdź tę linijkę w kodzie: i dodaj do niej pozycję 'missile.png', w ten sposób: Rakietę(pocisk) będziemy wystrzeliwać za pomocą spacji. Spacja ma kod klawisza 32, więc musimy zamapować kod 32 i przypisać jakąś bardziej sensowną nazwę. Nazwiemy ten klawisz 'fire'. znajdź w kodzie mapowanie klawiszy: i dodaj na końcu klucz 32 o wartości 'fire'. W ten sposób: Dodałem też tutaj słówko var , które przez pomyłkę nie zostało przeze mnie dodane w poprzednich częściach tutoriala (ale teraz jest okazja, żeby to nadrobić ;) Teraz decydujący moment, czyli samo wystrzeliwanie. Dodamy najpierw na początku skryptu "stałą" która będzie zawierała szybkość pocisku: A teraz znajdź instrukcję switch/case w funkcji initialize() i dopisz do niej ten kod: odpal program od teraz, kiedy wciśniesz sp

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