Seria mini-gier: Mini-pixel Snake

Zagraj w Mini-pixel snake

Postanowiłam podzielić się tutaj pewną serią mini-projektów. Wszystko zaczęło się od mojej chęci odświeżenia sobie JavaScriptu i właściwie miało ostać się na jednym projekcie, a najprawdopodobniej seria rozrośnie się na aż (tak, w moim przypadku to aż) trzy mini gry. Dlaczego gry? Ponieważ stwarzają większe pole do poznania nowych rzeczy, a zależało mi na poćwiczeniu sobie JSa. I oczywiście dlatego, że lubię snake'a. W trakcie pisania gry łapałam się, że zamiast kontynuować wprowadzanie funkcjonalności – po prostu w nią grałam. :)

Mini-pixel snake

Zapewne nikomu nie trzeba przedstawiać kultowej gry, którą jest snake, jednak w internecie można znaleźć sporo ich odmian. Na początku przyjęłam sobie założenie, że moja gra będzie kończyć się wówczas, gdy wąż wpadnie na ściany pola lub na siebie samego. Po najechaniu na jabłko, jak w projekcie nazwałam pikselowy kwadracik, który zjada wąż, ogon węża się wydłuży oraz zostanie naliczony punkt do wyniku. To właściwie miał być cały projekt, który, jak widać po miniaturce, trochę mi się rozrósł.

Prawdę mówiąc, nie miałam zielonego pojęcia jak zabrać się za tę grę, a pewne rzeczy zamiast kodowania wymagały ode mnie długiego dumania nad tym, jak z wiadomości, które posiadam o JS ugrać coś sensownego. Może gra sama w sobie jest prosta, ale dla mnie stanowiła spore wyzwanie.  Największe chyba zakodowania zachowania ogona węża. Koniec końców jestem bardzo zadowolona z rozwiązania, które udało mi się wymyślić, ale pewnie znajdą się na to o wiele lepsze sposoby.

Narzędzia

Gra została napisana bez wsparcia żadnych dodatkowych bibliotek takich jak np. jQuery tylko w czystym JavaScript, tzw. Vanilla JS oraz w HTML i CSS (już z wykorzystaniem SASS). Tutaj można podejrzeć cały projekt gry. Jeżeli ktoś ma dobre rady co do poprawy jakość kodu, to chętnie je przygarnę. (Prosiłabym te uwagi kierować już bezpośrednio na adres e-mail lub jako fork do projektu). 

Funkcjonalności

Koniec końców poza samym rdzeniem gry, wprowadziłam jeszcze następujące funkcjonalności:

• pauzowanie gry przy pomocy spacji lub kliknięcia na planszę gry;
• restart na życzenie (przycisk w kolumnie po prawej stronie);
• zapamiętanie najlepszego wyniku;
• wybór prędkości: wolna, średnia – domyślnie, szybka oraz zbyt szybka. Prędkość można zmienić już w czasie trwania rozgrywki;
• dwa tryby gry: normalny i  wyzwanie. W trybie wyzwanie wąż nie ma stałej prędkość, tylko ta przy każdym zjedzeniu jabłka zwiększa się o stałą wartość. W związku z tą zmianą dodatkowo musiałam (nie musiałam, ale wypadało):
• dezaktywować wybór prędkości po włączeniu trybu wyzwanie,
• zapisać osobno najlepszy wynik dla tego trybu,
• zmienić akcent kolorystyczny, ażeby było jasne, w który tryb w tym momencie gramy.

Pomysły na rozwijanie gry

Zastanawiałam się jeszcze nad wprowadzeniem trybu, w którym plansza nie ma ścian, a wąż po prostu magicznie teleportuje się na drugą stronę planszy. Jest to też dość częste rozwiązane w snake'owych grach, ale nie porwałam się na niego od razu, ponieważ wydaje mi się, że może być bardzo zdradliwe w trakcie implementacji. Być może wrócę do tego pomysłu, jeżeli zdecyduję się jeszcze coś poprawiać w kodzie.

Ciekawym rozwiązaniem byłoby też generowanie losowych (albo i nie) przeszkód na planszy. To również byłoby dodatkowym trybem lub czymś w rodzaju kolejnych poziomów gry. Wydaje mi się, że ten pomysł może się okazać dość obszerny w realizacji, więc chyba jednak się na niego nie zdecyduję.

Byłoby też pożądane, aby najlepszy wynik nie znikał po odświeżeniu okna, jak to się dzieje obecnie. Aby temu zapobiec, należałoby w projekcie zaimplementować ciasteczka.

Podsumowanie

Jestem bardzo ciekawa opinii dotyczących grywalności tej mini-gry przeglądarkowej. Jeżeli macie jakieś uwagi co do działania tej gry, pomysły na rozbudowę lub poprawę jakiegoś zachowania w grze, lub (oby nie) gra sypie błędami, to koniecznie dajcie mi znać. A na dzisiaj to byłoby tyle. Temat następnej mini-gry niech pozostanie niespodzianką!