Tworzenie prostej responsywnej gry w javascript

Postanowienie z poprzedniego posta Tak, to już ostatni dzień konkursu. Za nim zrobię podsumowanie całego projektu, wrócę do mojego poprzedniego wpisu . Narzekałem w nim, że wykryłem błąd. Myślałem, że szybko go naprawię i poprawię mój kod. Ten easy-peasy bug, zajął 3 dni! Przebudowywałem kod 3 razy. W końcu zwróciłem się z problemem na forum i dostałem podpowiedź, która pomogła mi rozwiązać problem. W tych dwóch krótkich  metodach miałem dwa bugi, które aktywowały się na przemian,  przez co zachowanie metod wyglądało na losowe. Prawione metody w obiekcie Controller: https://github.com/commit Przez ten błąd, nie starczyło mi czasu na poprawę jakości kodu. Jednak jeszcze się nie poddaję. Jak znajdę dziś trochę czasu, to poprawię go i wyślę na githuba. Podsumowanie W czasie tego konkursu wypiłem 167 kaw, zużyłem ..., ale to Was pewnie nie interesuje. Jeden z głównych warunków konkursu został spełniony. Ponad 20 postów zostało upublicznione. W utrzymaniu samodyscypliny przy pi

To jeszcze nie koniec Część uczestników już pożegnała się z konkursem, ale przecież jeszcze trwa trzy dni. Można kilka postów napisać 😉. Ja walczę do końca. Oceniam, że projekt wykonałem na ok 85%. Brakuje planszy "Author" i dopieszczonego kodu. I to właśnie na kodzie skupię się przez te ostatnie dni. Aby trochę nadrobić czasu, nowe tła są pobrane z pixabay.com Gdy zbliża się deadline, automatycznie pogarsza się jakość nowego kodu. DRY przeszedł na dalszy plan, pojawiły się powtórzenia.  Byle wszystko działało, aby klient był zadowolony. Niestety i stety, Wy macie wgląd do mojego kodu i możecie powiedzieć: "panie! co mi tu za bubla pokazujesz?". Repo: https://github.com/GuyDiamond/where_is_my_letter Dlatego mam ambitny plan w Codacy (opisywałem go tutaj ), podnieść jakość kodu z C na B. Bug Wcześniej jednak muszę się uporać z błędem, który znajduje się w metodach parseClick i guessPair w kontrolerze. Czasami (na razie, nie umiem wyłapać reguły) niek

Główne menu W tym tygodniu skupiłem się na wymyślaniu ekranu powitalnego. Efekt pracy widzicie powyżej. Są trzy przyciski start, wybór poziomów i parę słów o mnie. Podstrony nie są jeszcze gotowe, ale przyciski działają. Zrobiłem oddzielne pliki js dla kontrolera i widoku, aby nie ładować całego programu z bibliotekami  na start. Tak rozdzielony kod jest łatwiej utrzymać. W lewym górnym rogu jest głośniczek. Taki sam jak w na planszy z grą. Przy próbie podpięcia zdarzenia pod ten głośnik, poczułem oddech modułowości JavyScript na plecach. Mógłbym wyciągnąć i skopiować metody obsługi głośnika z plików podpiętych pod planszę z grą, ale nie jest to zgodne z DRY. DRY DRY to skrót od "Don’t Repeat Yourself", czyli nie powtarzaj się. Reguła jasno określa, że kopiowanie istniejącego kodu jest złem. Powiedzmy, że nie zastosowałem się do tej reguły i skopiowałem kod. Teraz chcę zmienić efekt po najechaniu na to myszką. Muszę w każdym skopiowanym kodzie to zmienić, aby przyci

Dźwięk w grze Ciężko znaleźć naprawdę darmowe dźwięki i muzykę w internecie.  Zwykle napis "free" w tytule strony prowadza w błąd i później się okazuje, że są ukryte koszty. Jedną ze stron, gdzie możecie ściągnąć naprawdę darmowe dźwięki jest: https://www.dl-sounds.com/ . Niezłą kopalnią dźwięków okazał się YouTube. Muzyka w tle Do tła muzycznego ściąłem dwa utwory. Jeden to łagodna muzyczka, drugi to odgłosy łąki. Aby nie komplikować kodu, postanowiłem połączyć te dwie ścieżki dźwiękowe. Należało też skrócić trwające 14 minut odgłosy łąki. Z pomocą przyszedł mi program open source Audacity.  Jak dla amatora w dziedzinie obróbki dźwięku, program okazał się całkiem prosty w używaniu. Pomimo tego, że posiada wiele opcji, nie trzeba się w nie wgłębiać wykonując podstawowe czynności takie jak przycięcie, przesunięcie lub przyciszenie jednej ze ścieżek. Zapisany utwór umieściłem w HTML: <audio id="backgroundSound" autoplay loop>             

