Gry praktycznie w HTML5 - Użytkownik  

Autor: Piotr Bubacz

Opublikowano: 2012-03-28

W poprzednim odcinku kursu narysowaliśmy świat gry. Teraz nadeszła chwila, kiedy zaczniemy go ożywiać. Pierwszą czynnością będzie dodanie możliwości sterowania światem przez użytkownika. W tym odcinku nauczysz się obsługiwać klawiaturę i myszkę, aby móc przesuwać elementy na ekranie.

Przed wykonaniem zadań powinieneś znać:

• podstawy języka JavaScript,
• podstawy elementu Canvas.

Po wykonaniu zadań dowiesz się:

• jak obsłużyć klawiaturę i mysz w grze,
• jak poruszyć element w grze.

Implementacja

W tej części kursu wykorzystamy stronę, którą przygotowaliśmy w poprzednim odcinku. Dodamy do niej możliwość poruszania czołgiem po grze. Czołg porusza się tylko w jednej płaszczyźnie – X. Użytkownik, za pomocą klawiszy strzałek, będzie mógł poruszać czołg w lewo lub w prawo, a jeśli będzie chciał używać myszki, to czołg będzie „śledził’ pozycję myszki na elemencie canvas.

Przygotowanie strony

Pierwszym krokiem będzie otworzenie w programie WebMatrix strony internetowej, przygotowanej w poprzednim odcinku kursu.

1. Jeśli nie posiadasz strony utworzonej w poprzedniej części kursu, to:

• pobierz plik Games on HTML5.zip, zawierający wszystkie zasoby i poszczególne etapy stron powstałych w tym kursie,
• wypakuj do dowolnego katalogu zawartość pobranego archiwum.

2. W programie WebMatrix otwórz stronę GamesOnHTML5:

• uruchom program WebMatrix,
• kliknij przycisk Open Site,
• z menu rozwijanego wybierz Open Folder,
• wskaż lokalizację katalogu GamesOnHTML5,
• jeśli otworzyłeś Twój projekt, to kliknij dwukrotnie na pliku index.html. Jeżeli otworzyłeś projekt z pobranego archiwum, to kliknij na plik 1.Zasoby-koniec.html.

Sterowanie za pomocą klawiatury

Sterowanie za pomocą klawiatury polega na nasłuchiwaniu zdarzenia wciśnięcia klawisza (keydown) i określeniu funkcji odpowiedzialnej za jego obsługę przy pomocy:

document.addEventListener("keydown", KeyDown, false);

W funkcji KeyDown sprawdzamy, który klawisz został wciśnięty i na tej podstawie zmieniamy elementy gry. Kody wybranych klawiszy zostały przedstawione w poniższej tabeli:

Klawisz	Kod
Spacja	32
Strzałka lewo	37
Strzałka góra	38
Strzałka prawo	39
Strzałka dół	40

1. Dodaj nasłuchiwanie zdarzenia wciśnięcia klawisza na klawiaturze:

• poniżej linijki LoadResources(); dodaj:

// Nasłuchiwanie  klawiatury 
document.addEventListener("keydown", KeyDown, false);
// Nasłuchiwanie  myszki

2. Dodaj funkcje odpowiedzialne za zmianę pozycji czołgu:

• poniżej linijki // Funkcje do sterowania czołgiem dodaj:

function KeyDown(e) {
    // Klawisz strzałka w lewo
    if (e.keyCode == 37) {
      tankXTarget -= 10;
       dir = -1;
    } else
      // Klawisz strzałka w lewo
      if (e.keyCode == 39) {
        tankXTarget += 10;
        dir = 1;
      } else
        // Klawisz spacja
        if (e.keyCode == 32)
          Fire();
}
// funkcja odpowiedzialna za strzały 
function Fire() { }

Informacja

Funkcja KeyDown wywołana jest w momencie wciśnięcia przez użytkownika klawisza na klawiaturze. Jeśli będzie to klawisz strzałki prawej lub lewej, to zostanie zmieniona wartość zmiennej tankXTarget, odpowiedzialnej za pozycję czołgu w grze. Jeżeli będzie to przycisk spacji, to zostanie wywołana funkcja Fire. Funkcja Fire odpowiedzialna jest za strzelanie pociskami.

Sterowanie za pomocą myszki

Sterowanie za pomocą myszki polega na nasłuchiwaniu dwóch zdarzeń - ruchu myszki (mousemove) oraz wciśnięcia lewego klawisza myszki (mousedown), i określeniu funkcji odpowiedzialnych za ich obsługę.

1. Dodaj nasłuchiwanie zdarzeń związanych z obsługą myszki:

• poniżej linijki // Nasłuchiwanie myszki dodaj:

document.addEventListener("mousemove", Follow, false);
document.addEventListener("mousedown", Fire, false);

2. Dodaj funkcje odpowiedzialne za zmianę pozycji czołgu:

• poniżej linijki // Funkcje do sterowania czołgiem dodaj:

function Follow(e) {
      tankXTarget = e.clientX;
  }

3. Wyświetl czołg na pozycji określonej przez zmienną tankXTarget:

• w funkcji DrawGameWorld zastąp linijkę: ctx.drawImage(tank, 300, 644); linijką:

ctx.drawImage(tank, tankXTarget - 43, 644);

4. Zapisz zmiany. Wciśnij przycisk Run. Sprawdź, czy możesz sterować czołgiem za pomocą klawiatury (strzałka prawo/lewo i myszki).

Informacja

W tym momencie nie możemy sterować czołgiem, ponieważ rysowanie świata gry odbywa się tylko jeden raz. W celu poruszenia czołgiem musimy cyklicznie, co określoną liczbę klatek na sekundę, przerysowywać element Canvas.

Cykliczne przerysowywanie elementu Canvas

W celu cyklicznego przerysowywania musimy, co określony czas, wywoływać funkcję odpowiedzialną za wyrysowywanie świata gry. Do cyklicznego wywołania funkcji służy polecenie:

setInterval(a,b)

gdzie a jest nazwą wywoływanej funkcji, b jest czasem w milisekundach. W grach posługujemy się pojęciem klatki na sekundę (FPS). W celu przeliczenia czasu na FPS wykorzystujemy następujący wzór:

1. Wywołaj funkcję DrawGameWorld, z częstotliwością 16 klatek na sekundę:

• w funkcji checkLoad zamień linijkę DrawGameWorld();na:

setInterval(DrawGameWorld, 1000 / 16);

2. Zapisz zmiany. Wciśnij przycisk Run. Sprawdź, czy możesz sterować czołgiem za pomocą klawiatury (strzałka prawo/lewo i myszki).

Podsumowanie

W tym artykule nauczyliśmy się obsługiwać klawiaturę i mysz w grach, wiemy również, jak poruszać elementem na ekranie.

W kolejnym artykule dowiemy się, jak ożywić świat gry.

 

---