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

Question

我正在React中开发一款《奥赛罗》游戏，我已经实现了切换玩家回合的代码。它确实会从一个切换到另一个(在白色和黑色之间(。但是，如果即将到来的玩家没有可用的移动，回合将保持不变。我以为我已经完成了这一切，但现在我在尝试游戏时遇到了这样的情况，尽管它确实会定期切换玩家回合，但我的代码并不考虑在必要时保持不变。你知道为什么吗？我该如何解决？

这是我的代码：

我在哪里更改：

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
})
}
}
}

在我调用函数的地方：

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。这就是我解决的问题。