中秋时节赏明月，五子棋戏月饼趣 — Flutter 中秋限定版五子棋

2023-09-18
浙江
本文字数：2055 字
阅读完需：约 7 分钟

前言

当中秋时节来临，我们都期待着与亲人朋友共度这个美好的节日。这个时候，除了传统的赏月和品尝美味的月饼，我还有一个特别的建议——尝试一款有趣的 Flutter 五子棋游戏！这款五子棋游戏以中秋为主题，游戏的棋子也可爱地模仿了月饼和玉兔的形状，让我们在这个特别的节日中，一边享受游戏，一边品味团圆的温馨氛围~

代码地址：https://github.com/taxze6/flutter_game_collection/tree/main/gomoku

游戏实现

布局部分

非游戏主体布局部分

游戏引导页的布局非常的简单，通过Column作为主要布局即可，月亮的动画使用自定义的显式动画：AnimatedBuilder+Transform.scale实现即可。该部分内容较为简单，就不贴代码了~

游戏主体界面布局

作为五子棋这样的棋类游戏，棋盘一般都使用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;}

复制代码

逻辑部分

因篇幅原因，只讲解与游戏核心相关的逻辑，其他可查看源码。

第一步 — 定义每个棋子的状态

enum GameState {  Blank,  Black,  White,}

复制代码

第二步 — 定义整个棋盘的数据，通过二维数组

var boardState = List<List<GameState>>.generate(  15,  (i) => List<GameState>.generate(    15,    (j) => GameState.Blank,  ),);

复制代码

第三步 — 检查获胜条件

每下一颗子触发一次。

// 检查游戏胜利条件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;}

复制代码

这样，一个基本的双人对战五子棋就实现啦~

发布于: 3 小时前阅读数: 12

原文链接:【http://xie.infoq.cn/article/6c46c37523eac8018a058b8e7】。文章转载请联系作者。

编程的平行世界

关注

他日若遂凌云志敢笑黄巢不丈夫 2020-10-15 加入

曾许少年凌云志，誓做人间第一流. 一起加入Flutter技术交流群532403442 有好多好多滴学习资料喔～小T目前主攻Android与Flutter, 通常会搞搞人工智能、SpringBoot 、Mybatiys等.

发布

暂无评论

创作场景

中秋时节赏明月，五子棋戏月饼趣 — Flutter 中秋限定版五子棋

前言

游戏实现

布局部分

逻辑部分

编程的平行世界

评论