7.3 KiB

Raw Blame History

Stwórz grę kosmiczną, część 5: Punkty i życia

Quiz przed lekcją

W tej lekcji dowiesz się, jak dodać system punktacji do gry oraz jak obliczać życia.

Wyświetlanie tekstu na ekranie

Aby wyświetlić wynik gry na ekranie, musisz wiedzieć, jak umieścić tekst na ekranie. Odpowiedzią jest metoda fillText() obiektu canvas. Możesz również kontrolować inne aspekty, takie jak czcionka, kolor tekstu czy jego wyrównanie (lewo, prawo, środek). Poniżej znajduje się kod, który rysuje tekst na ekranie.

ctx.font = "30px Arial";
ctx.fillStyle = "red";
ctx.textAlign = "right";
ctx.fillText("show this on the screen", 0, 0);

✅ Przeczytaj więcej o dodawaniu tekstu do canvas i spróbuj sprawić, by Twój tekst wyglądał bardziej efektownie!

Życie jako koncepcja w grze

Koncepcja życia w grze to po prostu liczba. W kontekście gry kosmicznej często przypisuje się zestaw żyć, które są odejmowane jedno po drugim, gdy Twój statek zostaje uszkodzony. Fajnie jest, jeśli możesz pokazać graficzną reprezentację tego, na przykład w postaci miniaturowych statków lub serc, zamiast samej liczby.

Co zbudować

Dodajmy następujące elementy do Twojej gry:

Wynik gry: Za każdy zniszczony statek wroga bohater powinien otrzymać punkty, sugerujemy 100 punktów za statek. Wynik gry powinien być wyświetlany w lewym dolnym rogu.
Życia: Twój statek ma trzy życia. Tracisz jedno życie za każdym razem, gdy statek wroga zderzy się z Tobą. Liczba żyć powinna być wyświetlana w prawym dolnym rogu i przedstawiona za pomocą następującej grafiki .

Sugerowane kroki

Znajdź pliki, które zostały dla Ciebie utworzone w podfolderze your-work. Powinny zawierać następujące elementy:

-| assets
  -| enemyShip.png
  -| player.png
  -| laserRed.png
-| index.html
-| app.js
-| package.json

Uruchom swój projekt w folderze your_work, wpisując:

cd your-work
npm start

Powyższe polecenie uruchomi serwer HTTP pod adresem http://localhost:5000. Otwórz przeglądarkę i wpisz ten adres. W tym momencie powinien być widoczny bohater i wszyscy wrogowie, a gdy naciśniesz strzałki w lewo i w prawo, bohater będzie się poruszał i mógł zestrzeliwać wrogów.

Dodaj kod

Skopiuj potrzebne zasoby z folderu solution/assets/ do folderu your-work; dodasz zasób life.png. Dodaj lifeImg do funkcji window.onload:
```
lifeImg = await loadTexture("assets/life.png");
```

Dodaj lifeImg do listy zasobów:

let heroImg,
...
lifeImg,
...
eventEmitter = new EventEmitter();

Dodaj zmienne. Dodaj kod reprezentujący Twój całkowity wynik (0) i pozostałe życia (3), wyświetl te wartości na ekranie.

Rozszerz funkcję updateGameObjects(). Rozszerz funkcję updateGameObjects(), aby obsługiwała kolizje z wrogami:

enemies.forEach(enemy => {
    const heroRect = hero.rectFromGameObject();
    if (intersectRect(heroRect, enemy.rectFromGameObject())) {
      eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
    }
  })

Dodaj life i points.

Zainicjalizuj zmienne. Pod this.cooldown = 0 w klasie Hero ustaw zmienne life i points:
```
this.life = 3;
this.points = 0;
```

Rysuj zmienne na ekranie. Wyświetl te wartości na ekranie:

function drawLife() {
  // TODO, 35, 27
  const START_POS = canvas.width - 180;
  for(let i=0; i < hero.life; i++ ) {
    ctx.drawImage(
      lifeImg, 
      START_POS + (45 * (i+1) ), 
      canvas.height - 37);
  }
}

function drawPoints() {
  ctx.font = "30px Arial";
  ctx.fillStyle = "red";
  ctx.textAlign = "left";
  drawText("Points: " + hero.points, 10, canvas.height-20);
}

function drawText(message, x, y) {
  ctx.fillText(message, x, y);
}

Dodaj metody do pętli gry. Upewnij się, że dodałeś te funkcje do funkcji window.onload pod updateGameObjects():
```
drawPoints();
drawLife();
```

Zaimplementuj zasady gry. Zaimplementuj następujące zasady gry:

Za każdą kolizję bohatera z wrogiem odejmij jedno życie.

Rozszerz klasę Hero, aby odjąć życie:

decrementLife() {
  this.life--;
  if (this.life === 0) {
    this.dead = true;
  }
}

Za każdy laser, który trafi wroga, zwiększ wynik gry o 100 punktów.

Rozszerz klasę Hero, aby zwiększyć wynik:

  incrementPoints() {
    this.points += 100;
  }

Dodaj te funkcje do swoich Emiterów Zdarzeń Kolizji:

eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
   first.dead = true;
   second.dead = true;
   hero.incrementPoints();
})

eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
   enemy.dead = true;
   hero.decrementLife();
});

✅ Poszukaj informacji o innych grach stworzonych za pomocą JavaScript/Canvas. Jakie mają wspólne cechy?

Po zakończeniu tej pracy powinieneś zobaczyć małe statki reprezentujące życie w prawym dolnym rogu, punkty w lewym dolnym rogu, a także zmniejszającą się liczbę żyć po kolizji z wrogami oraz rosnące punkty po zestrzeleniu wrogów. Świetna robota! Twoja gra jest prawie gotowa.

🚀 Wyzwanie

Twój kod jest prawie gotowy. Czy potrafisz wyobrazić sobie kolejne kroki?

Quiz po lekcji

Przegląd i samodzielna nauka

Zbadaj sposoby, w jakie można zwiększać i zmniejszać wyniki gry oraz liczbę żyć. Istnieją interesujące silniki gier, takie jak PlayFab. Jak ich użycie mogłoby ulepszyć Twoją grę?

Zadanie

Stwórz grę z punktacją

Zastrzeżenie:
Ten dokument został przetłumaczony za pomocą usługi tłumaczenia AI Co-op Translator. Chociaż dokładamy wszelkich starań, aby tłumaczenie było precyzyjne, prosimy pamiętać, że automatyczne tłumaczenia mogą zawierać błędy lub nieścisłości. Oryginalny dokument w jego rodzimym języku powinien być uznawany za źródło autorytatywne. W przypadku informacji o kluczowym znaczeniu zaleca się skorzystanie z profesjonalnego tłumaczenia przez człowieka. Nie ponosimy odpowiedzialności za jakiekolwiek nieporozumienia lub błędne interpretacje wynikające z użycia tego tłumaczenia.

7.3 KiB Raw Blame History