• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

[CR] JavaScript (#5): Poznajemy jQuery. Gra w pamięć

+6 głosów
2,955 wizyt
pytanie zadane 20 września w Nasze poradniki przez Mirosław Zelent Nałogowiec (28,430 p.)

CR = Code Review. O co chodzi? Zajrzyj tutaj
Pełna lista wszystkich Code Review? Zajrzyj tutaj

https://www.youtube.com/watch?v=edNqTubHUU0

Paczka z plikami z odcinka do pobrania: TUTAJ

7 odpowiedzi

+14 głosów
odpowiedź 22 września przez Ehlert VIP (113,970 p.)

W związku z kolejną dyskusją z cyklu best practises vs dydaktyka mam do Pana pytanie. Nie brał Pan nigdy pod uwagę możliwości tworzenia filmów na kanale Pasja Informatyki współpracując z osobami, które zawsze zabierają głos i robią refactoring kodu z filmów?

Nie chcę ujmować Pańskiej wiedzy, ale co odcinek jest coraz głośniej. Mimo świetnych zdolności dydaktycznych jakie Pan prezentuje poprzez kursy, nieczysty kod i złe nawyki (mimo, że to tylko materiał do nauki) znacząco obniżają jakość przekazywanego contentu i owocuje masą zapytań na forum o banalne rzeczy (czekamy na falę jQuery).

Proszę wziąć pod uwagę, że użytkownicy, którzy poddają Pański kod krytyce, to ludzie bardzo pomocni, o czym przekonał się nie jeden forumowicz. Osobiście uważam, że połączenie ich wiedzy i doświadczenia z pańską praktyką nauczycielską znacząco polepszyłoby jakość kursów webdevu na kanale. 

Pozdrawiam
Oczywiście jest to tylko moje skromne zdanie i osobista sugestia. wink

1
komentarz 4 października przez event15 Szeryf (92,060 p.)
Powiem tylko tyle, że jakiekolwiek złe zdanie miałbym o sposobie nauczania PHP, tak zawsze jestem chętny do pomocy forumowiczom, którzy ciągle odpowiadają na te same pytania oraz w rozwoju bardziej wartościowych materiałów na kanale. Za darmo, bez chwały.
komentarz 14 października przez Mirosław Zelent Nałogowiec (28,430 p.)

 Powiem tylko tyle, że jakiekolwiek złe zdanie miałbym o sposobie nauczania PHP, tak zawsze jestem chętny do pomocy forumowiczom, którzy ciągle odpowiadają na te same pytania oraz w rozwoju bardziej wartościowych materiałów na kanale. Za darmo, bez chwały.

Bardzo miło mi to słyszeć - to wartościowa postawa, bo produktywna, tworząca wartość. No i wymagasz od siebie, a nie od innych (co jest trudniejsze niż porównywanie się z innymi i wymaganie perfekcji od kogoś, ale w mojej opinii jest jednocześnie podstawą bycia mężczyzną z pasją i inicjatywą). 

Niestety najczęściej w praktyce "bycia w internecie" gdy spotykam się z krytyką, to jest ona naszpikowana bezpardonowymi ocenami, pejoratywnymi, osobistymi docinkami na temat tego jak "słabym" jestem nauczycielem, wyśmiewaniem i etykietowaniem - zwłaszcza po wpisach blogowych Comandeera pozycjonowanych wprost na moje nazwisko wielokrotnie miałem do czynienia z "czystym" hejtem wylewanym różnymi kanałami (zero konkretu, tylko jakiś chamski sposób wyrażenia przesłania "jesteś do niczego" - oczywiście zdaję sobie sprawę, że takiej konsekwencji autor wpisów blogowych nie chciał i może nie być jej w ogóle świadomy).

Zwłaszcza młodzi ludzie (i to szczególnie na YouTube) przyzwyczajeni do "dram", "pocisków", "x obraża", "x masakruje" często nie potrafią rzeczowo dyskutować, stąd każdy krytyczny post (niezależnie od jakości) niejako "nasyła" na Ciebie rzeszę przeróżnych ludzisk, którzy lubują się w obrażaniu (bo nie można tego nazwać krytyką). Dlatego zasadniczo nie warto się angażować w jałowe "dyskusje". Od czasu do czasu pojawi się coś wartościowego, jak na przykład krytyka konkretnych momentów filmów, którą stworzył dawniej Comandeer (emocjonalny wpis "Mam nierówno pod sufitem" przez uprzejmość pominę), co daje wgląd w to jak i dlaczego ktoś prezentujący odmienny ("wstępujący") styl nauczania uzasadnia swój punkt widzenia. I to lubię przeczytać, żeby poprawiać swój warsztat i poszerzać horyzonty. Problem jest niestety taki, że wartościowej krytyki jest w sieci za mało.

Z chęci pomocy forumowiczów skorzystam na pewno, to miła odmiana! Niedługo podeślę Arkowi kod PHP#5. Pozdrawiam i dziękuję za wypowiedzi! - może kiedyś będę mógł znowu komfortowo udzielać się na forum, bez potrzeby odpowiadania na ciągłe listy zarzutów. Co jakiś czas będę próbował to robić. Miłego weekendu! MZ

komentarz 14 października przez efiku Maniak (72,060 p.)

może kiedyś będę mógł znowu komfortowo udzielać się na forum, bez potrzeby odpowiadania na ciągłe listy zarzutów. Co jakiś czas będę próbował to robić. Miłego weekendu! MZ

Przecież zawsze mogłeś, sugeruję po wrzuceniu nowego odcinka z PHP#5 śledzić forum przez tydzień i zobaczyć z jakimi problemami przyjdą ludzie, a jakie dajemy rozwiązania. Mile widziane dorzucenie coś od siebie ;) 
 

komentarz 16 października przez Mirosław Zelent Nałogowiec (28,430 p.)

Przecież zawsze mogłeś

Akurat pan nie powinien mieć problemu ze zrozumieniem, co mam na myśli. Dziękuję za poradę, pozdrawiam

komentarz 16 października przez efiku Maniak (72,060 p.)
Luz ;)
+11 głosów
odpowiedź 22 września przez Rettles Początkujący (340 p.)

