Irysy Tworzą Internet #2 – Wstęp do jQuery – Gra Memory

W poprzednim wpisie zapowiedzieliśmy kilka artykułów z zakresu tworzenia stron internetowych. Dzisiejszy wpis jest wstępem do bardzo popularnej biblioteki do JavaScripta w świecie stron www – jQuery.

Jest to biblioteka napisana w JavaScripcie, której motto brzmi write less, do more i to właśnie umożliwia. Dzięki niej, możemy zmieniać strukturę strony internetowej w bardzo prosty i przyjemny sposób. Zobaczmy co m.in. można dzięki niej zrobić:

  • ukrywanie / pokazywanie elementów na stronie,
  • zmiana koloru, wyglądu,
  • animowanie elementów strony,
  • zmiana zawartości strony bez przeładowywania całej strony,
  • reagowanie na działania użytkownika (np. kliknięcie myszką lub wciśnięcie klawisza),
  • i wiele innych

Biblioteka jQuery jest niesamowita i przede wszystkim – bardzo prosta. Dość więc gadania, dajmy się oczarować jej magii 😉

Co dzisiaj zrobimy

Dzisiaj napiszemy prostą grę przeglądarkową – memory. Oto końcowy efekt naszej pracy:

live demo – kod źródłowy

Poradnik został napisany z myślą o tym, aby czytelnik sam tworzył grę memory na podstawie kawałków kodu, a nowe opcje i możliwości jQuery będą wyjaśniane na bieżąco.

Przewidywany czas na ukończenia poradnika: 30 min.

1. Przygotowanie

Na początek utworzymy nowy plik o nazwie index.html. Otwórz go za pomocą swojego ulubionego programu do edycji stron www (np. Atom lub notatnik) i wklej do niego następujący kod:

Widzimy podstawową strukturę strony w HTML-u. W znaczniku <head> podłączyliśmy czcionkę Roboto oraz nasz własny arkusz styli styles.css, który zaraz utworzymy. Tuż przed zakończeniem znacznika <body> dołączamy bibliotekę jQuery oraz plik game.js, w którym znajdować się będzie cała logika naszej gry (słowo logika programu można rozumieć jako zasady działania).

Teraz utwórz plik o nazwie styles.css i wklej do niego poniższą zawartość:

Możesz przejrzeć zawartość tego pliku. Zawiera on definicje wyglądu gry, którą tworzymy (określa kolory, czcionkę, ustawienie elementów itp.). W tym kursie skupiamy się na JavaScripcie i bibliotece jQuery, więc nie będziemy omawiać CSSa.

Pobierz wszystkie zdjęcia dostępne pod tym linkiem i wstaw je do folderu images.

Na koniec utwórz plik o nazwie game.js. To do niego dodamy najważniejszą część naszej gry.

2. Pasek stanu gry

Dodaj poniższy kod do pliku index.html, zaraz po znaczniku <body>.

Dodaliśmy właśnie czarny pasek u góry strony. Kolor i szerokość paska ustawiony jest w pliku styles.css. Otwórz teraz plik index.html za pomocą przeglądarki internetowej. Gra powinna wyglądać teraz mniej więcej tak:

W elemencie div o id status-gry wyświetlana będzie liczba znalezionych par oraz liczba prób.

Teraz czas na dodanie wszystkich klocków gry. Pod kodem, który przed chwilą dodaliśmy w pliku index.html dodajmy zdjęcia:

Dodaliśmy element div o identyfikatorze gra, a w nim czternaście elementów div o klasie klocek. W każdym klocku znajduje się element img, który w HTMLu oznacza nic innego jak zdjęcie. Co może jeszcze wydawać się ciekawe, to atrybut mem-number występujący przy każdym klocku. Ten atrybut będziemy używać, aby sprawdzić, czy dwa kliknięte przez gracza klocki mają taki sam numer, czyli aby sprawdzić czy są takie same.

Odśwież stronę, a zobaczysz całą kolekcję postaci z Nordala 🙂 Czy nie są piękne?

3. Czas na jQuery

Otwórz plik game.js i uzupełnij go poniższym kodem:

Do biblioteki jQuery odnosimy się poprzez napisanie jQuery. Z racji tego, że obiekt ten jest często używany, twórcy biblioteki stworzyli dla niego alias: $. Powyższy kod można więc zapisać prościej:

Podstawową składnią biblioteki jQuery jest:

$( selektor ).nazwaFunkcji();

