这篇博客文章是一系列博客文章的第2部分，详细介绍了如何使用react.js构建基于回合的“ tag”游戏。 我建议在继续之前阅读本系列博客的第1部分。 话虽这么说…欢迎回来！
简要回顾
我们上次中断的地方是构建游戏板，设置游戏状态以跟踪游戏板上的玩家位置，并构建了控制玩家移动的功能。 截至目前，人类控制的玩家使用箭头键移动，而我们的计算机控制的玩家则在棋盘上随机移动。 但是，游戏中没有基于回合的机制，这是我们定义的可交付成果之一。 因此，让我们构建下一个！
该轮到谁啦？
您可能还记得在上一个博客中我们使用redux来更新游戏板上的玩家位置。 为了跟踪轮到谁，我再次使用redux来控制游戏的状态。 具体来说，我想知道它是谁的转弯，以及转弯还剩下多少步。
const initialState = {
玩家：4
它：4
whoTurn：1，//轮到谁了
动作：3，//此回合中还有多少个动作
gameOver：否，
}
因为每个玩家在回合中只能移动三个空格，所以我们设置了一个简化器案例，该案例将使存储在游戏状态中的当前移动减少一。 就本博客而言，我们仅关注“ DECREASE_MOVES”情况。
const gameReducer =（state = initialState，action）=> {
开关（action.type）{
案例“ NEXT_TURN”：
返回{...状态，其轮转：action.whoseTurn}
情况“ DECREASE_MOVES”：
return {...状态，移动：state.moves-1} //减少移动
情况“ RESET_MOVES”：
返回{...状态，移动：3}
案例“ READY_PLAYER_ONE”：
返回{...状态，其轮换：1}
案例“ TAG_PLAYER”：
返回{...状态，它：action.it}
默认值：
返回状态
}
}
为了使用这种情况，我们需要一个动作来实现这种情况，以减少商店中当前的移动。 每当玩家移动时，都会调用此动作。
导出函数reduceMoves（）{
返回{
类型：“ DECREASE_MOVES”
}
}
仅当玩家在回合中耗尽所有移动（将回合计数器设为0）后，他们的回合才会结束，下一个玩家回合将开始。 进行此检查的最简单方法是在玩家移动后运行一个功能，以查看“移动”是否等于零。 现在，转弯顺序应如下所示：
- 玩家选择要移动的位置。
2.运行检查以确保该位置有效（未被玩家占用或超出游戏板的范围）。
3.如果有效，则玩家移至该位置。
4.游戏状态下的移动计数器递减。
5.运行检查，看是否还有任何移动。
checkMoves =（）=> {
如果（this.props.game.moves === 0）{
console.log（'此玩家转身结束'）;
this.endPlayerTurn（）
}其他{
console.log（剩余$ {this.props.game.moves}）
}
}
如果仍然有移动，则玩家可以再次移动。 如果没有移动，那就轮到下一个玩家了。
切换到下一个播放器
在我们可以切换到下一个玩家之前，我们需要做两件事。 我们需要将移动计数器重置为三个，然后将状态更新为下一个玩家编号。 为此，我们可以创建一个函数，该函数将调用两个函数，一个“ resetMoves” reduce动作和一个“ nextTurn”函数。
endPlayerTurn =（）=> {
console.log（“结束转弯”）
this.props.resetMoves（）//这是一个减速器动作
this.nextTurn（）
}
nextTurn =（）=> {
让currentPlayer = this.getPlayerObject（this.props.game.whoseTurn）
如果（currentPlayer === this.props.players [this.props.players.length -1]）{
让readyNextPlayer = this.props.players [0]
返回this.props.nextTurn（readyNextPlayer.id）
}其他{
让playerIndex = this.props.players.findIndex（player => {
返回玩家=== currentPlayer
}）
让readyNextPlayer = this.props.players [playerIndex + 1]
返回this.props.nextTurn（readyNextPlayer.id）
}
}
重置动作
还记得我们之前看过的减速器吗？ 您是否注意到“ RESET_MOVES”的情况？ 我们可以通过采取行动重置举动来使用这种情况。 当游戏减速器运行这种情况时，我们将移动计数器设置回三。
导出函数resetMoves（）{
返回{
类型：“ RESET_MOVES”
}
}
//摘自减速器//
情况“ RESET_MOVES”：
返回{...状态，移动：3}
下回合
下一个回合功能首先必须检查当前玩家ID是否等于玩家总数。 如果是这种情况，那么下一位玩家将成为第一位玩家。 否则，我们只需将玩家ID增1，即可增加到下一个玩家ID号。 为了将游戏状态更新为新玩家，我们随后将该玩家编号作为参数传递给称为“ nextTurn”的减速器动作。 这将在游戏状态下更新“ whoseTurn”。
导出函数nextTurn（payload）{
返回{
类型：“ NEXT_TURN”，
whoTurn：有效载荷，
}
}
//摘自减速器//
案例“ NEXT_TURN”：
返回{...状态，其轮转：action.whoseTurn}
结论
在游戏开发的这一点上，我们现在拥有可以按回合顺序在棋盘上移动的玩家。 在接下来的博客中，我计划介绍如何为计算机玩家构建AI，为游戏标记机制以及此游戏开发的其他方面。 如果您想知道这些博客何时发布，请单击顶部的关注按钮。
查看此游戏演示视频的当前状态：
