[Solved] Need help to check winning conditions for a Tic-Tac-Toe game in Js [closed]


var currentPlayer = "one";
var lastGridItem = "";

// Attach click event to grid-item
$(".grid-item").click(function() {

  // Exit if disabled
  if ($(this).hasClass("disabled")) {
    return
  }

  // Determine if player has selected that grid-item
  player = $(this).attr("player");

  // Exit if already chosen by player
  if ( player == "one" || player == "two" ) {
    return
  }

  // Assign current player's choice of this grid-item
  $(this).attr("player", currentPlayer);

  // Save grid-item index so it can be undone
  lastGridItem = $(this).attr("grid-value");

  // Move to next player
  switchPlayer();

  // Check for a winner
  checkWinner($(this));

});


function checkWinner(grid_item) {

  $(".grid-item").each(function() {

    // Get play who has selected grid-item
    player = $(this).attr("player");
    i = $(this).attr("grid-value");

    // Exit if player has not been set for this grid-item 
    if (player == null || player == "") {
      return
    }

    // Check if row assigned to player
    // We only need to check do this once per row, using the far right grid-items
    if (i % 3 === 0) {

      // By using the far right grid-items, we know we need to check the ones with an index 1 lower and 2 lower
      if (player == getPlayer(i - 1) && player == getPlayer(i - 2)) {
        wonMessage(player);
      }

    }

    // Check for columns
    // We only need to do this for the bottom three grid-items
    if (i > 6) {

      // Check if the grid-items that are in that column have been assigned to the same player
      if (player == getPlayer(i - 6) && player == getPlayer(i - 3)) {
        wonMessage(player);
      }

    }

    //Check for diagonals, only do this if checking center square
    if (i == 5) {

      // Check top left and bottom right against centerPlayer
      if (player == getPlayer(1) && player == getPlayer(9)) {
        wonMessage(player);
      }

      // Check centerPlayer against top right and bottom left
      else if (player == getPlayer(3) && player == getPlayer(7)) {

        wonMessage(player);

      }

    }

  });


}


// Gets player assigned to grid-item
function getPlayer(i) {
  return $("[grid-value=" + parseInt(i) + "]").attr("player")
}


// Prints winning message and disables game
function wonMessage(player) {
  $("#winner").text("Player " + player + " has won");
  $(".grid-item").addClass("disabled");
}


// Reset game
$("#reset").click( function() {

  $(".grid-item").attr("player", "").removeClass("disabled");
  $("#winner").text("");
  currentPlayer = "one";

});


// Switch player
function switchPlayer() {

  if (currentPlayer == "one") {
    currentPlayer = "two";
  } else {
    currentPlayer = "one";
  }
  
}


// Undo last move
$("#undo").click( function() {

  // Clear player on grid-item
  $(".grid-item[grid-value=" + lastGridItem + "]").attr("player", "");
  
  // Re-enable if disabled
  $(".grid-item.disabled").removeClass("disabled");
  $("#winner").text("");
  
  switchPlayer();

});
.grid {
  width: 165px;
}

.grid-item {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  display: inline-block;
}

.grid-item.disabled {
  opacity: 0.7;
}

.grid-item[player=one] {
  background: red;
}

.grid-item[player=two] {
  background: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1> Tic-Tac-Toe game!</h1>
<hr>
<strong>Instructions: </strong> click on grid to change player selection. <button id="undo">Undo</button>  <button id="reset">Reset</button>


<hr>
<p id="winner"></p>
<div class="grid">
  <div class="grid-item" grid-value="1"></div>
  <div class="grid-item" grid-value="2"></div>
  <div class="grid-item" grid-value="3"></div>
  <div class="grid-item" grid-value="4"></div>
  <div class="grid-item" grid-value="5"></div>
  <div class="grid-item" grid-value="6"></div>
  <div class="grid-item" grid-value="7"></div>
  <div class="grid-item" grid-value="8"></div>
  <div class="grid-item" grid-value="9"></div>
</div>

solved Need help to check winning conditions for a Tic-Tac-Toe game in Js [closed]