JavaScript (front-end) | Odcinek video

08. Canvas - Płótno w przeglądarce - część 1/2

MIROSŁAW ZELENT

Zapraszam Was do mini-serii dwuodcinkowej, podczas której pokażemy jak korzystać (oczywiście z użyciem języka JavaScript) z canvasu, czyli z płótna - jest to nowy znacznik wprowadzony w standardzie HTML 5. W praktyce canvas to przestrzeń graficzna możliwa do wykorzystania na stronie internetowej, po której możemy rysować wykorzystując język JavaScript. W tym tutorialu stworzymy grę w Mastermind, która polega na odgadnięciu kolorów kilku bloków (slotów). Zapraszam do wspólnej zabawy z płótnem!

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 ] Tytułem wstępu
[ 00:02:59 ] Partner odcinka
[ 00:03:40 ] Opis plików projektu, interfejs gry
[ 00:05:52 ] Zasady klasycznej gry w Mastermind
[ 00:10:49 ] Zasady, które przyjmiemy w naszej grze w canvas
[ 00:12:20 ] Ustawienie kolorów tła przycisków sterujących
[ 00:15:50 ] Rysowanie planszy - funkcja startBoard()
[ 00:25:38 ] Wypisanie tekstu (encja strzałki) - drawArrow()
[ 00:30:19 ] Kolorowanie slotów i przesuwanie strzałki - guess()
[ 00:41:09 ] Sprawdzenie próby odgadnięcia wzorca - checkBoard()
[ 00:47:09 ] Rysowanie grafik w canvas - metoda drawImage()
[ 00:53:00 ] Poprawa kolorów w razie missclicków - resetPill()
[ 00:57:06 ] Wypisanie licznika rund gry - drawScore()
[ 01:01:35 ] Sprawdzenie wygranej - trafienie wzorca
[ 01:09:21 ] Okno modalne z pomocą do gry
[ 01:15:51 ] Kierunki refaktoryzacji kodu oraz rozbudowy gry
[ 01:19:25 ] Linki do dokumentacji canvas i lista ciekawych bibliotek
[ 01:19:58 ] Kilka słów na koniec filmu