一、前言
当中秋时节来临，我们都期待着与亲人朋友共度这个美好的节日。这个时候，除了传统的赏月和品尝美味的月饼，我还有一个特别的建议——尝试一款有趣的Flutter五子棋游戏！这款五子棋游戏以中秋为主题，游戏的棋子也可爱地模仿了月饼和玉兔的形状，让我们在这个特别的节日中，一边享受游戏，一边品味团圆的温馨氛围。
二、游戏实现
1、布局部分
（1）非游戏主体布局部分
游戏引导页的布局非常的简单，通过Column作为主要布局即可，月亮的动画使用自定义的显式动画：AnimatedBuilder+Transform.scale实现即可。
（2）游戏主体界面布局
作为五子棋这样的棋类游戏，棋盘一般都使用GridView.builder来进行构建。我们构建一个15*15的棋盘，格子的总数是225，通过取整和取模来取出每个格子对应的x和y。
GridView.builder(
...
itemCount: 225,
itemBuilder: (context, index) {
int row = index ~/ 15;
int col = index % 15;
return gameButton(row, col);
},
),
而每个格子（gameButton）则需要加上点击事件用于下棋子：
Widget gameButton(int row, int col) {
return GestureDetector(
onTap:{
...
}
child: Container(
color: Colors.blue,
child: Center(
child: gamePiece(row, col),
),
),
);
}
而通过gamePiece的坐标点，我们可以从棋盘的数据中判断当前坐标是什么类型，然后展示对应的图标（月饼和玉兔）。
gamePiece(int row, int col) {
if (boardState[row][col] == GameState.Black)
return Dot(Colors.black);
else if (boardState[row][col] == GameState.White)
return Dot(Colors.white);
else
return null;
}
2、逻辑部分
因篇幅原因，只讲解与游戏核心相关的逻辑，其他可查看源码。
（1）定义每个棋子的状态
enum GameState {
Blank,
Black,
White,
}
（2）定义整个棋盘的数据（二维数组）
var boardState = List<List<GameState>>.generate(
15,
(i) => List<GameState>.generate(
15,
(j) => GameState.Blank,
),
);
（3）检查获胜条件
每下一颗子触发一次。
// 检查游戏胜利条件
void checkWinningCondition(int row, int col, GameState gameState) {
// 如果移动次数小于5，不可能有获胜者，直接返回
if (_moveCount < 5) {
return;
}
// 检查当前位置是否包含当前玩家的标记
if (boardState[row][col] == gameState) {
// 检查从底部左侧到顶部右侧的对角线
if (countConsecutiveStones(row, col, 1, -1) +
countConsecutiveStones(row, col, -1, 1) >=
4) {
setWinner(gameState); // 设置获胜者
return;
}
// 检查从顶部左侧到底部右侧的对角线
if (countConsecutiveStones(row, col, -1, -1) +
countConsecutiveStones(row, col, 1, 1) >=
4) {
setWinner(gameState); // 设置获胜者
return;
}
// 检查水平方向
if (countConsecutiveStones(row, col, 0, 1) +
countConsecutiveStones(row, col, 0, -1) >=
4) {
setWinner(gameState); // 设置获胜者
return;
}
// 检查垂直方向
if (countConsecutiveStones(row, col, 1, 0) +
countConsecutiveStones(row, col, -1, 0) >=
4) {
setWinner(gameState); // 设置获胜者
return;
}
}
// 如果移动次数达到225，表示平局
if (_moveCount == 225) {
print('平局');
setWinner(GameState.Blank); // 设置平局
return;
}
}
最核心的检测部分：
// 计算在给定位置开始，特定方向上连续相同棋子类型的数量
int countConsecutiveStones(int row, int col, int rowIncrement, int colIncrement) {
// 初始化一个计数器
int count = 0;
// 获取起始位置的棋子类型
GameState index = boardState[row][col];
// 遍历最多四个相邻格子，以查找连续相同的棋子类型
for (int i = 1; i <= 4; i++) {
// 检查下一个要检查的格子是否在游戏棋盘的有效范围内
if (inBounds(row + (rowIncrement * i)) && inBounds(col + (colIncrement * i))) {
// 检查下一个格子上的棋子类型是否与起始位置上的棋子类型相同
if (boardState[row + (rowIncrement * i)][col + (colIncrement * i)] == index) {
// 如果相同，增加计数
count++;
} else {
// 如果不同，中断循环，因为我们只关心连续相同棋子类型的数量
break;
}
}
}
// 返回在指定方向上连续相同棋子类型的数量
return count;
}
// 检查索引是否在有效范围内
bool inBounds(int index) {
return index >= 0 && index < boardState.length;
}
三、效果图
四、总结
这样，一个基本的双人对战五子棋就实现啦。详细源代码请点击下载：Flutter开发五子棋游戏源码