Generalnie zawsze unikałem js więc można powiedzieć, że jest to mój pierwszy z nim kontakt, ale poprawiłem co nieco. Naprawiłem ten "krytyczny błąd" :) i dodałem możliwość restartu bez konieczności przeładowania strony, losowanie kart no i troszeczkę przebudowałem skrypt.


Kod: GitHub

Demo: zagraj


EDIT:

Całkiem już usprawniłem grę:

  • Zwiększona ilość kart
  • Zmieniona tematykę na Hotsa, w sumie to całkowicie zmieniłem wygląd strony
  • Poziomy trudności
  • System punktacji, który bierze pod uwagę ilość tur, odkrytych kart oraz czas gry
  • Najlepszy wynik (rozróżnia poziomy trudności);

Powoli mi się kończą pomysły.

1
komentarz 25 września przez Mirosław Zelent Nałogowiec (28,430 p.)
Awesome :)
1
komentarz 26 września przez AdiM Nowicjusz (210 p.)
Dodaj jeszcze dźwięk przy odsłanianiu i zasłanianiu kart + okrzyk zwycięstwa na koniec albo coś co kojarzy się z hots. Genialne
komentarz 26 września przez Rettles Początkujący (340 p.)
Dźwięki na pewno dodam, najpewniej zaraz po tym jak poprawię style fajnie by było gdyby strona była responsywna :)
1
komentarz 5 października przez Mirosław Zelent Nałogowiec (28,430 p.)
Super! Na pewno demo trafi na nasz fanpage na Facebooku, jeśli masz jakieś portfolio / bloga, to możesz osadzić tam (pod dowolnym adresem) to demo - zyskasz trochę wizyt w swojej domenie. Pozdrawiam
komentarz 5 października przez Rettles Początkujący (340 p.)
Będzie mi bardzo miło. :)

Przez to że zaczęły się studia nie miałem czasu na ten projekt jednak dzisiaj wieczorem wrzucę kolejnego większego update. Bardzo bym był zadowolony gdyby post na Pańskim fanpage pojawił się po mojej aktualizacji.

Ps. Nie posiadam żadnej swojej strony.

Pozdrawiam.
komentarz 5 października przez Mirosław Zelent Nałogowiec (28,430 p.)
Jasne, to nic pilnego -  studia są absolutnie najważniejsze! :) Specjalnie dałem Ci znać wcześniej, także take your time. Gra rozbudowana super!
komentarz 5 października przez Rettles Początkujący (340 p.)
To świetnie! Dziękuje za miłe słowa, bardzo mi się podoba taka forma kursu z zadaniem, sporo to uczy a także utrwala wiedzę z kursu. ;) Oby takich więcej!

Swoją pracę już zaktualizowałem. :)
komentarz 6 października przez Mirosław Zelent Nałogowiec (28,430 p.)
Jasna sprawa, wrzucę zatem w najbliższy poniedziałek. Pozdrawiam
+6 głosów
odpowiedź 20 września przez Schizohatter Nałogowiec (36,520 p.)
edycja 22 września przez Schizohatter
https://mortmortis.pl/stuff/CR-jQ-5.pdf

