玩家在[XO游戏]中获胜后如何停止游戏？

Question

我用 React 创建了这个游戏。 我想在第一个玩家在 React 中赢得 XO 游戏后完成游戏。 换一种说法： 第一个玩家获胜后，下一个玩家不能继续游戏，游戏结束。 这是我的代码：

function App() {
    const [state,setstate]=useState({
        player: "CIRCLE",
        positions: [
            'EMPTY', 'EMPTY','EMPTY',
            'EMPTY', 'EMPTY','EMPTY',
            'EMPTY', 'EMPTY','EMPTY',
        ]
    })

   
    // mark X or O
    function takeTurn(position) {
        const positions=[...state.positions];
        
        positions[position] = state.player;

        setstate({
            player:state.player === 'CIRCLE' ? 'CROSS' : 'CIRCLE',
            positions,
        })
    }


    return(
        <div >
            <div className="player"> Player :  [{state.player}] </div>
          
            <div  className="total">
                <Square position={0}  value={state.positions[0]} takeTurn={takeTurn}  />            
                <Square position={1}  value={state.positions[1]} takeTurn={takeTurn}  />            
                <Square position={2}  value={state.positions[2]} takeTurn={takeTurn}   />            
                <Square position={3}  value={state.positions[3]} takeTurn={takeTurn}  />            
                <Square position={4}  value={state.positions[4]} takeTurn={takeTurn}  />            
                <Square position={5}  value={state.positions[5]} takeTurn={takeTurn}  />            
                <Square position={6}  value={state.positions[6]} takeTurn={takeTurn}  />            
                <Square position={7}  value={state.positions[7]} takeTurn={takeTurn}  />            
                <Square position={8}  value={state.positions[8]} takeTurn={takeTurn}  /> 
            </div>
            <div className="caption">
                Winner = &nbsp; {winner && <Result winner={winner} />}    
            </div>
            <div className="reset"><button onClick={reset} >Reset</button></div>
        </div>
    )
}

export default App;

Answer 1

看来你需要一些东西。

• 确定是否有赢家的方法
• winner 变量的定义

您可以将winner 添加到您的状态，并将获胜者计算行更改为：

Winner = &nbsp; {state.winner && <Result winner={state.winner} />}

要计算获胜者，应用程序需要知道获胜线并检查所有 3 个中的符号是否相同：

function calculateWinner(positions) {
    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 (positions[a] && positions[a] === positions[b] && positions[a] === positions[c]) {
            return positions[a];
        }
    }
    return null;
}

然后你可以在你的takeTurn函数中使用这个return如果已经有获胜者因此不更新董事会，并且每次都重新计算是否有获胜者：

function takeTurn(position) {
    const positions = [...state.positions];
    if (!state.winners) return;

    positions[position] = state.player;

    setstate({
        player: state.player === 'CIRCLE' ? 'CROSS' : 'CIRCLE',
        positions,
        winner: calculateWinner(positions)
    });
}

对于函数式组件，最好不要有一个 state 对象，而是为您通常拥有的每个属性都有一个。这样可以更轻松地正确设置和管理每个状态，因此您可以考虑将状态代码更改为：

const [player, setPlayer] = useState('CIRCLE');
const [positions, setPositions = useState([
        'EMPTY', 'EMPTY','EMPTY',
        'EMPTY', 'EMPTY','EMPTY',
        'EMPTY', 'EMPTY','EMPTY',
      ]);
const [winner, setWinner] = useState(null);

并相应地更新设置器代码。