javascript - 计算机在井字游戏React.js中始终移动到随机的空单元格？

我正在尝试用Javascript打井字游戏，但我却陷入了计算机移动的困境。

我的游戏板是一个空数组，我这样填充board: new Array(9).fill("")

然后为了扭角羚，我做这个

board: state.board.map((item, index) => index === action.index ? item = action.player : item)

因此，我在板上进行映射，并检查单元格的index是否等于传递的index。如果是的话，我要用'X'或'O'替换空白，如果不是，它将保留为空单元格。

我的球员回合功能看起来像这样

userTurn (index) {
    if(this.props.gameFinished) {return}
    if(this.props.board[index] === '') {
        this.props.takeTurn(index, this.props.player);
        this.computerTurn();
    }
}

然后我的电脑转

computerTurn() {
     const randomNumber =  Math.floor(Math.random() * 10);

     if(this.props.board[randomNumber] === '') {
        this.props.takeTurn(randomNumber, this.props.computer);
      }
    }

在我的计算机转弯功能中，我不确定this.props.board[randomNumber]不是空字符串时该怎么办。因为如果现在不为空，则什么也不会发生，并且计算机也不会在板上放置它的符号。

到目前为止，我试图像这样添加else语句

if(this.props.board[randomNumber] === '') {
            this.props.takeTurn(randomNumber, this.props.computer);
        } else {
            this.computerTurn();
        }

但是有时它会导致计算机移动以某种方式放置在非空单元上。

因此，问题是如何将计算机移动到游戏板上？

最佳答案

制作一个新的数组
遍历电路板阵列并将空单元格的索引推入该阵列
现在您有了一个空单元格数组，将随机数设置为0到该数组的大小之间，现在您可以保证只剩下一个空单元格


代码：

computerTurn() {
    cells = [];
    for (i = 0; i < 10; i++) {
      if (this.props.board[i] === "") cells.push(i);
    }
    const randomNumber = Math.floor(Math.random() * cells.length);
    this.props.takeTurn(cells[randomNumber], this.props.computer);
  }

关于javascript - 计算机在井字游戏React.js中始终移动到随机的空单元格？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52309935/