Javascript 如何在我的react应用程序中创建与计算机功能对抗的游戏

首先让我说，谢谢你给我的任何帮助/建议。我真的很感激。 我在react（主要来自youtube）中创建了一个tic-tac-toe应用程序。它目前只能作为本地多人游戏使用。我想添加一个选项，让玩家在本地多人游戏和人工智能之间进行选择。人工智能不需要先进，只要随机挑选一个可用空间就可以了

我的Game.js文件如下所示：

import React, { Component } from 'react'
import Board from './Board';

export default class Game extends Component {
     constructor(props){
        super(props);
        this.state= {
            xIsNext: true,
            stepNumber: 0,
            history: [
                { squares: Array(9).fill(null) }
            ]
        }
    }
    jumpTo(step){
        this.setState({
            stepNumber: step,
            xIsNext: (step%2)===0
        })

    }



    handleClick(i) {
        const history = this.state.history.slice(0,this.state.stepNumber+1);
        const current = history[history.length-1];
        const squares = current.squares.slice();
        const winner = calculateWinner(squares);
        //stops player from picking a chosen square
        if(winner || squares[i]){
            return;
        }
        squares[i] = this.state.xIsNext?'X':'0';
        this.setState({
            history: history.concat({
                squares: squares
            }),
            xIsNext: !this.state.xIsNext,
            stepNumber: history.length
        });
    }
    render() {
        const history = this.state.history;
        const current = history[this.state.stepNumber];
        const winner= calculateWinner(current.squares);
        const moves= history.map((step, move)=>{
            const desc = move? 'Go to #' + move:'Choose a square to begin the game';
            return (
                <li key={move}>
                    <button onClick={()=>{this.jumpTo(move)}}>
                            {desc}
                    </button>
                </li>
            )
        });
        let status;
        if(winner){
            status = 'Winner is ' + winner
        } else{
            status = 'Next Player is ' + (this.state.xIsNext?'X':'0');
        }



        return (
            <div className="game">
                <div className="game-board">
                    <Board onClick={(i)=>this.handleClick(i)}
                    squares={current.squares} />
                </div>
                    <div>{status}</div>
                    <ul>{moves}</ul>
            </div>
        )
    }
}
//sets win condition
function calculateWinner(squares){
    const lines = [
        [0, 1, 2],
        [3, 4, 5],
        [6, 7, 8],
        [0, 3, 6],
        [1, 4, 7],
        [2, 5, 8],
        [0, 4, 8],
        [2, 4, 6]
    ];
    for(let i=0;i<lines.length;i++){
        const [a,b,c] = lines[i];
        if(squares[a] && squares[a] === squares[b] && squares[b] === squares[c]){
         return squares [a];
        }
    }

   return null;
}

import React，{Component}来自“React”
从“./板”导入板；
导出默认类游戏扩展组件{
建造师（道具）{
超级（道具）；
此。状态={
下一个：是的，
步骤编号：0，
历史：[
{squares:Array（9）.fill（null）}
]
}
}
跳到（步骤）{
这是我的国家({
步骤编号：步骤，
xIsNext：（步骤%2）==0
})
}
handleClick（一）{
const history=this.state.history.slice（0，this.state.stepNumber+1）；
const current=历史[历史长度-1]；
const squares=当前的.squares.slice（）；
常量赢家=计算赢家（平方）；
//阻止玩家拾取选定的方块
如果（获胜者| |平方[i]）{
返回；
}
正方形[i]=this.state.xIsNext？'X'：'0'；
这是我的国家({
历史：history.concat({
正方形：正方形
}),
xIsNext:！this.state.xIsNext，
步骤号：history.length
});
}
render（）{
const history=this.state.history；
const current=history[this.state.stepNumber]；
const winner=calculateWinner（当前平方）；
常量移动=历史。映射（（步骤，移动）=>{
const desc=move？转到#？+移动：'选择一个方块开始游戏'；
返回(

{this.jumpTo（move）}>
{desc}

)
});
让状态；
国际单项体育联合会（优胜者）{
状态='获胜者是'+获胜者
}否则{
状态='下一个玩家是'+（this.state.xIsNext'X'：'0'）；
}
返回(
这个.handleClick（i）}
正方形={current.squares}/>
{状态}
{moves}
)
}
}
//设定获胜条件
函数计算器（平方）{
常量行=[
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
];
对于（让i=0；i将可选参数添加到
handleClick（）
，我们称之为
computerisgo
。在
handleClick（）
的末尾，添加以下代码：

if ( ! computerIsGoing ) {
    this.computersTurn()
}

computersTurn（）
函数的外观如下（伪代码）：

这将导致
computersTurn（）
函数在用户每次单击一个方块后运行。
听起来你不是在寻找一个完美的AI，但是如果你想尝试，你可以通过构建一个包含所有游戏状态的最小-最大树来创建一个。类似这样：或者这样：或者这样：不，我正在寻找一个简单的ui，它只是随机选择一个未被占用的方块，而不是尝试创建一个电脑打败了我哈哈
function computerIsGoing() {
    // Look at all the squares, find all the ones not yet filled in, pick a random one (e.g. 5)
    let n = 5; // Assume
    this.handleClick( n, true );
}