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

这篇具有很好参考价值的文章主要介绍了中秋时节赏明月,五子棋戏月饼趣 — Flutter中秋限定版五子棋。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

前言

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

效果图:

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

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

游戏实现

布局部分
  • 非游戏主体布局部分

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

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

  • 游戏主体界面布局

作为五子棋这样的棋类游戏,棋盘一般都使用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,如果您觉得文章对您有价值,希望您能给我的文章点个❤️,有问题需要联系我的话:我在这里 。如果您觉得文章还差了那么点东西,也请通过关注督促我写出更好的文章~万一哪天我进步了呢?😝文章来源地址https://www.toymoban.com/news/detail-736782.html

到了这里,关于中秋时节赏明月,五子棋戏月饼趣 — Flutter中秋限定版五子棋的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Pygame 五子棋编程

    编程说明:  pygame编程五子棋程序。 设计流程 :新建棋盘,落子画圆,校验五子相连,赢家信息显示,自动重启下一局,程序打包成exe。 关键点 :     新建棋盘:考虑线的间隔,需提前计算好。     落子画圆:考虑黑白交替,已落子坐标位不可重复落子。     校验五子

    2024年02月08日
    浏览(26)
  • 五子棋游戏

    一。画出棋盘x和y  横和竖个15条线,画出中央的小点 二,创建列表,计算出x和y的当前坐标的位置,且存储二维列表的值,画出圆形白色棋子 三.黑白棋子交替出现 四,提示已经被其他棋子占领了,不能重复占领 五。创建检测五子相连的函数  def  check 六.,实现水平向左和

    2024年02月05日
    浏览(19)
  • 鸿蒙小案例-五子棋

    刚开始以为挺简单的,越写越…emo 因为代码有点多,所以这里就简单讲下逻辑,文末贴上代码 逻辑只是我个人想的,不代表只有这一种实现方式,有其他想法可以在下面留言 另外功能做的比较简单,有一些没实现,但是基本功能都有,大家可以自行优化 组件就比较简单,采

    2024年02月21日
    浏览(16)
  • C++制作五子棋

    正文 01 思路 我没有选择专业的五子棋棋型,用我自己的逻辑(初高中玩五子棋的方法),去实现简单的人机对战。 首先因为要计算五子棋每一步的分数,那么你就要分析每一步形成的棋盘,以下图为例: 当你即将在红色方框区域内落子时,通过数据处理获取四个方向的棋子

    2024年02月11日
    浏览(14)
  • python实现《五子棋》

            今天突然心血来潮,想全程自己写一个小游戏(毕竟对于一个才接触python不到一个月的小白来说,还是比较为难,虽然不算是完全成功,因为棋盘大小和布局还是借鉴了其它博主的,但这都是小问题,重要是其它的都是自己写的嘛!!!(咦,这小编真能扯,还不上

    2024年02月12日
    浏览(11)
  • 在线五子棋对战

    目录   数据管理模块(数据库设计) 前端界面模块 业务处理模块 会话管理模块网络通信模块(session,cookie) 在线管理模块 房间管理模块 用户匹配模块 项目扩展 数据库中有可能存在很多张表,每张表中管理的数据⼜有不同,要进⾏的数据操作也各不相同,因此我们可以为每⼀

    2024年02月14日
    浏览(17)
  • python五子棋(附代码)

    基于pygame实现五子棋 掌握核心算法,怎么判断是否连成五个以及落子位置的模糊判断 1.只需要判断最后一个棋子周围4个方向(上下,左右,左上右下,右下左上)这些方向棋子的颜色是否和最后一个落子颜色连续一致!(详情看代码) 2.落子位置的模糊判断对下棋的体验感

    2024年02月04日
    浏览(18)
  • python实现简单五子棋

     规则 :用鼠标下子,黑子白子交替下子 核心 :1、使用turtle库画棋盘            2、turtle库中的onscreenclick()函数,实现鼠标点击 详细步骤: 用turtle()库fd()函数实现画直线,tracer(0)消除动画效果 定义一个二维数组,也就是列表来对应棋盘上的落子情况,没有子为0,黑子为

    2024年02月05日
    浏览(12)
  • python 五子棋 pygame

    自己用python写的五子棋 ,辛辛苦苦写的详细注释,等以后再回来看看自己的思路  用的函数式编程,面向对象不熟练,当时的想法是先通过函数式编程写出来,把思路整理一下, 理清楚过程事件了,再用面向对象重写,也算是再梳理一遍  用了第三方库pygame 有个问题,如果

    2023年04月23日
    浏览(23)
  • 五子棋简易AI算法

    一、基本思想:五子棋存在多种连接方式,这也就决定了每一个空位的权值有所不同,我们对五子棋的不同连接方式设置权值,然后遍历棋盘,算出每一个空位上的权值,选择权值最大的空位下棋,所以这个算法的关键就在于:1.设置并且存储不同连接方式及其对应的权值

    2024年02月08日
    浏览(14)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包