Można jeszcze zamiast tworzyć kolejne zagnieżdżenia kodu JS, użyć warunku przeciwnego do tego w ifie + return.

Przejrzałem końcówkę filmu - jest propozycja refaktoryzacji redundancji. Zwracam honor tutaj.

EDIT: Chciałbym przeprosić za JS punkt 4. Trochę za bardzo mnie zaszokował ten pomysł. Nie powinienem wyzywać tego od idiotyzmów.
2
komentarz 22 września przez Kamil Łydka Gaduła (3,390 p.)
edycja 22 września przez Kamil Łydka


Jak dla mnie to ten system dydaktyczny nie działa, skoro historia powtarza się co wypuszczenie odcinka...

Ja jeszcze jako niedawno początkujący (a może nadal) zwróciłbym też uwagę na to, że na filmikach jest przedstawione jakby idealne programowanie. 

A jest trochę inaczej w rzeczywistośći... Z własnego doświadczenia i czytając pytania na forum, można zauważyć że jednak początek, to tonięcie w wielkiej ilości błędów, problemów, zagwoztek i trudów.

Ja wiem, że film bez błędów, niekompilującego się kodu albo np. niedziałających funkcji - ogląda się dużo milej i wszystko wygląda bardziej profesjonalnie, ale początkujący robi sobie trochę złą wizje, potem szybko się poddaje i nie potrafi sobie radzić z problemami. Źle wpisana ścieżka do pliku/zdjęcia, to chyba najczęstszy problem i  tylko pytanie "dlaczego nie działa?". Wystarczałoby przypominać o konsoli (choć widziałem, że tutaj coś była użyta) i pokazać jak są wyświetlanie najbardziej spotykane błędy.

Zapewne wtedy byłoby trzeba podzielić taki odcinek na parę mniejszych, ale to też wyszłoby na dobre, bo 1h i 20 minut, to i tak naprawdę dużo, jeśli chodzi o dawkę wiedzy.

Taki tam, mój mały wywód. ;)

 

PS. Ja i tak cały się zastanawiam czemu wszystko jest przedstawiane na tym okropnym Notepad++, jakby nie było lepszych i ładniejszych edytorów (a to też usprawniłoby naukę). ;)

komentarz 22 września przez emczek Nowicjusz (210 p.)
No właśnie przeczytałem dokładnie całe code review, i z mojego (niewielkiego) doświadczenia wiem, że były tam uwagi słuszne. O to się nie czepiam. Po prostu forma przekazania tego wyglądała trochę pretensjonalnie. Z chęcią zobaczyłbym Twój kod po tych poprawkach o których piszesz (nie żeby się czepiać, tylko zobaczyć inne podejście). Natomiast nie uważam, żeby pan MZ robił złą robotę - nawet jeśli coś nie jest idealne albo aktualne to po to są różne źródła żeby to sobie zrewidować. A od czegoś trzeba zacząć.
3
komentarz 22 września przez argeento Szeryf (77,330 p.)
#chcęPowiadomienia
3
komentarz 22 września przez Comandeer Mentor (376,970 p.)

Natomiast nie uważam, żeby pan MZ robił złą robotę - nawet jeśli coś nie jest idealne albo aktualne to po to są różne źródła żeby to sobie zrewidować. A od czegoś trzeba zacząć.

To jest, niestety, pobożne życzenie i zwracałem na to uwagę wielokrotnie. Wystarczy sobie poobserwować pytania o ocenę kodu tutaj na forum czy na grupach na FB. Niemal nikt nie rewiduje wiedzy w różnych źródłach, dlatego tak istotne jest, by źródło było jak najbardziej poprawne merytorycznie.

4
komentarz 23 września przez efiku Maniak (72,060 p.)

Nic się nie zmieni więc na siłę nie ma co ciągnąć tej dyskusji.

Naprawdę koniec.

CR to kompromis pomiędzy "Nauczycielami" a "Programistami".
Ja i tak odpowiadam tutaj na jakiś 1% pytań, bo to się robi nudne jak co chwile pojawiają się pytania: Dlaczego mi ten kod nie działa , o użyłem @, bo tak mi pokazali i nie działa!!!! XD Albo umiem kopiować kod, ale nie umiem zrobić prostego routingu

@Schizohatter, wróć do udzielania się na grupie fejsowej w pierwszych krokach, tam nie ma takiego podziału, lub tutaj odpowiadaj osobą które używać zaczęły jakiś FW, gdzie widzisz, że poziom pytania jest warty odpowiedzi. ;)

