jSnake: gra w jQuery (JavaScript) + kod źródłowy
07.11.2009, 17:28 | projekty
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.
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 ;)
Taka prościukta gra matematyczna ;)
Ender
dnia 07.11.2009, 19:20
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
Grafika to zupełnie inna bajka, trochę z licencjatu zabrane i potraktowane Paintem - wiem, porażka xD
efka
dnia 07.11.2009, 19:12
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 ;>