W poście Piszemy grę opisaliśmy pomysł na przeglądarkową grę Szybkie Palce! oraz wykonaliśmy analizę jej przebiegu. Rozpisaliśmy prosty algorytm mechaniki gry, wypisaliśmy zmienne jakich będziemy potrzebować oraz to jakie wartości początkowe będą one przyjmować. W tym poście przechodzimy do implementacji ustawień tych początkowych wartości. Za inicjalizację zmiennych będzie odpowiedzialna funkcja „RozpocznijGre” .

Dla przypomnienia, nasz pomysł na grę wygląda następująco: dwóch graczy siada przy jednej klawiaturze i wchodzą na stronę naszej gry. Gracze będą musieli wykazać się refleksem i w odpowiednim momencie nacisnąć klawisz na klawiaturze komputera. Ten który zrobi to pierwszy zdobywa punkt. Ten który zdobędzie 3 punkty wygrywa grę. Moment naciśnięcia klawisza będzie wybierany losowo oraz dodatkowo zabezpieczymy się przed nieuczciwymi graczami, którzy mogliby chcieć bezmyślnie naciskać klawisz cały czas.

Gra będzie napisana głównie w języku JavaScript i zamieszczona na stronie HTML a do jej graficznego uatrakcyjnienia skorzystamy z języka styli CSS. Kod gry jest dostępny na stronie github.com. Cała gra znajduje się w jednym pliku index.html co ułatwi jej tworzenie.

W grę można już pograć. Jest dostępna na stronie: Szybkie Palce!

Podstawowy szkielet strony HTML

Gra Szybkie Palce! jest grą przeglądarkową, czyli aby w nią grać należy przejść na stronę internetową gry. Strony internetowe tworzone są w języku HTML (ang. Hypertext Markup Language – opis na Wikipedii). Jest to język oparty na znacznikach i do wyboru mamy ich całkiem sporo (opis na w3schools.com). Określają one strukturę, czyli pewien układ strony. Na przykład możemy stworzyć stronę składającą się z paragrafów tekstu, dodać obrazki pod tekstem, kilka tabel czy linków do innych stron.

Widzimy tutaj różne znaczniki jak na przykład <html>, <head>, <body>. Dzielą one strukturę strony na sekcje (części), zagnieżdżają i tworzą hierarchię. Większość znaczników posiada swój odpowiednik kończący daną sekcję np: <body> oraz </body>.

Sekcja head zawiera różne informacje o metadanych strony. Nie są one wyświetlane użytkownikom a jedynie służą do opisania strony, na przykład możemy określić kto jest autorem. Nie musimy się skupiać na sekcji head na tym etapie.

Wartym wspomnienia jest znacznik title. W nim znajduje się tekst, tytuł strony, który przeglądarka wyświetli na otwartej zakładce. Zachęcam do stworzenia sobie prostej strony HTML oraz pozmieniania wartości tego znacznika.

W sekcji body znajdują się znaczniki opisujące naszą stronę wizualnie. Zostaną one wyświetlone użytkownikom przez przeglądarkę. Widzimy tam znaczniki takie jak: <h1>, <input>, <textarea>. Do dyspozycji mamy dużo więcej znaczników i na pewno użyjemy wielu innych. Na tym etapie gry wystarczą nam te 3.

Znacznik h1 (<h1>Gra Szybkie Palce!</h1>) określa tak zwany nagłówek, czyli wyodrębniony i pogrubiony tekst na stronie. Służy on do grupowania treści strony w logiczne rozdziały. Posiada numer określający ważność takiego nagłówka. H1 jest najważniejszy (poziom 1) a h6 najmniej ważny (poziom 6).

Znacznik input (<input type=”button” value=”START”>) ma wiele zastosowań. Możemy zmienić jego zachowanie poprzez określenie typu. W tym przypadku będzie to button czyli posłuży nam jako przycisk do naciśnięcia. Będzie to przycisk startowy do rozpoczynania gry (stąd jego wartość to START).

Jak możemy zauważyć nie wszystkie znaczniki mają swoje odpowiedniki zamykające.

Znaczniki możemy pisać zarówno małymi jak i dużymi literami.

Znacznik textarea (<textarea id=”dziennikZdarzen” cols=”100″ rows=”20″></textarea>) służy do wyświetlania okienka z tekstem. Możemy skonfigurować ile kolumn i wierszy będzie wyświetlane (tutaj odpowiednio 100 kolumn i 20 wierszy). Dodatkowo określiliśmy parametr ID tego znacznika. Dzięki temu będziemy mogli odwołać się do niego z kodu JavaScript co pozwoli nam na dynamiczne dodawanie wiadomości do wyświetlenia Graczowi.

