Chińczyk - gra planszowa w JavaScript

0

Witajcie

Jak po temacie wątku można się domyślić piszę aktualnie chińczyka w JavaScript ot tak po prostu żeby się czegoś nowego nauczyć. Napotkałem jednak mały problem przy opracowaniu systemu kolizji. Na początek napisałem krótki warunek, po którego spełnieniu powinien zmienić się kolor tła kwadratu, który odpowiada za jedno pole na całej planszy. Poniżej załączam screen całej planszy z ponumerowanymi polami.

screenshot-20170808155423.png

Problem pojawia się w miejscu, w którym czerwony pionek wchodzi na pole pionka zielonego. Powyższy screen jest sprzed wystąpienia problemu, natomiast screen poniżej obrazuje problem, który chciałbym rozwiązać.

screenshot-20170808155809.png

Zatem czerwony pionek zachodzi pod zielony zamiast nad niego. Ta linijka kodu nie działa tak jak należy:

if(thirtyFiveSquare.classList.contains('redJumps'))
	{
		thirtyFiveSquare.classList.remove('greenJumps');
	}

Klasa redJumps zawiera jedynie zmianę koloru tła na kolor czerwony, natomiast greenJumps zmienia kolor na zielony. Więc jeśli 35 kwadrat zawiera klasę redJumps (a zatem jeśli jest koloru czerwonego) to usuń z niego klasę greenJumps i zostaw klasę redJumps. Logicznie rzecz biorąc powinno zadziałać, ale nie działa dlatego proszę Was o pomoc. Dodam, że dopiero zacząłem pisać tę grę.

Cały kod wraz z grą:
https://jsfiddle.net/2dm1myh4/

0

Fragment kodu, który podesłałeś działa jak należy. Kod ten jest wywoływany w momencie kliknięcia na element firstGreenPawn. Po kliknięciu w ten element nadajesz mu klasę 'hiddenPawn', która sprawia, że element staje się niewidoczny na stronie i nie można w niego kliknąć.
Klasa greenJumps nie jest zatem usuwana z trzydziestego piątego bloczku, i element jest nadal wyświetlany na zielono.

P.S.: Masz mnóstwo duplikacji kodu - każde zdarzenie obsługi kliknięcia na kwadracik wygląda niemal identycznie, różni się jedynie nazwą kwadracika. Pomyśl o np. umieszczeniu wszystkich klikalnych elementów po których mogą się poruszać pionki w tablicy, przypisz obsługę zdarzenia dla każdego elementu tej tablicy (lub nadaj im wspólną klasę i przypisz obsługę zdarzenia wszystkim elementom danej klasy).

0

PS. Odnośnie duplikacji kodu - polecam jedno z podanych rozwiązań - nadanie wspólnej klasy dla obsługi tej samej klasy dla obsługi jednego zdarzenia. Uważam że jest to bardziej czyste rozwiązanie niż tworzenie tabeli i odnoszenie się do niej.

1 użytkowników online, w tym zalogowanych: 0, gości: 1