Tworzenie gier w JavaScript: kolizje – część pierwsza

Dziś omówię jeden z ważniejszych elementów, na które składa się tworzenie gier w JavaScript: kolizje. Po krytycznym przyjrzeniu się moim poprzednim projektom, doszedłem do wniosku, że wykrywanie kolizji było zdecydowanie najsłabszą ich stroną.Po prostu jakoś działały. Ale nie chcę zadowalać się efektem „jakoś”. Dlatego postanowiłem zgłębić temat. Trochę szperania w internecie, trochę eksperymentów i już wiem znacznie więcej 🙂 Swoją nowo zdobytą wiedzą podzielę się z wami w tym poście 🙂

Tworzenie gier w JavaScript: kolizje Czytaj dalej Tworzenie gier w JavaScript: kolizje – część pierwsza

Tworzenie gier w JavaScript: requestAnimationFrame

Nie na długo odszedłem od tematu tworzenia gier 🙂 Od pewnego czasu zbierały mi się tematy, z którymi chciałem poeksperymentować. Przede wszystkim z funkcją, o której słyszałem, że bardzo usprawnia Tworzenie gier w JavaScript: requestAnimationFrame. Ponieważ w Święta człowiek ma sporo wolnego, to zamiast siedzieć, nudzić się i objadać sernikiem, postanowiłem spożytkować ten czas i wypróbować parę nowych technik programowania gier (no dobra, jedząc w tym czasie sernik 😉 ).

W taki sposób powstał mini-projekcik, z którego screen widzicie poniżej (Póki co nie jest to jeszcze gra:)). Dużo w nim poeksperymentowałem i sporo się nauczyłem. Wszystko oczywiście opiszę w tym poście. Projekt można obejrzeć klikając w obrazek poniżej. Jak zwykle przygotowałem też paczkę z kodem, aby każdy mógł sam sobie podłubać.

Tworzenie gier w JavaScript - requestAnimationFrame Czytaj dalej Tworzenie gier w JavaScript: requestAnimationFrame

JavaScript tworzenie animacji w grach przy użyciu spritesheet’ów

W dzisiejszym poście pokaże wam jak działa w JavaScript tworzenie animacji w grach. Jak zwykle, nie będę przedstawiał czystej teorii. Pokażę własną grę, w której postaci i obiekty są animowane. Użyłem do tego sprite sheet’a czyli arkusza klatek, ściągniętego z neta.

Ponieważ są święta, moja gra będzie posiada świąteczny motyw 🙂 Aby w nią zagrać, wystarczy kliknąć w obrazek poniżej. Przygotowałem też paczkę z całym projektem. Możecie ją ściągnąć i pobawić się z kodem.

JavaScript tworzenie animacji w grach Czytaj dalej JavaScript tworzenie animacji w grach przy użyciu spritesheet’ów

(WIP) Space Attack – Gra napisana w JavaScript. Kolejny update.

Space Attack – Gra napisana w JavaScript zaczyna nabierać rumieńców. W tym poście przedstawię kolejny update, prosto z edytora tekstu 🙂 . Nowości jest sporo. Przede wszystkim, Space Attack nadaje się już do grania. Można spróbować klikając w obrazek poniżej. Jak zwykle, przygotowałem też paczkę z kodem oraz grafikami projektu.

Gra napisana w JavaScript - Space Attack Czytaj dalej (WIP) Space Attack – Gra napisana w JavaScript. Kolejny update.

(WIP) Space Attack Gra w JavaScript. Nowy silnik.

Minął już ponad tydzień od wpisu o moim nowym projekcie, grze Space Attack. Nie zapomniałem jednak o niej, wręcz przeciwnie, w wolnych chwilach praca szła pełną parą. Dziś mogę pokazać pierwszą aktualizację stanu projektu Space Attack gra w JavaScript.

Na pierwszy rzut oka, może wydawać się, że niewiele zostało zmienione. To nieprawda, prawie całkowicie przepisałem kod projektu. Powstał silnik gry, który obsługuje stany programu, oraz sprawia, że wszystko działa znacznie płynniej niż wcześniej.

Aktualną wersję gry można wypróbować klikając w ten link. Tak jak ostatnio dodałem również paczkę z kodem do ściągnięcia.

Space Attack - gra napisana w HTML5 canvas Czytaj dalej (WIP) Space Attack Gra w JavaScript. Nowy silnik.

(WIP) Space Attack – Gra napisana w HTML5 canvas

Nadszedł czas na nowy projekt. Od węża nie zamiesciłem nic stworzonego w technologii canvas. Dziś wielki powrót do tego cuda. Muszę przyznać, praca z ‚płótnem’ sprawia mi największą radość. Kod praktycznie pisze się sam 🙂 .

