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

2023-10-05 14:04

本文主要是介绍中秋时节赏明月,五子棋戏月饼趣 — Flutter中秋限定版五子棋,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前言

当中秋时节来临,我们都期待着与亲人朋友共度这个美好的节日。这个时候,除了传统的赏月和品尝美味的月饼,我还有一个特别的建议——尝试一款有趣的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);elsereturn 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,如果您觉得文章对您有价值,希望您能给我的文章点个❤️,有问题需要联系我的话:我在这里 。如果您觉得文章还差了那么点东西,也请通过关注督促我写出更好的文章~万一哪天我进步了呢?😝

这篇关于中秋时节赏明月,五子棋戏月饼趣 — Flutter中秋限定版五子棋的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/151344

相关文章

Flutter 进阶:绘制加载动画

绘制加载动画:由小圆组成的大圆 1. 定义 LoadingScreen 类2. 实现 _LoadingScreenState 类3. 定义 LoadingPainter 类4. 总结 实现加载动画 我们需要定义两个类:LoadingScreen 和 LoadingPainter。LoadingScreen 负责控制动画的状态,而 LoadingPainter 则负责绘制动画。

Flutter Button使用

Material 组件库中有多种按钮组件如ElevatedButton、TextButton、OutlineButton等,它们的父类是于ButtonStyleButton。         基本的按钮特点:         1.按下时都会有“水波文动画”。         2.onPressed属性设置点击回调,如果不提供该回调则按钮会处于禁用状态,禁用状态不响应用户点击。

8阶段项目:五子棋(附带源码)

8阶段项目:五子棋 8.1-技术实现 1.静态变量 静态变量只能定义在类中,不能定义在方法中。静态变量可以在static修饰的方法中使用,也可以在非静态的方法中访问。主要解决在静态方法中不能访问非静态的变量。 2.静态方法 静态方法就相当于一个箱子,只是这个箱子中装的是代码,需要使用这些代码的时候,就把这个箱子放在指定的位置即可。   /*** 静态变量和静态方法*/public cl

flutter开发实战-flutter build web微信无法识别二维码及小程序码问题

flutter开发实战-flutter build web微信无法识别二维码及小程序码问题 GitHub Pages是一个直接从GitHub存储库托管的静态站点服务,‌它允许用户通过简单的配置,‌将个人的代码项目转化为一个可以在线访问的网站。‌这里使用flutter build web来构建web发布到GitHub Pages。 最近通过flutter build web,通过发布到GitHu

Flutter 中的低功耗蓝牙概述

随着智能设备数量的增加,控制这些设备的需求也在增加。对于多种使用情况,期望设备在需要进行控制的同时连接到互联网会受到很大限制,因此是不可行的。在这些情况下,使用低功耗蓝牙(也称为 Bluetooth LE 或 BLE)似乎是最佳选择,因为它功耗低,在我们的手机中无处不在,而且无需连接到更广泛的网络。因此,蓝牙应用程序的需求也在不断增长。 通过阅读本文,您将了解如何开始在 Flutter 中开

flutter开发多端平台应用的探索 下 (跨模块、跨语言通信之平台通道)

前文 Flutter 是一个跨平台的开发框架,它允许开发者使用相同的代码库来构建 iOS、Android、Web 和桌面应用程序。 上文flutter开发多端平台应用的探索 上(基本操作)-CSDN博客列举了一些特定平台的case(桌面端菜单,鼠标快捷键)的使用方法,有些是flutter提供了对应能力,只需要学习如何调API,有些事三方库支持,本文要探讨的平台通道是更为强大的工具,很多三方插件

Flutter-使用dio插件请求网络(get ,post,下载文件)

引入库:dio: ^2.1.13可直接运行的代码:包含了post,get 下载文件import 'package:flutter/material.dart';import 'package:dio/dio.dart';void main() {runApp(new MaterialApp(title: 'Container demo',home: new visitNetPage(),)

Flutter-选择附件,图片,视频。file_picker

仅供参考: 引入插件: file_picker: ^1.3.8 按照返回值,分了三组: // Single file path String filePath;第一组:返回文件地址 //选择任何文件 filePath = await FilePicker.getFilePath(type: FileType.ANY); // will let you pick one file path, fr

Flutter-图表显示charts_flutter

引入插件: charts_flutter: ^0.4.0 ChartFlutterBean import 'package:charts_flutter/flutter.dart';import 'package:myself_project/OrdinalSales%20.dart';class ChartFlutterBean {static List<Series<TimeSer