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 demo – koń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
:
1 2 3 4 5 6 7 8 |
<?php $klocki = [1,2,5,4,5,3,3,7,2,1,6,7,4,6]; if (!empty($_GET['opcja'])) { switch ($_GET['opcja']) { case 'ile_klockow': echo count($klocki); break; ... |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<?php // Ustawienia gry - możesz je dowolnie zmieniać. Pamiętaj jednak, że jeżeli ustawisz // więcej niż 7 klocków, to musisz dodać kolejne obrazki do folderu images $ustawienia['liczbaKlockow'] = 7; // Rozpoczęcie sesji session_start(); function losujKolejnosc ($liczbaKlockow) { $klocki = []; for ($i = 1; $i <= $liczbaKlockow; $i++) { // każde id_klocka od zera do $liczbaKlockow jest dodawane dwa razy, bo każdy klocek // musi występować dwa razy, aby można było znaleść parę $klocki[] = $i; $klocki[] = $i; } shuffle($klocki); // zwracamy zmienną $klocki z wymieszaną kolejnością klocków return $klocki; } // Jeżeli nie istnieje jeszcze zmienna klocki w sesji, to tworzymy ją if (empty($_SESSION['klocki'])) { $_SESSION['klocki'] = losujKolejnosc($ustawienia['liczbaKlockow']); } // Przepisujemy kolejność klocków z sesjii do zmiennej lokalnej klocki $klocki = $_SESSION['klocki']; if (!empty($_GET['opcja'])) { switch ($_GET['opcja']) { case 'ile_klockow': echo count($klocki); break; |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
<?php // Ustawienia gry - możesz je dowolnie zmieniać. Pamiętaj jednak, że jeżeli ustawisz // więcej niż 7 klocków, to musisz dodać kolejne obrazki do folderu images $ustawienia['liczbaKlockow'] = 7; // Rozpoczęcie sesji session_start(); // Połączenie z bazą danych $mysqli = new mysqli('localhost', 'root', '123456', 'zbiorka'); if ($mysqli->connect_errno) { echo 'Nie udało się połączyć z bazą danych. Więcej informacji: '.$mysqli->connect_error; exit; } function losujKolejnosc ($liczbaKlockow) { $klocki = []; for ($i = 1; $i <= $liczbaKlockow; $i++) { // każde id_klocka od zera do $liczbaKlockow jest dodawane dwa razy, bo każdy klocek // musi występować dwa razy, aby można było znaleść parę $klocki[] = $i; $klocki[] = $i; } shuffle($klocki); // zwracamy zmienną $klocki z wymieszaną kolejnością klocków return $klocki; } // Jeżeli nie istnieje jeszcze zmienna klocki w sesji, to tworzymy ją if (empty($_SESSION['klocki'])) { $_SESSION['klocki'] = losujKolejnosc($ustawienia['liczbaKlockow']); } // Przepisujemy kolejność klocków z sesjii do zmiennej lokalnej klocki $klocki = $_SESSION['klocki']; if (!empty($_GET['opcja'])) { switch ($_GET['opcja']) { case 'ile_klockow': echo count($klocki); break; case 'jaki_klocek': if(array_key_exists($_GET['numer_klocka'], $klocki)) { $id_klocka = $klocki[$_GET['numer_klocka']]; echo json_encode([ "idKlocka" => $id_klocka, "obrazek" => "images/obj".$id_klocka.".png", ]); } else { echo 'Błąd numeru klocka'; } break; case 'zresetuj_gre': // jeżeli ktoś wykona zapytanie serwer.php?opcja=zresetuj_gre, to usuniemy // $_SESSION['klocki'], dzięki czemu zostanie ona ponownie wylosowana unset($_SESSION['klocki']); echo json_encode([ "status" => 'Kolejność została usunięta z sesji.', ]); break; default: # code... break; } } else { echo 'Błąd zmiennych'; } |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
$(document).ready(function() { // Definicja zmiennych gry var wybranyKlocekId = 0; var wybranyKlocekNumer = 0; var liczbaZnalezionych = 0; var liczbaProb = 0; var liczbaKlockow = 0; function inicjalizacjaGry() { // Pierwszą czynnością inicjalizacji gry jest zresetowanie kolejności na serwerze $.get('serwer.php?opcja=zresetuj_gre'); wybranyKlocekId = 0; wybranyKlocekNumer = 0; liczbaZnalezionych = 0; liczbaProb = 0; liczbaKlockow = 0; aktualizujStatus(); ... |
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:
1 2 3 4 5 6 |
CREATE TABLE `memory_ranking` ( `id` INT NOT NULL AUTO_INCREMENT, `imie` VARCHAR(45) NULL, `liczba_bledow` INT NULL, `data` TIMESTAMP NULL DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (`id`)); |
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ć:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<?php // Ustawienia gry - możesz je dowolnie zmieniać. Pamiętaj jednak, że jeżeli ustawisz // więcej niż 7 klocków, to musisz dodać kolejne obrazki do folderu images $ustawienia['liczbaKlockow'] = 7; $ustawienia['host'] = 'localhost'; $ustawienia['uzytkownik'] = 'root'; $ustawienia['haslo'] = ''; $ustawienia['bazadanych'] = 'mojabaza'; // Rozpoczęcie sesji session_start(); // Połączenie z bazą danych $mysqli = new mysqli($ustawienia['host'], $ustawienia['uzytkownik'], $ustawienia['haslo'], $ustawienia['bazadanych']); if ($mysqli->connect_errno) { echo 'Nie udało się połączyć z bazą danych. Więcej informacji: '.$mysqli->connect_error; exit; } function losujKolejnosc ($liczbaKlockow) { $klocki = []; for ($i = 1; $i <= $liczbaKlockow; $i++) { // każde id_klocka od zera do $liczbaKlockow jest dodawane dwa razy, bo każdy klocek // musi występować dwa razy, aby można było znaleść parę $klocki[] = $i; $klocki[] = $i; } ... |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
<?php // Ustawienia gry - możesz je dowolnie zmieniać. Pamiętaj jednak, że jeżeli ustawisz // więcej niż 7 klocków, to musisz dodać kolejne obrazki do folderu images $ustawienia['liczbaKlockow'] = 7; $ustawienia['host'] = 'localhost'; $ustawienia['uzytkownik'] = 'root'; $ustawienia['haslo'] = '123456'; $ustawienia['bazadanych'] = 'zbiorka'; // Rozpoczęcie sesji session_start(); // Połączenie z bazą danych $mysqli = new mysqli($ustawienia['host'], $ustawienia['uzytkownik'], $ustawienia['haslo'], $ustawienia['bazadanych']); if ($mysqli->connect_errno) { echo 'Nie udało się połączyć z bazą danych. Więcej informacji: '.$mysqli->connect_error; exit; } function losujKolejnosc ($liczbaKlockow) { $klocki = []; for ($i = 1; $i <= $liczbaKlockow; $i++) { // każde id_klocka od zera do $liczbaKlockow jest dodawane dwa razy, bo każdy klocek // musi występować dwa razy, aby można było znaleść parę $klocki[] = $i; $klocki[] = $i; } shuffle($klocki); // zwracamy zmienną $klocki z wymieszaną kolejnością klocków return $klocki; } // Jeżeli nie istnieje jeszcze zmienna klocki w sesji, to tworzymy ją if (empty($_SESSION['klocki'])) { $_SESSION['klocki'] = losujKolejnosc($ustawienia['liczbaKlockow']); } // Przepisujemy kolejność klocków z sesjii do zmiennej lokalnej klocki $klocki = $_SESSION['klocki']; if (!empty($_GET['opcja'])) { switch ($_GET['opcja']) { case 'ile_klockow': echo count($klocki); break; case 'jaki_klocek': if(array_key_exists($_GET['numer_klocka'], $klocki)) { $id_klocka = $klocki[$_GET['numer_klocka']]; echo json_encode([ "idKlocka" => $id_klocka, "obrazek" => "images/obj".$id_klocka.".png", ]); } else { echo 'Błąd numeru klocka'; } break; case 'zresetuj_gre': // jeżeli ktoś wykona zapytanie serwer.php?opcja=zresetuj_gre, to usuniemy // $_SESSION['klocki'], dzięki czemu zostanie ona ponownie wylosowana unset($_SESSION['klocki']); echo json_encode([ "status" => 'Kolejność została usunięta z sesji, dzięki czemu przy kolejnej partii zostanie ona ponownie wylosowana.', ]); break; case 'dodaj_wynik': // Na początek sprawdźmy, czy przekazane zostało imię oraz liczba błędów if(!empty($_GET['imie']) && !empty($_GET['liczba_bledow'])) { $imie = $mysqli->real_escape_string($_GET['imie']); $liczba_bledow = $mysqli->real_escape_string($_GET['liczba_bledow']); // Zapytanie SQL dodające wpis do tabeli memory_ranking $sql = "INSERT INTO `memory_ranking` (`imie`, `liczba_bledow`) VALUES ('$imie', '$liczba_bledow');"; if ($mysqli->query($sql)) { echo json_encode([ "status" => 'success', ]); } else { echo json_encode([ "status" => 'failure', ]); } } else { echo 'Nie podano imienia i/lub liczby błędów.'; } break; default: # code... break; } } else { echo 'Błąd zmiennych'; } |
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:
- 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. - Data również jest dodawana automatycznie dzięki opcji DEFAULT CURRENT_TIMESTAMP.
- W linijce 73 i 74 w pliku
serwer.php
przypisujemy zmiennej$imie
wartość$mysqli->real_escape_string($_GET['imie'])
. Metodareal_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
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
$(document).ready(function() { // Definicja zmiennych gry var wybranyKlocekId = 0; var wybranyKlocekNumer = 0; var liczbaZnalezionych = 0; var liczbaProb = 0; var liczbaKlockow = 0; function inicjalizacjaGry() { // Pierwszą czynnością inicjalizacji gry jest zresetowanie kolejności na serwerze $.get('serwer.php?opcja=zresetuj_gre'); wybranyKlocekId = 0; wybranyKlocekNumer = 0; liczbaZnalezionych = 0; liczbaProb = 0; liczbaKlockow = 0; aktualizujStatus(); $.get('serwer.php?opcja=ile_klockow', function( dane ) { liczbaKlockow = dane; var klocki = ''; for (var i = 0; i < liczbaKlockow; i++) { klocki += '<div class="klocek" mem-number="'+i+'"><img src="images/loading_apple.gif" /><div class="przeslona"></div></div>' } $('#kontener-na-klocki').html(klocki); // Przy kliknięciu w element o klasie przeslona, uruchamiamy poniższy kod $('.przeslona').click(function() { // Ktoś nakliknął przesłonę, więc ją ukrywamy (tutaj: this odnosi się do klikniętego elementu) $(this).hide(); var klocek = $(this).parent(); // Sprawdzamy jaki numer klocka został kliknięty. Pobieramy ojca przesłony, czyli element nad przesłoną var kliknietyKlocekNumer = $(this).parent().attr('mem-number'); $.get('serwer.php?opcja=jaki_klocek&numer_klocka='+kliknietyKlocekNumer, function (dane) { var odpowiedzSerwera = JSON.parse(dane); var kliknietyKlocekId = odpowiedzSerwera.idKlocka; klocek.find('img:first').attr('src', odpowiedzSerwera.obrazek); if (wybranyKlocekId == 0) { // Jeżeli żaden klocek nie był jeszcze wybrany, to przypisujemy numer wybranego klocka wybranyKlocekId = kliknietyKlocekId; wybranyKlocekNumer = kliknietyKlocekNumer; } else if (wybranyKlocekId == kliknietyKlocekId) { // Jeżeli wybrany wcześniej klocek ma ten sam numer, co kliknięty klocek, to znaleźliśmy parę liczbaZnalezionych++; liczbaProb++; $('#informacja-znaleziono').slideDown(); setTimeout(function() { $('#informacja-znaleziono').slideUp(); if (liczbaZnalezionych == liczbaKlockow/2) { var imie = prompt('Udało Ci się znaleźć wszystkie pary, gratulacje! Aby zapisać wynik, podaj swoje imię', 'Jan Kowalski'); if (imie != null && imie != '') { // Dodajemy wynik gracza do bazy danych var liczba_bledow = (liczbaProb-liczbaZnalezionych); $.get('serwer.php?opcja=dodaj_wynik&imie='+imie+'&liczba_bledow='+liczba_bledow, function (dane){ alert('Wynik został zapisany. Twój wynik to '+liczba_bledow+' błędów. Spróbuj ponownie :)'); // Po zapisaniu wyniku resetujemy grę inicjalizacjaGry(); }); } else { // Jeżeli użytkownik nie podał imienia, to resetujemy grę bez zapisywania wyniku inicjalizacjaGry(); } } }, 2000); wybranyKlocekId = 0; } else { liczbaProb++; var doZasloniecia1 = wybranyKlocekNumer; var doZasloniecia2 = kliknietyKlocekNumer; wybranyKlocekId = 0; setTimeout(function() { $('[mem-number='+doZasloniecia1+'] .przeslona').fadeIn('slow'); $('[mem-number='+doZasloniecia2+'] .przeslona').fadeIn('slow'); }, 1000); } // Po każdym kliknięciu aktualizujemy status gry aktualizujStatus(); }); }); }); } inicjalizacjaGry(); function aktualizujStatus () { $('#status-gry').html('Znaleziono: '+liczbaZnalezionych+', Próby: '+liczbaProb); } }); |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
<?php // Pamiętaj o zmianie danych połączenia na twoje! $ustawienia['host'] = 'localhost'; $ustawienia['uzytkownik'] = 'root'; $ustawienia['haslo'] = ''; $ustawienia['bazadanych'] = 'mojabaza'; // Połączenie z bazą danych $mysqli = new mysqli($ustawienia['host'], $ustawienia['uzytkownik'], $ustawienia['haslo'], $ustawienia['bazadanych']); if ($mysqli->connect_errno) { echo 'Nie udało się połączyć z bazą danych. Więcej informacji: '.$mysqli->connect_error; exit; } ?> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> <link href="styles.css" rel="stylesheet"> <title>Gra Memory - Ranking</title> </head> <body> <div id="pasek-tlo"> <div id="pasek"> <div id="powitanie"><a href="index.html">Powrót do gry</a> - Ranking graczy</div> <div class="clear"></div> </div> </div> <div class="wrapper"> <div class="table"> <div class="row header"> <div class="cell"> Msc </div> <div class="cell"> Imię </div> <div class="cell"> Liczba błędów </div> <div class="cell"> Data </div> </div> <?php // Pobieramy wszystkie wpisy w kolejności od najmniejszej liczby błędów i wyświetlamy je. $sql = "SELECT imie, liczba_bledow, data FROM memory_ranking ORDER BY liczba_bledow ASC"; $result = $mysqli->query($sql); $miejsce = 1; while ($wpis = $result->fetch_assoc()) { echo '<div class="row"> <div class="cell"> '.$miejsce++.' </div> <div class="cell"> '.$wpis['imie'].' </div> <div class="cell"> '.$wpis['liczba_bledow'].' </div> <div class="cell"> '.$wpis['data'].' </div> </div>'; } ?> </div> </div> </body> </html> |
W pliku index.html
w górnym pasku dodaj odnośnik do rankingu:
1 2 3 4 5 6 7 |
<div id="pasek-tlo"> <div id="pasek"> <div id="powitanie"><a href="ranking.php">Pokaż ranking</a> - Spróbuj znaleźć wszystkie postacie krainy Nordal!</div> <div id="status-gry">Znaleziono: 0, Próby: 0</div> <div class="clear"></div> </div> </div> |
Dodaj kilka linijek na koniec arkusza styli styles.css
, żeby nasz ranking wyglądał przyzwoicie:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
a { color: #A2D4AB; } .wrapper { margin: 0 auto; padding: 40px; max-width: 800px; } .table { margin: 0 0 40px 0; width: 100%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); display: table; } .row { display: table-row; background: #f6f6f6; } .row:nth-of-type(odd) { background: #e9e9e9; } .row.header { font-weight: 900; color: #ffffff; background: #A2D4AB; } .cell { padding: 6px 12px; display: table-cell; } |
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:
- 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.
- Utworzyliśmy tabelę w bazie danych MySQL oraz połączenie z bazą danych w naszym serwerze.
- Utworzyliśmy podstronę
ranking.php
, która łączy się z bazą danych i pobiera z niej ranking graczy. - 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.
- 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 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).
Teraz ta gra wymiata!
Fajny poradnik, teraz z tym rankingiem można robić zawody na ilość błędów 😉
[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 🙂
To może od razu napiszesz poradnik dla innych Irysów? 🙂
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.