Będziemy kontynuować tworzenie naszej gry w Hangmana, czyli tzw. wisielca. Udało Ci się już na pewno częściowo lub całkiem spersonalizować wygląd swojej gry więc możemy przejść do kolejnego etapu.

Dodajemy JavaScript

Dodaj do swojego kodu w pudełku JS następujący skrypt:

Na razie nie musisz go rozumieć do końca, omówimy sobie go za chwilę, ale jak pewnie widzisz, w Twojej grze pojawił się zestaw liter, informacja o wybranej kategorii, oraz o ilości żyć.

Póki co nie wygląda to za ładnie, więc musimy wrócić do stylizowania sobie tych wszystkich elementów. Do samego kodu JS i omówienia go wrócimy sobie zatem później. Zajmijmy się najpierw naszym alfabetem.

Gra w Wisielca jak dobrze wiesz, polega na wybieraniu liter, i odgadywaniu ukrytego słowa. Twoja tablica liter w tej chwili nie wygląda zbyt atrakcyjnie, więc zajmiemy się teraz stworzeniem z niej “guzików” z buttonami.

Dodaj więc kod CSS do odpowiedniego pudełka:

Jak możesz zauważyć, tutaj również występuje:hover, który określa wygląd buttonów po najechaniu na niego myszą. Oczywiście analogicznie do poprzednich elementów, tutaj też możesz edytować kod i dostosować wszystko do swoich potrzeb.

Pobaw się teraz trochę tym kodem CSS guzików, pozmieniaj, próbuj, potestuj, żeby zrozumieć zasady działania poszczególnych zmiennych.

Jak możesz zauważyć, pod Twoim alfabetem znajduje się również lista składająca się z myślników. Jest to miejsce, w którym będą wyświetlały się trafione litery. Powinniśmy nad nim popracować. W swoim kodzie CSS dodaj jeszcze:

Teraz pewnie zauważyłeś, że pojawiły się one w poziomie i wyglądają dużo lepiej. Oczywiście zmieniając CSS, możesz je dopasować do swojego stylu i tego jak chcesz, żeby wyglądała Twoja gra.

Jak już dopasujesz wizualnie wszystkie te elementy to możemy przejść do przeanalizowania naszej gry i omówienia sobie kodu JavaScript, który wcześniej wkleiliśmy.

Omawiamy wybrane skrytpy JavaScript z naszej gry!

Możesz już spróbować zagrać w swoją grę, ale przejdziemy teraz do omówienia części kodu JavaScript, który dodaliśmy do naszej gry, żeby zrozumieć, w jaki sposób gra działa i jak można zmodyfikować jej działanie.

Wewnątrz kodu JS możesz znaleźć komentarze, które ułatwią Ci zrozumienie kodu. Komentrze znajdują się po “//” i nie wpływają one na działanie gry. Dla przykładu jednym z takich komentarzy jest // Select Catagory nad poniższym skryptem:

Jest to skrypt odpowiedzialny za wybór kategorii które mamy w naszej grze. Nasza gra pozwala grać w takie kategorie jak: drużyny piłkarskie, filmy, miasta.

Ten skrypt odpowiada za wyświetlenie odpowiedniej informacji tekstowej, jaka kategoria została wylosowana w naszej grze. Możesz zmienić wyświetlany tekst, po wyborze kategorii. Tekst w JS znajduje się między cudzysłowami “przykładowy tekst” na przykład tutaj: "The Chosen Category Is Films";

Znajdź ten fragment kodu, i przetłumacz wszystkie te wyświetlane treści na język polski.

W momencie, w którym nasza gra wylosuje sobie odpowiednią kategorię, to następnie losuje jedno ze słów do zgadywania z danej kategorii. Słowa dostępne w naszej grze znajdziesz w tym fragmencie kodu, skomentowanym jako //Play:

Odnajdź go w swoim pudełku JS. Możesz oczywiście edytować te słowa w cudzysłowach, a nawet zmienić nazwę kategorii i dopasować do niej swoje własne słowa. Dla poćwiczenia zmień w poprzednim fragmencie kodu informację o wybraniu kategorii drużyn piłkarskich na rośliny, a następnie podmień słowa w odpowiedniej kategorii na bazę roślin, która będzie dostępna w grze. Jeżeli nie chcesz roślin to równie dobrze mogą być to zwierzęta lub inna wybrana przez Ciebie kategoria, którą chcesz umieścić w swoim wisielcu.

Pewnie już udało Ci się zauważyć, że nasza gra podaje również ilość żyć pozostałych do zakończenia gry poprzez przegranie. Znajduje się ona w tym fragmencie kodu skomentowanym jako //showlives:

Zwróć uwagę na ten fragment: "You have " + lives + " lives"; i zauważ, że jedynie "Yoy have" i drugie lives znajduje się w cudzysłowie. Lives bez cudzysłowu to zaciągnięcie informacji z kodu naszej gry z liczbą ilości pozostałych żyć. Tak więc informacja, która się wyświetla tekst “You have” następnie zaciąga liczbę pozostałych żyć i wyświetla słowo “żyć”. Może wydaje się to na początku skomplikowane ale wcale nie jest. Przeedytuj fragmenty tekstowe tego kodu na takie, które chcesz, żeby zostały wyświetlane. Poza wspomnianymi fragmentami tekstu wyświetlanymi przez JS, masz w tym fragmencie kodu jeszcze inne. Spróbuj je znaleźć i zmienić.

Zwróć uwagę, że lista dostępnych znaków w Twojej grze do zgadywania nie zawiera polskich znaków. Uniemożliwia to granie w grę, jeżeli w Twoich kategoriach znajdą się słowa zawierające polskie litery.

Fragment kodu odpowiedzialny za umieszczenie w naszej grze guzików z literkami to ten fragment JS:

Znajdź go teraz w swoim pudełku JS i dodaj polskie znaki takie jak ą ę ś ć ź. Pozwoli Ci to rozbudować grę o polskie słowa. Dodaj je dokładnie w taki sam sposób, w jaki dodane są pozostałe znaki. Najlepiej w takiej kolejności w jakiej znajdują się w alfabecie. Chyba że chcesz, żeby te znaki znajdowały się na końcu Twojego alfabetu. Nie bój się i pokombinuj i ustaw tak, żeby było jak najlepiej.

Dodatkowo załączam wideo-tutorial z pisania tej gry i zapraszam Cię do przeanalizowania i uzupełnienia wiedzy dodatkowo w ten sposób. Zobacz wideo tutorial z tworzenia gry!

Jak już dostosujesz grę do swoich potrzeb, to pochwal się nią na naszej grupie wyzwaniowej na Facebooku.