Luke J. Li

Lodash Zastanawiam się, czy ktoś tego używa w 2021 roku? Ja już dawno nie używam. To była dobra biblioteka z 7 lat temu, jak JS jeszcze wiele nie miał. Teraz natomiast jaka korzyść, skoro to wszystko w JS jest? Np. tablice w JS mają natywną metodę find czy inne oferowane przez Lodasha? No i dobre to było, kiedy nie było funkcji strzałkowych w JS, wtedy skróty lodashowe były może i bardziej poręczne niż pisanie function () { .... return ... } Lodash byłby również może lepszą biblioteką, gdyby... miał mniej funkcji. Nawet za czasów, kiedy używałem Lodasha, to wertowanie dokumentacji i szukanie odpowiedniej funkcji, która robi to, co chcę (po nazwach czasem ciężko się domyslić), zajmowało mi więcej czasu niż potrzebowałbym na napisanie takiej funkcji od zera. Czytając doksy, zastanawiam się "po co ktoś z tego zrobił funkcję". Np. funkcja _.drop, która zwraca wycinek tablicy pomijając n pierwszych elementów. Kurczę, to jest to samo, co arr.slice(n). Po co mam importować bibl...

Po raz kolejny czytam, że ktoś uważa jakoby klasy w ES6 były jakąś super zmianą, która z JavaScriptu czyniła w pełni obiektowy język. This is wrong on some many levels... JavaScript był obiektowy już dawno . Może nie w pełni obiektowy i dalej nie jest w pełni obiektowy w takim stopniu jak Python (choćby dlatego, że w JS liczby nie są prawdziwymi obiektami tak do końca - w Pythonie są), jednak jest obiektowy enough, prawie wszystko jest obiektem (łącznie z funkcjami - w wielu niby to obiektowych językach funkcja nie jest obiektem), można stosować polimorfizm, kompozycję, dziedziczenie, enkapsulację danych (przez domknięcia). Owszem, klasy są pewną formalizacją patternów, które użytkownicy już dawno stosowali. Jeśli ktoś stosował składnię typu: function Foo() {... } Foo.prototype.meth = function () { }; to pewnie się ucieszy, że używając klas składnia jest prostsza. Klasy ukrócą również partyzantkę, że każdy framework tworzy własną implementację pseudoklas (React.cr...

Zmieniło się trochę. Nie tylko robię edytor, ale i cały silnik do gier w JavaScript (nastawiam się na 2D). Dlaczego? Cóż, zacząłem robić ten edytor na frameworku Phaser, co początkowo dało mi kopa. Phaser ma bardzo dobre wsparcie, dużo przykładów i świetne community. Na każdy problem mogłem znaleźć szybko odpowiedź w necie. Phaser posiada również dużo przydatnych ficzerów do obsługi sprajtów (częściowo wziętych z biblioteki Pixi). Więc mogłem zrobić szybko mój prototyp edytora . Problem jednak w tym, że Phaser to framework, więc tak jak każdy framework - ogranicza . Ciężko zrobić coś większego, dopasować to pod swoje potrzeby. Dlatego postanowiłem zrobić własny silnik, dopasowany do moich potrzeb. Czy to nie jest porywanie się z motyką na słońce i niepotrzebne odkrywanie Ameryki? Nie. Zrobienie pewnych rzeczy samemu jest często o wiele prostsze niż walka z frameworkiem-kobyłą. Robiąc własny silnik mogę również wszystko kontrolować, wprowadzać tam taką architekturę oraz wz...

Więc kontynujemy tutorial. Oto kolejna, długo wyczekiwana część. Poprzednie części: Krok 0 - przygotowania Krok 1 - ładowanie obrazków Krok 2 - wyświetlanie obrazków na Canvasie, podstawowa animacja Krok 3 - obsługa klawiatury Krok 4 - wystrzeliwanie pocisków Po ich zrobieniu powinniście widzieć coś takiego: Jeśli tego nie macie, możecie ściągnąć paczkę zip z przerobionymi 4 poprzednimi krokami. Czyli mamy statki ufo, mamy rakietę, możemy nią sterować strzałkami oraz strzelać za pomocą spacji. Brakuje jednak jeszcze czegoś. Efektu. Statki ufo powinny się rozwalać, inaczej nie ma to żadnego sensu. I teraz tak. Żeby rozwalać statki musimy jakoś wykryć zderzenie (ang. collision detection) między naszym pociskiem, a tak zwanym "ufem". Czyli w każdej klatce będziemy przelatywali przez obiekty i sprawdzali czy żaden z nich się nie zderza z innym. Jeśli się okazuje, że tak odpowiednio zaregujemy (np. zniszczymy statek kosmiczny). Jak jednak wykryć taką kolizję? Jes...

Ogarniam ostatnio Three.js . Piekielnie fajną bibliotekę do natywnej grafiki 3D w przeglądarce (wewnętrznie biblioteka korzysta z WebGL). W dość prosty sposób można stworzyć obiekt sceny 3D, dodać do niego obiekty, światła, kamerę, potem jakieś animacje. Tu jest link do tego, co można w tym zrobić: Three.js - przykłady (wymagają przeglądarki obsługującej WebGL ). Wietrzę w tym dużą przyszłość. Udało mi się już zaimportować prosty model z Blendera - jest to tego specjalna wtyczka: wtyczka do eksportu/importu Blender-Three.js niestety jeszcze nie udało mi się zaimportować do końca materiałów (ale może dlatego, że samego Blendera nie ogarniam zbyt dobrze, i nie wiem czy przypisałem dobrze materiały i tekstury w Blenderze). No ale że Three.js to jedynie silnik graficzny, renderer - to można robiąc swoją aplikację podpiąć pod to różne inne biblioteki - ja podpiąłem zewnętrzny silnik fizyki Chipmunk, o którym pisałem poprzednio (z tym, że on nie jest do 3D akurat, tylko do 2D). Wi...

Z powodu braku czasu musiałem zrobić przerwę w prowadzeniu bloga, ale mam nadzieję, że niedługo uda mi się napisać kolejną część tutoriala. Ponadto może się tu pojawić też niedługo coś związanego z Cocos2D, wieloplatformowym* frameworkiem do gier, w którym jest możliwość pisania kodu w JavaScript - taka gra później odpali się zarówo w przeglądarce, jak i po skompilowaniu na telefonie komórkowym czy innym mobilnym urządzeniu. W przeciwieństwie do innych podobnych technologii, Cocos2d-x (z iksem na końcu, patrz gwiazdka pod tekstem) nie osadza kodu HTML5 w aplikacji, ani nie tworzy webowych rozwiązań typu Canvas, tylko raczej tłumaczy kod JavaScript na wywołania natywnych funkcji zaimplementowanych we frameworku. Więc ma to potencjał do bycia bardziej wydajnym niż webowo-htmlowe rozwiązania (ale czy tak jest w istocie, nie wiem, postaram się dotrzeć do jakichś benchmarków i tu wrzucić jak coś znajdę). W Cocos2D masz do dyspozycji dwa silniki fizyki - Box2D oraz Chipmunk . W tej...

Teraz będziemy strzelać :) Najpierw wgraj do podfolderu images ten oto plik: missile.png To będzie grafika naszego pocisku. Musimy ją też załadować. Więc odnajdź tę linijkę w kodzie: i dodaj do niej pozycję 'missile.png', w ten sposób: Rakietę(pocisk) będziemy wystrzeliwać za pomocą spacji. Spacja ma kod klawisza 32, więc musimy zamapować kod 32 i przypisać jakąś bardziej sensowną nazwę. Nazwiemy ten klawisz 'fire'. znajdź w kodzie mapowanie klawiszy: i dodaj na końcu klucz 32 o wartości 'fire'. W ten sposób: Dodałem też tutaj słówko var , które przez pomyłkę nie zostało przeze mnie dodane w poprzednich częściach tutoriala (ale teraz jest okazja, żeby to nadrobić ;) Teraz decydujący moment, czyli samo wystrzeliwanie. Dodamy najpierw na początku skryptu "stałą" która będzie zawierała szybkość pocisku: A teraz znajdź instrukcję switch/case w funkcji initialize() i dopisz do niej ten kod: odpal program od teraz, kiedy wciśniesz sp...

