奧賽羅游戲切換回合在 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。 這就是我解決的問題。