Menu

Phrasarbs – prosta edu-gra do nauki angielskiego

23 marca 2017 - Daj się poznać 2017, Projekty
Phrasarbs – prosta edu-gra do nauki angielskiego

Phrasarbs nie ma zbyt porywającej nazwy, sam pomysł też jest epicko prosty w założeniach – nauka angielskich „phrasal verbs” jako uproszczone puzzle/tetris.

Trzy klocki ze słówkiem bazowym spadają, trzy klocki z końcówką czekają na dole, oczywiście w zmieszanej kolejności, tak aby trzeba było górę spasować poprawnie z dołem.
Jeśli klocki połączone są błędnie, to robi się trudniej, ponieważ gracz „zabudowuje się” niepoprawnymi liniami które się nie kasują, dokładnie tak jak to było przy źle ułożonych liniach w tetrisie.

Tak to wygląda od strony czysto teoretycznej, bo wiadomo że do przełożenia tego na kod trzeba trochę więcej zachodu niż przy planowaniu na papierze.

Przy okazji pisania tego projektu konkursowego(nie jest on na DSP lecz na szkolny konkurs organizowany przez SEP, ale post traktuje o rzeczach związanych z IT i kodowaniem więc jako post konkursowy chyba się nadaje) chciałem rozwinąć trochę swój knołledż z zakresu pisania rzeczy webowych. Wcześniej pisałem proste gierki webowe w AllegroJS od Sosa Sosowskiego, tym razem chciałem spróbować czegoś innego, bo w Allegro bywały dziwne problemy między przeglądarkami przy tym samym kodzie.

Wybór padł na PIXI.JS, które w przeciwieństwie do AllegroJS jest zorientowane obiektowo co przekłada się na pewną różnicę w pisaniu, nomen omen w Allegro pisało mi się szybciej, ale im więcej kodu tym poziom chaosu robił się odrobinę większy przy Allegro niż przy PIXI.

Rdzeń projektu stanowiło operowanie na tekście, ponieważ wyrażenia razem z tłumaczeniem miałem w postaci jednego stringa, więc trzeba było rozbić go w uniwersalny sposób na trzy mniejsze części(baza, końcówka, tłumaczenie).
Później zabawa z umieszczaniem wszystkiego w tablicach, no i wdrażanie mechaniki – klocki z obrobionym tekstem, sprawdzanie poprawności połączonych części, reagowanie na dobry lub zły rezultat.

Jako że jestem mańkut i ogólnie koślawiec, to największym problemem był design i oprawa graficzna, zdecydowałem się ostatecznie na najprostsze rozwiązania, które spełniały moje minimalne kryteria wyglądu, z naciskiem na minimalne. Lubię schludny wygląd, ale niestety kiedy sam muszę o niego zadbać to czar pryska.

Napotkałem podczas pisania w PIXI.js dość dziwny problem, prawdopodobnie ze stylami do canvas’a, przykładowo box-shadow dla niego w Chrome zachowuje się co najmniej dziwnie, rysując jakieś dziwne kształty w obrębie cienia.

Ponadto, odkryłem genialne narzędzie jakim są GitHub Pages.
Napotykałem wcześniej różne projekty hostowane pod adresem .github.io, ale nie zdawałem sobie sprawy z tego jak genialne i proste jest to cudo – wystarczy założyć repo, nadać mu odpowiednią nazwę, wrzucić appke webową jednym pushem i voila! Projekt jest dostępny live pod adresem jaki ustaliliśmy i jego aktualizacje sprowadzają się tylko do pushowania commitów, bez bawienia się w hostingi, FTP i tak dalej. Dla mnie bomba, kto nie zna ten trąba.

Koniec końców, małą grę edukacyjną Phrasarbs mam na ukończeniu i powinna być gotowa na dniach, cud techniki to to nie jest, ale do rywalizacji w konkursie na poziomie szkół technicznych spokojnie mogę go zgłosić. Trochę nerwów napsuł, ale co się nauczyłem i dowiedziałem(o PIXI.JS i GH Pages), to moje.

Czas się w końcu zabrać za M1A2-SNAKE!

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *