ITI #9 – Ranking graczy – PHP & MySQL – Gra Memory v3

W dzisiejszym poradniku dodamy do naszej gry Memory listę rankingową graczy. Liczbę błędów przechowywać będziemy w bazie danych. Aby to umożliwić musimy jednak wprowadzić znaczną zmianę w logice naszej gry (logika gry = sposób działania gry). Każda nowa runda musi losować kolejność ułożenia klocków. Inaczej po kilku rundach każdy nauczyłby się kolejności klocków na pamięć 🙂 Dodamy też możliwość wprowadzenia imienia gracza oraz oczywiście podstronę z tabelą wyników.

live demokońcowy kod poradnika

Przygotowanie

Ten poradnik jest kontynuacją poradników ITI #2 – Wstęp do jQuery – Gra Memory oraz ITI #6 – Zapytania AJAX – jQuery & PHP – Gra Memory v2. Polecam przed przystąpieniem do tego poradnika wykonać dwa poprzednie, lub przynajmniej zobaczyć czego dotyczyły. Dzięki temu będziesz wiedzieć na czym polega gra, którą stworzyliśmy. Jeżeli jednak masz już podstawową wiedzę z zakresu jQuery oraz zapytań Ajax, możesz po prostu skopiować końcowy kod gry z tego repozytorium i na tym kodzie wykonać poniższy poradnik. Przed przystąpieniem do poradnika upewnij się, że twój serwer PHP jest włączony oraz, że gra działa tak jak powinna:

Losowanie kolejności klocków

Aktualnie kolejność klocków wpisana jest na sztywno w drugiej linijce w pliku serwer.php:

O ile samo losowanie można zrobić łatwo, naszym celem jest, żeby zmienna $klocki nie była losowana za każdym razem, kiedy uruchamiany jest kod pliku serwer.php. Pamiętajmy, że plik serwer.php jest uruchamiany za każdym razem, kiedy w pasku przeglądarki użytkownik wpisze adres_do_strony/serwer.php lub kiedy kod Java Script wykona zapytanie Ajax do pliku serwer.php (patrz: poprzedni poradnik). Zauważ, że w obu przypadkach jest to ta sama sytuacja, tylko, że w jednym przypadku to użytkownik wpisuje adres do pliku serwer.php, a w drugim przypadku zapytanie Ajax uruchamia plik serwer.php. Za każdym naciśnięciem na klocek wykonywane jest zapytanie Ajax, jeżeli więc losowalibyśmy kolejność klocków za każdym razem, kiedy wykonane jest zapytanie Ajax, to za każdym razem kolejność byłaby inna. To byłoby całkiem bez sensu. Kolejność ma zostać wylosowana jedynie na początku rundy, a następnie do końca gry powinna pozostać bez zmian.

Z pomocą przychodzi nam mechanizm sesji, który znasz już z poradnika ITI #7 – Prosty system logowania. Sesja to sposób na przechowywanie informacji po stronie serwera PHP w zmiennych, które możemy używać między podstronami. Jedna sesja trwa najczęściej od momentu wejścia na stronę do momentu zamknięcia przeglądarki, bądź wygaśnięcia sesji. Tak więc cały czas trwania gry, użytkownik będzie w jednej sesji. Musimy więc wykonać jedno losowanie kolejności w trakcie jednej sesji. W przeciwieństwie do ciasteczek, informacje zapisane w sesji nie są zapisywane na komputerze użytkownika, ale na serwerze. Nie można będzie więc podejrzeć kolejności wchodząc w konsolę dewelopera (naciskając F12 w przeglądarce).

Naszym celem jest teraz utworzyć sesję między klientem, a plikiem serwer.php i losować kolejność klocków tylko na początku trwania sesji.

Dodajmy więc linijkę uruchamiającą sesję w pliku serwer.php oraz funkcję, która wylosuje nam kolejność klocków w zmiennej $klocki. Musimy jednak sprawdzić, czy w trakcie trwania sesji, została już wylosowana kolejność. Jeżeli nic nie zostało jeszcze dodane do zmiennej $_SESSION['klocki'], to znaczy, że kolejność nie została jeszcze wylosowana i należy ją wylosować. Podmień drugą linijkę pliku serwer.php podświetlonym kodem:

