奥赛罗游戏切换回合在 React.js 中不起作用
Othello Game Switching Turns Doesn't Work in React.js
我正在使用 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
}
}
}
}}/>
}
解决了问题,但不知道如何解决。真奇怪...
代码如下:
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
其实我知道我是怎么修复的;问题是,由于我的大部分条件语句都依赖于从我的某些函数中编辑的值 return,如果使用不当,某些条件语句永远不会 return 为真。我就是这样解决的。
我正在使用 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
}
}
}
}}/>
}
解决了问题,但不知道如何解决。真奇怪...
代码如下:
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
其实我知道我是怎么修复的;问题是,由于我的大部分条件语句都依赖于从我的某些函数中编辑的值 return,如果使用不当,某些条件语句永远不会 return 为真。我就是这样解决的。