jsHopper – gra co miesiąc: marzec. Kompletna gra w Phaser.js – część druga.

W poprzednim poście pokazałem jak działają podstawy mojej nowej gry stworoznej przy pomocy frameworka Phaser.js. Były to dwa pierwsze stany oraz sposób przechodzenia pomiędzy nimi. Stan load wczytuje pliki potrzebne do gry a stan menu prezentuje ekran menu. Trzeci stan, game obsługuje czyli właściwą grę. Wyjaśniłem jak działają dwa pierwsze stany, oraz jak zainicjalizować je wraz z grą Phaser.

Dziś przyszła pora na objaśnienie działania ostatniego stanu gry. Jest on znacznie większy niż dwa poprzednie, dlatego umieściłem jego opis w osobnym poście.

Tworzenie gier phaser dla początkujących Czytaj dalej jsHopper – gra co miesiąc: marzec. Kompletna gra w Phaser.js – część druga.

jsHopper – gra co miesiąc: marzec. Kompletna gra w Phaser.js – część pierwsza.

jsHopper jest już ‚skończony’. Dlaczego cudzysłów? Bo tak naprawdę w tej grze mógłbym jeszcze wiele ulepszyć, ale już nie będę kontynuował prac nad tym projektem 🙂 . Jego celem było przede wszystkim sprawdzenie nowego frameworka, czyli Phaser.js.

Już w ostatnim poście zdradziłem, że phaser bardzo mi się podoba. Dziś wstępnie opiszę mechanizmy, które tak mnie urzekły.

Phaser.js dla początkujących Czytaj dalej jsHopper – gra co miesiąc: marzec. Kompletna gra w Phaser.js – część pierwsza.

jsHopper – gra co miesiąc: marzec. Klon forggera w Phaser.js

Jak fajnie by było, gdyby doba miała więcej niż 24 godziny. Albo, żeby w tygodniu był jeden dodatkowy dzień (najlepiej wolny od pracy). Jednak jest jak jest i zasoby wolnego czasu, który mógłbym wykorzystać na pracę nad blogiem są ograniczone. Do tego, większość tego czasu spędzam nad projektem konkursowym.

Mimo to, nie chciałbym aby zrobiło się tu zbyt monotematycznie. Dlatego postanowiłem trzymać się noworocznego postanowienia i również w marcu stworzyć grę w serii ‚gra co miesiąc’. Ale jak to zrobić z ograniczonym czasem? Odpowiedź okazała się bardzo prosta: ‚Phaser.js’.

tworzenie gier w Phaser Czytaj dalej jsHopper – gra co miesiąc: marzec. Klon forggera w Phaser.js

JS Platformer – przewijający ekran gry

Ile razy zdarzyło się wam, że siadacie przed kompem aby napisać prosty, krótki kawałek kodu a tu nagle okazuje się, że spędzacie nad tym pół dnia? Ja dziś miałem taką sytuację. Implementacja elementu gry, który dziś opiszę, miała zająć tylko chwilę i być jedynie rozgrzewką, przed pisaniem innych rzeczy. Niestety zeszedł mi na to cały przeznaczony tego dnia na programowanie czas.

Co dokładnie chciałem zaimplementować? Przewijający się ekran gry, dzięki któremu w miarę jak gracz się przemieszcza, na płótnie wyświetlają się nowe obiekty.

Platformówka w JavaScript Czytaj dalej JS Platformer – przewijający ekran gry

JS Platformer – drabinki

Gry platformowe mają swoje szczególne elementy. Aby grę można było nazwać platformówką, musi posiadać kilka konkretnych cechy. Najważniejsza z nich to oczywiście platformy, po których gracz może się przeskakiwać. To już mam w swoim projekcie, co dalej?

