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]