Gry praktycznie w HTML5 - Kolizje  

Autor: Piotr Bubacz

Opublikowano: 2012-03-30

W poprzednim odcinku kursu nauczyliśmy się poruszyć świat gry. Teraz nadszedł czas na wykrycie kolizji obiektów w naszej grze oraz na dodanie informacji o zdobytych punktach.

Przed wykonaniem zadań powinieneś znać:

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

Po wykonaniu zadań dowiesz się:

• jak wykryć kolizję,
• jak dodać informacje o zdobytych punktach.

Implementacja

W tej części kursu wykorzystamy stronę, którą przygotowaliśmy w poprzednim odcinku kursu. Dodamy do niej wykrywanie kolizji oraz wyświetlanie informacji o zdobytych punktach. Wynik zadania został przedstawiony na Rys. 1.

Rys. 1. Obcy i pociski w ruchu.

Wykrywanie kolizji to sprawdzenie, czy przemieszczenie obiektu w danym kierunku jest możliwe, czy nie znajdują się na jego drodze jakieś przeszkody, a jeżeli tak, to należy podjąć decyzję, w przypadku gdy coś dzieje się z obiektem i przeszkodą. W naszym przypadku skupimy się na sprawdzeniu, czy wystrzelony pocisk nie znajduje się w obszarze obcego, jeśli tak, to usuniemy pocisk i obcego z ekranu gry, dodamy punkty za trafienie i wyświetlimy na ekranie wynik.

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 3.RuchElementow-koniec.html.

Pociski na stronie

Pocisk porusza się pionowo od miejsca, w którym wystrzelił go użytkownik. Jego pozycja przechowywana jest w obiekcie Bullet w tablicy bullets. Obcy porusza się ze strony lewej na prawą. Jego pozycja przechowywana jest w obiekcie Alien w tablicy aliens.

Na Rys. 2. Przedstawiona została sytuacja, w której pocisk zbliża się do obcego. Obcy i pocisk zostały obrysowane czarnymi prostokątami, aby przedstawić obszar działania kolizji. Pozycja (0,0) dla obiektów znajduje się w lewym górnym rogu, zatem, jeżeli odległość między pozycjami wynosi: X < 70 oraz Y <62 (70x60 – wielkość obrazka obcego), to oba obiekty, po trafieniu, usuwane są z gry i dodany zostaje punkt dla użytkownika.

Rys. 2. Kolizje obiektów w grze.

Niestety, kolizję wykrywamy na przecięciu dwóch prostokątów – obcego i pocisku, co powoduje, że jeśli „trafimy” w prawą lub lewą stronę, to usuniemy obcego, mimo że pocisk nie doszedł do krawędzi obcego. W przypadku obiektów bardziej skomplikowanych należy wziąć pod uwagę kilka obszarów prostokątnych.

1. Sprawdź, czy pocisk znajduje się obok obcego:

• w funkcji DrawBullets(), po linijce // sprawdź, czy pocisk trafił któregoś obcego wpisz:

for (var a = 0; a < aliens.length && hit == false; a++) {
    if ((Math.abs(aliens[a].X - bullets[i].X) < 70) && (Math.abs(aliens[a].Y - bullets[i].Y) < 62)) { 
      aliens[a].IsDirty = true;
      bullets[i].IsDirty = true;
      hit = true;
    }
}

2. Zapisz zmiany. Wciśnij przycisk Run. Sprawdź, czy możesz trafić pociskiem statki na ekranie.

Dodawanie punktów

Teraz musimy zliczać i wyświetlać punkty za trafienia.

1. Dodaj zmienną przechowującą zliczane punkty:

• w linijce powyżej </script> dodaj:

// Zmienna przechowująca punkty
var score = 0;

2. Dodaj funkcję wyświetlającą liczbę punktów:

• powyżej linijki // Funkcja wyświetlająca obcych dodaj:

function DrawScore() {
  ctxMain.fillStyle = 'rgb(0,0,0)';
  ctxMain.font = "bold 1.8em sans-serif";
  ctxMain.fillText("Score: " + score, 12, 40);
}

3. Dodaj wywołanie funkcji wyświetlającej w funkcji DrawGameWorld():

• w funkcji DrawGameWorld(), poniżej linijki ctxMain.drawImage(canvasBuffer, 0, 0); dopisz:

DrawScore();

4. Zwiększ zmienną score przy każdym wykryciu kolizji:

• w funkcji DrawBullets(), po linijce hit = true; dodaj:

score++;

5. Zapisz zmiany. Wciśnij przycisk Run. Sprawdź, czy punkty są poprawnie liczone i wyświetlane.

Informacja

Zauważ, że punkty musimy wypisać bezpośrednio na głównym elemencie Canvas, a nie na buforze, ponieważ tekst nie może zostać przerysowany przez metodę drawImage.

Podsumowanie

W tym artykule nauczyliśmy się wykrywać kolizję oraz wyświetlać informacje o stanie gry na elemencie canvas.

 

---