Teraz zajmiemy się obsługą klawiatury. Najpierw potrzebujemy wydzielić zmienną player , żeby móc się do niej później odwoływać. Na razie to tworzymy obiekt gracza, ale nigdzie nie zapamiętujemy (poza tablicą entities) tego obiektu. Dodaj więc na początku skryptu tę linijkę: potem, w funkcji initialize odnajdź linijkę, która wywołuje funkcję createEntity z pierwszym parametrem 'player' i przypisz utworzoną jednostkę do zmiennej player jak możesz zauważyć, dodaliśmy również właśćiwość speed i zainicjalizowaliśmy ją do wartości 4*. To ważne, bo będzie nam to później potrzebne. *Możesz spróbować z innymi wartościami, żeby przyśpieszyć/zwolnić ruch rakiety. Bezpośrednio po tej linijce wstaw ten kod: jest to metoda player.input i będzie ona wywołana za każdym razem, kiedy użytkownik wciśnie klawisz. W zależności od wciśniętego klawisza, poruszamy rakietę w lewo, w prawo, w górę bądź w dół. Jak zapewne zauważyłeś, jest to pewna abstrakcja. Nie operujemy tu wpros...

W tym tutorialu utworzymy prostą grę w JavaScript, z użyciem elementu Canvas. Gra będzie polegać na kosmicznym locie i strzelaniu w statki przeciwnika . Mało oryginalne, ale od czegoś trzeba zaczać, prawda? Klasyczne pomysły są najlepsze do nauki. A więc zaczynamy. Będziemy potrzebować: edytora tekstu z kolorowaniem składni (np. Notepad++, Sublime Text oraz wiele innych) grafiki (weźmiemy darmową grafikę z Internetu) podstawowej znajomości języka JavaScript, oraz języków HTML i CSS. Krok 0: Przygotowania Załóż nowy folder i nazwij go spaceshooter . Wejdź do folderu, utwórz w nim 3 pliki i nazwij je: index.html - tu będzie podstawowa struktura strony w HTML index.js - tu będzie nasz kod JavaScript index.css - tu będą definicje stylów CSS Do pliku index.html wklej ten kod: Pozostałe pliki (index.js, index.css) pozostaw na razie puste. grafika będziemy potrzebować grafiki statku gracza: player.png oraz grafiki statków wroga: ufo.png Są to przeskalowane grafiki ze...