Tworzenie prostej responsywnej gry w javascript

Losowanie rysunków i wstawianie do HTML Struktura MVC wisi już na githubie, pora się zabrać za wdrażanie metod. Na pierwszy ogień idzie chooseCreatures, która ma za zadanie wylosować cztery rysunki postaci do gry. I tutaj pojawia się pierwsza zagwozdka. Jak wylosować rysunki? Umieścić je w bazie danych i losować rekordy? Bazy nie przewidywałem. Wpadłem na pomysł, aby nazwać wszystkie rysunki tak samo z kolejnymi numerami:  postac1.jpg, postac2.jpg, postac3.jpg itd. Metoda chooseCreatures wylosuje tylko cztery różne numery, które dołączy do stringa "postac+number+.jpg". Nazwy plików trafią do widoku, który je doda do HTML i wyświetli. Do dzieła! W modelu ustalam ile będzie obrazków do wyboru (numPictures) oraz ile będzie obrazków wyświetlanych (numCreatures). Później losuję niepowtarzające się liczby z zakresu numPictures i wstawiam do tablicy. Poniżej przykładowe dane i działania na nich.  numPictures=20, numCreatures=2, Losuję 2 liczby z zakresu 1-20, niech będzie

Schemat działania gry Umiejscowienie etapów w MVC Model: Losowanie postaci - domyślnie wyświetlane będą cztery (przynajmniej w pierwszej rundzie), ale postaci będzie więcej. Użyję tutaj procedury losowania bez powtórzeń plików graficznych. Istoty będą łączyły się w pary. Losowanie liter - również losowanie bez powtórzeń. Losowane będą dwie litery, jedna dla każdej pary istot. Losowanie miejsca do ukrycia - w każdej rundzie postacie będą się chowały w losowym miejscu, do każdego miejsca przypisana jedna postać. Losowane miejsca, plus jednej z czterech postaci do przypisania. Widok: Wyświetlenie postaci razem z literami. Jedna para będzie wyświetlała wielką i małą literę.  Naciśnij Go! -  przycisk, który znika po naciśnięciu, a zarazem uruchamia animację postaci, które biegną do swoich kryjówek.  Kontroler: Zaznaczenie istoty wywołuje metodę "showUp" widoku. Widok: "showUp" uruchamia animacje wyjścia z ukrycia. Kontroler: Po kliknięciu

Canvas? Po co to komu?  Canvas to powierzchnia prostokątna, którą możesz umieścić w HTML np: <canvas id="rysunek" width="400" height="200"></canvas>  To w niej będziesz tworzył grafikę i wszystkie manipulacje za pomocą javascript. Jednak w odróżnieniu od SVG, który operuje na wektorach, canvas operuje na grafice rastrowej (pikselach). Szczególny przydatny  do tworzenia ruchomych wykresów, animacji, no i gier.  Możliwości są naprawdę duże, od rysowania na nim statycznych kształtów do animowanych. Tekst, obrazy, zdjęcia i filmy, muzyka - wszystko to można umieścić w canvas i manipulować tym. W porównaniu do SVG (które jest częścią DOM), canvas bardzo dobrze radzi sobie z dużą ilością obiektów. Jeżeli masz do obsłużenia parę tysięcy węzłów (ang. node), lepiej zrezygnuj z SVG i działaj w canvas.  Minusy canvas Podobnie jak grafika rastrowa, nie radzi sobie ze skanowaniem.   Nie jest dostępna. Strona napisana tylko w canvas nie będzie

