Tic-tac-toe移动显示在阵列中的另一个插槽中，然后显示在板上.javascript

Question

我正在用javascript创建一个tik-tak-toe游戏。所以现在我让你可以在电脑上玩。我让它工作了，但现在它确实填充了棋盘上的一个字段，我还有一个带有gameState的数组来跟踪棋盘上哪些字段已经被填充。但它现在所做的是，在这个数组中，计算机的移动有时会处于错误的位置。不总是这样，但像50/50，有时它甚至不会出现在阵列中。我把电脑的代码写在下面。fields变量只是一个用于板域的querySelectorAll。

function handleComputerMove() {
const emptyFields = [];
let randomField;
if (!gameActive || !gameState.includes("")) {
return;
}
fields.forEach(function(cell){
if (cell.textContent == '') {
emptyFields.push(cell);
}
});
randomField = Math.ceil(Math.random() * emptyFields.length -1);
emptyFields[randomField].innerHTML = currentPlayer;
handleCellPlayed(randomField);
handleResultValidation();
}

Answer 1

问题是emptyFields中的索引是，而不是(必然(空闲单元格的索引。

因此，您应该将其转换回单元格的索引，这是您可以存储在emptyFields(而不是单元格元素(中的内容。

这不是您的问题，但您应该使用更常见的方法来生成随机整数，因为理论上Math.random()可以返回0。

因此：

fields.forEach(function(cell, i){
if (cell.innerHTML == '') {
emptyFields.push(i); // Store i, instead of cell
}
});
randomField = emptyFields[Math.floor(Math.random() * emptyFields.length)];
fields[randomField].innerHTML = currentPlayer;