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

0

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ę.

<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>
1

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

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.

0

@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?

0

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).

1

@Maciej Cąderek: Dzięki wielkie. Odpowiedź uznana :D

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