Kółko i krzyżyk - sprawdzanie zwycięskiej kombinacji

koksik SKKJ

2020-12-30T12:18:56+01:00

Rejestracja: dni
Ostatnio: dni
Postów: 9

Cześć Wam!
Mam taki problem, bo chciałbym sprawdzić czy któryś gracz już wykonał zwycięską kombinacje. Wpadałem na pomysł aby dodawać klasę, do wybranego elementu, która by określała czy dane pole jest wybrane przez kółko czy krzyżyk. Problem pojawia się, gdy chcę sprawdzić czy z danej tablicy (gdzie są kolejne tablice, z zwycięskimi kombinacjami), indeksy tych pól mają taką samą klasę.

Kopiuj

<body>
    <div id="app">
        <div id="board">
            <div class="field picked-o"><p></p></div>
            <div class="field picked-o"><p></p></div>
            <div class="field picked-o"><p></p></div>
            <div class="field"><p></p></div>
            <div class="field"><p></p></div>
            <div class="field"><p></p></div>
            <div class="field"><p></p></div>
            <div class="field"><p></p></div>
            <div class="field"><p></p></div>
        </div>
    </div>
    <script>

        const fields = document.querySelectorAll('.field');
        const winCombinations = [
            [0,1,2],
            [3,4,5],
            [6,7,8],
            [0,3,6],
            [1,4,7],
            [2,5,8],
            [0,4,8],
            [2,4,6]
        ];


        for (let i = 0; i < winCombinations.length; i++) {

            winCombinations[i].forEach((element) => {
                if (fields[element].classList.contains('picked-o' || 'picked-x')) {
                    //jeżeli wszystkie trzy z kombinacji zwrócą true niech zakończy się wykonywanie funkcji
                }

            });


        }
        





    </script>
</body>

Maciej Cąderek

2020-12-30T15:05:53+01:00

Rejestracja: dni
Ostatnio: dni
Lokalizacja: Warszawa
Postów: 1264

Można to zrobić na wiele sposobów, pierwsze co mi przychodzi do głowy bez orania istniejącego kodu to:

Kopiuj

const checkWinner = () => {
  for (let i = 0; i < winCombinations.length; i++) {
    const xWon = winCombinations[i].every((el) =>
      fields[el].classList.contains("picked-x")
    );

    if (xWon) {
      return "x";
    }

    const oWon = winCombinations[i].every((el) =>
      fields[el].classList.contains("picked-o")
    );

    if (oWon) {
      return "o";
    }
  }

  return null;
};

PS
Zamiast operować na elementach HTML utwórz sobie po prostu model planszy jako prostą tablicę i na niej sprawdzaj wynik.

koksik SKKJ

2020-12-30T15:55:28+01:00

Rejestracja: dni
Ostatnio: dni
Postów: 9

@Maciej Cąderek: A to jeszcze Ciebie zapytam. Czy jak mam array methods typu właśnie every, some, filter itp. to one zawsze muszą coś zwracać? W sensie tak jak ty użyłeś funkcji strzałkowy bez wąsów to one bezpośrednio wskazują na to co ta metoda ma zwracać ale jak już użyłem z wąsami to muszę mieć return wewnątrz. Dlaczego tak się dzieje?

Maciej Cąderek

2020-12-30T16:42:58+01:00

Rejestracja: dni
Ostatnio: dni
Lokalizacja: Warszawa
Postów: 1264

Raczej chodzi Ci o funkcję przekazywana do metody. Zależy, w większości przypadków tak (wyjątek to np forEach).
Co do funkcji strzałkowych - jeśli zwracasz pojedyncze wyrażenie to return jest automatyczny, jeśli masz blok kodu {}, to musisz sprecyzować co ma być zwrócone (i czy w ogóle).