Parametr ID możemy dodać do praktycznie każdego znacznika HTML. Jednak używajmy go rozsądnie, tylko tam gdzie jest nam potrzebny.

Dodanie kodu JavaScript

Język HTML jest językiem statycznym, to znaczy że tworzymy stronę, która ogólnie się nie zmienia, nie ma interakcji z użytkownikiem. Aby dodać dynamikę i „trochę życia” do strony korzysta się z języka JavaScript.

Uwaga: nie należy mylić języka JavaScript z językiem Java.

W celu dodania języka skryptowego JavaScript korzystamy z pary znaczników i . Pomiędzy nimi znajdzie się nasz kod i cała logika gry Szybkie Palce!

Przeglądarka wyświetlając użytkownikowi stronę czyta kody z góry na dół i wykonuje instrukcje które napotka przechodząc coraz dalej po stronie. Poniżej znajduje się struktura kodu JavaScript naszej gry:

Dla łatwiejszego zrozumienia podzieliłem kod na 4 części. W części nr 1 znajduje się funkcja alert. Jest to standardowa funkcja JavaScript, która powoduje wyświetlenie wyskakującego okienka z przyciskiem „OK” do jego zamknięcia.

alert

W części nr 2 wywoływana jest funkcja Zanotuj. Jest to funkcja stworzona przez nas i służy do wyświetlania Graczowi wiadomości. Do obu tych funkcji przekazujemy tekst z komunikatem do wyświetlenia.

Część nr 3 to zdefiniowanie zmiennych potrzebnych w naszej grze. Jest to lista przepisana z poprzedniego posta (Piszemy grę) gdzie analizowaliśmy mechanikę naszej gry.

Część nr 4 zawiera definicje funkcji (czyli kodu z logiką, którą możemy wykonywać wielokrotnie z różnych miejsc naszego programu odwołując się tylko do nazwy funkcji). Na chwilę obecną zdefiniowaliśmy 3 funkcje.

Funkcja RozpocznijGre

Pierwszą funkcją jest RozpocznijGre, która inicjuje nasze zmienne. Ustawiamy w niej wartości początkowe zgodnie z tymi ustalonymi podczas projektowania gry.

Wartości zmiennych ustawiamy na te określone przez nas podczas projektowania mechaniki gry w poprzednim poście. Zmienną czasRundy wyliczamy w osobnej funkcji. Pozwoli nam to później wyliczać czas trwania danej rundy również w innych miejscach w kodzie. Na koniec wyświetlamy Graczom informację o rozpoczęciu gry.

Funkcja WylosujCzasRundy

Czas trwania danej rundy jest wyliczany za każdym razem. Runda trwa minimum 5 sekund (wartość przekazana w parametrze funkcji o nazwie minimalnytCzasRundy) plus losowy czas od 1 do 5 sekund. Czyli łącznie, runda może trwać od 6 do 10 sekund. W celu uzyskania losowej liczby skorzystamy z funkcji Math.random.

Funkcje Math.random i Math.floor

Funkcja Math.random jest wbudowaną funkcją JavaScript generująca losową liczbę od 0 do 1. Przy czym jest to zakres <0;1) co znaczy, że możemy otrzymać 0 ale nie otrzymamy 1 (czyli największą liczbą jest 0.9999…). Wygenerowana liczba jest liczbą zmiennoprzecinkową, czyli ułamkiem. W celu uzyskania zakresu od 1 do 5 musimy wykonać trzy rzeczy:

  1. Pomnożyć wygenerowaną liczbę przez 5. Da nam to zakres o 0 do 4.9999.
  2. Dodać 1. Da nam to zakres od 1 do 5.9999
  3. Otrzymaną liczbę przekazać do funkcji Math.floor. Da nam to docelowy zakres od 1 do 5.

Funkcja Math.floor(liczba) (ang. podłoga) obetnie część ułamkową i zwróci tylko liczbę całkowitą mniejszą (lub równą jeśli nie było części ułamkowej) od przekazanej liczby. Czyli:

Funkcja Zanotuj

Ostatnią funkcją jaką stworzymy na tym etapie jest funkcja Zanotuj:

Funkcja ta jako parametr przyjmuje wiadomość tekstową i loguje ją na konsolę JavaScript przeglądarki. Aby uruchomić konsolę i zobaczyć co jest na niej wyświetlane możemy nacisnąć F12. W ten sposób otworzymy konsolę programisty z wieloma ciekawymi dostępnymi możliwościami (jedną z nich jest właśnie konsola JavaScript).

Śmiało, zrób to teraz 🙂
Jako ciekawostka polecam uruchomić konsolę JavaScript (F12) na Facebooku i zobaczyć co ciekawego jest tam wyświetlane 🙂

