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

前语

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

效果图：

代码地址：github.com/taxze6/flut…

游戏完成

布局部分

• 非游戏主体布局部分

游戏引导页的布局非常的简略，经过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;
}

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

关于我

Hello，我是Taxze，假如您觉得文章对您有价值，期望您能给我的文章点个❤️，有问题需求联系我的话：我在这里，也能够经过的新的私信功能联系到我。假如您觉得文章还差了那么点东西，也请经过重视督促我写出更好的文章~万一哪天我前进了呢？