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.

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:

<?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;
...

<?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:

<?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;

<?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;

}

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

<?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';
}

<?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;

}

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:

$(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();

...

$(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:

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`));

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ć:

<?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;
  }
...

<?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;

}

...

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:

<?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';
}

<?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;

}

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']). 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:

$(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);
  }
});

$(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:

<?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>

<?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>

<title>Gra Memory - Ranking</title>

</head>

<body>

<div id="powitanie"><a href="index.html">Powrót do gry</a> - Ranking graczy</div>

</div>

Msc

</div>

Imię

</div>

Liczba błędów

</div>

Data

</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">

'.$miejsce++.'

</div>

'.$wpis['imie'].'

</div>

'.$wpis['liczba_bledow'].'

</div>

'.$wpis['data'].'

</div>

</div>';

}

</div>

</body>

</html>

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

    <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>

<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>

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

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;
}

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).

Like Love Haha Wow Sad Angry

Podobne

5 Replies to “ITI #9 – Ranking graczy – PHP & MySQL – Gra Memory v3”

Dawid L says: Odpowiedz
21 sierpnia 2017 at 07:52

Teraz ta gra wymiata!
Jan K says: Odpowiedz
31 sierpnia 2017 at 12:21

Fajny poradnik, teraz z tym rankingiem można robić zawody na ilość błędów 😉
Łukasz P says: Odpowiedz
9 września 2017 at 15:33

[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. Rocksoft says: Odpowiedz
  10 września 2017 at 00:17
  
  To może od razu napiszesz poradnik dla innych Irysów? 🙂
easytyper says: Odpowiedz
19 lutego 2018 at 11:38

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.

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

Przygotowanie

Losowanie kolejności klocków

Stworzenie tabeli wyników gry

Zapis wyniku do bazy danych

Ranking

Podsumowanie

Aksel Nooitedagt

Dodaj do ulubionych:

Podobne

5 Replies to “ITI #9 – Ranking graczy – PHP & MySQL – Gra Memory v3”

Dodaj komentarz Anuluj pisanie odpowiedzi

Przygotowanie

Losowanie kolejności klocków

Stworzenie tabeli wyników gry

Zapis wyniku do bazy danych

Ranking

Podsumowanie

Aksel Nooitedagt

Podziel się:

Dodaj do ulubionych:

Podobne

5 Replies to “ITI #9 – Ranking graczy – PHP & MySQL – Gra Memory v3”

Dodaj komentarz Anuluj pisanie odpowiedzi