Jesienna układanka – jak napisać prostą grę w jQuery

We wcześniejszych wpisach pokazywałem już jak napisać prostą grę w jQuery, popularnym javascriptowym frameworku. Przykładem może być moja gra tekstowa lub wariacja na temat space invaders. Fakt, jQuery nie sprawuje się tak dobrze jak canvas. Ma znacznie uboższe możsliwośći animacji. Jest jednak, w moim mniemaniu, mniej skomplikowane i do prostych gier nadaje się idealnie.

Weekendowy spacer w lesie zainspirował mnie do stworzenia takiej właśnie prostej gry – układanki. Celem jest ułożenie elementów w odpowiedniej kolejności, tak aby pokazywały zdjęcie. Najlepiej zrobić to w jak najkrótszym czasie. Sprawa jest o tyle trudna, że można przesuwać tylko po jednym klocku jeśli akurat obok niego jest wolne miejsce. Elementy można przesunąć klikając na nich. Gra daje również możliwość wyboru poziomu zaawansowania. Dostępne są poziomy: „łatwy”, „średni” i „trudny”. Po ułożeniu zdjęcia, gra wyświetla wynik, czyli czas jaki zajęło graczowi ukończenie układanki.

Nie wykorzystałem w tym projekcie bardzo skomplikowanych technik. Jak zwykle wystarczy podstawowa znajomość JavaScriptu oraz jQuery. Postaram się w miarę dokładnie przedstawić cały kod. Jeżeli, nie będziesz pewny / pewna jak dany fragment działa, śmiało pytaj w komentarzu. Warto też pytać o pomoc wujka google 🙂 Jeżeli chodzi o jQuery, zachęcam do czytania dokumentacji tej biblioteki (język angielski).

Pełny kod zobaczyć można klikając na stronie z grą prawym przyciskiem i wybierając opcję „wyświetl źródło strony”. Będzie tam widoczne wszystko co nas interesuje, ponieważ zarówno kod JS jak i style CSS zostały umieszczone w dokumencie HTML. Zwracam na to uwagę, ponieważ w tym wpisie, będę omawiał jedynie kod JavaScriptu i jQuery. Po wszystko inne trzeba sobie zajrzeć do źródła strony :).

opis kodu

Moja układanka będzie obiektem JavaScriptowym o nazwie Puzzle. Konstruktor tego obiektu przyjmuje trzy parametry. Pierwsze dwa to elementy HTML podane przez jQuery: plansza dla puzzli oraz miejsce do wyświetlania upływającego czasu. Trzeci parametr to adres obrazka, z którego powstanie układanka. Obrazek powinien być kwadratowy, najlepiej w wymiarach 600px na 600px.

Na początku tworzę zmienną that, której będę używał w innych scopeach w obiekcie, takich jak eventy lub setInterval. Do kolejnych trzech pól przypisuje wartości parametrów konstruktora. Następne pole, to szerokość elementu, który zawierać będzie układankę. Następnie definuje dwa pola zawierające kod HTML. pierwsze z nich będzie wyświetlane jako menu startowe gry. Drugie to gratulacje, które pojawią się gdy gracz skończy rozgrywkę. Warto zwrócić uwagę, że menu startowe zawiera trzy elementy input, każdy z nich odpowiada innemu poziomowi trudności, a to dzięki atrybutom, które sam stworzyłem data-difficulty-level. Kolejne trzy pola, są puste. Otrzymają wartości później, będą zależne od wybranego poziomu trudności. Na koniec definiuję, zmienną, która przechowywać będzie interval mierzący czas gry.

Przyszła kolej na dwie pierwsze metody, setLevelDetails oraz renderStart.

Zacznę od renderStart. Ta metoda, wywoływana będzie aby zainicjalizować grę, oraz gdy po zakończonej rozgrywce, gracz kliknie ‚nowa gra’. Nie dzieje się w niej nic skomplikowanego. Najpierw html głównego elementu układanki jest opróżniany a następnie jako jego tło ustawiany jest obrazek. Kolejny krok, to dodanie menu startowego, czyli zawartości pola startMenu. Jest to tekst witający gracza, plus trzy przyciski do wybrania poziomu gry. Do przycisków dodany zostaje event on click. Po przyciśnięciu przycisku wywoływana jest metoda setLevelDetails z parametrem równym atrybutowi data-difficulty-level a następnie metoda initPieces.

Co takiego robi metoda setLevelDetails? Chodzi o ustawienie wartości, które są zależne od wybranego poziomu trudności. Pole obiektu Puzzle – pieceNum otrzymuje wartość przekazaną w parametrze. To pole będzie często wykorzystywane, oznacza ilość elementów w jednym rzędzie układanki. Im wyższy poziom gry wybrał gracz, tym więcej będzie części układanki. Kolejne pole ustawione w metodzie setLevelDetails to pieceSize, czyli rozmiar jednego klocka układanki. Ta wartość też często się przyda. Jest obliczana, przez podzielenie rozmiaru boku elementu całej układanki przez ilość klocków w jednym rzędzie (czyli pole pieceNum). Ostatnie pole, które ustawiam to emptyPiece. Jest to obiekt, zwierający dwa własne pola: top oraz left. Te wartości opisują lokacje pustego miejsca w układance, na to miejsce będzie można przesuwać inny klocek. Wartości top i left to rozmiar całej układanki minus rozmiar klocka. W ten sposób, pusty element będzie na początku ulokowany w prawym, dolnym rogu.

