Daj się poznać - gra w js

pytanie zadane 14 kwietnia 2017 w Nasze projekty przez mowmiheniek Stary wyjadacz (11,900 p.)

Hej,

Ja także jestem zapisany do konkursu Daj się poznać. Nie liczę na zwycięstwo, ale dodatkową motywację do nauki.

Robię grę w js do nauki angielskich liter dla dzieci. Mam już działającą mechanikę gry, więc postanowiłem wyjść z ukrycia i przyjąć krytykę na klatę.

Strona gry: https://guydiamond.github.io/where_is_my_letter/

GitHub: https://github.com/GuyDiamond/where_is_my_letter

Blog: http://javascript-for-game.blogspot.co.uk/

Pozdrawiam

komentarz 14 kwietnia 2017 przez jpacanowski VIP (101,940 p.)

Witam użytkownika Maka. To już jest tu nas kilka... ;)

komentarz 1 maja 2017 przez Knayder Nałogowiec (37,640 p.)

To dobrze?

komentarz 2 maja 2017 przez mowmiheniek Stary wyjadacz (11,900 p.)

Gra jest jeszcze w produkcji. Chciałem tutaj przedstawić etapy jej powstawania przez amatora, czyli mnie. Liczę też na podpowiedzi i sugestie, dotyczące kodu i działania. Teraz zastępuję te prostokąty rysunkami. Do końca tygodnia będzie inaczej to wyglądało.

5 odpowiedzi

odpowiedź 23 kwietnia 2017 przez ShiroUmizake Nałogowiec (46,300 p.)

Pierwsze pytanie, do jakich dzieci to kierujesz? Dla starszych dzieci to będzie za łatwe.

Same GUI... cóż napis że jestem najlepszy, a całość wygląda jak mem. Uznaję, że to jest prototyp, przez prototyp poganiany.

Co do samej funkcjonalności aplikacji. To narazie tak... nie oceniam poczekam jak to faktycznie wejdzie w alfa.

Przejdżmy do kodu.

Pierwsze co mnie rusza nie ma readme, jak oglądam czyjeś repo i ma readme to chętnie przeczytam by dowiedzieć się co i jak działa. Jaką twórca architekturę zaimplementował etc.

Miło zaskoczenie, pliki SASS. Ale, to jest jeszcze pole do popisu.Poczytaj o mixinach a twoje życie zmieni się na zawsze :).

Normalize to jakiś szkielet SASS?

Przejdżmy do pliku HTML.

Nie ma blokowania widoku . Plusik.

Za wiele tu nie ma,przejdżmy dalej.

Action.js

Mamy obiekt view, aczkolwiek zaimplementowany tak dosyć stary sposób, ale jak najbardziej poprawny. Aczkolwiek, troszeczkę się uczepie, że widok troszeczkę za dużo robi (pobiera obiekty,modyfikuje), ale głównie spełnia założenia widoku (model powinen wstrzykiwać gotowe informacje).

Model. While i for zamieniłbym na metody, potencjalnych osób (czytaj mnie) za bardzo nie interesuje jak to robi, ale co to robi (while i jeden for mi się nie spodobał (coordinatePlaceHidden, choosePlacesHidden) . Model robi to co powinen. Aczkolwiek wrzuciłbym jakiś serwis (np: render do danych dla modelu).

Dobra kolejny obiekt Controler.

Kontroler nie powinen mieć wpływ na zmianę stanu widoku (Metoda: displayStartModel), powinen wywołać mój kochany widoku zmień mi to. A widok mówi ok stary, nie ma problemu.To samo co przy reszcie, for if jako osobne metody. (Poczytaj o kompozycie)

Action.js za bardzo nie mówi , że to widok, model, controler. Radziłbym się zainteresować modułami. Gdyż twój kod szybko będzie tył, potem możesz łatwo się pogubić.

Co do samego kodu. Jest super, tymbardziej jeżeli twój pierwszy raz. Nie muszę za bardzo głowić się nad kodem jest zrozumiały i sensownie napisany. Poczekam na kolejną wersję :).

Ale te GUI...