Drugim najważniejszym, według mnie, elementem tego typu gier są drabiny. Oczywiście nie zawsze są to dosłownie drabiny, mogą to być liany w dżungli, czy wystające skały na klifie po których postać może przemieszczać się w pionie. Właśnie dlatego kolejnym elementem dodanym do mojej gry, będą drabinki.

JS Platformer - drabinki Czytaj dalej JS Platformer – drabinki

JS Platformer – wstępna architektura projektu

Mam już ogólny zamysł tego jak będzie wyglądać moja gra platformowa. Stworzyłem podstawowy prototyp, z którego jestem zadowolony i na bazie tego właśnie prototypu, będę dalej rozwijał swój projekt.

Trochę posprzątałem w tym prototypie i myślę, że w obecnym stanie gra jest gotowa aby zacząć pracować nad nią dalej. w dzisiejszym poście, przedstawię podstawową architekturę, mojego projektu oraz objaśnie działanie jego konkretnych elementów.

JS Platformer - wstępna architektura projektu Czytaj dalej JS Platformer – wstępna architektura projektu

Asynchroniczność w JavaScript dla początkujących

Tematem dzisiejszego posta jest asynchroniczność w JavaScript. Brzmi jak coś bardzo skomplikowanego, prawda? Jak zwykle, to tylko pozory. Tak naprawdę, asynchroniczność to prosta ale ważna idea.

Każdy kto pisał kod dla front-endu, pewnie spotkał się już z wywołaniami asynchronicznymi. Pobieranie plików z serwera AJAXem odbywa się właśnie w taki sposób. Korzystanie z JS’a po stronie serwera, często również wymaga sporo wywołań asynchronicznych. Ale na czym to w ogóle polega?

Asynchroniczność w JavaScript dla początkujących Czytaj dalej Asynchroniczność w JavaScript dla początkujących

JS Platformer – dalszy ciąg prototypowania

W ostatnim poście przedstawiłem dwa prototypy tworzonej przeze mnie platformówki. Różniły się one głównie sposobem sterowania. W jednym z nich postać kontroluje się tylko klawiaturą, w drugim dochodzi myszką.

Szczerze mówią byłem prawie zdecydowany na to, żeby gra powstawała na podstawie pierwszego prototypu. Jednak wspomniany wpis spotkał się z dużym odzewem ze strony czytelników. Pod postem pojawiła się zawrotna ilość komentarzy (aż trzy, rekord tego bloga)! I według was lepszy jest drugi prototyp. I co teraz?

Gra platformowa w javascript Czytaj dalej JS Platformer – dalszy ciąg prototypowania

Struktury danych w JavaScripcie – Graf część 2

W poprzednim poście przedstawiłem z grubsza teorię grafów. Stworzyłem też zalążek implementacji tej struktury danych w JavaScripcie.

Dziś kontynuuję ten temat. Tym razem pokażę jak przeszukiwać grafy. Należy pamiętać, że w grafie przeszukiwanie nie tyle polega na odnalezieniu konkretnego wierzchołka, co na przeanalizowaniu jego układu krawędzi.

Struktury danych w JavaScripcie – Graf Czytaj dalej Struktury danych w JavaScripcie – Graf część 2

Struktury danych w JavaScripcie – Graf część 1

Nadszedł czas na kolejną strukturę danych. Tym razem będzie to graf. Warto poznać tę strukturę ponieważ jest ona naprawdę przydatna i często wykorzystywana. Popularnym przykładem mającym pomóc wyobrazić sobie graf jest siatka miast i łączących je dróg. Miasta to wierzchołki grafu a drogi to krawędzie je łączące.

Przykład bliższy komputerom to komputerowa sieć w domu czy na uczelni. Ją też możemy przedstawić jako graf. Wierzchołkami są wtedy podpięte do sieci urządzenia, a krawędzie to połączenia między nimi. Dzięki tej strukturze można przedstawić w łatwy sposób architekturę takiej sieci.

JavaScript noob struktury danych graf Czytaj dalej Struktury danych w JavaScripcie – Graf część 1