Przejdź do głównej zawartości

Uproszczony wygląd gry


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

 Zadaniem dziecka będzie odgadnięcie gdzie schowały się pasujące litery. Najpierw zaznaczy pierwszą literę a później literę do niej pasującą. Po odgadnięciu na ekranie pojawi się obrazek z przedmiotem, którego nazwa zaczyna się od odgadniętej litery, np. a - apple.
 
Na końcu opakuję to w ekran powitalny i wybór poziomów.

W ramach nauki użyję czystego JS (jeszcze nie wiem, na co się piszę).

Komentarze

  1. Hej,
    świetny pomysł na grę ;) Jeśli chodzi o tworzenie gier w JavaScript to myślę, że z pomocą mogłaby Ci posłużyć książeczka
    http://helion.pl/ksiazki/tworzenie-gier-internetowych-receptury-evan-burchard,twgint.htm
    Jest sporo gotowych rozwiązań jak coś napisać oraz co chyba w Twoim przypadku najważniejsze - kilka bibliotek JavaScript do tworzenia gier.

    OdpowiedzUsuń
    Odpowiedzi
    1. Dziękuję. Na pewno by mi pomogła. Nie mieszkam w Polsce, ale spróbuję ją zdobyć.

      Usuń

Prześlij komentarz

Popularne posty z tego bloga

Affinity Designer

Pierwsze wrażenia Postanowiłem przetestować młody program Affinity Designer do stworzenia grafiki wektorowej. W porównaniu do jego wielkich rywali CorelDRAW oraz Adobe Illustrator jest znacznie tańszy. Od CorelDRAW ponad 10 razy, a porównując z ceną Illustratora, to koszt 2 miesięcy abonamentu. Ja jednak jeszcze nie kupiłem go i wykorzystuję darmowy okres próbny 10 dni. Nie będę porównywał możliwości pomiędzy wymienionymi programami, ponieważ ich nie używam, ale korzystam z innego, darmowego Inkscape. Na pierwszy rzut oka, Affinity ma nowocześniejszy i schludny wygląd. Gdy korzystałeś z podobnych programów do tworzenia grafiki wektorowej, przesiadka i zaaklimatyzowanie zajmie Ci tylko chwilę. Jednak są pewne niuanse. Mnie chwilę zajęło szukanie ikonki do usunięcia zbędnego węzła. Po chwili szukania w googlach okazało się, że ikony nie ma, a węzły usuwa się klawiszem delete. Inkscape zawiera więcej opcji. W Affinity nie można ścieżkom ustawić nazw klas css. To dla mnie...

Program do organizacji pracy

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...

Wybieranie postaci do gry

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...