Tworząc te zabawne projekty gier, możesz uczynić programowanie mniej uciążliwym, a jednocześnie doskonalić swoje umiejętności.
Fakt, że 98,4% wszystkich stron internetowych korzysta z JavaScriptu, jest powodem, dla którego powinieneś go znać jako programista. Z perspektywy czasu tworzenie gry w JavaScript nie tylko pomaga w szybkiej nauce. Pozwala również opanować, jak zastosować zawarte w nim proste i złożone koncepcje w różnych sytuacjach w pracy — niezależnie od tego, czy jesteś początkującym, czy odświeżającym.
Jeśli uczysz się lepiej dzięki demonstracjom wizualnym, warto poświęcić czas na samouczki dotyczące gier w języku JavaScript w serwisie YouTube.
1. Gra karciana z JavaScriptem
Ta gra karciana JavaScript z Gavinem Lonem pokazuje, jak odwracać karty za pomocą ponad 600 linii kodu JavaScript. Podczas gdy głównym celem jest nauczanie języka JavaScript, nauczysz się również łączyć moc projektowania CSS z strukturą DOM HTML, aby osiągnąć responsywność za pomocą JavaScript.
Końcowym celem projektu jest odwrócenie kilku kart, a gracz odgaduje asa, gdy karty w końcu zamieniają się miejscami. Każda karta jest obrazem czterech różnych ról kart. Więc chociaż nie będziesz sam projektował kart, nauczysz się odpowiednio manipulować ich pozycjami, zwiększać liczbę rund gry, dodawać lub usuwać wyniki w miarę zmian poziomów oraz przechowywać wyniki gier w
lokalna pamięć przeglądarki— wszystko przy użyciu JavaScript.Samouczek jest krok po kroku i łatwy do naśladowania, pomimo ciężkiego podnoszenia, które wykonasz za sceną. Jest idealny dla początkujących i odświeżających. Chociaż dotyczy to budowania gry karcianej, naraża cię na większość technik okablowania JavaScript w rzeczywistych sytuacjach. Dodatkowo, odkrywa twoją zdolność do myślenia.
2. Gra Breakout 2D z JavaScriptem
Jeśli chcesz nauczyć się kontrolować interwały akcji i dynamicznie przenosić elementy DOM za pomocą JavaScript, Ania Kubów pokazuje, jak fajna może być ta samouczek gry z wykorzystaniem JavaScript. Jako plus, film pokazuje również, jak hostować i prezentować swój projekt potencjalnym pracodawcom.
Pomyśl o każdej możliwości w grze typu breakout; ruchoma platforma z piłką uderzającą stycznie o ściany, aby rozbijać znajdujące się nad nią cegły. W tym też zakodujesz system nagród. Ogólnie rzecz biorąc, ten samouczek gry typu breakout jest wart rozważenia, jeśli chcesz zbudować coś od podstaw bez korzystania z zewnętrznych agentów lub obrazów źródłowych.
Podczas łączenia logiki w funkcje, film uczy więcej o klasach JavaScript i koncepcjach obiektów w prostych krokach, w tym najlepsze praktyki instrukcji warunkowych jak obudowa przełącznika.
3. Gra Wąż JavaScript
Rozwikłaj nostalgię za grą Snake II w telefonie Nokia 3310, tworząc tę grę w węża JavaScript z Kyle'em. Prawdopodobnie grałeś w to już wcześniej i prawdopodobnie zagrasz w to jeszcze wiele razy w życiu, ponieważ będziesz kodować jeden za pomocą Vanilla JavaScript.
Ucząc Cię dynamicznego łączenia DOM, ten film pokazuje, jak możesz tworzyć i używać niestandardowych modułów w JavaScript. Otwiera to więc okazję do nauczenia się oddzielania obaw za pomocą zasady „nie powtarzaj się” (DRY).
Za kulisami opanujesz bardziej zaawansowane koncepcje języka JavaScript. Zadania, w tym tworzenie siatki gracza, umieszczanie jedzenia, budowanie ciała węża, wydłużanie węża, kodowanie logika nawigacji, tworzenie schematu nagród i kar oraz kontrolowanie prędkości węża ujawnią ci rdzeń JavaScript.
4. Gra w kółko i krzyżyk z JavaScriptem
Być może twoja gra w kółko i krzyżyk zostanie wyostrzona, gdy zbudujesz ją za pomocą JavaScript w innym filmie z Kyle'em. Jest to proste, ale cenne projekt dla początkujących JavaScript chrupać, gdy będziesz rozwiązywać złożone problemy.
Film nie kończy się tylko na JavaScript. Pokazuje również, jak uchwycić projekt interfejsu użytkownika za pomocą CSS. Konsekwentnie i z zaangażowaniem w tym filmie możesz nauczyć się prawie każdej techniki potrzebnej do rozpoczęcia przygody z tworzeniem stron internetowych.
Podczas manipulowania DOM za pomocą JavaScript, wideo przedstawia ciężkie podnoszenie kodów, podejmowanie decyzji o wygranej i remisie, decydowanie o kolejkach graczy i ustawianiu obiektów. Funkcje, pętle i warunki JavaScript to niektóre z zaawansowanych koncepcji, których nauczysz się w tym samouczku wideo dotyczącym gry w kółko i krzyżyk w języku JavaScript.
5. Przesuwana gra logiczna z JavaScript
Puzzle mogą wymagać myślenia. Ale zbudowanie go z prostym JavaScript brzmi jak zabawny sposób na odkrywanie swojej kreatywności i naukę podstawowych i złożonych koncepcji JavaScript.
Chcesz kodować w tym samouczku — jeśli chcesz zobaczyć, jak używać pojęć JavaScript, w tym przełączników warunkowych i dynamicznej manipulacji pozycją DOM przy użyciu niestandardowych i wbudowanych funkcji.
Chociaż nauczyciel umieszcza JavaScript wewnątrz znacznika script w pliku HTML, możesz obrócić swój skrypt w dedykowanym pliku JavaScript i połączyć go z DOM w twoim przypadku dla przejrzystości. Niezależnie od tego, najlepiej jest skupić się na podstawowej logice i procesie myślowym, aby osiągnąć swój cel, w tym na tym, jak zastosować to, czego się tutaj nauczyłeś, w bardziej rzeczywistych scenariuszach.
6. Gra wyścigowa z JavaScriptem
Tworzenie gry wyścigowej przy użyciu standardowego JavaScript może nie dawać najlepszych efektów graficznych. Ale okablowanie działającej gry wyścigowej podczas wykonywania tego samouczka nauczy Cię, jak wykorzystać moc nasycającą funkcjonalność JavaScript w dowolnej aplikacji.
Ten samouczek polega na umieszczeniu dwóch samochodów (czerwonego i niebieskiego) na torze wyścigowym. Niebieski samochód pojawia się losowo z dowolnego kierunku, a czerwony pojazd, reprezentujący gracza, stara się uniknąć kolizji. Gra kończy się w momencie zetknięcia się obu samochodów.
Chociaż jest to prosty opis tego, co zbudujesz w tym, poznasz zaawansowaną logikę JavaScript do manipulacji i stylizacji DOM. Zyskasz również wgląd w operatory JavaScript podczas tworzenia nagród i kar dla graczy.
Podczas dodawania funkcjonalności do ścieżki poznasz niektóre koncepcje, takie jak zdarzenia JavaScript, warunki, anonimowe funkcje, animacje JavaScript, kontrola interwałów i wiele innych.
7. Gra Mario z JavaScriptem
Ten samouczek gry JavaScript Mario to wszystko, czego potrzebujesz, aby zanurzyć głowę w szczegółach JavaScript. Chociaż tworzenie gry Mario z JavaScriptem wydaje się skomplikowane, Chris, twój nauczyciel, pokazuje, że jest to więcej niż możliwe w tym filmie na YouTube. Więc możesz chcieć złapać zabawę i odkryć swoją umiejętność krytycznego myślenia, budując razem.
Chociaż samouczek dla początkujących może wydawać się nieco zaawansowany, jest to genialna misja dla osób odświeżających, aby przenieść swoje umiejętności JavaScript na wyższy poziom.
Poza nauką o manipulowaniu elementami, wykorzystasz moc czystego JavaScriptu do zbudowania responsywnego szablonu płótna dla interfejsu gry za pomocą programowanie obiektowe (OOP). Ponieważ gracz jest aktywnie mobilny, sterowanie klawiaturą JavaScript, obsługa zdarzeń, pętle, operatory, warunki oraz funkcje wbudowane i niestandardowe należą do doświadczeń obejmujących wiele projektów osiągać.
8. Zbuduj trałowiec za pomocą JavaScript
Chcesz zbadać moc funkcji rekurencyjnych i metody tablicowe w mnożeniu elementów DOM za pomocą JavaScript? Możesz zacząć od tego samouczka JavaScript Minesweeper autorstwa Ani Kubów na Traversy Media.
Wiąże się to z dużą dbałością o szczegóły. Ale jest to samouczek przyjazny dla początkujących i jeden z najlepszych, aby objąć system układu siatki za pomocą JavaScript. Ostatecznym celem jest stworzenie szablonu siatki, w którym gracze unikają nadepnięcia na minę.
Choć brzmi to prosto, musisz napisać wiele logiki programistycznej, wykorzystując większość podstawowych technik JavaScript, aby połączyć funkcjonalność gry za kulisami.
9. Samouczek gry Pokemon JavaScript z płótnem HTML
Pokemon to jeden z najbardziej złożonych projektów gier, jakie można zbudować za pomocą JavaScript. Jeśli jednak masz długie, rygorystyczne godziny kodowania w JavaScript i jesteś gotowy, aby wyjść odnowiony z większą pewnością siebie, lepiej wskocz do tego samouczka.
Oprócz tworzenia skryptów DOM i animacji w języku JavaScript, wideo uczy, jak przenosić i renderować zasoby, w tym dźwięk i obrazy, za pomocą JavaScript. Samouczek ujawnia wiele informacji na temat języka JavaScript, które mogą okazać się przydatne w przypadku problemów z kodowaniem w prawdziwym życiu.
Oprócz innych podstawowych technik manipulacyjnych JavaScript, samouczek w dużym stopniu wykorzystuje również koncepcje OOP; jest to cenne, jeśli planujesz później zagłębić się w TypeScript. Jednym z czynników upraszczających ten samouczek jest sposób, w jaki nauczyciel przedstawia zadania.
Łatwo jest się wycofać, gdy wyobrazisz sobie złożony system, który stworzysz, aby to zadziałało. Ale pomyśl o tym, co możesz zyskać w końcu.
Poznaj aplikacje JavaScript do rozwiązywania problemów
Gry korzystają z najbardziej responsywnej i intuicyjnej logiki programowania. Warto więc uczyć się JavaScript od samego tworzenia. Chociaż te samouczki są oparte na grach, zapoznają Cię z podstawowymi koncepcjami JavaScript mającymi zastosowanie do wielu innych problemów z kodowaniem, w tym tworzenia stron internetowych i aplikacji mobilnych. Nawet jeśli planujesz później zwrócić się ku frameworkom, niezależnie od tego zastosujesz te koncepcje.
