【flutter 起步走】Flutter 布局解决消消乐，谁说只会写写布局不能做游戏？

身为一个APP开发者，在复制黏贴的路上越走越远。 最近玩了一款消消乐游戏，于是怀疑自己是否也能复刻出一个简单的消消乐，想了想有点挑战性，也该挑战一下自己了。

前言：

这是第一版本的消消乐，完成了消消乐最基础的几项能力

1. 交换方块+动画
2. 消除方块+动画
3. 保证棋盘为可消除状态
4. 保证一次消除到底

感兴趣的可以去下面的演示地址体验 演示地址

放在githubPages上，加载略慢，等待十秒左右

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Pzg71kCz-1652254104800)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bc1d5d87ad024c1a8b23221323f2d485~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image)]

代码仓库自取(github)

目录：

1. 方块，墙壁和棋盘在代码中表示
2. 完成交换和动画
3. 设计消除算法，动画，并填充消除后的区域
4. 预测能否继续消除，并随机棋盘
5. 最后

一、方块，墙壁和棋盘在代码中的表示

我们要设计一个可以自定义关卡的消消乐，关卡的区别就是由不同形状的棋盘组成。这就需要我们将棋盘作为一个可配置项。 根据手机屏幕大小，我们将棋盘定义为一个9*11 的二维整型数组。

1. 棋盘代码展示

board代码如下：

///墙壁flag
final kB = 0x100;
///未初始化的正常棋盘
final kN = 0;
///方块的正常样式
final kBlockType = 0xFF;
///方块的状态信息
final kBlockStateInfo = 0xFF00;

var board= [
  [kB, kB, kB, kB, kB, kB, kB, kB, kB],
  [kB, kB, kB, kB, kB, kB, kB, kB, kB],
  [kB, kB, kB, kB, kN, kB, kB, kB, kB],
  [kB, kB, kB, kN, kN, kN, kB, kB, kB],
  [kB, kB, kN, kN, kN, kN, kN, kB, kB],
  [kB, kN, kN, kN, kN, kN, kN, kN, kB],
  [kB, kN, kN, kN, kN, kN, kN, kN, kB],
  [kB, kN, kN, kN, kN, kN, kN, kN, kB],
  [kB, kN, kN, kN, kN, kN, kN, kN, kB],
  [kB, kN, kN, kN, kN, kN, kN, kN, kB],
  [kB, kB, kB, kB, kB, kB, kB, kB, kB],
]; 

2. 类型和墙壁定义

因为一个各自包含了墙壁信息和方块类型等信息，以及以后可能要加上的冻结，锁链等状态（想太多），所以我们需要对整型进行拆分。

因为类型不多，所以整型的最后一个字节表示0xFF的与结果来表示就够了，足足可以表示0x00-0xFF 256个类型。 然后前面的位数都可以作为标志位使用，我们将0x100作为墙壁标志位，当前也只用到了这个标志位。 所以定好变量，kB就是墙壁，kN就是未初始化方块 上面的二维数组经过映射展示如下。

3. 生成棋盘

当前的可用方块还是kN 也就是0。还没有初始化出各式各样的方块。因为方块有六种类型，所以直接用随机数输生成1-6的数字。代码如下。

generateBlocks() {
  print("随机棋盘");
  fo