close
witcher

W tej części poradnika pt. “Tworzenie gry przeglądarkowej” dodamy możliwość kupowania, zakładania i zdejmowania różnych przedmiotów. Zaczynajmy 🙂

Na początku przejdźmy do bazy danych i stwórzmy tabelę o nazwie items, która będzie przechowywała wszystkie przedmioty.

tabela items

Tabela składa się z sześciu kolumn. Są to:

  • id – unikalny identyfikator przedmiotu
  • uid – identyfikator właściciela przedmiotu
  • name – nazwa przedmiotu
  • defense – ilość obrony dodawanej przez przedmiot
  • attack – ilość ataku dodawanego przez przedmiot
  • is_equipped – przyjmuje wartość 0 dla przedmiotu aktualnie nie używanego lub 1 dla używanego

Tabela jest już gotowa. Możemy teraz przejść do klasy ModuleLoader i dodać nową metodę – loadItemsShop, która wyświetli przedmioty, które będą do kupienia w sklepie.

Pod zamykającą klamrą metody load dodaj następujący kod:

Ta metoda przyjmuje w parametrach nazwę i cenę przedmiotu. Następnie wyświetla przedmiot w oparciu o te parametry. Wykorzystajmy od razu tą metodę w tej samej klasie i uzupełnijmy case sklep.

Korzystamy tutaj z wcześniej napisanej metody, aby wyświetlić przedmioty – miecz i tarczę.

Przejdźmy teraz do pliku style.css i dodajmy kilka nowych reguł:

Skoro mamy już strukturę HTML CSS to możemy przejść do napisania kodu PHP, który obsłuży kupowanie przedmiotów. Przejdźmy do klasy GameManager i dodajmy metodę o nazwie buyItem, która obsłuży kupowanie przedmiotów. Zamykającym znacznikiem metody checkWorkStatus dodajmy następujący kod:

Cała metoda jest dosyć prosta. Dodałem kilka komentarzy, aby wszystko było bardziej zrozumiałe.

Przejdźmy teraz do pliku wlasny.js i dodajmy kod, który wyśle żądanie:

Żądanie zostaje przesłane do pliku buyItem.library.php.  Utwórzmy go teraz wewnątrz folderu LIBRARY.

Plik buyItem.library.php:

Pamiętajmy jeszcze o dodaniu kolejnego case wewnątrz klasy MainPage:

Gracz ma już możliwość kupowania przedmiotu 🙂

Powinniśmy teraz pomyśleć nad miejscem gdzie gracz będzie mógł przejrzeć zdobyte przedmioty i z nich korzystać. Moglibyśmy np. dodać nową stronę o nazwie Ekwipunek i tam wyświetlić przedmioty gracza. Możesz tak zrobić. Ja po prostu zrobię to na stronie ze statystykami.

Przejdźmy do klasy ModuleLoader i dodajmy kolejną metodę, która wyświetli listę posiadanych przedmiotów. Zaraz pod wcześniej napisaną metodą, dodaj kolejną:

Metoda loadItemsEquipment różni się trochę od loadItemsShop. Posiada ona parametry, które ułatwią wyświetlenia informacji o przedmiocie. Użyjmy jej teraz wewnątrz case statystyki:

Został dodany tylko jeden div o klasie rowWewnątrz niego korzystamy z napisanej wcześniej metody i wyświetlamy posiadane przez gracza przedmioty.

Wróćmy teraz do klasy GameManager i dodajmy dwie nowe metody, odpowiadające za ubieranie i ściąganie ekwipunku.

Całość została opisana komentarzami. Pierwsza metoda sprawdza czy nie jest już ubrany podobny przedmiot (bo przecież nie chcemy aby gracz mógł ubrać kilka mieczy). Druga metoda odpowiada za ściągnięcie przedmiotu.

Dodajmy teraz w pliku wlasny.js instrukcje odpowiedzialne za wysłanie żądania założenia/zdjęcia przedmiotu:

Funkcja manageItem realizuje jednocześnie zakładanie i zdejmowanie przedmiotów. Utwórzmy teraz plik ekwipunek.library.php, w którym obsłużymy wysłane z poziomu Javascriptu żądanie.

Plik ekwipunek.library.php:

W zależności od parametru ACTION z funkcji manageItem odwołujemy się do odpowiednich metod. Dodajmy jeszcze kolejny case w klasie MainPage:

I to wszystko. Gracz może już kupować, zakładać i zdejmować przedmioty.

Przykład możesz zobaczyć tutaj.

Paczkę możesz pobrać tutaj.