Крестики-нолики в jquery Могу ли я получить этот код короче

Question

Интересно, можно ли сделать этот код короче в разделе, где функция проверяет, выиграл ли кто-то игру

Я пытался использовать case break, но я не представляю, как заставить его работать в этом примере

<script>
                  $(document).ready(function(){
                  if ($("#item1").hasClass(".winnerX") && $("#item2").hasClass(".winnerX") && $("#item3").hasClass(".winnerX")) {
                    $(".win").text("Player X won");
        } else if ($("#item4").hasClass(".winnerX") && $("#item5").hasClass(".winnerX") && $("#item6").hasClass(".winnerX")) {
          $(".win").text("Player X won");
        } else if ($("#item7").hasClass(".winnerX") && $("#item8").hasClass(".winnerX") && $("#item9").hasClass(".winnerX")) {
          $(".win").text("Player X won");
        } else if ($("#item1").hasClass(".winnerX") && $("#item4").hasClass(".winnerX") && $("#item7").hasClass(".winnerX")) {
          $(".win").text("Player X won");
        } else if ($("#item2").hasClass(".winnerX") && $("#item5").hasClass(".winnerX") && $("#item8").hasClass(".winnerX")) {
          $(".win").text("Player X won");
        } else if ($("#item3").hasClass(".winnerX") && $("#item6").hasClass(".winnerX") && $("#item9").hasClass(".winnerX")) {
          $(".win").text("Player X won");
        } else if ($("#item3").hasClass(".winnerX") && $("#item5").hasClass(".winnerX") && $("#item7").hasClass(".winnerX")) {
          $(".win").text("Player X won");
        } else if ($("#item1").hasClass(".winnerX") && $("#item5").hasClass(".winnerX") && $("#item9").hasClass(".winnerX")) {
          $(".win").text("Player X won");
        } else if ($("#item3").hasClass(".winnerX") && $("#item5").hasClass(".winnerX") && $("#item7").hasClass(".winnerX")) {
          $(".win").text("Player X won");
        } else {
          return false;
        }
    });
    $(document).ready(function(){
        if ($("#item1").hasClass(".winnerO") && $("#item2").hasClass(".winnerO") && $("#item3").hasClass(".winnerO")) {
          $(".win").text("Player O won");
        } else if ($("#item4").hasClass(".winnerO") && $("#item5").hasClass(".winnerO") && $("#item6").hasClass(".winnerO")) {
          $(".win").text("Player O won");
        } else if ($("#item7").hasClass(".winnerO") && $("#item8").hasClass(".winnerO") && $("#item9").hasClass(".winnerO")) {
          $(".win").text("Player O won");
        } else if ($("#item1").hasClass(".winnerO") && $("#item4").hasClass(".winnerO") && $("#item7").hasClass(".winnerO")) {
          $(".win").text("Player O won");
        } else if ($("#item2").hasClass(".winnerO") && $("#item5").hasClass(".winnerO") && $("#item8").hasClass(".winnerO")) {
          $(".win").text("Player O won");
        } else if ($("#item3").hasClass(".winnerO") && $("#item6").hasClass(".winnerO") && $("#item9").hasClass(".winnerO")) {
          $(".win").text("Player O won");
        } else if ($("#item3").hasClass(".winnerO") && $("#item5").hasClass(".winnerO") && $("#item7").hasClass(".winnerO")) {
          $(".win").text("Player O won");
        } else if ($("#item1").hasClass(".winnerO") && $("#item5").hasClass(".winnerO") && $("#item9").hasClass(".winnerO")) {
          $(".win").text("Player O won");
        } else if ($("#item3").hasClass(".winnerO") && $("#item5").hasClass(".winnerO") && $("#item7").hasClass(".winnerO")) {
          $(".win").text("Player O won");
        } else {
            return false;
        }
    });
            });
</script>

кроме того, что все отлично работает ссылка на полноценный github https://gist.github.com/Sztrum/3061ceb6b1981c630e9d578f888fbbfb

Answer 1

Вы можете пойти с этим подходом

winnerCombs = [
	[1,2,3],
	[4,5,6],
	[7,8,9],
	[1,4,7],
	[2,5,8],
	[3,6,9],
	[3,5,7],
	[1,5,9]
]

const checkWinner = player => {
  return winnerCombs.some(comb => comb.every(c => $("#item" + c).hasClass(player) ))
}
isWinnerX = checkWinner(".winnerX") // return true if winner is Player X
isWinnerY = checkWinner(".winnerY") // return true if winner is Player Y