Gra Pong w JavaScript - sterowanie myszką 5/8

[@DuDiiC]

Dużo bardziej odpowiada mi forma taka jak tutaj, naukę przez projekt, niż poszczególne filmiki z podstawami. Tych podstaw można zawsze nauczyć się z tutoriali, które już są (a jest ich sporo całkiem dobrych), albo książek, których też jest masa, za to projektów nigdy za mało, zawsze daje to większe obycie z kodem niż sucha teoria i przykłady wyrwane z kontekstu. Oczywiście każdemu się nie dogodzi, więc dużo osób pewnie będzie woleć Pana filmy z podstaw jS, wiadomo. Kibicuję gorąco w rozwoju kanału, dziękuję za dotychczasową pracę i pozdrawiam :)

[@paulmonde6896]

Kurde Bartek, nareszcie dzieki Tobie zajarzylem o co chodzi z tym parametrem e przekazywanym do funkcji. Ogromne dzieki i ogromna lapa w gore juz poszla !

[@emilsaracyn9914]

Świetnie, że codziennie pojawiają się nowe filmiki :D Dzięki temu mam co robić. Równocześnie robię drugą grę typu Galaxian, Chicken Invaders gdzie się lata statkiem kosmicznym i strzela w pojawiające sie u góry statki wroga :D Mechanika podobna do Ponga więc jest mi łatwiej. Btw. Takie pytanie, czy można zrobić mechanike pojawiania się ciągle nowych pocisków ze statku kosmicznego nie robiąc tego poprzez obiekty a przez samą pętlę ?

[@Wlodzimir2]

Wydaje mi się ze odczyt pozycji myszy i nadanie pozycji paletce powinien być po prostu taki: playerY = (e.offsetY) - paddleHeight/2; działa to lepiej ponieważ przy sposobie pokazanym na filmie sterowanie sypie się przy powiększaniu i pomniejszaniu okna przeglądarki i to zarówno poprzez rozciąganie okna chwytając mysz jak i przez ctrl + scroll.

[@DMKano87]

Hej wiem, że już dwa lata minęły od napisania twojego posta, ale czy mógłbyś mi wytłumaczyć dlaczego przy sposobie pokazanym na filmie tak się dzieje?

[@qwaqar6734]

Pozdrawiam :)

[@iyydha4870]

Jak by dodac jeszcze tryb multi przez jakiegos Node.js to bylby sztos ; ]

[@SamurajProgramowania]

pomyślimy :)

[@baniok100]

ajajajaj, dzięki mój mistrzu!!

[@SamurajProgramowania]

;)

[@patrykzatorski2909]

Nie rozumim jednego w zabezpieczeniu jesli mamy : if(playerY

[@DeNeKPlayGames]

Witam robi Pan bardzo fajne poradniki miło się tego słucha i sam próbuje coś tworzyć ale mam 1 pytanie czy w najbliższym czasie planuje Pan zrobienie gry na telefon(android)?

[@SamurajProgramowania]

Dziękuję. U mnie tylko css i js (póżniej node,js, react,js i takie tam) Raczej apek na androida (natywnych czy nie) nie przewiduję w 2017/18 :)

[@EssaEssaz]

zrob film jak programowac w lua ( pisanie skrpytow do gier ) :]

[@damiankaminski4204]

Samuraju mam pytanie. W funkcji playerPosition naszej zmiennej playerY nadajemy nową wartość, która wyznacza pozycję od środka paletki. Następnie w instrukcjach warunkowych wartość playerY jest liczona tak jak wcześniej czyli od lewego górnego roku paletki. Wydawało mi się, że skoro te if'y są w zasięgu tej funkcji to powinny przyjąć tą nową wartość liczenia od środka. Mam nadzieję, że napisałem w miarę zrozumiale to o co mi chodzi. Z góry dziękuję za odpowiedz :)

[@SamurajProgramowania]

Cześć Damian, wiem o co ci chodzi, ale ciężko mi to dobrze wytłumaczyć. Zwróć uwagę, że my nie zmieniliśmy sposobu rysowania, a określiliśmy jedynie relcję między myszką a rakietką (przeliczyliśmy sobie to tak by myszka znajdowała się po środku osi y rakietki). Rakietka cały czas jest rysowana od swojego lewego górnego rogu (tak jak każdy prostokąt w canvas), określamy jedynie wartość na osi y. Zastanowie się jak to lepiej wytłumaczyć i w kolejnym filmie na koniec do tego wrócę.

[@damiankaminski4204]

Czyli takie działanie wynika z właściwości clientY obiektu event?

[@SuperGo5c]

