• 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ęć

VPS Starter Arubacloud
+11 głosów
15,264 wizyt
pytanie zadane 20 września 2017 w Nasze poradniki przez Mirosław Zelent Nałogowiec (34,750 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

komentarz 31 grudnia 2017 przez Farmer Obywatel (1,150 p.)
o co chodzi z tym "błędem krytycznym"?

Bo coś mi chyba umknęło

16 odpowiedzi

+18 głosów
odpowiedź 22 września 2017 przez Ehlert Ekspert (212,630 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

2
komentarz 4 października 2017 przez event15 Szeryf (93,790 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 2017 przez Mirosław Zelent Nałogowiec (34,750 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 2017 przez efiku Szeryf (75,160 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 2017 przez Mirosław Zelent Nałogowiec (34,750 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 2017 przez efiku Szeryf (75,160 p.)
Luz ;)
+12 głosów
odpowiedź 22 września 2017 przez Rettles Bywalec (2,320 p.)
edycja 3 kwietnia 2020 przez Rettles

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: Codesandbox

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.

komentarz 2 kwietnia 2020 przez susanel Nowicjusz (160 p.)

@Rettles, Hej! chętnie zajrzałabym do tego kodu. Niestety linki są juz nieaktywne :(

komentarz 2 kwietnia 2020 przez Rettles Bywalec (2,320 p.)
edycja 2 kwietnia 2020 przez Rettles
Cześć, to prawda ustawiłem repozytorium jako prywatne, bo nie jestem już taki dumny z tego kodu jak kiedyś :D a w ostatnim czasie przyszło mi udostępniać GH potencjalnym pracodawcom, stąd taka decyzja. Link do samej stronki z grą już naprawiłem ;) a odnośnie kodu to spróbuję go udostępnić w innym miejscu, jak coś to dam znać pod tym komentarzem
komentarz 3 kwietnia 2020 przez Rettles Bywalec (2,320 p.)

@susanel, Zaktualizowałem post, dobrej zabawy :D

komentarz 3 kwietnia 2020 przez susanel Nowicjusz (160 p.)
@Rettles, Dziękuję bardzo! Jak najbardziej rozumiem. Ja dopiero się uczę więc dla mnie jest to pomocne. :)
1
komentarz 18 lipca 2023 przez Jan-Rychlik-SH Nowicjusz (100 p.)
+5 głosów
odpowiedź 20 września 2017 przez Schizohatter Nałogowiec (39,600 p.)
edycja 22 września 2017 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.
1
komentarz 22 września 2017 przez Kamil Łydka Stary wyjadacz (13,600 p.)
edycja 22 września 2017 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 2017 przez emczek Nowicjusz (190 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 2017 przez niezalogowany
#chcęPowiadomienia
2
komentarz 22 września 2017 przez Comandeer Guru (599,730 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 2017 przez efiku Szeryf (75,160 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

+4 głosów
odpowiedź 10 marca 2019 przez eswu Początkujący (280 p.)
edycja 10 marca 2019 przez Patrycjerz

1. losowość umieszczenia kart przy rozdaniu

2. brak reakcji przy dwukrotnym kliknięciu na tą samą kartę

3. możliwość restartu gry po zakończeniu obecnej

W pliku memory.js wprowadziłem następujące zmiany:

ad 1) na samym początku pliku:

var cards_list = ["ciri.png", "geralt.png", "jaskier.png", "jaskier.png", "iorweth.png", "triss.png", "geralt.png", "yen.png", "ciri.png", "triss.png", "yen.png", "iorweth.png"];
var cards = new Array();

for(var i = 12;i>0;i--)
{
    var rand_id = Math.floor(Math.random() *i);
    cards.push(cards_list[rand_id]);
    cards_list.splice(rand_id,1);
}

ad 2) w definicji funkcji revealCard(nr) zamiast "if ( opacityValue != 0 && lock == false)" :

    if ( opacityValue != 0 && lock == false && nr != visible_nr )

ad 3) w definicji funkcji hide2Cards(nr1, nr2) zamiast "$('.board').html('<h1>You win!<br>Done in '+turnCounter+' turns</h1>');" :

$('.board').html('<h1>You win!<br>Done in '+turnCounter+' turns. <span class="reload" onclick="location.reload()">Click to reload.</span></h1>');

W main.css na koniec pliku dodałem:

.reload
{
    margin-top: 5px;
    letter-spacing: 2px;
}

.reload:hover
{
    color: #e9b64a;
    cursor: pointer;
}
+1 głos
odpowiedź 25 września 2017 przez emczek Nowicjusz (190 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 2017 przez Mirosław Zelent Nałogowiec (34,750 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 2017 przez emczek Nowicjusz (190 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 2017 przez Mirosław Zelent Nałogowiec (34,750 p.)
Jasna sprawa, wrzucę zatem w najbliższy poniedziałek. Pozdrawiam
+1 głos
odpowiedź 29 września 2017 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 2017 przez Mirosław Zelent Nałogowiec (34,750 p.)
Tak jest, to właśnie trzeba poprawić w obsłudze kliknięcia karty. Pozdrawiam
+1 głos
odpowiedź 15 października 2019 przez rafrucin Nowicjusz (160 p.)

Witam,

moja wariacja na temat:

https://github.com/Rafrucin/memory

- dodano wiecej kart i je zmieniono

- dodano dzwieki

- kod jest latwo skalowalny 

 

komentarz 15 października 2019 przez Mirosław Zelent Nałogowiec (34,750 p.)
Wow, fajnie zrealizowane Panie Pawle, także "pod maską :) Pozdrawiam
komentarz 15 października 2019 przez rafrucin Nowicjusz (160 p.)

Wersja Pawła była jedną z inspiracji,  ja mam na imię Raf smiley ale i tak dziękuję za dobre słowo. 

komentarz 15 października 2019 przez Mirosław Zelent Nałogowiec (34,750 p.)
A, rozumiem - nie doczytałem, że przecież Pana imię to Rafał, a Pawła wziąłem z powodu wspomnienia o wersji Pawła Niesiołowskiego (przepraszam). Pozdrawiam!
+1 głos
odpowiedź 14 lutego 2021 przez Paweł Gargula Nowicjusz (240 p.)

Cześć

Dołączam się do zabawy.

Generalne zmiany:

- Osadzenie rozgrywki w klimacie gry League of Legends

- Losowanie kart

- Resetowanie planszy po wygranej

- Próba uproszczenia kodu

Demo: https://pawelgargula.github.io/MemoryGame/

Kod: https://github.com/PawelGargula/MemoryGame

Pozdrawiam

Paweł

+1 głos
odpowiedź 27 lipca 2021 przez qwiateq Początkujący (430 p.)
Dorzucam swoją, trochę poprawioną wersję. Na pewno można tu jeszcze dużo poprawić, ale jako ćwiczenie z odcinka zrobiłem tyle. Zebrałem to co już padło w wątku i w ten sposób sobie poćwiczyłem.

Kod:

https://github.com/pwkwiatkowski/MemoryGame_js_jquery/blob/main/docs/memory.js

Gra:

https://pwkwiatkowski.github.io/MemoryGame_js_jquery/
0 głosów
odpowiedź 25 września 2017 przez Gambr Dyskutant (7,530 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);
}



 

2
komentarz 25 września 2017 przez Ehlert Ekspert (212,630 p.)

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

komentarz 26 września 2017 przez niezalogowany

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 2017 przez Rettles Bywalec (2,320 p.)
edycja 26 września 2017 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 2017 przez Gambr Dyskutant (7,530 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 2017 przez niezalogowany

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

0 głosów
odpowiedź 24 października 2017 przez Paweł Niesiołowski Nowicjusz (140 p.)
edycja 24 października 2017 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 2017 przez Mirosław Zelent Nałogowiec (34,750 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 2017 przez Paweł Niesiołowski Nowicjusz (140 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ź 28 grudnia 2017 przez zirael [PL] Mądrala (5,200 p.)
Czy kod który jest poddany refaktoryzacji z kursów można znaleźć np na githubie?
komentarz 28 grudnia 2017 przez niezalogowany
komentarz 28 grudnia 2017 przez zirael [PL] Mądrala (5,200 p.)
Dziękuję bardzo! Pozdrawiam.
0 głosów
odpowiedź 3 stycznia 2018 przez Michał Kucharski Nowicjusz (140 p.)
Mógłby mi ktoś wskazać jak sprawić, żeby po kliknięciu dwa razy tego samego kafelka nie znikało i nie zaliczało tury? Resztę kodu poprawiłem, ale z tym sobie nie mogę poradzić...

Pozdrawiam
komentarz 4 września 2019 przez Irim Nowicjusz (100 p.)

Dopiero sam zacząłem przerabiać ten kurs stąd ta późna odpowiedź, ale może komuś kto ma pierwszą styczność z programowaniem się przyda, a trafi na ten kurs później. smiley

if(oneVisible == false){
            //First card
            oneVisible = true;
            visibleNr = nr;
            lock = false;
        }else{
            //Second card
            if(visibleNr != nr)
            {
                if(cards[visibleNr] == cards[nr])
                {
                    setTimeout(function(){ hide2Cards(nr, visibleNr)}, 750);
                    lock = false;
                    pairsLeft--;
                    if(pairsLeft<=0){
                        $('.board').html('<h1>You win! <br/>Done in ' + turnCounter + ' turns</h1>');
                    }
                }else{
                    setTimeout(function(){ restore2Cards(nr, visibleNr)}, 1000);
                    lock = false;
                }
    
                turnCounter++;
                $('.score').html('Turn counter: ' + turnCounter);
                oneVisible = false;
            }
        }

Dodałem trochę dodatkowego kodu, dzięki czemu mam nadzieję nowe osoby będą mogły szybciej znaleźć miejsce zmian. W warunku else całość została opakowana w jeszcze jedną instrukcję warunkową, która sprawdza numer pierwszej karty (visibleNr) oraz drugiej karty (nr pobranej z argumentu funkcji). Każda karta ma swój kod, więc jeśli numery karty są różne (stąd warunek visibleNr != nr) to wykona się dalsza część elsa.
 

Pozdrawiam

0 głosów
odpowiedź 26 lutego 2018 przez Elche Nowicjusz (140 p.)

Szukam sposobu na uproszczone dodawanie nasłuchiwaczy

Tu umieściłem mój kod

https://jsfiddle.net/t8wgrdeg/1/

chodzi mi konkretnie o tą linijkę

for (var i = 0; i < cardsList.length; i++)
{

	cardsList[i].addEventListener("click", function() { revealCard(i); } );
}

Całoś przy tym działa tak, że nie odsłania kart, ale po dwóch kliknięciach zlicza tury. Po 6. turze pojawia się komunikat "You win". 

Albo nasłuchwacze nie zostały dodane albo parametr nie przesłany albo jedno i drugie. Będę wdzięczny za naprawodzenie na rozwiązanie.

komentarz 17 lutego 2022 przez Qwertak Nowicjusz (100 p.)
Po tylu latach przydać się może tylko komuś innemu, ale było tłumaczone gdzieś wyżej i najprostszym rozwiązaniem jest zmienić 'var' na 'let'.
0 głosów
odpowiedź 15 marca 2018 przez kordix Gaduła (3,910 p.)
edycja 15 marca 2018 przez kordix

Niby takie proste żeby przerobić addEventListener dla każdej karty na pętle a miałem z tym potworny problem.

Powiedzmy że na razie karta ma zwrócić jej numer.

for(var i=0;i<20;i++){
     document.getElementById('c'+i).addEventListener("click",function(){
        revealcard(i);
    });
function revealcard(nr){
console.log(nr);
};

Tutaj z uporem maniaka zwraca tylko ostatni numer z pętli obojętnie której karty bym nie klikał.

Może to obejść w taki sposób?

for(var i=0;i<20;i++){
     document.getElementById('c'+i).addEventListener("click",function(){
        revealcard(this.id.substring(1));
    });

Teraz ładnie zwraca mi odpowiedni numer, ale nie wiem czy to jest najlepsza metoda.

W tych refaktoryzacjach widzę jakąś inną metodologię, np. użycie właściwości target z jquery, ale nie widzę zrobienia tego w czystym js tak żeby po prostu zastąpić ten kod z odcinka. 

Czemu ta pierwsza metoda nie działa?

Intrygującą metodę widzę w ostatniej refaktoryzacji

var cardsList = $('.board div:not(.score, .reset)');

for (var i = 0; i < cardsList.length; i++)
{

    cardsList[i].addEventListener("click", function() { revealCard(i); } );
}

Ale nie czaję jak działa to cardsList - ten uchwyt zwraca tablicę wszystkich divów wewnątrz klasy board które nie mają klasy score albo reset ta? Jest na to jakiś ekwiwalent bez jQuery?

2
komentarz 15 marca 2018 przez niezalogowany

Czemu ta pierwsza metoda nie działa?

W pętli for deklarujesz zmienną i, która po kilku milisekundach przyjmuje wartość 20. W momencie klikania, wyświetlasz jej zawartość -> stąd taki wynik.

Najprostszym rozwiązaniem byłoby zadeklarowanie zmiennej i słowem kluczowym let, zamiast var. Zasięg blokowy zmiennej sprawia, że każda iteracja ma na stałe przypisaną daną wartość iteratora.

Z drugiej strony, w tym miejscu, warto już poczytać o event delegation


Jest na to jakiś ekwiwalent bez jQuery?

documnet.querySelectorAll

0 głosów
odpowiedź 15 marca 2018 przez kordix Gaduła (3,910 p.)

Mam jeszcze inne pytanie jak to jest w końcu z tym zasięgiem zmiennych? Tutaj nie chce mi w ogóle reagować jeśli ustalę zmienną poza funkcją

var pierwszyklik = false;

function revealcard(nr){

console.log(pierwszyklik);

.......

Tutaj loguje mi po prostu undefinded, nawet jeśli mam ustaloną zmienną tuż ponad tą funkcją. Miał ktoś podobny problem?

komentarz 16 marca 2018 przez Marchiew Dyskutant (7,690 p.)
pokaż więcej kodu bo w tym fragmencie nie ma żadnego błędu
komentarz 16 marca 2018 przez kordix Gaduła (3,910 p.)
Dobra mam, użyłem potem var w if-ie czyli zamiast przypisać wartość definiowałem od nowa zmienną. Sory za głupie pytanie.

Podobne pytania

+6 głosów
1 odpowiedź 2,246 wizyt
pytanie zadane 29 grudnia 2017 w Nasze poradniki przez Mirosław Zelent Nałogowiec (34,750 p.)
0 głosów
1 odpowiedź 418 wizyt
pytanie zadane 7 listopada 2017 w JavaScript przez Gabrysia Sochacka Nowicjusz (140 p.)
+1 głos
0 odpowiedzi 2,000 wizyt

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...