Flutter - 一个简单的多人骰子游戏

介绍

这是一个用Flutter开发的简单多人骰子游戏，玩家可以通过连接同一局域网，加入同一游戏房间，进入游戏并投掷骰子，最终根据骰子点数排名。通过这个游戏，你可以学习到Flutter在网络通信及状态管理方面的应用。

技术栈

• Flutter
• Dart
• WebSockets
• Provider

功能特性

1. 加入游戏房间：玩家可以输入房间号进行加入游戏房间。
2. 游戏进入倒计时：当房间内玩家数达到2人后，游戏开始倒计时。
3. 投掷骰子：玩家进入游戏后，可通过点击按钮或摇晃手机，投掷骰子，得出点数。
4. 骰子点数排名：玩家的排名根据骰子点数从大到小排序，排名前三名显示在游戏结束页面。

实现过程

1. 连接服务端

游戏使用Websockets连接服务端进行通信，需要在Flutter中添加web_socket_channel依赖。

2. 状态管理

使用Provider状态管理进行玩家信息、房间信息、游戏信息的状态管理，方便在组件间传递，并在状态变化时进行通知。

3. 游戏倒计时

游戏倒计时使用Flutter自带的Timer类，倒计时结束时触发游戏开始。

4. 投掷骰子

玩家投掷骰子后，将点数发送到服务端并更新本地玩家点数信息，同时获取所有玩家的点数信息，排序后更新本地玩家排名信息。

5. 游戏结束

游戏结束后，将排名前三名的玩家信息发送给服务端，服务端进行排名存储，发送游戏结束指令通知所有客户端。

代码实现

添加web_socket_channel依赖

dependencies:
  web_socket_channel: ^2.1.1

状态管理

使用Provider进行状态管理，需要定义玩家、房间、游戏的数据类型，并在main.dart中将Provider注入根组件，在需要使用状态的组件中使用Provider进行状态管理。

游戏倒计时

Timer timer = Timer(Duration(seconds: 3), () {
  Provider.of<GameProvider>(context, listen: false).startGame();
});

投掷骰子

// 发送点数到服务端
channel.sink.add(jsonEncode({
  'type': 'rollDice',
  'roomId': roomId,
  'playId': playId,
  'point': point,
}));

// 更新本地玩家信息
Provider.of<PlayerProvider>(context, listen: false)
    .updatePlayerPoint(playId, point);

// 获取所有玩家信息，根据点数排序更新排名
final players = Provider.of<PlayerProvider>(context, listen: false).players;

List sortedPlayers = players.values.toList();
sortedPlayers.sort((a, b) => b.point.compareTo(a.point));
Provider.of<PlayerProvider>(context, listen: false)
    .updatePlayersRank(sortedPlayers);

游戏结束

// 发送排名信息到服务端
channel.sink.add(jsonEncode({
  'type': 'gameOver',
  'roomId': roomId,
  'topThree': topThree,
}));

// 游戏结束页面显示排名前三名玩家
List topThree =
    Provider.of<PlayerProvider>(context, listen: false).topThreePlayers;

总结

Flutter作为一种快速开发跨平台App的框架，使用Dart语言进行开发，具有良好的可维护性和性能。通过本次开发，我们学习了Flutter在网络通信及状态管理方面的应用，希望对大家有所启发。