使用Flutter Web制作一个春节神经病在线小游戏：寻找Troy

PK创意闹新春，我正在参加「春节创意投稿大赛」，详情请看：春节创意投稿大赛

随着Flutter的不断更新逐渐的对Web端的支持更加完善，最近尝试了下在Flutter Web端的开发，写了一个神经病的小游戏😂：寻找Troy。

在线试玩地址

点击访问

游戏规则

规则很简单，分为Troy模式和春节模式，每一关包含一个n乘n的宫格，每个格子都存在一个元素，Troy模式下只有一个格子是真正的掘金大佬Troy，其余是Tony，春节模式下，只有一个是倒立的福字，其余是正立的福，玩家要做的就是找到并点击正确的Troy或倒立福字，从3乘3到9乘9一共7关，所有关卡完成即为结束，按最后完成时间为最终成绩。

点击上方切换按钮可以切换至春节模式

实现

关键逻辑

游戏没有复杂的逻辑，n宫格使用GridView进行布局，个数即为n乘n,每一关使用Random().nextInt函数生成一个n乘n内的随机数，这个随机数就是用来记录唯一不同的格子的下标。每完成一个关卡，下标就会重新生成。

void setRandomNum() {
  randomNum = Random().nextInt(row * row);
}

当用户点击格子时，判断当前点击的格子下标是否为所记录的随机下标，如果相同则继续下一关卡。直到最后一个关卡完成，记录时间上传成绩。

if (index == randomNum) {
  // 判断点击的位置是否是随机数位置
  if (row == maxRow && _name.isNotEmpty) {
    EasyLoading.show(status: 'loading...');
    // 最后一关完成，上传成绩
  }
}

数据管理

游戏中的数据记录是使用bmob平台完成的，数据的上传与查询使用了mini_bmob插件，这个插件实现了对bmob平台REST API的Flutter端封装，使得Android、 iOS、 Web、桌面端都可以使用同一代吗进行数据管理。

成绩上传

GradeTable gradeTable = GradeTable(
    name: _name, grade: seconds, mode: troyFlg ? "Troy模式" : "春节模式");
bool succes = await gradeTable.install();

成绩排行榜数据查询

BmobWhereBuilder where = BmobWhereBuilder();
where.whereBasic("mode").equals(troyFlg ? "Troy模式" : "春节模式");
where.order(['grade']);
BmobSetResponse<GradeTable> bmobSetResponse = await BmobQueryHelper.query(
    GradeTable(), (json) => GradeTable().fromJson(json),
    where: where);

设置昵称

为了能将自己的成绩显示在排行榜上，首次进入时需要输入自己的昵称

BmobUserTable _user = BmobUserTable(
    username: _textEditingController.text.trim(),
    password: '');
bool success = await _user.install();

好了，下班放假~