Paragrafowa przygoda w Angularze cz1

Wspominałem w poprzednim wpisie o pewnej niespodziance przygotowywanej wraz z przygotowaną paragrafową grą Przygoda barbarzyńcy Sladuma. Tydzień temu nie wiedziałem jednak czy będę miał czas i chęci (jakże są ważne), aby zrobić to co miałem na myśli.


Zaczęło się niewinnie. Nie dalej jak dwa tygodnie temu stwierdziłem, że nauczę się AngularJS - webowego frameworka do JavyScript. Umożliwia on - podobnie jak jQuery - na zaawansowaną pracę na poziomie przeglądarki z wyświetlanym kodem HTML. Trochę takie jQuery na sterydach. Jak pewnie podejrzewacie, nauka czegokolwiek związanego z programowanie wiąże się z pisaniem miej lub bardziej skomplikowanych programów pokazujących podstawy języka czy frameworku. I w tym wypadku zacząłem tak samo, ale po przerobieniu tego i owego z książki (zawierającej błędy w napisanym kodzie!)  doszedłem do wniosku, że ten sposób nauki jest, ogólnie rzecz ujmując, mało wydajny i do dupy. Robienie pseudostron z opisanych w książce przykładów czy wyświetlanie przysłowiowego "Hello world" nie jest zbyt rozwijające i bynajmniej nie pozwala na nauczenie się czegokolwiek w sensownym czasie. Trzeba podejść do tematu tak, aby nie znudził po kilku godzinach nauki.

Z tego też powodu wpadłem na pomysł, aby przy nauce Angulara zrobić całkowicie interaktywną grę paragrafową. Połączę dzięki temu przyjemne (robienie gier) z  pożytecznym (nauka frameworku). Częściowo jest to też efekt malkontenckich uwag mojego kolegi, którego mierził obowiązek wyjmowania kości do gry w grę uruchomioną na przeglądarce oraz że jest tak mało interaktywna. 

 W efekcie mam na tapecie paragrafówkę Przygoda Sladuma przerabianą na, ni mniej, ni więcej, grę tekstową, w której interakcja, poza klikaniem na paragrafy i okazyjnie na aktywne przyciski, nie wymaga od grającego więcej wysiłku. Testy i walka rozwiązywane są przez wbudowany silnik gry paragrafowej napisany w javaScript na frameworku Angular.

W tej chwili postęp prac w stworzeniu w pełni interaktywnej paragrafówki oceniam na jakieś 50%. Zbudowałem mechanizm przekierowań między paragrafami (oparty $location), szablonów ekranów (angularowe szablony), prowadzenia walki, testów pojedynczej cechy, losowania kostek (angularowe serwisy), wyświetlanie paragrafów i wstępna obsługa błędów (angularowe kontrolery). Brakuje dobrej obsługi błędów przekierowań i kilku aspektów mechaniki gry paragrafowej. Muszę też popracować nad  wyglądem np. listy wyników rzutów przy walce czy wygląd ekraniku ekwipunku. 

Efekty są zachęcający. Wszystkie działania gracza oraz podjęte akcje trzyma w pamięci przeglądarka, nie trzeba przechodzić między stronami, aby otworzyć kolejny paragraf. Wbudowałem proste zabezpieczenie przed oszukiwaniem poprzez cofanie stron :p. Prace trwają.


Poniżej kilka zrzutów:

Walka:

Przykład walki z dwoma przeciwnikami

Ciąg dalszy walki, dla postaci Sladuma, w zależności od potrzeb, aktywują się umiejętności przydatne w walce. Oczywiście
paski Żywotności zmieniają się dynamicznie.

Wygląd paragrafu przed testem wymagającym jednego rzutu.

Test nieudany + przekierowanie

Test udany + przekierowanie

p.s.
Jeśli zajrzy tu ktoś zainteresowany ja działa Angular użyty do stworzenia gry oczywiście mogę o tym napisać.