奥赛罗游戏切换回合在 React.js 中不起作用

Question

我正在使用 React 开发 Othello 游戏，并且我已经实现了切换玩家回合的代码。 它确实从一个切换到另一个（在白色和黑色之间）。 但是，如果即将到来的玩家没有可用的移动，则转牌保持不变。 虽然我已经完成了这一切，但现在我在尝试游戏时遇到了这种情况，虽然它确实会定期切换玩家回合，但我的代码不会考虑在必要时保持不变。 你知道为什么吗？ 我该如何解决？

这是我的代码：

我在哪里改变它：

    setWinnerAndTurn() {
        const history = this.state.history.slice(0, this.state.stepNumber + 1);
        const current = history[this.state.stepNumber];
        const squares = current.squares.slice()

        const blackSquares = []
        const whiteSquares = []
        // Check for a winner
        for (var row=0;row<squares.length;row++) {
            for (var col=0;col<squares[row].length;col++) {
                if (squares[row][col] === 'black') {
                    blackSquares.push([row,col])
                } else if (squares[row][col] === 'white') {
                    whiteSquares.push([row,col])
                }
            }
        }

        // Debug
        //console.log(blackSquares)
        //console.log(whiteSquares)
        

        const total = [blackSquares,whiteSquares]
        const movesAvailable = [[],[]]
        for (var t=0;t<total.length;t++) {
            const currentArray = total[t]
            const returned = this.checkElementsAround(currentArray)
            for (var r=0;r<returned.length;r++) {
                movesAvailable[t].push(returned[r])
            }
        }

        // Debug
        console.log(movesAvailable)


        if (blackSquares.length + whiteSquares.length === squares.length * squares[0].length || (movesAvailable[0] === [] && movesAvailable[1] === [])) {
            // Declare a winner
            if (blackSquares.length !== whiteSquares.length) {
                this.setState({
                    winner: (blackSquares.length > whiteSquares.length) ? 'black' : 'white'
                })
            } else {
                this.setState({
                    winner: 'tie'
                })
            }
        } else {
            // Change turn
            if (movesAvailable[0] === []) {
                this.setState({
                    blackIsNext: false
                })
            } else if (movesAvailable[1] === []){
                this.setState({
                    blackIsNext: true
                })
            } else {
                this.setState({
                    blackIsNext: !this.state.blackIsNext
                })
            }
        }
    }

在我称之为 function 的地方：

render() {
<GameBoard squares={current.squares} onClick={(row,col) => {
                    const elems = this.checkElementsAround(this.checkMoveValidity())
                    //console.log(elems)
                    for (let el=0;el<elems.length;el++) {
                        const turning = this.checkTurningStones(elems[el].directions)
                        if (turning.length !== 0) {
                            if (row === elems[el].coordinates[0] && col === elems[el].coordinates[1]) {
                                this.handleMove(row,col);
                                //console.log(turning)
                                for (var t=0;t<turning.length;t++) {
                                    this.handleMove(turning[t][0],turning[t][1])
                                }
                                this.setWinnerAndTurn()
                                break
                            }
                        }
                    }
                }}/>
}

Answer 1

解决了这个问题，但不知道如何。 那很奇怪...

这是代码：

setWinnerAndTurn() {
        const history = this.state.history.slice(0, this.state.stepNumber + 1);
        const current = history[this.state.stepNumber];
        const squares = current.squares.slice()

        const blackSquares = []
        const whiteSquares = []
        // Check for a winner
        for (var row=0;row<squares.length;row++) {
            for (var col=0;col<squares[row].length;col++) {
                if (squares[row][col] === 'black') {
                    blackSquares.push([row,col])
                } else if (squares[row][col] === 'white') {
                    whiteSquares.push([row,col])
                }
            }
        }
        
        const valids = this.checkElementsAround(this.checkEmptySpaces())

        // checkEmptySpaces returns all the empty spaces in the game
        // checkElementsAround returns all the objects in all directions if there's initially an element in that direction

        const movesAvailable = [0,0]

        for (var t=0;t<2;t++) {
            const isBlack = (t === 0) ? true : false
            for (var v=0;v<valids.length;v++) {
                const valid = valids[v]
                const turned = this.checkTurningStones(valid.directions,isBlack)
                if (turned.length !== 0) {
                    movesAvailable[t]++;
                }
            }
        }

        if (blackSquares.length + whiteSquares.length === squares.length * squares[0].length || (movesAvailable === [0,0])) {
            // Declare a winner
            if (blackSquares.length !== whiteSquares.length) {
                this.setState({
                    winner: (blackSquares.length > whiteSquares.length) ? 'black' : 'white'
                })
            } else {
                this.setState({
                    winner: 'tie'
                })
            }
        } else {
            // Change turn
            if (movesAvailable[0] === 0) {
                this.setState({
                    blackIsNext: false
                })
            } else if (movesAvailable[1] === 0){
                this.setState({
                    blackIsNext: true
                })
            } else {
                this.setState({
                    blackIsNext: !this.state.blackIsNext
                })
            }
        }
    }

我在哪里使用它：

<div className="master-container">
                <GameBoard squares={current.squares} onClick={(row,col) => {
                    const elems = this.checkElementsAround(this.checkEmptySpaces())
                    for (let el=0;el<elems.length;el++) {
                        const turning = this.checkTurningStones(elems[el].directions, this.state.blackIsNext)
                        if (turning.length !== 0) {
                            turning.unshift([row,col])
                            if (row === elems[el].coordinates[0] && col === elems[el].coordinates[1]) {
                                this.handleMove(turning)
                                this.setWinnerAndTurn()
                                // Debug
                                console.log(history.length)
                                break
                            }
                        }                        
                    }
                }}/>

// handleMove -> You give an array of coordinates and it does turn them
// setWinnerAndTurn -> Our function
// checkTurningStones -> I give it the output of checkElementsAround as a parameter, it does return the elements that are to be turned upside down

实际上我知道我是如何修复它的； 问题是，由于我的大多数条件语句都依赖于我的某些函数返回的值，因此如果使用不当，某些条件语句将永远不会返回 true。 这就是我解决的问题。