Gry praktycznie w HTML5 - Ruch elementów  

Autor: Piotr Bubacz

Opublikowano: 2012-03-29

W poprzednim odcinku kursu nauczyliśmy się obsługiwać klawiaturę i mysz oraz poruszyliśmy element na ekranie. Teraz nadszedł czas na „ożywienie” całej gry. W tym odcinku nauczymy się obsługiwać ruch wielu elementów na ekranie.

Przed wykonaniem zadań powinieneś znać:

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

Po wykonaniu zadań dowiesz się:

• jak poruszać wieloma elementami na ekranie.

Implementacja

W tej części kursu wykorzystamy stronę, którą przygotowaliśmy w poprzednim odcinku. Dodamy do niej możliwość poruszania dla przeciwników – obcych oraz strzelania przez nasz czołg. Wynik zadania został przedstawiony na Rys. 1.

Rys. 1. Obcy i pociski w ruchu.

Przechowując informacje o wielu elementach, których liczby nie znamy – nie wiemy ilu obcych będzie jednocześnie na ekranie oraz ile pocisków wystrzeli użytkownik. Do przechowywania elementów jednego typu, o zmiennej liczbie elementów, służy struktura zwana tablicą dynamiczną - Array. Tworzymy ją za pomocą:

var bullets = new Array();

Pomocne metody i właściwości tablicy:

• .length – podaje rozmiar tablicy,
• .push – dodaje element do tablicy na końcu,
• .splice(a,b) – wycina z tablicy b elementów, począwszy od elementu a.

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 zawartość pobranego archiwum do dowolnego katalogu.

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śli otworzyłeś projekt z pobranego archiwum, to kliknij na plik 2.Uzytkownik-koniec.html.

Pociski na stronie

Przechowując dane o pocisku, potrzebujemy zapisać więcej niż jedną informację. Przechowywanie informacji w wielu tablicach (np. tablica pozX, pozY,…) jest niepraktyczne. Najlepiej przygotować strukturę, która będzie przechowywała wszystkie potrzebne informacje. W naszym przykładzie utworzymy obiekt Bullet:

var Bullet = function (x, y) {
            this.X = x;
            this.Y = y;
            this.IsDirty = false; }

zawiera on następujące informacje:

• X – pozycja X pocisku,
• Y – pozycja Y pocisku,
• IsDirty – zmienna informująca o konieczności usunięcia pocisku po trafieniu we wrogi obiekt.

1. Przygotuj zmienne do przechowywania informacji o pociskach:

• na końcu kodu JavaScript, po linii var tankXTarget; wklej:

// Zmienne przechowujące informacje o pociskach
  var bullets = new Array();
  var Bullet = function (x, y) {
      this.X = x;
      this.Y = y;
      this.IsDirty = false; }
// Zmienne przechowujące informacje o obcych

2. W funkcji Fire() dodaj kolejny pocisk na pozycji, w której znajduje się czołg:

• zamień linijkę function Fire() { } na:

function Fire() {
  bullets.push(new Bullet(tankXTarget - 8, 644)); }
// Funkcja wyświetlająca pociski

3. Dodaj funkcję odpowiedzialną za wyświetlenie wszystkich pocisków z tablicy:

• poniżej poprzednio dodanego kodu dopisz:

function DrawBullets() {
  // Usuń pociski z listy
  for (var i = 0; i < bullets.length; i++) {
      if (bullets[i].IsDirty == true || bullets[i].Y <= 0) {
          bullets.splice(i, 1);
          i--;}
  }
  // Narysuj pociski
  var hit = false;
  for (var i = 0; i < bullets.length; i++) {
      bullets[i].Y -= 20;
      // Sprawdź, czy pocisk trafił któregoś obcego
      if (!hit)
          ctx.drawImage(bullet, bullets[i].X, bullets[i].Y);
  }
}

// Funkcja wyświetlająca obcych

1.     Wyświetl pociski na stronie:

·      w funkcji DrawGameWorld(), poniżej linijki // Pociski dopisz:

DrawBullets();

5. Zapisz zmiany. Wciśnij przycisk Run. Sprawdź, czy możesz strzelać za pomocą lewego przycisku myszki i spacji.

Obcy na ekranie

Teraz musimy przygotować informacje o obcych, którzy będą pojawiali się na ekranie. Obcy, oprócz informacji, które wcześniej określiliśmy dla pocisków, muszą dodatkowo mieć informację o prędkości poruszania się po ekranie. Nowy obiekt pojawia się na ekranie co 1 sekundę (1000 milisekund), na pozycji x równej - 70px (poza ekranem), na pozycji y - w przedziale 100-200 px i z prędkością 0 -10.

1. Przygotuj zmienne do przechowywania informacji o obcych:

• po linii // Zmienne przechowujące informacje o obcych dodaj:

var aliens = new Array();
var Alien = function (x, y, s) {
    this.X = x;
    this.Y = y;
    this.Speed = s;
    this.IsDirty = false; }

Informacja

Obcy posiada dodatkowy parametr, zawierający informację o prędkości poruszania się po świecie gry.

2. Dodaj funkcję wyświetlającą obcych:

• po linii // Funkcja wyświetlająca obcych dodaj:

function DrawAliens() {
  // Usuń obcego  z ekranu
  for (var i = 0; i < aliens.length; i++) {
      if (aliens[i].IsDirty == true || aliens[i].X > width) {
          aliens.splice(i, 1);
          i--; }
  }
  // Narysuj obcego 
  for (var i = 0; i < aliens.length; i++) {
      aliens[i].X += aliens[i].Speed;
      ctx.drawImage(alien, aliens[i].X, aliens[i].Y);
  }
}
// Funkcja dodająca obcych do listy

3. Wyświetl obcych na ekranie:

• w funkcji DrawGameWorld zmień linijkę ctx.drawImage(alien, 100, 200); na:

DrawAliens();

Informacja

Pozostał nam jeden problem, jak dodawać obcych do gry. Najprościej – cyklicznie, co 1s dodać nowego obcego.

4. Dodaj funkcję dodawania obcego do listy:

• poniżej linijki // Funkcja dodająca obcych do listy wpisz:

function CreateAlien() {
   aliens.push(new Alien(-70, 100 + Math.random() * 200, Math.random() * 10)); }

5. Dodaj cykliczne wywołanie funkcji CreateAlien:

• w funkcji checkLoad, za linijką setInterval(DrawGameWorld, 1000 / 16); dodaj:

setInterval(CreateAlien, 1000);

6. Zapisz zmiany. Wciśnij przycisk Run. Sprawdź, czy pojawiają się nowe statki na ekranie.

Informacja

Dlaczego nie „trafiamy” w obcych?

Podsumowanie

W tym artykule nauczyliśmy się dodawać i animować wieloma elementami gry.

W kolejnym artykule dowiemy się, jak wykrywać kolizje oraz informować o wyniku gry.

 

---