Kolejna metoda to initPieces. W niej tworze klocki układanki, oraz umieszczam je w odpowiedniej kolejności na planszy. Oto kod:

Najpierw szykuję miejsce na układankę. Usuwam tło oraz cały html znajdujący się w głównym elemencie. Następnie dwoma pętlami for zaczynam ustawiać elementy. Pętle iterują tyle razy, ile wynosi wartość pola pieceNum. W każdym obiegu tworzony jest nowy klocek układanki. Jest too nowy element div, którego style position ustawiony jest na absolute. Do każdego dodana jest klasa puzzPiece oraz atrybut data-piece-number, którego wartość to liczba inkrementująca się co obieg od zera.

Następnie na podstawie numeru iteracji zewnętrznej i wewnętrznej pętli oraz rozmiaru klocka obliczane są wartości styli top (zewnętrzna pętla) oraz left (wewnętrzna pętla). To sprawia, że klocki wypełniają główny element. Ponieważ chcę aby klocki były otoczone ramką o szerokości jednego piksela, dlatego, aby wszystko się pomieściło, muszę od wysokości i szerokości odjąć po jednym pikselu. Przyszła kolej na główny trick, tego programu, czyli jak to jest, że obrazek z układanki jest dzielony i mieszany tak jakby zamieniał się w wiele mały obrazków. Otóż, naprawdę jest to wiele obrazów! Każdy element otrzymuje ten sam obrazek jako tło, trick polega na ulokowaniu tego tła w każdym z elementów tak, że połączone, wyglądają jak jeden obraz. Osiągam to dzięki stylowi background-position. Jego wartości też są uzyskiwane dzięki przemnożeniu numeru iteracji przez rozmiar klocka. Prawie tak jak top i left, z tą różnicą, że tym razem wartości te są ujemne.

Kiedy wszystkie klocki są już na planszy, usuwam ostatni z nich. To będzie puste miejsce, na które będzie można przesuwać inne klocki. Gdy to wszystko jest już gotowe, wywoływana jest metoda shufflePieces oraz do każdego elementu przypisywany jest event on click, który powoduje, że po kliknięciu wywoływana jest metoda checkPiece.

Metoda checkPiece oraz metoda switchPiece zawierają kod, który powoduje, że klocki poruszają się po układance.

Metoda checkPiece jest wywoływana po kliknięciu na klocek układanki, jako parametr otrzymuje ten właśnie klocek. Pierwsza rzecz jaka się tu dzieje, to ustawienie zmiennych, currLeft oraz currTop. Są one wyciągane ze stylów elementu przekazanego jako argument. Warto zwrócić uwagę, że od wartości odcinam litery „px” oraz zamieniam to co zostało na wartość Number, to dlatego, że top i left pustego elementu to liczby a nie łańcuchy znaków. Gdy te dwie zmienne są już gotowe, sprawdzam po kolei, czy któryś z czterech elementów stykających się bezpośrednio z klikniętym klockiem nie jest czasem pustym elementem. Jeżeli tak, wywoływana jest metoda switchPlace.

Metoda switchPlace wykorzystuje animacje jQuery. Animuje zmianę styli css top oraz left klikniętego klocka na te wartości z pustego elementu. Następnie pustemu elementowi przypisywane są wartości top i left klikniętego. W ten sposób zamieniają się miejscami.

Kolejna metoda to shufflePieces. Ta metoda, jak nazwa wskazuje, miesza znajdujące się na planszy klocki, aby gracz, mógł je poukładać 🙂

Jak to działa? Na początku ustawiam wartość zmiennej moveTimes na poziom trudności, czyli liczbę klocków w jednym rzędzie, przemnożony przez 150. Następnie tworzę zmienną i, która na początku wynosi zero, oraz tablicę, która przechowuje cztery elementy, łańcuchy znaków równe „Mieszam” plus parę kropek.

Gdy to jest już gotowe, uruchamiam interval, które co jedną setną sekundy robi następujące rzeczy jeśli moveTimes, akurat dzieli się przez 15 bez reszty, podnoszę licznik i oraz wyświetlam element tablicy shufflingMessages znajdujący się pod indeksem równym licznikowi i. Jeśli i jest większe od trzech zostaje wyzerowane. Dzięki temu, co piętnaście wywołań setInterval, zmienia się treść komunikatu mieszam, powodując efekt animowanych trzech kropek.

