Я не знаю, как проверить условия выигрыша. Может кто-нибудь объяснит мне шаг за шагом. Я пришлю свой код. Я тоже новичок в программировании.
prntscr.com/m06ew1
<!DOCTYPE html>
<html>
<head>
<title>Tic-Tac-Toe</title>
<link rel = "stylesheet" href = "TicTacToe.css">
</head>
<body>
<h1> Tic-Tac-Toe game!</h1>
<div class = "grid">
<div class = "grid-item" id = "grid1" ></div>
<div class = "grid-item" id = "grid2" ></div>
<div class = "grid-item" id = "grid3" ></div>
<div class = "grid-item" id = "grid4" ></div>
<div class = "grid-item" id = "grid5" ></div>
<div class = "grid-item" id = "grid6" ></div>
<div class = "grid-item" id = "grid7" ></div>
<div class = "grid-item" id = "grid8" ></div>
<div class = "grid-item" id = "grid9" ></div>
</div>
</body>
<script type = "text/javascript" src = "jquery-3.3.1.js" ></script>
<script type = "text/javascript" src = "TicTacToe.js" ></script>
<aside>
<h2>History</h2>
</aside>
<section>Player <span id = "player"> <b>1</b> </span> it's your
turn!</section>
<footer>
Copyright Irfan - 2018
</footer>
</html>
JSFILE
$("document").ready (function(){
const player1 = 'X'
const player2 = 'O'
CurrentPlayer = 1
$(".grid-item").click (function(){
if (CurrentPlayer == 1) {
$(this).html(player1);
$("#player").html("<b>2<b>")
CurrentPlayer = 2
}
else if ( CurrentPlayer == 2) {
$(this).html(player2);
$("#player").html("<b>1<b>")
CurrentPlayer =1
}
});
});
вот мой код, и я привожу ссылку на экран для печати выше. Это для игры в тик-так с буксировкой sdfafsdfdfsafdfasdafsdafafdfasddasfasdfafsdfda
Я пытался ... но я не понимаю никаких ответов, поэтому я здесь



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


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>
Просто поищите в гугле, есть много ответов.