Samuraju mam pytanie, czy jeżeli przerobiłem jakiś kurs (np. zrobiłem tą gierkę), to czy mogę to wstawić u siebie na gita jako portfolio? Jak to by wyglądało z twojej strony jako twórcy kursu i ze strony gdybyś był pracodawcą?

[@SamurajProgramowania]

Dla mnie spoko, dobry pomysł, tylko bym ją jeszcze upiększył (dodałbym wybór poziomu trudności, wynik graczy (tablica wyników), moze jakiś efekt dzwiękowy (odbijanie piłki)

[@g3anonim]

Mam takie jedno małe spostrzeżenie, a mianowicie do zmiennej topCanvas wartość jest przypisywana jedynie przy odświeżeniu strony, czyli jeśli podczas gry użytkownik zmieni rozmiar okna to wartość ta nie będzie aktualna i gra nie będzie działać prawidłowo? :)

[@SamurajProgramowania]

Dokładnie, choć można bez większych problemów zrobić z tego tenisa grę responsywną czyli taką, która dopasuje też wielkosć elementów do przestrzeni okna przeglądarki i wymusi dynamiczną zmianę przy zmianie rozmiaru (też do tego event listener się przyda ;))

[@Powro90]

W końcu coś, co pokazuje jak programować w praktyce. Tu moje zmagania z grą na podstawie twojego tutorialu: github.com/powro01/pong-game/ Pozdrawiam i czekam na więcej! :)

[@Ufol]

Twój warunek nie bierze wszystkich możliwości pod uwagę if (ballX playerX - paddelWidth && ballY > playerPosition && ballY < playerPosition + paddelHeight) { ballSpeedX *= -1; } Sprawdza tylko ballY czyli górny lewy róg piłki a wszystkie ptk poniżej niego przechodzą przez paletkę. Ja swój warunek napisałem tak : If (ballY >= playerY && ballY

[@Powro90]

Ufol oczywiście, dużo do dopracowania. Na wszystko przyjdzie czas :)

[@Ufol]

A no. Mój też nie jest idealny i parę rzczy można by pozmieniać dodać, ale na tym nauka polega :)

[@Stadnicki82]

a gdzie jest to przyspieszenie piłki?

[@SamurajProgramowania]

nie zdążyła jeszcze przyśpieszyć ;)

[@Stadnicki82]

ale gdzie jest materiał o tym? Bo poprzedni odcinek ucięło w momencie rozpoczęcia pisania kodu o tym przyspieszeniu.

[@piotrs448]

Kiedy next?

[@Micsc]

Wyprzedzając trochę wideo wydedukowałem, że funkcję można też zrobić tak , mam nadzieję, że dobrze i w dalszych krokach nic mi się nie rozwali function playerPosition(e){ let positionY = e.clientY - topCanvas - paddleHeight/2; playerY = positionY; if(playerY>ch-paddleHeight){ playerY = ch-paddleHeight; }else if( positionY

[@sokolanimationspl8919]

Witam, przepraszam że dalej zawracam głowę lecz dalej mam problem z tym samym, czyli dalej nie działa mi ten dodatek do Brackets, czy mógłbyś mi pomóc :)

[@kolektywpaliatyw]

Jaki dodatek do Bracketsa Ci nie działa ? :)

[@sokolanimationspl8919]

Cezary Pietrzak nie pamiętam nazwy ale powodował że gdy wpisze html= i nacisnę tab to wyswietli sie caly "szkielet" html

[@kolektywpaliatyw]

Pewnie chodzi Ci o wtyczkę Emmet. Żeby wygenerować szkielet HTML za pomocą Emmeta musisz napisać html:5 i wcisnąć tab :)

[@sokolanimationspl8919]

Cezary Pietrzak aha

[@sokolanimationspl8919]

Cezary Pietrzak a jezeli i to nie zadziala

[@mrsblack573]

Mogę wiedzieć jakiego motywu w Brackets Pan używa? :D

[@Lopuch64]

to Panda

[@wojciechnajda3417]

:)

[@sylwiapochron6926]

JS miał być raz w tygodniu :( jestem zawiedziona

[@piotrs448]

Ogarniał ktoś już może odbijanie piłki od rakietki? Bo ja ogólnie sam coś sobie próbuje pisać i jak na razie coś takiego. Czasami dziwnie się odbija. Ma ktoś jakieś inne pomysły jak to zrobić? :) codepen.io/anon/pen/eEJJwK

[@CzasToPieniadz]

Jak coś to rakietka po angielsku to paddle a nie paddel , nie że się czepiam tylko tak mówie.

[@SamurajProgramowania]

zgadza się, ale co zrobić, poszło w świat i nie zmieni się :)

[@majaszafran5501]

słaba jakość nawet jak najlepszą wzięłam