Widzimy objekt jQuery – $, a następnie w nawiasach podany selektor. Selektorem może być dowolny element z naszego pliku HTML. Spójrzmy na kilka przykładów:

  • $('[id="status-gry"]')– w ten sposób odwołamy się do dowolnego elementu (np. div‘a) o atrybucie id = status-gry
  • $('#status-gry') – oznacza dokładnie to samo, co powyżej. W jQuery (tak samo jak w CSSie), hasz (#) jest aliasem dla atrybutu id.
  • $('.klocek') – W ten sposób odwołamy się do elementu o klasie = klocek
  • $('[mem-number=1]') – tak możemy odwołać się do wszystkich elementów, które mają atrybut mem-number równy jeden. W pliku index.html masz już 14 elementów z atrybutem mem-number, ale tylko dwa z nich mają mem-number=1

jQuery oferuje dużo więcej selektorów, których nauczysz się z czasem.

Widzimy, że w kodzie, który wkleiliśmy do pliku game.js uruchamiamy funkcję ready() dla selektora document. Dokument to oczywiście cały nasz dokument (cały kod HTML). Funkcja ready() oznacza: uruchom mnie, kiedy cała strona się pobierze. Dzięki temu wiemy, że nasza gra nie rozpocznie się przed pobraniem wszystkich potrzebnych plików. Jedna linijka, a tyle korzyści! jQuery <3!

Jako atrybut funkcji ready() przekazaliśmy coś, co może wyglądać dziwnie: function() { ... }. Jest to po prostu przekazanie funkcji jako atrybut innej funkcji. Ten zabieg jest bardzo popularny w JavaScripcie.

W ciele przekazanej funkcji mamy deklarację 3 zmiennych oraz instrukcję wyświetlenia komunikatu. Komunikat ten wyświetli się dopiero po załadowaniu się strony. Zapisz i uruchom plik index.html. Po załadowaniu się plików, powinien wyskoczyć taki komunikat:

4. Aktualizacja statusu

Teraz możesz usunąć linijkę:

Była ona potrzebna tylko, żeby sprawdzić działanie funkcji ready.

W miejsce usuniętej linijki, dodaj deklarację funkcji, która będzie zmieniać status naszej gry oraz jej wywołanie:

Widzimy, że zmiana statusu gry w jQuery wymaga jedynie jednej linijki! Uruchamiamy funkcję html, która zmienia zawartość wybranego selektora na to, co przekażemy jej w parametrze. Zauważ, że selektorem jest tutaj element o id = status-gry.

Spróbuj zmienić zmienną liczbaZnalezionych na wartość inną niż 0 i odśwież stronę. Musisz przyznać, że zmienianie zawartości elementów na stronie przy użyciu jQuery, to pestka! 🙂

5. Ukrycie klocków

Zapewne zastanawiasz się, jak ukryć nasze postacie. Bez tego, nasze memory nie będą miały sensu. Dodajmy w pliku index.html element div o klasie przesłona, który w pliku styles.css został tak zdefiniowany, żeby zasłaniać zdjęcia. Po każdym wystąpieniu <img src="images/objX.png" /> dodaj element <div class="przeslona"></div>. Twój plik index.html powinien teraz wyglądać następująco:

6. Kliknięcie klocka

Wracamy do game.js. Czas dodać opcję, która po naciśnięciu na element o klasie przesłona ukryje ten element. Dopisz pod aktualizujStatus(); następujący kod:

Po naciśnięciu w element .przesłona (kropka oznacza klasę elementu), mamy ukryć element, który został naciśnięty. Odśwież stronę i sprawdź, czy nasza gra działa, jak należy.

Zmienna wybranyKlocek ma wartość 0. Dopiszmy kod, który pobierze atrybut mem-number z ojca przesłony, która została kliknięta. Zauważ, że przesłony leżą wewnątrz elementów klocek. To oznacza, że klocek jest ojcem elementu przesłona. Nasz plik game.js powinien wyglądać następująco:

Funkcja attr() zwraca wartość atrybutu podanego w nawiasie.

Zauważ, że w linijce 19 pojawił się kod, który do konsoli wypisuje numer klikniętego klocka. Naciśnij F12 w przeglądarce internetowej i przejdź do zakładki Konsola. Teraz kliknij w klocek i zobacz, czy konsoli rzeczywiście pojawia się numer wybranej postaci 🙂 W ten sposób możesz sprawdzać wartości zmiennych pisząc własny kod JavaScript.

Kiedy gracz kliknie drugi raz przesłonę (inną), wybranyKlocek będzie już miał numer przypisany od poprzedniego razu, więc program nie wejdzie w instrukcję warunkową if. Pod nią, dopiszmy kolejną instrukcję, która sprawdzi, czy wybranyKlocek jest równy klikniętemu klockowi. Jeżeli tak, to znaleźliśmy parę.

Zanim to jednak zrobimy, dodajmy małe okienko z informacją, że znaleźliśmy parę. Przejdź do pliku index.html i zaraz po elemencie <div id="gra"> dopisz:

Odśwież stronę i poszukaj małego okienka z napisem: Znaleziono parę 🙂

Chcemy jednak, żeby okienko pojawiło się tylko w momencie znalezienia pary. Otwórz więc plik styles.css i znajdź miejsce, gdzie opisywany jest nowo dodany element (linijka 35). Zauważ, że również w CSSie, element o określonym id oznaczany jest przez hasz (#informacja-znaleziono). Zmień linijkę display: block na display: none. Dzięki temu, #informacja-znaleziono będzie ukryta przy załadowaniu strony.

Do końca poradnika nie zostało już wiele. Przed nami:

  • obsłużenie znalezienia pary,
  • po odkryciu dwóch klocków które nie są takie same, klocki muszą zniknąć,
  • musimy sprawdzać, czy kliknięty klocek ma taki sam numer jak wcześniej kliknięty klocek,
  • po znalezieniu wszystkich par, niech wyskoczy komunikat informujący o zakończeniu gry.

7. Znalezienie pary

Dodajmy pod instrukcją warunkową sprawdzającą, czy zmienna wybranyKlocek jest równa zeru kolejną instrukcję warunkową, która sprawdzi, czy wybrany klocek jest taki sam jak kliknięty klocek.

Poniższy kod:

Zamień na:

W dodanym warunku zwiększamy oczywiście liczbę znalezionych klocków i liczbę prób. Następnie funkcją slideDown(); wysuwamy informację o znalezieniu pary, którą wcześniej ukryliśmy. Nie chcemy jednak, żeby ta informacja pozostała tam na zawsze, dlatego używamy funkcji setTimeout, która po 2000 milisekundach (po 2 sekundach) ukryje tę informację. Potem sprawdzamy, czy znaleźliśmy już 7 par. Jeżeli tak, to wyświetlamy stosowny komunikat.

8. Nie znalezienie pary

Teraz musimy już tylko obsłużyć przypadek, kiedy kliknięty klocek nie jest taki sam, jak ten, który kliknęliśmy jako pierwszy.

Tuż pod poprzednio dopisanym kodem, dopisz:

Na początku zwiększamy liczbę prób. Następnie wyszukujemy, które klocki mamy przesłonić ponownie i ustawiamy wybranyKlocek na zero. Używamy funkcji setTimeout, żeby przesłony pojawiły się dopiero po sekundzie. Tutaj pojawia się coś nowego:

Takiego selektora jeszcze nie widzieliśmy. Oznacza on tyle co: znajdź element, który ma mem-number równy wartości zmiennej doZasloniecia1, a następnie wybierz potomka tego elementu o klasie przesłona.

Następnie uruchamiamy funkcję fadeIn(); na tej przesłonie.

Po wszystkim aktualizujemy status gry.

Zakończenie

To tyle 🙂 Udało nam się dotrzeć do końca poradnika. Po tej przygodzie z jQuery na pewno masz różne przemyślenia. Napisz w komentarzu co Ci się podobało, a co możemy poprawić, żeby kolejne poradniki były jeszcze lepsze! 🙂

W nadchodzących wpisach dowiesz się, jak można stworzyć grę Piramida Ramzesa korzystając z Canvas oraz jak postawić własny serwer PHP.

Diamentowy Konkurs

Aby otrzymać Diamenty za wykonanie tego poradnika, wypełnij poniższy formularz.

Form could not be loaded. Contact the site administrator.

 

 

Ten artykuł jest drugim wpisem z serii Irysy Tworzą Internet.

Aksel N

Aksel Nooitedagt

Wierzę, że dzięki narzędziom i technologii możemy łatwiej osiągać nasze cele 🙂 Interesuje się tworzeniem aplikacji webowych i zarządzaniem projektami (nie tylko informatycznymi).

Like
Like Love Haha Wow Sad Angry

5 Replies to “Irysy Tworzą Internet #2 – Wstęp do jQuery – Gra Memory”

  1. Super poradnik. Szybki do przerobienia i fajny efekt na koniec. Czekam na kolejne 😉

  2. Świetny poradnik 🙂 zastanawiam się jak mógłby wyglądać w wersji video 🙂

    1. Myślisz o tym, że byłoby zbyt dużo przepisywania? 😛

  3. Ktoś tu się postarał

  4. Świetny poradnik! Dla ludzi, którzy nie znają za bardzo JS jest to idealny sposób na rozpoczęcie zabawy, natomiast osoby, które już mają doświadczenie w tym języku mogą sobie zrobić powtórkę w bardzo szybki, przyjemny i ciekawy sposób 😉

Dodaj komentarz