Edytor kodu Jestem spóźniony z oddaniem wpisu o dwa dni, ale postaram się nadrobić zaległości. Moja gra zbudowana w HTML5, CSS3 i JS, będzie wyświetlana w oknie przeglądarki, dlatego będę potrzebował edytor ukierunkowany na front-end. Do tej pory korzystałem z edytora NetBeans , ale zapragnąłem być bardziej na czasie i postanowiłem wybrać jeden z edytorów na "fali". Padło na Brackets oraz na Atom . Po zobaczeniu kilku tutoriali  i przeczytaniu paru postów. Wybrałem Atom. Brackets bardzo przypominał mi Developer Tools w przeglądarkach, ale oferuje mniej opcji od niego np. po najechaniu na element na stronie, przenosi odpowiedniego miejsca w kodzie (podobno już to implementują). Brackets kusił podglądem na żywo tworzonej strony, ale później dowiedziałem się, że Atom także posiada taką wtyczkę. Pobrałem wtyczki do edytora, wzorując się na bardziej doświadczonym użytkowniku, uczestniczącym w "Daj się poznać 2017": 10 najbardziej przydatnych wtyczek do atoma.

Zamysł wyglądu gry Ostatnie godziny aby zdążyć przed zaplanowanym terminem i oddać wpis. Przedstawię w nim do czego będę dążył, jak ja widzę efekt.  W założeniu to ma być prosta gra typu point and click, pomagająca dzieciom zapamiętane i wymowę literek. Grafika Zielone kwadraty na rysunku powyżej, będą w przyszłości zastąpione rysunkami drzew, skał i co tam mi przyjdzie do głowy. Postacie są autorstwem mojej córki i będą przerysowane na format SVG. Jeżeli wystarczy mi czasu, dodam animacje dla każdej z postaci. Zachowanie Para liter, wielkiej i małej, będą dodawane losowo do dymków zależnie od poziomu gry. Z poziomem trudności liczba par będzie rosła. Na początku litery będą proste do rozróżnienia i wymowy, później mogą się pojawić obok siebie "b","p","d", a na końcu dwuznaki (digraphs) "th", "ch", "qu" itp.   Postacie po prezentacji swoich liter, losowo wybierają zielone kwadraty do schowania się. Cel gry

Nawiązując do poprzedniego postu, w którym przedstawiłem plan działania, chciałbym wam pokazać program do zarządzania listą zadań. Do tej pory chwilę używałem strony Trello . Trello posiada wszystko, co powinien mieć program "to do list". Jeżeli do tej pory nie używałeś żadnego, to wymienię czym powinieneś się kierować przy wyborze dobrego menadżera zadań. Nie będę tutaj wymieniał oczywistości, takich jak dodawanie zadań z datą. Menadżer zadań powinien posiadać:  dostęp z przeglądarki, aplikację na urządzenia przenośne, możliwość pracy w grupie, system powiadomień o nadchodzących "deadlines" oraz zmianach na liście,  opcje kopiowania list, zadań - przydatne, kiedy co tydzień powtarzasz te same zadania, możliwość dodawania komentarzy ludzi biorących udział w zadaniach, dodawanie załączników, zdjęć i innych plików multimedialnych, tworzenie podzadań, chcecklist  lub listy zakupów (funkcjonalność podobna), oznaczanie ważnych zadań, Dobrze, gdyby posia

Do biegu, gotowi ... Czas biegnie nieubłaganie mija już pierwszy tydzień a tutaj pusto. Czas skończyć odkładanie tego na później. Pora wytyczyć sobie cele, deadlines poszczególnych etapów. A pracy jest dużo, bo zaczynam od niskiego poziomu wiedzy. Mam jednak dodatkową motywację. Grę będę robił głównie dla mojej córki, która uczy się pisać i czytać po angielsku. Obserwując blogi moich współzawodników, czasami zastanawiam się, co ja tutaj robię. Ich doświadczenie rozkłada mnie na łopatki. Zarówno w programowaniu, jak i prowadzeniu bloga. Powiedziało się A, to pasuje dotrzeć co najmniej do C. Wielki plan. Plan jest tak naprawdę bardzo ogólny i w przyszłości będę go rozbijał na podpunkty. Przedstawienie ogólnego wyglądu gry. Narysuję prostą planszę z rozmieszczeniem obiektów oraz ich zachowaniem. Deadline : 08.03.2017. Przygotowanie środowiska działania, wybranie pomocnych narzędzi (możliwe, że silnika gry także). Przedstawienie moich wyborów na blogu. (1 lub 2 w