Gra w JavaScript - rysowanie i animacja 3/8
ฝัง
- เผยแพร่เมื่อ 12 ก.ย. 2024
- Rysujemy piłkę, boisko i rakietki oraz wprowadzamy piłkę w ruch.
Jak zrobić grę Tenis w JavaScript od podstaw - odcinek trzeci
Kod źródłowy z komentarzem na codepen:
codepen.io/web...
Ucz się z moich kursów na Udemy. Mam dla Ciebie zniżki na moje kursy.
Kod do kursu Web developer od podstaw w 15 intensywnych dni: websamuraj.pl/...
Front-end średniozaawansowany w 15 intensywnych dni: websamuraj.pl/...
Kod do kursu Kompletny kurs programowanie w JavaScript: websamuraj.pl/...
Kod do kursu Zaawansowane projekty w CSS i JavaScript: websamuraj.pl/...
Kod do kursu React od podstaw: websamuraj.pl/...
Kod do kursu Node.js, Express i MongoDB: websamuraj.pl/...
---
Chcesz nauczyć się JavaScript? Chcesz nauczyć się programować? Zapraszam do nauki ze mną w kursach na mojej platformie Studiuję IT (studiuje.it). Nowe aktualizacje i bonusy w 2022 :)
---
#javascript #BedeRobilGre #canvas
Jeśli chcesz się dowiedzieć:
- jak zrobić prostą grę
- jak programować gry w JavaScript
To ten kurs jest dla Ciebie :)
O kurde, az nie moge uwierzyc ze to wszystko mozna tak latwo zrobic. Dzieki temu odcinkowi, znowu wiele rzeczy mi sie rozjasnilo. Ogromna lapa w gore juz poszla :)
Rewelacja ! sposób w jaki tłumaczysz jest niesamowity, dzięki ;)
Już nie mogłem się doczekać ;) dzięki!
bardzo proszę :)
Docelowo nie planuję iść w tworzenie gier, ale jest to świetna dawka wiedzy i możliwość poznawania programowania w JS.
Przebranżawianie przebiega z miłą chęcią i bez żadnych oporów :)
super tłumaczysz... rewelacja !!!
Bartek, dajesz z kolejnymi filmami! Czekamy na CSS Grid i 16 odcinek o JS :) Ja osobiście grę zostawiam sobie na później. Chciałem Cię tylko zmobilizować, żeby nie brakło motywacji do dokończenia tego co zostało zapowiedziane w filmie "wakacje od programowania (...)". Myślę, że trzeba zachować momentum i ponad wszystko starać się dokończyć kurs JS. Wielu Twoich widzów na to czeka. Mam nadzieję, że do końca wakacji się uda ;)
dziękuję, czekam na kontynuację :)
Dziękuję za ten odcinek, z niecierpliwością czekam na kolejny :)
Nie mogłem się doczekać :D
Wielkie propsy za kod na codepen. Teraz filmik chętnie obejrzę, inaczej bym się gubił co jest co do czego
Dobre te ciasto z tego przepisu
Jesteś super ! Uwielbiam filmy z Tobą i z niecierpliwością czekam na kolejne odcinki z Twoim udziałem. Zauważyłem też, że z każdym nowym odcinkiem sposób w jaki tlumaczysz to co robisz jest coraz lepszy. Smuci mnie fakt, że ludzie z taką wiedzą i umiejętnością tłumaczenia mają tak mało wyświetleń... Mam nadzieję, że przez to nie zrezygnujesz. Życzę zdrowia dla Ciebie i rodziny oraz dzięki, za Twoją pracę! :)
Dziękuję! Najlepszego! :)
Dzięki Bartek!
:)
Oglądnąłem cały kurs programowania js, css i html w jakieś 20 dni i wszystko rozumiem :) czekam na nowe odcinki
Świetne filmiki, naprawdę. Może teraz się czepię, ale myślę, że dobrym podejściem byłoby uczenie od samego początku zalążka obiektowości.. ☺️
Jeszcze nie obejrzałem a już wiem że super.
Wiele rzeczy się dowiedziałem o których pojęcia nie miałem. Czekam z niecierpliwością na dalsze odcinki, żeby zrozumieć jak te odbicia piłeczki zaprogramować.
PS: A ja sobie mimo wszystko piłeczkę okrągłą zrobię :-)
Super teraz czekam na menu hamburgerowe :)
Proszę, poproszę :)
jak zwykle solidna dawka wiedzy :) !!!
Ta piłka jest jak 120kg omdlały pijany kaban którego trzeba dotachac do domu i pilnować zeby sie nie sfajdal pod drodze. Poziom trudności równy co napisanie tej gry ale można dojść do wprawy
for(i=0;i
Jacek Olczyk To się popisałeś wiedzą XD Jak już to
for (i=0; i
super , dzieki :)
Dzięki :)
Jak zawsze dobry materiał, chciałem napisać, że jest jeszcze jedna metoda do odświeżania co jakiś czas, tj. requestAnimationFrame, Pozdrawiam
Ona jest chyba nawet lepsza pod wzgledem wydajnosci
A może by tak utworzyć jakąś grupę na fb (wiem, że jest ich setki) i pomyśleć nad weekly challenge? Dawałbyś jakieś proste zadania na początek i później w wolnej chwili nagrał jakiś, krótki odcinek na yt jak to powinno wyglądać wg Ciebie. Plus lepsi pomagali by słabszym na grupie :).
Ps. wielkie dzięki za to co robisz bardzo przyjemnie się Ciebie ogląda i czekam z niecierpliwością na kolejny odcinek :)!!!
Świetna seria! Pierwszy raz mam do czynienia z elementem canvas i jestem pod wrażeniem. Kawał dobrej roboty. Mam takie pytanie, dlaczego po wywołaniu funkcji nie stawiasz średnika?
Z grą Ci fajnie wychodzi i fajnie omawiasz
Ciekawe czy poradziłbyś sobie z innym przykładem
np. Ruletka czy coś w tym rodzaju
po wywolaniu funckji game() cala plansza robi mi sie żółta o co chodzi? pobralem twoj kod z opisu filmu i to samo
SUPER SERIA
Środkową linię można też narysować ścieżką "beginPath()", która jest rysowana idealnie w osi. Tutaj działający kod pod dany przykład:
const cw = can.width;
const ch = can.height;
const lineHight = 20;
for (let linePosition = 0; linePosition
Takie pytanko. Czy musze pisać to coś co jest na szaro??? Np. rozmiar naszej piłki. A poza tym spoko filmiki nagrywasz
Umiem zrobić zeby gra wykryła że piłka dotyka "ściany" ale nie wiem jak zrobić zeby sie odbila jak w lustrze, czekam na nowy odcinek z niecierpliwością :)
Chciałbym być taki mądry jak ty
Witam mam pytanie, z góry przepraszam jeśli kretyńskie :D Czy po przerobieniu wszystkich Twoich materiałów dużo brakować będzie wiedzy aby starać się o staż jako Junior Front End Developer (bądź pierwsza praca :D). Oczywiście przerabiam też inne konkurencyjne materiały jak choćby Pasja Informatyki Mirosława Zelenta itp.
pog
4 warunki If i piłeczka się odbija od krawędzi czekam na więcej !
Witam, bedzie jeszcze jakies projektowanie stron? Cos z flexem, jakies bardziej zaawansowane zastosowania CSS przy budowie strony czy cos podobnego?
Najbliższe dwa filmy będą o tym :) Zapraszam.
No i swietnie, super sprawa :)
czy jak tworzymy kolejna klatke gry to stara jest wywalana z pamięci z automatu czy musimy pozniej o to zadbać żeby nie zawalić pamięci komputera?
Bartek, gdzie sie podziewasz ?
Przerobiłem odcinek, następnie diffem sprawdziłem mój kod z Pańskim. Wszystko jest tak samo, ale mnie wyrzuca w konsoli info, że polecenie setInterval nie jest zdefiniowane. Kod mam identyczny. Hmm...
Najlepiej będzie skopiować fragment z wywołaniem setInterval, który jest na codepen (link w opisie). To pomoże sprawdzić czy mimo wszystko nie ma tam gdzieś literówki.
Dziękuję za odpowiedź. Literówka. Zdebugowałem wszystkie następne i jest super. Dziękuję!
Samuraju! Mam problemik! Dlaczego jak robię koło jako piłkę to tak jakby nie usuwa się poprzednia piłka i powstaje taki ciąg piłeczek! Dlaczego?
Tak wygląda moja funkcja do rysowania piłki:
function DrawBall()
{
ctx.arc( ballX, ballY, ballSize / 2, 0, 10 * Math.PI );
ctx.strokeStyle = "white";
ctx.stroke();
ctx.fillStyle = "white";
ctx.fill();
ballX += ballSpeedX;
ballY += ballSpeedY;
}
I robi się coś jak w 41:47
Dlaczego nie ma kontynuacji?
Kiedy następne filmy? Już 6 dzień mija, co mam robić z życiem :D??
dzisiaj rano :)
Pomożesz mi? nie działa mi funkcja ball
już nic za duzo kodu który przeszkadzał funkcji ;p
Kiedy następny :C
Jesli ktos nie wie o co chodzi z ta funkcja game(), to co 40 milisekund tworzy sie nowa plansza, paketki, pilki etc. I takie zludzenie ze to sie rusza
Dlaczego setInterval a nie requestAnimationFrame ?
Cześć Rafał, to nasza pierwsza gra na kanale, uznałem, że zrobimy ją w najłatwiejszy możliwy sposób. I konsekwencji tego w kodzie jest mnóstwo, m.in. setInterval (setInterval - jest najprostszy w zrozumieniu i implementacji).
nie trzeba ; dodawać na końcu?
Powinno się
czy dla ballSpeed można użyc Math.random() ? :)
Efekt byłby zabawny
@@truposzcz no nie wiem. Ustawiłem tak i nic się nie działo. Chyba że później coś by nie grało.
31:24
?