Курс Canvas на Html и JavaScript - DVD

Tytuł - Kurs Canvas w Html i JavaScript

Poziom - podstawy

Czas trwania - 2 godziny

Czego się nauczysz ?

Canvas czyli inaczej płótno został wprowadzony do Htmla jako element, dzięki któremu można przy pomocy Java Scriptu rysować dowolne kształty. Jednak to nie wszystko co potrafi, ponieważ umożliwia również edytowanie obrazów, tworzenie animacji, ruchomych gier czy infografik. Element ten został wprowadzony wraz z wersją HTML5 i do tego czasu jest chętnie wykorzystywany w aplikacjach. Dzięki niemu aplikacja czy gra może działać bez konieczności instalacji dodatkowych wtyczek w przeglądarce np. przestarzałego Flash Playera. Obsługuje go większość współczesnych przeglądarek, takich jak Chrome, Firefox, Safari, Opera, IE.  W kursie przekonasz się, do czego zdolny jest canvas i jak możesz z niego korzystać tworząc prostą grę przeglądarkową.

• Poznasz ciekawą funkcję Canvas

• Przypiszesz poszczególne funkcje do klawiszy

• Poznasz ważne zmienne, metody oraz parametry

• Dowiesz się jak tworzyć zdarzenia

• Zanimujesz statyczne elementy

Pierwsza gra - snake

Canvas to jedna z najlepszych funkcji HTML5, dzięki której możesz tworzyć świetne aplikacje. Na potrzeby kursu wykorzystamy przykład gry, którą znają chyba wszyscy. Na pewno większość z Was grała na starych telefonach komórkowych w popularnego Snake czyli węża. Początkowo na ekranie pojawia się mały wąż. Gracze mogą zmieniać kierunek węża za pomocą strzałek, aby poruszać się w górę, w dół, w lewo i w prawo.  Długość węża wzrasta po zjedzeniu losowo pojawiającego się na planszy kwadracika.  Gra jest idealnym przykładem, żeby poznać najważniejsze funkcje canvas.

Stylowanie

W pierwszej kolejności stworzysz podstawy gry oraz ekran początkowy, który będzie uruchamiał grę po kliknięciu w przycisk klawiatury. Następnie dokonasz ostylowania gry czyli nadasz jej odpowiedni wygląd. Dowiesz się co to jest zmienna ctx, poznasz zastosowanie różnych metod oraz parametrów, które pozwolą Ci tworzyć dowolnie wyglądające kształty.

Funkcje gry

Kolejny krok to wprowadzenie niezbędnych funkcji w grze oraz utworzenie planszy. W tym zadaniu pomoże poznanie pojęcia zmiennych oraz obsługi zdarzeń. Pozwolą one Twojemu wężowi poruszać się i rosnąć wraz ze zbieraniem kwadratów. Określisz również jak ma zachować się Twój wąż gdy dojdzie do sytuacji zjedzenia własnego ogona.

Animacja i rozbudowa gry

W kolejnych krokach dokonasz ożywienia statycznej treści wykorzystując elementy animacji. W tym zadaniu pomoże Ci zapoznanie się z funkcją setInterval. Dodasz również możliwość wyboru poziomów trudności gdzie przypiszesz poszczególne przyciski na klawiaturze do wybranego poziomu.

1. Wstęp

2. Style i tekst

3. Plansza

4. Animacja i sterowanie

5. Dodatkowe funkcje gry

Sposób wyboru wersji kursu:

Kurs wideo dostępny jest w dwóch formach:

1. elektronicznej - jako link do pobrania spakowanego archiwum. Otrzymasz po zakupie link na maila. W tym przypadku szukaj aukcji oznaczonej jako wersja cyfrowa.

2. pudełkowej na DVD - zamiast linku do pobrania otrzymasz pod wskazany adres płytę DVD. W tym przypadku szukaj aukcji oznaczonej jako DVD.

Czy kurs będzie pasował do programu, który posiadam ?

Kursy tworzone są na różnych wersjach programu. Jednak w większości przypadków pasują do każdej wersji. Kursy tworzone są w taki sposób, by pasowały i były neutralne na starszych wersjach oprogramowania. Czyli jeśli posiadasz np. Photoshopa z roku 2019, a kurs jest tworzony na wersji Photoshopa 2020, będzie on pasował w 100%.

Czy z kursem otrzymam program?

Kursy to filmiki wideo pokazujące pracę w danym programie. Do żadnego z kursów nie jest dołączony program, w który należy zaopatrzyć się we własnym zakresie.