Проверка того, выиграл ли текущий игрок в крестики-нолики в JavaScript ⇐ Html

[Anonymous]

Я делаю простые крестики-нолики с помощью HTML CSS и JavaScript. Компьютерный плеер с искусственным интеллектом не реализован. Всего два игрока по очереди. Моя функция checkWinner не работает, и я понятия не имею, как определить победителя. Кто-то предложил мне создать двумерный массив для хранения выигрышных комбинаций, что я и сделал в переменной с именем winCombos. Я перебираю их все и сравниваю с currentPlayer в разных местах массива ячеек, но это не работает. Наверное, я делаю это совершенно неправильно. Может кто-нибудь мне помочь?

Код: Выделить всё

var player1 = "X";
var player2 = "O";
var cells = Array.from(document.querySelectorAll(".cell"));
var currentPlayer = player1;
var winner = "";
var winCombos = [[0,1,2],[3,4,5],[6,7,8],[0,3,6],[1,4,7],[2,5,8],[0,4,8],[2,4,6]];

function checkWinner(arr, curPlayer){
arr.forEach(function(subArr){
var counter = 0;
subArr.forEach(function(elem){
if(cells[elem] === curPlayer){
counter++;
if(counter == 2 ){
winner = curPlayer;
alert(winner);
}
}
});
});
}

function move(e){
if(e.target.className === "cell" && e.target.textContent === ""){
e.target.textContent = currentPlayer;
checkWinner(winCombos, currentPlayer);
currentPlayer = (currentPlayer === player1)?player2:player1;
}

}

document.querySelector(".board").addEventListener("click", move);

Код: Выделить всё

.container{
width: 400px;
height: 480px;
background: tomato;
margin: 50px auto;
text-align: center;
padding: 10px;
}

.board{
width: 90%;
margin: 20px auto;
}

.board .cell{
width: 118px;
height: 100px;
float: left;
text-align: center;
line-height: 80px;
font-size: 80px;
font-weight: bold;
border: 1px solid #fff;
color: #fff;
}

Код: Выделить всё

JS Bin

Подробнее здесь: https://stackoverflow.com/questions/520 ... javascript