При написании крестиков - ноликов столкнулся с одной очень интересной проблемой. Дело в том , что при попытке "перекрывания" двух ноликов либо крестиков, победа засчитывается в пользу того игрока , который мог выиграть уже на следующий ход. Вот пока не знаю, как исправить ситуацию.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tic-tac-toe</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="game_container">
<input type="text" id="print_out" value="">
<table>
<tr>
<td><input type="text" id="cell_1" value=""></td>
<td><input type="text" id="cell_2" value=""></td>
<td><input type="text" id="cell_3" value=""></td>
</tr>
<tr>
<td><input type="text" id="cell_4" value=""></td>
<td><input type="text" id="cell_5" value=""></td>
<td><input type="text" id="cell_6" value=""></td>
</tr>
<tr>
<td><input type="text" id="cell_7" value=""></td>
<td><input type="text" id="cell_8" value=""></td>
<td><input type="text" id="cell_9" value=""></td>
</tr>
</table>
<button id="new_game">New Game</button>
</div>
<p id="result"></p>
<script src="engine.js"></script>
</body>
</html>
https://hostingkartinok.com/show-ima...355a70536d5d3e
var cellPackage = [];
for (var i = 1; i < 10; i++) {
var cell = "cell_" + i;
cell = document.getElementById("cell_" + i);
cellPackage.push(cell);
}
var print_out = document.getElementById("print_out");
var new_game = document.getElementById("new_game");
var result = document.getElementById("result");
var player1 = "Turn: Player 1";
var player2 = "Turn: Player 2";
new_game.addEventListener("click", function() {
print_out.value = player1;
result.innerHTML = "";
window.location.reload();
for (var i = 0; i < cellPackage.length; i++) {
cellPackage[i].value = "";
cellPackage[i].removeAttribute("disabled", "disabled");
}
});
function PlayerOne(player) {
print_out.value = player;
for (var i = 0; i < cellPackage.length; i++) {
cellPackage[i].addEventListener("click", function() {
this.value = "X";
this.setAttribute("disabled", "disabled");
if ((cellPackage[0].value == "X" && cellPackage[1].value == "X" && cellPackage[2].value == "X") ||
(cellPackage[3].value == "X" && cellPackage[4].value == "X" && cellPackage[5].value == "X") ||
(cellPackage[6].value == "X" && cellPackage[7].value == "X" && cellPackage[8].value == "X") ||
(cellPackage[0].value == "X" && cellPackage[4].value == "X" && cellPackage[8].value == "X") ||
(cellPackage[2].value == "X" && cellPackage[4].value == "X" && cellPackage[6].value == "X") ||
(cellPackage[0].value == "X" && cellPackage[3].value == "X" && cellPackage[6].value == "X") ||
(cellPackage[1].value == "X" && cellPackage[4].value == "X" && cellPackage[7].value == "X") ||
(cellPackage[2].value == "X" && cellPackage[5].value == "X" && cellPackage[8].value == "X")) {
result.innerHTML = "Player1 won the game! Click 'New Game' to restart";
return true;
} else {
PlayerTwo(player2);
}
});
}
}
function PlayerTwo(player) {
print_out.value = player;
for (var i = 0; i < cellPackage.length; i++) {
cellPackage[i].addEventListener("click", function() {
this.value = "O";
this.setAttribute("disabled", "disabled");
if ((cellPackage[0].value == "O" && cellPackage[1].value == "O" && cellPackage[2].value == "O") ||
(cellPackage[3].value == "O" && cellPackage[4].value == "O" && cellPackage[5].value == "O") ||
(cellPackage[6].value == "O" && cellPackage[7].value == "O" && cellPackage[8].value == "O") ||
(cellPackage[0].value == "O" && cellPackage[4].value == "O" && cellPackage[8].value == "O") ||
(cellPackage[2].value == "O" && cellPackage[4].value == "O" && cellPackage[6].value == "O") ||
(cellPackage[0].value == "O" && cellPackage[3].value == "O" && cellPackage[6].value == "O") ||
(cellPackage[1].value == "O" && cellPackage[4].value == "O" && cellPackage[7].value == "O") ||
(cellPackage[2].value == "O" && cellPackage[5].value == "O" && cellPackage[8].value == "O")) {
result.innerHTML = "Player2 won the game! Click 'New Game' to restart";
return true;
} else {
PlayerOne(player1);
}
});
}
}
PlayerOne(player1);
