Ajax: Puzzle

Autor: Arkadiusz Tobiasz 3 kwietnia 2010

Chciałbyś wzbogacić swoją stronę o puzzle, które będą mogli układać Twoi użytkownicy? Nic prostszego! W tym celu wykorzystamy plugin jqPuzzle, który działa z wykorzystaniem biblioteki jQuery. Dodatkowo pokażę w jaki sposób możemy uzyskany czas i liczbę ruchów zapisywać w bazie danych, co pozwoli nam na tworzenie rankingów najlepszych wyników!

Po pierwsze, jeśli jeszcze nie masz biblioteki jQuery na swoim serwerze, to musisz ją ściągnąć, a następnie wgrać do głównego katalogu na swoim serwerze. Następnie musisz ściągnąć plugin jqPuzzle i również wrzucić na serwer do głównego katalogu. Po wykonaniu tych dwóch czynności możemy przystąpić do napisania skryptu wyświetlającego puzzle na naszej stronie. Najpierw w sekcji <head>…</head> musimy załączyć ściągnięte pliki:

1
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script> <script src="jquery.jqpuzzle.js" type="text/javascript"></script>

To w zasadzie wszystko o ile nie chcemy ustawić własnej konfiguracji dla tego pluginu. Puzzle tworzymy poprzez dodanie do obrazka nazwy klasy jqPuzzle:

1
<img class="jqPuzzle" src="obrazek.jpg" alt="nazwa obrazka" />

Możemy też ustawić pewne opcje konfiguracji za pomocą CSS i odpowiednich parametrów po nazwie klasy według schematu:

jqp[-LANGUAGE]-rROWS-cCOLS[-hHOLE][-sSHUFFLE_ROUNDS][-FLAGS]

Słowa napisane dużą literą i zawarte w nawiasach kwadratowych należy zastąpić odpowiednimi wartościami:

  • LANGUAGE: kod języka, domyślnie język angielski (lista wspieranych języków).
  • ROWS: Liczba wierszy (od 3 do 9).
  • COLS: Liczba kolumn (od 3 do 9).
  • HOLE: Pozycja pustego prostokąta (od 1 do liczba wierszy x liczba kolumn), domyślnie ostatnia (prawy dolny róg) pozycja.
  • SHUFFLE ROUNDS: liczba wymieszań, domyślnie 3.
  • FLAGS: Dodatkowe opcje. Lista tylu dodatkowych opcji ile chcesz, w dowolnej kolejności:
    • S: Po rozpoczęciu puzzle są wymieszane.
    • N: Po rozpoczęciu układania ukryte numerki.
    • A: Ukryj możliwość wymieszania.
    • B: Ukryj możliwość podglądu obrazka.
    • C: Ukryj możliwość pokazania numerków obrazków.
    • D: Ukryj licznik ruchów.
    • E: Ukryj licznik czasu.

Możesz również plugin skonfigurować w oparciu o jQuery. W celu dodatkowych informacji odsyłam do dokumentacji.

Obiecałem jeszcze pokazać w jaki sposób zapisać wyniki, tzn. liczbę ruchów i sekund do bazy danych. W tym celu musimy edytować plik jquery.jqpuzzle.js, w którym szukamy:

1
window.setTimeout(finishGame, 100);

i po tej linijce dodajemy:

1
document.location.href='save_score.php?pid='+pid+'&sec='+seconds+'&mv='+moves;

Dodanie tej linijki powoduje, że po ułożeniu puzzli następuje przekierowanie na stronę save_score.php z parametrami pid, sec i mv. Ostatnie dwa są pobierane z pluginu, natomiast pierwszy oznacza numer id z bazy danych odzwierciedlający dany zestaw puzzli (jeśli mamy tylko jeden zestaw puzzli parametr ten usuwamy). W związku z tym musimy zainicjować tą zmienną tak, aby plugin podstawiał pod nią odpowiednią wartość. Zrobimy to w sekcji <head>…</head> przed odwołaniem się do pluginu jqPuzzle za pomocą kodu:

1
<script>var pid = '.$_GET['pid'].'</script>

Jak można łatwo się domyślić tworzymy nową zmienną o nazwie pid, która jest pobierana za pomocą metody GET z adresu skryptu (np. puzzle.php?pid=3).

Teraz czas na kod pliku save_score.php:

1
2
3
4
5
6
7
8
9
10
11
if($pid )
{
    $pid = mysql_escape_String($pid);
    $sec = mysql_escape_String($sec);
    $mv = mysql_escape_String($mv);
       
    $sql_in = "INSERT INTO puzzle_scores (pid, moves, time) VALUES ('".$pid."', '".$mv."','".$sec."')";
    mysql_query($sql_in);

}
Header("Location: puzzle.php?pid=$pid");

Oczywiście w powyższym kodzie aż się prosi, aby można było jeszcze zapisywać nick użytkownika. Można to zrobić wyciągając go z ciasteczka, jeśli mamy stronę z logowaniem lub dopisać prosty skrypt, gdzie przed układaniem puzzli będzie się wpisywać nick. Tradycyjnie na koniec działający skrypt na jednej z moich stron.

Odpowiedz

 

Arkadiusz Tobiasz student Akademii Ekonomicznej im. Karola Adamieckiego w Katowicach na specjalnościach informatyka ekonomiczna oraz rachunkowość. Więcej...

jQuery Validation i funkcja remote

Jakiś czas temu zwrócił się do mnie użytkownik z problemem. Chodzi o to, że korzysta on z pluginu walidacji jQuery, […]

Zend Framework: integracja z Uploadify

W tym wpisie postaram się przedstawić Wam w jaki sposób zintegrować skrypt Uploadify z Zend Frameworkiem. Dzięki temu będziemy mogli […]

Javascript: Czasowe wyświetlanie reklamy

Czasami chcemy, aby na pewnym elemencie naszej strony wyświetlała się reklama przez jakiś czas, a następnie zniknęła. W tym wpisie […]

Linux: backup wszystkich baz danych MySQL

Swego czasu pisałem o tym jak z poziomu konsoli można szybko i przyjemnie zrobić backup bazy MySQL. Wszystko jest ładnie […]