Temat wyczerpany, bo za chwilę będziecie krzyczeć na siebie. 

PS: Taki śmieszny mem znalazłem ;) 
https://i.stack.imgur.com/ssRUr.gif

+2 głosów
odpowiedź 25 września przez emczek Nowicjusz (210 p.)
Wspominał Pan w odcinku o innych grach opartych na jQuery. Postawiłem sobie dość ambitne zadanie jak na kogoś kto tylko hobbystycznie uczy się programować i próbuję zaprogramować warcaby. Wstępna wersja poniżej. Zdaje sobie sprawę, że wiele rzeczy można w tym chaotycznym kodzie usprawnić, i że gra wymaga jeszcze dalszej pracy. Na razie jestem zadowolony, że chociaż tyle udało mi się napisać. :)

Założenia: bicia są obowiązkowe, można bić do tyłu

Do okodowania: bicia wielokrotne, zamiana w damkę, wykrywanie remisu (15 ruchów bez zbicia), zaprogramowanie sztucznej inteligencji żeby można było grać z komputerem a nie tylko z samym sobą ;)

https://codepen.io/mczekajski/pen/ayxpaR
1
komentarz 5 października przez Mirosław Zelent Nałogowiec (28,430 p.)
Super, dobra robota! :) Link do demo warcab trafi niedługo na nasz fanpage na Facebooku -  jeśli masz jakieś portfolio / bloga, to możesz osadzić tam (pod dowolnym adresem) to demo - zyskasz trochę wizyt w swojej domenie. Pozdrawiam
komentarz 5 października przez emczek Nowicjusz (210 p.)
Dziękuję. Portfolio dopiero się tworzy (pewnie jeszcze długo, bo nie mam za dużo do pokazania...). Ta wersja na codepen już jest nieco bardziej rozwinięta, okodowałem bicie wielokrotne, zamianę w damkę, jeszcze kompletny mechanizm bicia damką wymaga dopracowania. Proszę tylko podpisać link moim imieniem i nazwiskiem (Marcin Czekajski) żebym w razie czego mógł się pochwalić ;)
komentarz 6 października przez Mirosław Zelent Nałogowiec (28,430 p.)
Jasna sprawa, wrzucę zatem w najbliższy poniedziałek. Pozdrawiam
+1 głos
odpowiedź 29 września przez baran860 Nowicjusz (200 p.)
Po obejrzeniu video zabrakło mi warunku sprawdzającego czy ta druga karta ma inny nr niż ta pierwsza, bo na chwilę obecną istnieje możliwość odkrycia jednej karty potem ponowne jej kliknięcie co powoduje usunięcie z planszy tylko jednej karty :)
komentarz 5 października przez Mirosław Zelent Nałogowiec (28,430 p.)
Tak jest, to właśnie trzeba poprawić w obsłudze kliknięcia karty. Pozdrawiam
+1 głos
odpowiedź 24 października przez Paweł Niesiołowski Nowicjusz (160 p.)
edycja 24 października przez Paweł Niesiołowski

Przyłączam się do zabawy. smiley


Najważniejsze zmiany, które wprowadziłem:

  • naprawiłem "błąd krytyczny" i uprościłem kod,
  • zmieniłem tematykę i wygląd gry - osadziłem ją w świecie serialu "Twin Peaks",
  • dodałem losowanie kart i zwiększyłem ich liczbę,
  • stworzyłem możliwość zapisywania najlepszych wyników (z wykorzystaniem AJAX i PHP),
  • dodałem licznik odwiedzin.

Kod gry: GitHub

Demo: Twin Peaks Memory Game

 

komentarz 25 października przez Mirosław Zelent Nałogowiec (28,430 p.)
Ha, świetna robota! Laury Palmer się nie spodziewałem, dobry gust serialowy :) No i świetna obudowa w JS, PHP i AJAXie! Poczekam jeszcze trochę czy pojawią się kolejne przeróbki i również pójdzie na naszego FB. Fajnie, że podzieliłeś się pełnym kodem. Pozdrawiam! :)
komentarz 25 października przez Paweł Niesiołowski Nowicjusz (160 p.)
Dzięki za ten komentarz. Twoje słowa dużo dla mnie znaczą. Niecierpliwie czekam na kolejne odcinki Twoich świetnych kursów. Pozdrawiam! :)
0 głosów
odpowiedź 25 września przez Gambr Obywatel (1,630 p.)

To funkcja która losowa zapełnia tablicę  parami kart bez duplikowania :)

