Kurs JavaScript odc. 8: Canvas - Płótno w przeglądarce - część 1/2

Jeżeli masz ochotę zobaczyć więcej naszych materiałów w coraz lepszej jakości, to zachęcamy do pozostawienia subskrypcji:

Dostarczamy dla Was tutoriale rozpalające pasję informatyki oraz inspirujące treści rozwojowo-filozoficzne. Utrzymujemy też pomocne witryny oraz dajemy szanse zasięgowe fajnym twórcom ze sceny. Jeśli masz ochotę wesprzeć to co robimy, to możesz:

Zachęcamy do odwiedzenia prowadzonych przez nas witryn oraz do polubienia fanpage'a Pasji informatyki na Facebooku - poniżej zestawienie naszych linków:

🕐 TIMESTAMPS (CHWILE CZASOWE):

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

📚 Wpis blogowy i pliki do odcinka:

‍💻 Wątek do zabawy na forum:

🎵 MUZYKA:

Butterflies - Loafy Building - From Within (feat. Hoogway)

#pasjainformatyki #programowanie #kursjavascript

Proponuję nowy kurs dotyczący nginx - dokładne omawianie jego możliwości z praktycznymi przykładami. Pozdrawiam i dziękuję za wartościowe filmy!

[asiolek]

Fajnie tak sobie wrócić do vibe nauki z technikum z ulubionym nauczycielem :D Akurat ostatnio musiałam skorzystać z canvasa w pracy :D

[najwierniejszykibicousdemb]

dziękuję za kolejny wartościowy odcinek Panie Mirosławie 😃

[BajorPoland]

Mirku co dużo mówić poprostu MASTERMIND 💪👌. Pozdrawiam i czekam na kolejny odcinek.

[rademeus]

Ostatnio sobie myślałem: kiedy pojawi się nowy odcinek z JS'em. I oto proszę - jest Pan Mirosław. :) Dziękuję i pozdrawiam.

[kacperaugustyn]

Panie Mirosławie, chciałbym podziękować za pomoc w początkowej fazie nauki programowania i za Pana inny kontent na kanale zwłaszcza Podróż do wnętrza ego oraz Wojownik Poeta. Czytałem wiele książek na temat rozwoju, ale żadna mnie tak nie zmotywowała jak Pański kanał. Przede mną jeszcze sporo nauki, jednak po zawledwie połowie roku udało mi się ogarnąć ogrom materiału(Html, Css, Js, Angular). Mam nadzieję, że do końca roku uda mi się dostać prace jako junior :D Jeszcze raz dziękuję!

[leszekszymanowski]

Nauczyciel pisze kredą tekst na tablicy i tłumaczy. Uczeń przepisuje tekst do zeszytu i stara się zrozumieć. Oglądając film przepisywałem kod. Najgorsze były literówki. Ale poradziłem sobie i gra działa. Jestem szczęśliwy i patrząc na ekran z uruchomioną grą nucę sobie tak:

Podobasz mi się bardzo,
Jak wiosenny kwiat.
Podobasz mi się bardzo,
Jak latem słońca blask.
Podobasz mi się bardzo,
Jak na jesieni wrzos.
Podobasz mi się bardzo,
Jak księżycowa noc.

Panie Mirosławie bardzo, bardzo dziękuję 😀

[filqyt]

wow, akurat tego szukalem patrze 15min temu fiolmik z pasji, suoper!

[tojafiliper]

co prawda umiał bym samemu bez problemu coś takiego zrobić ale aż z chęcią sie to ogląda

[alexzhukovsky]

Świtny i merytoryczny tutorial, tak trzymaj! Czekam na kolejną część

[piotrbaranowski]

Kiedy możemy spodziewać się drugiej części?

[michalczerwinski]

Fajny odcinek, jednakże jest jeden poważny (w mojej opinii) mankament widoczny w 57:02: kolor magenta w odpowiedzi pojawia się 2 razy, a we wzorcu tylko raz. Ale buźki pod oboma polami z magentą pojawiają się niebieskie (zmień miejsce). Może to dawać błędne wrażenie, że kolor pojawia się we wzorcu dwukrotnie, a nie jednokrotnie, jak w faktycznej odpowiedzi. I od 1:01:17 tak samo: kolor czerwony we wzorcu pojawia się raz, a w odpowiedzi 5 razy, i zawsze jest jedna uśmiechnięta twarz (dobra pozycja) i 4 niebieskie (zmień pozycję).

[gienekfatyga]

Jak z książki (pdf) przekopiować treść, do dokumentów google tak żeby formatowanie( czyli grubość czcionek, kursywa, akapity) zostało takie samo jak w książce ?

[godfryddolbinczykunical]

Będzie część 2 z <canvas>? Jeśli tak to mam nadzieję, że ta gra to "Arkanoid"! 😀

[major]

Wrócił i on, nauczyciel wszystkich uczniów w techników około komputerowych, Mirosław, człowiek którego filmiki stanowią podstawę programową, mam nadzieję że canvasa nie wrzucą na najbliższy egzamin z witrynek...

[damianl]

Panie Mirosławie, był odcinek 9, dlaczego zniknął ? :(

[dejotrusza]

witam, kiedy moglibysmy sie spodziewac kolejnego odcinak z canvasa?

[adammakowicz]

@Pasjainformatyki czy na tym kanale pojawi się odcinek z pythona ?

[sebastiangoras]

Kiedys byla mowa o ewentualnym kursie "platnym" wykonanym przez Pana Miroslawa. Kurcze, szkoda ze temat zamilkl. Nie ukrywam ze Pan Miroslaw ma unikalny talent do tlumaczenia zagadnien ktorych nikt nie umie tak dobrze wytlumaczyc. Pamietam wiele lat temu programowanie obiektowe. Jak trafilem na Pana Miroslawa to zalapalem bo chociazby dlatego ze podczas tlumaczenia Pan Miroslaw zaznacza zeby sie nie przejmowac ze jezeli sie w tej chwili czegos nie rozumie, ze potrzeba czasu az "wszystko sie pouklada w glowie". Mozna umiec programowac doskonale ale talent do tlumaczenia jest potrzebny w nauczaniu. Kiedys ktos bardzo dobry uczyl mnie pewnych zagadien i choc byl doskonaly technicznie to tlumaczyc to on nie umial. Marzy mi sie kurs wykonany Przez Pana Miroslawa. Tymczasem pozdrawiam serdecznie

[QJUP]

Kolejny odcinek to musi być gruba ryba skoro już 2 miesiące jest w produkcji😅. Na pewno wróce na spokojnie do canvasa zeby sie dobrze przygotować do js’a w 3 semestrze, bo narazie ciśniemy na uczelni backend i jave.