jSnake: gra w jQuery (JavaScript) + kod źródłowy

07.11.2009, 17:28 | projekty

jSnake

Postanowiłem przypomnieć sobie jak wygląda JavaScript. Nie miałem z nim zbyt dużo do czynienia, a jeśli już, to kontakty nasze były raczej sporadyczne. Ciekawiły mnie możliwości jQuery, nie tyle pod kątem różnych bajerów możliwych do użycia na stronie internetowej (choć to oczywiście też jest ciekawym wątkiem), bardziej chodziło mi o coś rozrywkowego. Czy można napisać grę w JavaScript wspomagając się biblioteką jQuery? Jeśli tak, to czy będzie to proste? Ile czasu zajmie napisanie prostej, działającej gry? Czy będzie szybsze, wygodniejsze i łatwiejsze, niż w innych technologiach, na przykład C++ czy PHP?

Okazuje się, że stworzenie bardzo prostej gry (nazwanie tego grą i tak jest trochę na wyrost, to po prostu działające kilka linijek kodu) zamiast miesiąca może zająć... dzień, w porywach dwa. Jeśli mniej więcej wiesz co chcesz napisać, znasz podstawy, potrafiłeś sklecić co nieco w C++ czy PHP, to nie powinno być problemu. Zawsze możesz użyć Google, lub zapytać w komentarzach do tego wpisu. Sam rozglądałem się niedawno za grami napisanymi przy użyciu jQuery, znalazłem ledwo dwie, a i to było tylko nauką kilku funkcji a nie kodem źródłowym czegoś większego. To, co ja napisałem nie jest nauką krok po kroku, wpis skierowany jest raczej do osób mnie podobnych, które wolą poszukać kawałka kodu i samemu połapać się do czego służy, eksperymentować z kodem, zamiast czytać instrukcję obsługi linijka po linijce. Opiszę jedynie działanie używanych w kodzie funkcji.

Zajrzyj do kodu źródłowego gry jSnake, żeby mieć go przed oczami, jeśli interesuje Cię spis poniższych funkcji:

PointClass - definicja dwuwymiarowej tablicy z dodatkowym polem id. Można to było inaczej, zdecydowanie lepiej napisać, ale cóż, ja postanowiłem się zbytnio nie wysilać, a taki pomysł wydawał mi się w tym przypadku najprostszy
$().ready - zawiera inicjalizację kodu, wywoływane jest po załadowaniu się struktury strony
isTheSame - funkcja pomocnicza, dzięki której można sprawdzić, czy dane dwa punkty są równe
setFood - ustawia jedzonko na planszy
setWall - ustawia ściany na planszy
moveSnake - przesuwanie węża po planszy
refreshSnake - pomocnicza funkcja, która odrysowuje węża podczas ruchu
setSnake - ustawia węża przed rozpoczęciem gry
foodCheck - sprawdza, czy wąż trafił na jedzonko
wallCheck - sprawdza, czy wąż trafił na ścianę
biteCheck - sprawdza, czy wąż ugryzł się w ogon
lifeLost - pomocnicza funkcja wywoływana, kiedy wąż straci życie
restart - wyczyszczenie wszystkich elementów przed ponownym rozpoczęciem gry
executeTimer - licznik czasu gry
dialog - okienko dialogowe z komunikatami
$().keypress - działa na wciśnięcie klawisza, sprawdza co zostało wciśnięte i odpowiednio reaguje

Tak jak pisałem, jest to raczej swobodna próba napisania czegokolwiek, co działa, aniżeli napisanie idealnego, poprawnego kodu. Niektóre rozwiązania czy całe funkcje mogą się komuś przydać, jednak ostrzegam, że kod może być nieoptymalny. Jest taki w wielu miejscach - na przykład wąż usuwany jest i 'rysowany' od nowa za każdym razem, gdy się przesunie mimo, że można by usuwać jedynie ostatni jego element i umieszczać go na wcześniejszej pozycji głowy węża. Pamiętaj, używasz na własne ryzyko.

Jeśli chcesz zobaczyć jak to działa (i wygląda), kliknij tutaj: gra jSnake.

Ps. Działa pod Firefoxem 3, pod Safari jakoś nie bardzo, innych przeglądarek nie testowałem. Pod IE znając życie nie zadziała, ale to już nie mój problem.

komentujKomentarze:

Też napisałem prostą grę w javascript'cie tylko jako gadżet do iGoogle http://code-laboratory.com/google/gra-matematyczna-jako-gadzet-do-igoogle a kod źródłowy jest pod http://code-laboratory.com/javascript/kod-zrodlowy-javascript-do-gry-labmathgame Nie używałem jQuery tylko czystego javascriptu.
Taka prościukta gra matematyczna ;)
Jak już pisałem - to nie jest pełnoprawna gra, tylko kawałek działającego kodu ;]

Grafika to zupełnie inna bajka, trochę z licencjatu zabrane i potraktowane Paintem - wiem, porażka xD
no szału nie ma, ale działa (jeśli tylko o to Ci chodziło to osiągnąłeś zamierzenie)... głowa snake'a mnie przeraża ;>