8.8 KiB

Raw Permalink Blame History

Budowanie Gry Kosmicznej Część 6: Zakończenie i Restart

Quiz przed wykładem

Istnieje wiele sposobów na określenie warunku zakończenia w grze. To od Ciebie, jako twórcy gry, zależy, dlaczego gra się kończy. Oto kilka powodów, zakładając, że mówimy o grze kosmicznej, którą budujesz:

Zniszczono N wrogich statków: Jest to dość powszechne, jeśli podzielisz grę na różne poziomy, gdzie musisz zniszczyć N wrogich statków, aby ukończyć poziom.
Twój statek został zniszczony: Są gry, w których przegrywasz, jeśli Twój statek zostanie zniszczony. Innym popularnym podejściem jest koncepcja żyć. Za każdym razem, gdy Twój statek zostanie zniszczony, tracisz jedno życie. Gdy wszystkie życia zostaną utracone, przegrywasz grę.
Zebrano N punktów: Kolejnym częstym warunkiem zakończenia jest zebranie punktów. Jak zdobywasz punkty, zależy od Ciebie, ale często przypisuje się je do różnych działań, takich jak niszczenie wrogich statków lub zbieranie przedmiotów, które wypadają po ich zniszczeniu.
Ukończenie poziomu: Może to obejmować kilka warunków, takich jak zniszczenie X wrogich statków, zebranie Y punktów lub zdobycie określonego przedmiotu.

Restartowanie

Jeśli ludzie polubią Twoją grę, prawdopodobnie będą chcieli zagrać w nią ponownie. Gdy gra się kończy z jakiegokolwiek powodu, powinieneś zaoferować możliwość jej restartu.

✅ Zastanów się, w jakich warunkach gra się kończy, a następnie jak jesteś zachęcany do jej restartu.

Co zbudować

Dodasz te zasady do swojej gry:

Wygranie gry. Gdy wszystkie wrogie statki zostaną zniszczone, wygrywasz grę. Dodatkowo wyświetl jakiś komunikat o zwycięstwie.
Restart. Gdy wszystkie życia zostaną utracone lub gra zostanie wygrana, powinieneś zaoferować możliwość restartu gry. Pamiętaj! Musisz zainicjować grę od nowa, a poprzedni stan gry powinien zostać wyczyszczony.

Zalecane kroki

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

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

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

cd your-work
npm start

Powyższe uruchomi serwer HTTP pod adresem http://localhost:5000. Otwórz przeglądarkę i wpisz ten adres. Twoja gra powinna być w stanie grywalnym.

wskazówka: aby uniknąć ostrzeżeń w Visual Studio Code, edytuj funkcję window.onload, aby wywoływała gameLoopId tak jak jest (bez let), i zadeklaruj gameLoopId na początku pliku, niezależnie: let gameLoopId;

Dodaj kod

Śledzenie warunku zakończenia. Dodaj kod, który śledzi liczbę wrogów lub czy statek bohatera został zniszczony, dodając te dwie funkcje:

function isHeroDead() {
  return hero.life <= 0;
}

function isEnemiesDead() {
  const enemies = gameObjects.filter((go) => go.type === "Enemy" && !go.dead);
  return enemies.length === 0;
}

Dodaj logikę do obsługi komunikatów. Edytuj eventEmitter, aby obsługiwał te warunki:

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

    if (isEnemiesDead()) {
      eventEmitter.emit(Messages.GAME_END_WIN);
    }
});

eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
    enemy.dead = true;
    hero.decrementLife();
    if (isHeroDead())  {
      eventEmitter.emit(Messages.GAME_END_LOSS);
      return; // loss before victory
    }
    if (isEnemiesDead()) {
      eventEmitter.emit(Messages.GAME_END_WIN);
    }
});

eventEmitter.on(Messages.GAME_END_WIN, () => {
    endGame(true);
});

eventEmitter.on(Messages.GAME_END_LOSS, () => {
  endGame(false);
});

Dodaj nowe typy komunikatów. Dodaj te komunikaty do obiektu constants:
```
GAME_END_LOSS: "GAME_END_LOSS",
GAME_END_WIN: "GAME_END_WIN",
```
Dodaj kod restartu. Dodaj kod, który restartuje grę po naciśnięciu wybranego przycisku.
1. Nasłuchiwanie naciśnięcia klawisza Enter. Edytuj eventListener okna, aby nasłuchiwał tego naciśnięcia:
```
 else if(evt.key === "Enter") {
    eventEmitter.emit(Messages.KEY_EVENT_ENTER);
  }
```
1. Dodaj komunikat restartu. Dodaj ten komunikat do constants Messages:
```
KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
```

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

Warunek wygranej gracza. Gdy wszystkie wrogie statki zostaną zniszczone, wyświetl komunikat o zwycięstwie.

Najpierw utwórz funkcję displayMessage():

function displayMessage(message, color = "red") {
  ctx.font = "30px Arial";
  ctx.fillStyle = color;
  ctx.textAlign = "center";
  ctx.fillText(message, canvas.width / 2, canvas.height / 2);
}

Utwórz funkcję endGame():

function endGame(win) {
  clearInterval(gameLoopId);

  // set a delay so we are sure any paints have finished
  setTimeout(() => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    if (win) {
      displayMessage(
        "Victory!!! Pew Pew... - Press [Enter] to start a new game Captain Pew Pew",
        "green"
      );
    } else {
      displayMessage(
        "You died !!! Press [Enter] to start a new game Captain Pew Pew"
      );
    }
  }, 200)  
}

Logika restartu. Gdy wszystkie życia zostaną utracone lub gracz wygra grę, wyświetl komunikat, że grę można zrestartować. Dodatkowo zrestartuj grę, gdy naciśnięty zostanie klawisz restartu (możesz zdecydować, który klawisz zostanie przypisany do restartu).

Utwórz funkcję resetGame():

function resetGame() {
  if (gameLoopId) {
    clearInterval(gameLoopId);
    eventEmitter.clear();
    initGame();
    gameLoopId = setInterval(() => {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = "black";
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      drawPoints();
      drawLife();
      updateGameObjects();
      drawGameObjects(ctx);
    }, 100);
  }
}

Dodaj wywołanie do eventEmitter, aby zresetować grę w initGame():

eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
  resetGame();
});

Dodaj funkcję clear() do EventEmitter:
```
clear() {
  this.listeners = {};
}
```

👽 💥 🚀 Gratulacje, Kapitanie! Twoja gra jest gotowa! Świetna robota! 🚀 💥 👽

🚀 Wyzwanie

Dodaj dźwięk! Czy możesz dodać dźwięk, aby poprawić rozgrywkę, na przykład gdy laser trafia, bohater ginie lub wygrywa? Zobacz ten sandbox, aby dowiedzieć się, jak odtwarzać dźwięk za pomocą JavaScript.

Quiz po wykładzie

Przegląd i samodzielna nauka

Twoim zadaniem jest stworzenie nowej przykładowej gry, więc eksploruj ciekawe gry, aby zobaczyć, jaki typ gry możesz zbudować.

Zadanie

Zbuduj Przykładową Grę

Zastrzeżenie:
Ten dokument został przetłumaczony za pomocą usługi tłumaczenia AI Co-op Translator. Chociaż staramy się zapewnić dokładność, 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 autorytatywne źródło. 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 korzystania z tego tłumaczenia.

8.8 KiB Raw Permalink Blame History