Następnie wybieram losowo liczbę z przedziału od zera do kwadratu pieceNum minus jeden. Znajduję element, którego atrybut data-piece-number (wartość ustawiona podczas tworzenia klocków) jest równy tej liczbie i próbuję go przesunąć, wywołując metodę checkPiece, używając wylosowanego elementu. I tak 150 pomnożone przez poziom trudności razy 🙂 Wystarczy aby porządnie pomieszać wszystkie klocki, a zarazem daje pewność, że cały proces jest odwracalny.

Pod koniec każdego wywołania setInterval, zmniejszam wartość moveTimes o jeden. Gdy dojdzie do zera, zatrzymuję setInterval i odpalam metodę startTimer

Ta metoda służy to uruchomienia licznika czasu, jaki graczowi zajmie ukończenie układanki. Ten licznik, również będzie zawierał kod sprawdzający czy gra już została zakończona. Do stworzenia licznika użyłem, oczywiście setInterval. Lecz zanim zostanie zadeklarowana, najpierw wstawiam tekst przedstawiający same zera w miejsce, w którym pojawiał się tekst informujący o mieszaniu klocków. Następnie deklaruje cztery zmienne. pierwsza służy do liczenia ilości wywołań, setInterval, kolejne będą przechowywać ilość sekund, minut oraz godzin spędzonych nad układanką. Następnie odpalam setInterval, kod będzie wywoływany co jedną czwartą sekundy. Można zastanowić się, dlaczego nie co sekundę, skoro ma mierzyć czas. Wyjaśnię to na koniec.

Z każdym wywołaniem setInterval inkrementuję wartość zmiennej tick. Co cztery wywołania, inkrementuję wartość zmiennej secondsPassed. Następnie mam dwa wyrażenia warunkowe. Pierwsze sprawdza czy liczba sekund nie przekroczyła 60, jeśli tak, są one zerowane a liczba minut zostaje podniesiona o jeden. Drugie, robi to samo lecz z minutami i godzinami. Kolejna część kodu zajmuje się tworzeniem łańcucha znaków przedstawiającego wartości godzin, minut oraz sekund rozdzielonych dwukropkami. Sprawdzam przy okazji tworzenia łańcucha czy któraś z wartości nie jest mniejsza niż 10. Jeżeli jest dodaje przed nią zero, tak aby wszystko prezentowało się tak jakby był to prawdziwy stoper. Kiedy łańcuch znaków jest gotowy, zostaje wyświetlony obok planszy gry.

Ostatnie trzy linijki sprawdzają czy układanka została ułożona. Jeżeli metoda checkIfWon zwróci wartość true, wywołana zostanie metoda renderEnd. Dlatego chciałem aby setInterval był wywoływany co jedną czwartą sekundy zamiast co sekundę. Dzięki temu, gra będzie sprawdzana na tyle często, że gdy klocki zostaną ułożone w odpowiedniej kolejności, zatrzyma się. Gdyby czas ten był dłuższy, gracz mógłby zdążyć zrobić coś niespodziewanego, po ułożeniu klocków. A tak nie daję mu szansy 🙂

Przejdźmy do metod checkIfWon oraz renderEnd

Metoda checkIfWon służy do sprawdzenia czy klocki zostały ułożone w odpowiedniej kolejności. Działa to w następujący sposób: klocki są ponumerowane, każdy numer powinien mieć odpowiednie wartości styli top oraz left. Dokładnie takie, jakie przypisane były im przez zagnieżdżone pętle for w metodzie initPieces.
Tutaj będę jednak używał metody jQuery each, za pomocą której sprawdzę każdy klocek. Na szczęście nie jest trudno zasymulować wartości liczników zagnieżdżonych pętli for i to właśnie robię. Po kolei sprawdzam czy style elementów się zgadzają, jeżeli tak, podnoszę wartość zmiennej correctPieces o jeden.
Na koniec sprawdzam czy liczba correctPieces jest równa, liczbie wszystkich klocków. Jeżeli tak, metoda zwraca wartość true, co z kolei spowoduje wywołanie metody renderEnd.

renderEnd działa podobnie do renderStart. Usuwam w niej elementy układanki, a na planszy gry jako tło
ustawiam cały obrazek. Wyświetla się treść pola finishMenu, czyli gratulacje dla gracza oraz przycisk. Oprócz tego metoda wypisuje także czas jaki zajęło graczowi ukończenie układanki. Na koniec do przycisku przypisany jest event on click, który powoduje, że po kliknięciu zostanie wywołana metoda renderStart i zabawa zacznie się od nowa 🙂

I tak dochodzimy do końca. Starałem się wyjaśnić wszystko w miarę jasno, ale zdaję sobie sprawę, że momentami mogłem podawać informacje skrótowo. Może i dobrze, ten wpis i tak jest rekordowo długi 🙂 W każdym razie, jeżeli coś jest nie jasne, zachęcam do zostawiania komentarzy, chętnie wyjaśnię wszelkie nieścisłości.

Jeżeli podobał Ci się ten wpis, polub moje konto na FaceBooku. Dzięki temu będziesz zawsze na bieżąco z nowymi wpisami 🙂