komentarz 24 kwietnia 2017 przez mowmiheniek Stary wyjadacz (11,900 p.)

O i na to czekałem. Na ocenę mojego kodu i do tego obszerną. Dziękuję ci za to bardzo.

To będzie gra dla czterolatków (w takim wieku dzieciaki w UK idą do przedszkola i uczą się literek). Ta plansza będzie pierwszy poziom, z każdym następnym będzie więcej postaci. Też nie mogę zniechęcić dzieciaków na starcie.

Normalize to plik css, ustawiający style tak, aby wyglądały bardziej spójnie na różnych przeglądarkach.

Aczkolwiek wrzuciłbym jakiś serwis (np: render do danych dla modelu).

Czy możesz rozwinąć myśl?

GUI teraz to test js, w tej chwili zajmuję się grafiką.

SASS - też chciałem się nauczyć go przy tym projekcie, ale z czasem czuje, że w mojej grze jest mało przydatny. Teraz już mam w planie zrezygnować z pętli w nim i przenieść wyliczanie pozycji obiektów do js. Główne role przypadają svg oraz js.

A tak poza tematem. Czy coś nie działało na forum? Teraz dostałem kilka odpowiedzi z datą wczorajszą na posta z 15 kwietnia.

komentarz 24 kwietnia 2017 przez ShiroUmizake Nałogowiec (46,300 p.)

SASS jest spoko, jak masz różne reguły np:media-queries (Niech pierwszy rzuci ten kamieniem co nie błądził szukając właściwej klasy CSS właściwych reguł) i ma bardzo wiele przydatnych funkcji (kontrast koloru <3)). Po drugie kodzik mocno chudnie :).

Co do rendera? Jak masz jakieś dane które muszą być wrzucone(odświeżone) na widok. Wynik, level cokolwiek. To render powoduje zmienia stan obiektu(węzła) w widoku, w skrócie Render to taki przydupas , którego zadaniem jest wrzucanie/odświeżanie informacji. O co chodzi, że ma to być serwis (a właściwie mikro-serwis)

Wrzucę ci cytat (Nic nie mogę sensownego znależć)

Poniżej dwa ciekawe artykuły, rozwijające powyższe. Pierwszy to tak zwane mikro serwisy, wzorzec traktujący każdą usługę aplikacyjną 9a tym samym przypadek użycia) jako odrębną aplikację, drugi pokazuje jak projektować interfejsy w takich przypadkach.

O co chodzi, że mikroserwis jest traktowany osobna aplikacja. Chodzi, oto , że potrafi stanowić osobny byt, oderwana od reszty (jest niezależna), ale jednocześnie integrować całą aplikacją. Przez to, że ona potrafi żyć tak trochę oderwana od całości, możemy ją implementować wielu miejscach. Można powiedzieć, że jest to jakby klasa, której metody są statyczne.

Do rozjaśnienia podam ci przykład:

var Render = {
render: function(node,value){
node.innerHTML=value;
}
removeValue: function(node){
node.innerHTML = "";
}
setDataAttribute: function(node, nameAttribute){
node.setAttribute ("data", nameAttribute);
}

}

Myśle, ze teraz zczaisz o co chodzi.

Dlaczego Ci się to przyda?