Jak sprawdzić, czy twój kod jest poprawny? Dziś już oddałem jeden wpis, ale zaoszczędziłem trochę czasu i mogę napisać kolejny. Jest u mnie 22 i może zdążę do północy. Gdy jesteś początkującym koderem (takim jak ja), chciałbyś wiedzieć, czy twój kod jest poprawny i pisany zgodnie z obowiązującymi standardami. Jednym ze sposobów jest publikacja kodu na forum programistycznym. Kilka razy tak zrobiłem i dostałem treściwą odpowiedź, ale zdarzały się sytuacje, gdy nikt nie odpowiadał. Wtedy zastanawiałem się, czy mój kod jest tak zły, że fachowcy nie mają już siły dopowiadać na te same błędy, czy taki dobry, że nie ma do czego się doczepić. 😉 To niesie także ryzyko, że kod zostanie sprawdzony powierzchownie i o wielu błędach się nie dowiesz. Może się też zdarzyć, że wywiąże się dyskusja pomiędzy kilkoma mistrzami, o tym, jak powinien wyglądać poprawny kod. Po takiej dyskusji zazwyczaj jesteś bardziej skołowany niż przed zadaniem pytania. Czasami po prostu głupio pytać kolejny raz o

Nowe postacie, nowy przycisk, nowe komunikaty i kilka zmian w kodzie Trochę zaniedbałem ostatnio bloga, ale za to zyskała gra. Muszę siebie trochę pogonić, aby gra na koniec konkursu wyglądała jako tako. Wybrałem kilka postaci z rysunków mojej małej pociechy i przeniosłem je do SVG. Niektóre wyglądają, jakby wyciągnięte z filmów Tima Burtona, co akurat dla mnie jest zaletą. Nad postaciami litery są w dymkach. Zmieniłem komunikaty po udanym trafieniu i po nieodgadnięciu oraz wygraniu. Na środku pojawił się nowy przycisk start. Zmiany też dotknęły kod. Teraz miejsca, za którymi się chowają postacie, nie zasłaniają klikania. Wystarczyło do właściwości obrazków w CSS dodać "pointer-events: none;". Nie sądziłem, że da się to zrobić tak prosto. Postacie biegnąc do swoich kryjówek, nie przechodzą przez miejsca, tylko wybiegają na środek a z stamtąd udają się do swoich miejsc. Niestety trafiłem również na buga, którego jeszcze nie usunąłem. Gdy para odgadniętych post

Zmiany na łące Witajcie, dziś krótko, ale nie oznacza to, że mało czasu zajmowałem się projektem. Dodałem sześć nowych grafik do gry. Są to miejsca, gdzie  postacie będą się chowały. Rysunki są mojego autorstwa. Trochę bawiłem się stylami rysowania. Raz do blasku dałem gradient kołowy (stóg siana), innym razem jasną kreskę (głowa słoneczników). Obrazki przez to mogą się wydawać od różnych autorów. Słoneczniki już powinniście znać z poprzedniego wpisu.  Mam nadzieję, że się podobają. Teraz następną czynnością będzie narysowanie postaci i dodanie im trochę animacji. Chciałbym, aby nie przesuwały się po ekranie, ale trochę naturalniej ruszały nogami. Także nie podoba mi się, że postacie przenikają przez miejsca do chowania. Postaram się, aby wchodziły za miejsce, a nie przez miejsce. Zobaczymy jak mi to wyjdzie. Do następnego razu.

Nie wiem jak ci to powiedzieć, ale musisz schudnąć Narysowałem kolejny element do gry. Najbardziej złożony rysunek dotychczas. Po zapisaniu na go na dysk, trochę się zdziwiłem, bo zajmował on aż 1952KB. Kilka słoneczników a zajmują więcej niż wszystkie rysunki, jakie narysowałem do gry razem. Rodzice z mobilnym limitowanym internetem, nie będą szczęśliwi, pożyczając swoim dzieciom telefon do gry. Musimy cię odchudzić, mój słoneczniku. Zapis w Inkscape Gdy zamierzasz pracować na Inkscape powinieneś wiedzieć, że w odróżnieniu od innych programów do tworzenia grafiki wektorowej, Inkscape nie ma swojego formatu plików. Ilustrator ma końcówkę plików .ai, Affinity Designer ma .afdesing itp. Inkscape używa końcówki .svg, ale ma dwa typy. Zapis w "Czysty format SVG" sprawia, że utracimy warstwy i rysunek zostanie spłaszczony do jednej warstwy, ale za to zaoszczędzimy trochę KB. Dlatego robocze prace zapisujemy w "Inkscape SVG", a do umieszczenia na stronie w c