09. Canvas - Własna gra platformowa - część 2/2

MIROSŁAW ZELENT

W drugiej części mini-serii dwuodcinkowej o canvas wykonamy własną platformówkę. Będzie to sympatyczna gierka, która jednak może śmiało nauczyć początkujących informatyków zamiany liczb dziesiętnych na dwójkowe. Mamy tu animacje, sterowanie postacią, no słowem - pełnoprawną rozgrywkę na płótnie przeglądarki. A Wy, dzięki przepracowaniu tego odcinka będziecie mogli spokojnie stworzyć własną mini-wersję gry Mario, Zeldy, a może jakiegoś roguelike’a albo gierki turowej. Po poznaniu najważniejszych mechanik, jedynym ograniczeniem będzie już tylko nasza wyobraźnia! Zachęcam do nauki, do zrobienia własnej gry i podzielenia się nią ze światem w podpiętym wątku na forum.

Pliki do odcinka Wątek na forum

Znajdź w filmie

Tutoriale posiadają tzw. timestamps (chwile czasowe) - dzięki nim łatwo odnajdziesz interesujące fragmenty wiedzy. Wystarczy kliknąć na podane w nawiasach kwadratowych momenty filmu, by przewinąć tutorial dokładnie do interesującego Cię miejsca w odcinku.

[ 00:00:00 ] Wstęp i opis jaką grę wykonamy
[ 00:02:10 ] Partner odcinka - WSiP
[ 00:03:52 ] Opis plików projektu
[ 00:04:48 ] Obsługa kliknięć na canvasie
[ 00:11:30 ] Liczby losowe i dolny pasek interfejsu gry
[ 00:15:11 ] Czyszczenie stanu canvasu - clearRect
[ 00:18:25 ] Zmiana kursora default na pointer na canvasie
[ 00:20:24 ] Darmowe assety postaci albo na licencji CC
[ 00:22:05 ] Wyrysowanie postaci na płótnie - drawImage
[ 00:25:57 ] Animowanie klatek gry - requestAnimationFrame
[ 00:30:46 ] Klasa postaci zamiast niepowiązanych zmiennych
[ 00:36:09 ] Stworzenie instancji obiektu klasy Character
[ 00:40:06 ] Animowanie sprite'ów postaci w stanie idle
[ 00:43:01 ] Poruszanie się postaci w lewo i prawo
[ 00:48:20 ] Granice (x, y) możliwego położenia postaci
[ 00:49:29 ] Zmiana sprite'ów stanu chodzenia w lewo i prawo
[ 00:55:24 ] Ustawienie tła dla całej rozgrywki
[ 00:56:57 ] Klasa dla ośmiu przełączalnych przycisków
[ 00:59:50 ] Tablica ośmiu obiektów klasy Button
[ 01:02:22 ] Fizyka podskakiwania postaci i metoda jump
[ 01:11:44 ] Przełączanie wartości bitu - switchButton
[ 01:18:12 ] Warunek wygranej w grze - checkWin
[ 01:21:16 ] Bieżąca wartość dwójkowa - poziom easy
[ 01:22:43 ] Zakończenie, zaproszenie na forum

Poprzedni wpis

Następny wpis

Zobacz także

Daj się zaskoczyć! Poniżej wylosowałem dla Ciebie pięć wpisów z innych kategorii blogowych aniżeli ta, którą właśnie przeglądasz:

Zamów książki o IT sec z kodem: pasja

Można już zamawiać dwa tomy książek "Wprowadzenie do bezpieczeństwa IT". Mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności! Zamówień można dokonywać tutaj:

Tom 1 Tom 2

Pomóż dzieciom

Polska Akcja Humanitarna od wielu lat dożywia dzieci. Proszę, poświęć teraz dosłownie chwilę i pomóż klikając w oznaczony strzałką zielony brzuszek Pajacyka. Dziękuję!