Nowy projekt to Space Attack – gra napisana w HTML5 canvas. Będzie to klasyczny space shooter, coś na kształt kultowej gry Galaga. Obecnie nie jest to pełna gra. Do teraz stworzyłem tylko główną scenę. Znajduje się na niej statek kontrolowany przez gracza. Może on poruszać się na boki, oraz odpalać rakiety. Do tego w tle gry poruszają się gwiazdy. Na razie to wszystko. To taka wczesna wersja alfa 🙂 .

Zachęcam do sprawdzenia dema gry. Tym razem przygotowałem również paczkę z plikami projektu do pobrania.

Space Attack - gra napisana w HTML5 canvas Czytaj dalej (WIP) Space Attack – Gra napisana w HTML5 canvas

(WIP) Gra tekstowa w jQuery. Aktualizacja numer 2 – używanie przedmiotów

Nic nie sprzyja kreatywnej pracy tak jak stan podgorączkowy 😀 . Ahh, uroki jesieni. Postanowiłem wykorzystać ten błogosławiony stan i zasiadłem do mojego dawno nie ruszanego projektu. Dzięki temu, gra tekstowa w jQuery uzyskała nową aktualizację. Poprzednie wpisy o tekstówce można znaleźć tutaj oraz tutaj.

Tym razem do gry dodałem możliwość używania przedmiotów. Dzięki temu może zajść interakcja pomiędzy graczem a światem gry. Na przykład znaleziony klucz może posłużyć do otworzenia zamkniętych drzwi.

W najnowszą wersje gry można zagrać klikając w ten link.

gra tekstowa w jQuery Czytaj dalej (WIP) Gra tekstowa w jQuery. Aktualizacja numer 2 – używanie przedmiotów

Jesienna układanka – jak napisać prostą grę w jQuery

We wcześniejszych wpisach pokazywałem już jak napisać prostą grę w jQuery, popularnym javascriptowym frameworku. Przykładem może być moja gra tekstowa lub wariacja na temat space invaders. Fakt, jQuery nie sprawuje się tak dobrze jak canvas. Ma znacznie uboższe możsliwośći animacji. Jest jednak, w moim mniemaniu, mniej skomplikowane i do prostych gier nadaje się idealnie.

Weekendowy spacer w lesie zainspirował mnie do stworzenia takiej właśnie prostej gry – układanki. Celem jest ułożenie elementów w odpowiedniej kolejności, tak aby pokazywały zdjęcie. Najlepiej zrobić to w jak najkrótszym czasie. Sprawa jest o tyle trudna, że można przesuwać tylko po jednym klocku jeśli akurat obok niego jest wolne miejsce. Elementy można przesunąć klikając na nich. Gra daje również możliwość wyboru poziomu zaawansowania. Dostępne są poziomy: „łatwy”, „średni” i „trudny”. Po ułożeniu zdjęcia, gra wyświetla wynik, czyli czas jaki zajęło graczowi ukończenie układanki.

Jak napisać prostą grę w jQuery Czytaj dalej Jesienna układanka – jak napisać prostą grę w jQuery

(WIP) Gra tekstowa RPG – aktualizacja – przedmioty

Nadeszła prawdziwa jesień. Za oknem zimno, szaro i deszczowo. Idealna atmosfera do pisania kodu! Parę projektów przewija się ostatnio przez ekran mojego monitora, ale to co chcę dziś pokazać to aktualny stan gry tekstowej o której pisałem niedawno.

Gra tekstowa RPG wciąż nie jest kompletna, ale prace zdecydowanie ruszyły do przodu. Zacząłem od drobnych zmian w strukturze kodu. Przede wszystkim jednak dodałem do gry przedmioty. Gracz, może teraz w pomieszczeniach gry znaleźć różne rupiecie, które można podnieść i odłożyć w innym miejscu. Aktualna wersja gry do przetestowania tutaj.

Gra tekstowa RPG Czytaj dalej (WIP) Gra tekstowa RPG – aktualizacja – przedmioty

(WIP) Gra tekstowa RPG w JavaScript i jQuery

I tak oto z popołudniowego dłubania i eksperymentowania z kodem narodził się nowy pomysł – Gra tekstowa RPG. Póki co, projekt jest w powijakach, ale czuję, że może być przy nim sporo zabawy i satysfakcji. Tym razem odchodzę od elementu canvas. Przyczyna: nie ma tu żadnej grafiki. A to dlatego, że tematem projektu jest oldschoolowa gra przygodowa, zwana czasem tekstówką. Tego typu gry, są tak stare, że nawet ja ledwo pamiętam konkretne tytuły 🙂

Przy tworzeniu gry, pomagam sobie biblioteką jQuer. Jest ona nie zastąpiona, jeśli chodzi o manipulowania DOM-em. Wczesna wersja beta gry, do pogrania tutaj.

gra tekstowa RPG Czytaj dalej (WIP) Gra tekstowa RPG w JavaScript i jQuery