GetElementById

Ostatnim krokiem jest wypisanie Graczowi przekazanej wiadomości w okienku tekstowym na stronie. Jeśli wrócimy do kodu HTML naszej strony, zobaczymy, że za pomocą znacznika zdefiniowaliśmy element textarea i nadaliśmy mu ID dziennikZdarzen:

Dzięki temu możemy używać tego elementu jako obiektu już w kodzie JavaScript. Jest to możliwe ponieważ każdy element na stronie HTML znajduje się w DOM (ang. Document Object Model). Jest to zbiór wszystkich obiektów (znaczników) jakie znajdują się na stronie HTML. DOM sam jest obiektem i możemy dostać się do niego przez globalną zmienną document

Dlatego też w naszej funkcji Zanotuj pobieramy element za pomoc funkcji document.getElementById i podając ID interesującego nas obiektu. Chcąc pobrać jakiś element strony HTML dobrze jest nadać mu identyfikator.

Mając już obiekt okienka tekstowego zmieniamy jego wartość poprzez dodanie na końcu przekazanej wiadomości.

Dodanie obsługi kliknięcia na przycisk

W tym momencie mamy stworzony szkielet strony HTML i podstawowe funkcje JavaScriptowe odpowiadające za logikę naszej gry. Posiadamy też przycisk „START”, który powinien rozpoczynać nową rundę. Jednak po kliknięciu nic się nie dzieje. Należy powiedzieć przeglądarce, co ma się wydarzyć gdy ten przycisk zostanie naciśnięty.

Do tego celu używamy atrybutu onclick w znaczniku definiującym przycisk:

W atrybucie onclick podajemy funkcję JavaScript która ma zostać uruchomiona przez przeglądarkę po zdarzeniu naciśnięcia przycisku.

Pobranie kodu / praca domowa

W tym poście pojawiło się trochę nowych rzeczy. Na Drodze Programisty zaczęliśmy programować 🙂 Dlatego też zachęcam Cię do pobrania kodu tej gry. Jest on dostępny na platformie github.com i jest to tylko jeden plik HTML. Możesz to zrobić klikając w ten link: index.html i zapisując plik gdzieś na swoim komputerze.

Aby uruchomić tę grę otwórz stronę w swojej przeglądarce. Powinno pojawić się okienko powitalne.
W celu zobaczenia kodu gry otwórz plik HTML w edytorze tekstu (a nie w przegladarce). Możesz użyć zwykłego notatnika dostępnego w Windowsie. Możesz też użyć IDE (ang. Integrated Development Environment) czyli pełnoprawnego środowiska programistycznego. Ja polecam darmowe Visual Studio Code (link do pobrania: Visual Studio Code), którego używam do pisania gry Szybkie Palce!

Zachęcam Cię do pobawienia się tym kodem i eksperymentowania. Możesz:
  1. Zobaczyć co się stanie jeśli zmienisz tekst pomiędzy znacznikami <title></title>.
  2. Dodać dodać nowy przycisk i stworzyć funkcję, która wyświetli okienko (takie jak to powitalne).
  3. W okienku możesz wyświetlić na przykład wartość funkcji generującej losową liczbę.
Zmianę możesz zaobserwować zapisując plik w edytorze i odświeżając stronę w przeglądarce. Jeżeli będziesz mieć jakiekolwiek problemy, śmiało pisz w komentarzach. Z chęcią pomogę.

Na koniec

Udało Ci się dotrwać do końca tego postu. Brawo 🙂 Stworzyliśmy szkielet naszej gry, dodaliśmy obsługę kliknięcia oraz wyświetlanie informacji dla Graczy. Pozwoli nam to na sprawniejszą pracę nad dalszą logiką gry. Możesz też pograć sobie w nasza grę już teraz.

Jest dostępna pod linkiem: Szybkie Palce!

W następnym poście dowiemy się, jak zaimplementować kolejne kroki z mechaniki zaprojektowanej wcześniej na kartce papieru.

2 uwagi do wpisu “Gra Szybkie Palce! Funkcja RozpocznijGre.

Skomentuj

Wprowadź swoje dane lub kliknij jedną z tych ikon, aby się zalogować:

Logo WordPress.com

Komentujesz korzystając z konta WordPress.com. Wyloguj /  Zmień )

Zdjęcie na Google

Komentujesz korzystając z konta Google. Wyloguj /  Zmień )

Zdjęcie z Twittera

Komentujesz korzystając z konta Twitter. Wyloguj /  Zmień )

Zdjęcie na Facebooku

Komentujesz korzystając z konta Facebook. Wyloguj /  Zmień )

Połączenie z %s