Jak zaczniesz pisać (do czego gorąco zachęcam (Pamiętaj!Ochrona przed regresją!). To zobaczysz, że będziesz musiał mnóstwo danych wrzucić, by go przetestować. A to oznacza jedno, obiekt ma za dużą odpowiedzialność. Render mocno go odciąży.

Ja wolę traktować model, jako taki szef z fajką w mordzie, kieszeniami w ręku. Który, mówi co ma się stać, a nie jak to się robi (Od tego ma swoich przydupasów). Jego interesuje efekt. Łatwiej testować.

To samo co w kontrolerze, możesz wywołować zdarzenie do modelu, a model przekaże do rendera.

odpowiedź 23 kwietnia 2017 przez Shiro Stary wyjadacz (10,300 p.)

Pomysł fajny kilka spraw:

albo piszemy po polsku albo po angielsku, lepiej oczywiście po angielsku zwłaszcza jeżeli ta gra ma uczyć właśnie tego języka. (brawo / jesteś the best)
Czasami widać litery co po prostu jest raczej sprzeczne z założeniami "Raczej słaba to zgaduj zgadula gdy od razu mamy rozwiązanie" (https://goo.gl/jnPiK7)
Te zielone prostokąty nie muszą być takie monotonne może jakaś grafika np. parawanu.

Ogólnie pomysł fajny, ale widać że to raczej wersja alpha. Będę śledzić ten post więc jak już będą jakieś duże zmiany będę wdzięczny za update i powodzenia!

komentarz 24 kwietnia 2017 przez mowmiheniek Stary wyjadacz (11,900 p.)

To prawda, to bardzo wczesna wersja alfa. Program jest pisany na konkurs "Daj się poznać", w którym muszę prowadzić bloga i opisywać moje postępy. Chciałem pierwsze zrobić silnik gry, a później grafikę i całą resztę.

Napisy będą po angielsku, te istniejące są do testowania.

Z tymi schowanymi literami do końca nie wiem jak to rozwiązać. Trzeba pamiętać, że to gra dla czterolatków (w takim wieku dzieciaki w UK idą do przedszkola i uczą się literek). Widzę po mojej córce, że nawet wybór pomiędzy literami d, b,p może stanowić duży problem a co dopiero ukryte całe literki. Nie chcę robić za trudnej gry. Może w późniejszych poziomach będą bardziej ukryte.

Grafika się robi. Możesz obserwować postępy na: http://javascript-for-game.blogspot.co.uk/

Pozdrawiam

komentarz 25 kwietnia 2017 przez Shiro Stary wyjadacz (10,300 p.)

Może gdy są schowane zmień im przeźroczystość. Chodź prawdopodobnie można to zrobić lepiej. Ja też nie znam się za dobrze w JS.

Miłego dnia i powodzenia!

odpowiedź 15 kwietnia 2017 przez seba Dyskutant (8,900 p.)

Nie rozumiem czego ta gra uczy. Mam cztery litery wybieram dwie i pisze że wygrałem i tyle a drugą parę liter mogę wybrać na odwrót niż było podane i nadal jestem zwycięzcom. Według nie słaba. Ale to moje zdanie.

komentarz 15 kwietnia 2017 przez mowmiheniek Stary wyjadacz (11,900 p.)

Gra jest jeszcze nie skończona. Będzie jeszcze głos, lepsza grafika, więcej poziomów trudności. Ma uczyć literek dzieci w wieku przedszkolnym. Mają dopasowywać małe litery z wielkimi lub na odwrót. Gra ma nie być zbyt skomplikowana, aby nie zniechęcała dzieciaki.

komentarz 15 kwietnia 2017 przez seba Dyskutant (8,900 p.)

To jak będzie gotowa to chętnie zobaczę.

odpowiedź 23 kwietnia 2017 przez ThePatrykOOO Dyskutant (8,400 p.)

pomożesz mi jak umieścić stronę na github.io, bo nie wiem za bardzo

komentarz 23 kwietnia 2017 przez MTB Użytkownik (690 p.)

Wystarczy że wejdziesz w ustawienia swojego projektu na Githubie.Tam masz zakładkę Github Pages. W Source zaznacz master branch i save. Wygeneruje ci się adres strony , wklej go do readme i gotowe:)

komentarz 23 kwietnia 2017 przez ThePatrykOOO Dyskutant (8,400 p.)

wygenerowało mi coś takiego https://thepatrykooo.github.io/SocialSite/ i jakoś nie działa :(

komentarz 23 kwietnia 2017 przez ThePatrykOOO Dyskutant (8,400 p.)

da się tak umieścić kod PHP

komentarz 24 kwietnia 2017 przez mowmiheniek Stary wyjadacz (11,900 p.)
edycja 24 kwietnia 2017 przez mowmiheniek

Przykro mi, ale nie możesz uruchomić PHP na github. Nie bawiłem się tym, ale na forach piszą, że https://jekyllrb.com/ i https://gohugo.io/ mogą ci pomóc.