Uruchom teraz grę i przekonaj się, że została wylosowana nowa kolejność. Jedyne czego brakuje naszej grze, to dodanie funkcjonalności, która po wygraniu gry wykona zapytanie Ajax do serwera PHP i poinformuje go, że gra została rozwiązana i należy usunąć zmienną $_SESSION['klocki'], aby wylosowana została nowa kolejność. Zauważ, że jeżeli usuniemy tę zmienną, to przy kolejnym uruchomieniu pliku serwer.php zostanie wylosowana nowa kolejność (serwer.php:24). Dzięki temu prostemu zabiegowi, użytkownik po rozwiązaniu gry otrzyma możliwość ponownego rozwiązania gry, ale o innej kolejności. Nie ma przecież sensu kilka razy rozwiązywać tej samej partii Memorów 😊

Dodaj do pliku serwer.php kolejną opcję w switchu, która uruchomiona zostanie jeżeli uruchomimy zapytanie adres_do_strony/serwer.php?opcja=zresetuj_gre

W pliku game.js musimy teraz przy każdej inicjalizacji gry wykonać właśnie dodane zapytanie Ajax do serwera. Na samym początku funkcji inicjalizacjaGry() dodaj następujący fragment:

Stworzenie tabeli wyników gry

Kiedy użytkownikowi udaje się rozwiązać grę, wyskakuje małe okienko z informacją:

Naszym celem jest w tym miejscu zapytać użytkownika o podanie swojego imienia. Następnie wyślemy to imię wraz z liczbą błędów poprzez zapytanie Ajax do serwera i tam zapiszemy wynik do bazy danych. Stwórzmy więc tabelę w bazie danych poprzez poniższe zapytanie SQL:

Powyższe zapytanie możesz wprowadzić np. poprzez narzędzie PHP My Admin znane Ci z poradnika ITI #7 – Prosty system logowania:

Zapis wyniku do bazy danych

Przygotujmy nasz serwer na przyjęcie zapytania w postaci adres_do_strony/serwer.php?opcja=dodaj_wynik&imie=Bartosz&liczba_bledow=7

Jak się pewnie domyślasz, musimy dodać kolejną alternatywę do pliku serwer.php, która obsłuży parametr opcja o wartości dodaj_wynik. Zanim to zrobimy, musimy się jeszcze połączyć z bazą danych. Na początku pliku, zaraz po uruchomieniu sesji dodaj kod odpowiedzialny za połączenie z bazą danych wraz ze sprawdzeniem, czy udało się połączyć:

W ustawieniach zmień dane połączenia z bazą danych na Twoje. Uruchom serwer wpisując w przeglądarce adres_do_strony/serwer.php i zobacz, czy na ekranie nie ma żadnych błędów w związku z połączeniem z bazą danych. Jeżeli na przykład podasz niepoprawne hasło użytkownika bazy danych, zobaczysz komunikat podobny do tego:

Jeżeli dane połączenia z bazą danych są poprawne, zobaczysz:

Oczywiście komunikat “Błąd zmiennych” jest komunikatem, który oczekujemy, ponieważ nie przekazaliśmy w adresie URL żadnej opcji. Teraz kolej na zapis imienia oraz wyniku do bazy danych. Dodaj następującą alternatywę w pliku serwer.php do istniejącego już switcha:

Przeanalizuj właśnie dodany kod. Jak widzisz, jego zadaniem jest dodanie wyniku do tabeli memory_ranking. Dodawane jest imię i liczba błędów. Uruchom w przeglądarce adres: adres_do_strony/serwer.php?opcja=dodaj_wynik&imie=Bartosz&liczba_bledow=7 i zobacz, czy wpis został poprawnie dodany do utworzonej wcześniej tabeli memory_ranking. Przekonasz się o tym, otwierając PHP MyAdmin i wchodząc w tabelę memory_ranking. Zobaczysz tam pierwszy wpis o id równym 1, imieniu Bartosz i liczbie błędów 7.

Zwróć uwagę na trzy kwestie:

  1. Id wpisów jest dodawane automatycznie do wpisów przez bazę danych MySQL. Dzieje się tak, ponieważ przy tworzeniu tabeli memory_ranking dodaliśmy opcję AUTO_INCREMENT.
  2. Data również jest dodawana automatycznie dzięki opcji DEFAULT CURRENT_TIMESTAMP.
  3. W linijce 73 i 74 w pliku serwer.php przypisujemy zmiennej $imie wartość $mysqli->real_escape_string($_GET['imie']). Metoda real_escape_string usuwa ze zmiennej $_GET['imie'] wszystkie znaki, które nie są przewidziane jako imię. Złośliwy haker mógłby przecież w zmiennej imie w pasku adresu przekazać złośliwy kod SQL. Tę grupę ataków nazywamy wstrzykiwaniem kodu. Więcej na ten temat możesz znaleźć pod hasłem mysql injection.

Wyniki gry dodają się teraz do bazy danych. Czas zmodyfikować plik game.js w ten sposób, aby po rozwiązaniu gry, wysłane zostało zapytanie Ajax pod adres serwer.php?opcja=dodaj_wynik&imie=Bartosz&liczba_bledow=7. Wprowadź odpowiednie zmiany w pliku game.js:

Uruchom grę i spróbuj kilka razy zapisać swój wynik. Zobacz, czy wyniki poprawnie zapisują się do bazy danych.

Ranking

Ostatnim krokiem w tym poradniku będzie dodanie osobnej podstrony z listą rankingową. Będzie to zwyczajna strona w pliku PHP.  Wykonaj następujące zmiany:

Utwórz nowy plik ranking.php o następującej zawartości:

W pliku index.html w górnym pasku dodaj odnośnik do rankingu:

Dodaj kilka linijek na koniec arkusza styli styles.css, żeby nasz ranking wyglądał przyzwoicie:

Otwórz w przeglądarce podstronę adres_do_strony/ranking.php i zobacz, czy ranking został poprawnie dodany:

Podsumowanie

W ten sposób dodaliśmy ranking graczy do naszych Memorów. Jest to ostatni poradnik z serii tworzenia gry Memory. Zobaczmy czego się nauczyliśmy:

  1. Użyliśmy biblioteki jQuery do manipulacji zawartości strony. Dzięki niej, mogliśmy odkrywać klocki, wykonywać różne animacje i przede wszystkim wykonywać zapytania Ajax do serwera.
  2. Utworzyliśmy tabelę w bazie danych MySQL oraz połączenie z bazą danych w naszym serwerze.
  3. Utworzyliśmy podstronę ranking.php, która łączy się z bazą danych i pobiera z niej ranking graczy.
  4. Zmienne w PHP żyją do końca pliku. Po wykonaniu zapytania do pliku PHP, zmienne tracą swoją wartość. Poznaliśmy mechanizm sesji, który przechowuje zmienne między kolejnymi odświeżeniami strony.
  5. Stworzyliśmy bardzo ciekawą grę, którą możesz pochwalić się swoim znajomym!

Dziękuję za tę 3-poradnikową wycieczkę 🙂 Koniecznie napisz, co sądzisz o grze Memory! 🙂

Form could not be loaded. Contact the site administrator.
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 “ITI #9 – Ranking graczy – PHP & MySQL – Gra Memory v3”

  1. Teraz ta gra wymiata!

  2. Fajny poradnik, teraz z tym rankingiem można robić zawody na ilość błędów 😉

  3. [Ten komentarz nie jest po to, aby zarobić diamenty] Wow, świetny poradnik i ogólnie cała seria, ja do tej gry dodałbym jeszcze możliwość grania multiplayer, tak jak to się robi w prawdziwych memory game. Myślę, że zrobie coś takiego w najbliższym czasie 🙂

    1. To może od razu napiszesz poradnik dla innych Irysów? 🙂

  4. I think that what you published made a ton of sense.
    But, think about this, what if you added a little
    information? I am not suggesting your information is not solid.,
    but what if you added something that grabbed folk’s attention? I mean ITI #9 – Ranking graczy
    – PHP & MySQL – Gra Memory v3 – Blog irys is kinda plain. You might glance at Yahoo’s home page and note how they create post titles to grab people to open the links.
    You might add a video or a related picture or two to
    grab readers interested about everything’ve got to say.
    In my opinion, it could bring your posts a little bit more interesting.

Dodaj komentarz