var cards = [
    "empty",
    "empty",
    "empty",
    "empty",
    "empty",
    "empty",
    "empty",
    "empty",
    "empty",
    "empty",
    "empty",
    "empty",
];
function setStartPhotos()
{	
	for(i=0; i<12; i++)
	{
		$('#c'+i).css('background-image', 'url(img/game/karta.png)');
	
	}
	generateRandomBoard();
}
function generateRandomBoard()
{
	var ciri=0; geralt=0; jaskier=0; iorweth=0; triss=0; yen=0; 
	var random=0; 
	var randomSwitch =0;
	do
	{
		randomSwitch = Math.floor((Math.random()*6)+1);
		random=Math.floor((Math.random()*12)+1)-1;
		switch(randomSwitch)
		{
			case 1:
			{
				if((ciri<2)&&(cards[random]=="empty"))
				{
					ciri++;
					cards[random]="ciri.png";
				}
			
			break;
			}
			
			case 2:
			{	
				if((geralt<2)&&(cards[random]=="empty"))
				{
					geralt++;
					cards[random]="geralt.png";
				}
			break;
			}
			case 3:
			{	
				if((jaskier<2)&&(cards[random]=="empty"))
				{
					jaskier++;
					cards[random]="jaskier.png";
				}
			break;
			}
			case 4:
			{	
				if((triss<2)&&(cards[random]=="empty"))
				{
					triss++;
					cards[random]="triss.png";
				}
			break;
			}
			case 5:
			{	
				if((yen<2)&&(cards[random]=="empty"))
				{
					yen++;
					cards[random]="yen.png";
				}
			break;
			}
			
			case 6:
			{
				if((iorweth<2)&&(cards[random]=="empty"))
				{
					iorweth++;
					cards[random]="iorweth.png";
				}
			break;
			}	
		}
	}
	while(ciri<2||geralt<2||jaskier<2||triss<2||yen<2||iorweth<2);
	document.write(cards);
}



 

3
komentarz 25 września przez Ehlert VIP (113,970 p.)

Pomijając tą tablicę, to tyle wyciekło Ci do globalnego scopeu, że random to nie random laugh

komentarz 26 września przez argeento Szeryf (77,330 p.)

Zaproponuję bardziej funkcyjne rozwiązanie z małą pomocą biblioteki lodash

const shuffleCards = cards => _(cards)
	.concat(cards) // podwojenie ilości kart
	.shuffle() // pomieszanie kart
	.value() // zwrócenie nowej tablicy

const cards = ['Dowolna', 'liczba', 'kart']
const gameBoard = shuffleCards(cards)

console.log(gameBoard) 
// ["Dowolna", "liczba", "Dowolna", "liczba", "kart", "kart"]

 

komentarz 26 września przez Rettles Początkujący (340 p.)
edycja 26 września przez Rettles

Z pomocą jQuery możesz znacznie skrócić twój zapis ;)

Używając arrow (=>) function

// twoja tablica z kartami (bez duplikatów)
let cards = ["1.png", "2.png", "3.png", "4.png"];

// funkcja, która dubluje tablice oraz sortuje ją w losowej kolejności
let shuffleArray = (array) => $.map(array, (element) => [element, element]).sort(() => 0.5 - Math.random());

cards = shuffleArray(cards);

 

funkcję shuffleArray() można zapisać również w taki sposób:

let shuffleArray = function (array) {
    return $.map(array, function (element) {
        return [element, element];
    }).sort(function () {
        return 0.5 - Math.random();
    });
};

 

komentarz 26 września przez Gambr Obywatel (1,630 p.)

Zrobie wersję na lokalnych zmiennych, w których funkcja zwraca tablice :)

Ale jak na początkującego to chyba nie ma dramatu :D? 

2
komentarz 26 września przez argeento Szeryf (77,330 p.)

Ten pierwszy kod, to trochę dramat był : p

Hmm, tak naprawdę nie potrzeba do tego jQ

const shuffleArray = arr => [...arr, ...arr].sort(() => 0.5 - Math.random())

Cały problem rozchodzi się o funkcję mieszającą, spójrz na komentarze do tej odpowiedzi, w wolnej chwili sprawdzę dokładniej o co chodzi - ale wstępnie miesza całkiem dobrze

Podobne pytania

0 głosów
0 odpowiedzi 106 wizyt
pytanie zadane 7 listopada w JavaScript, jQuery, AJAX przez Gabrysia Sochacka Nowicjusz (140 p.)
0 głosów
0 odpowiedzi 314 wizyt
+1 głos
1 odpowiedź 545 wizyt

42,445 zapytań

81,749 odpowiedzi

162,269 komentarzy

20,388 pasjonatów

Przeglądających: 115
Pasjonatów: 1 Gości: 114

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...