Flutter从头到尾设计一款简单的五子棋游戏(二) | 构思与代码

语言: CN / TW / HK

image.png 开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第11天,点击查看活动详情

前言

通过使用几个设计模型的思想,我们设计一款五子棋游戏。更好地对设计模式进行理解。注意,本次的设计并不包含任何的游戏引擎,完全使用Flutter自带的包进行设计。

正文

1.构思

在目前主流的五子棋游戏中,常有的行为有:棋子、棋盘、玩家的状态(是否可以悔棋)、以及悔棋的记录。

因此,我们这次的五子棋设计打算采用6种设计模式,分别是享元模式单例模式桥接模式工厂方法状态模式备忘录模式

详细的构思可以查看上一篇文章用Flutter从头到尾设计一款简单的五子棋游戏(一) | 设计模式构思

2.具体设计

而在具体设计中,我们上一回已经分析了棋子的(可以看用Flutter从头到尾设计一款简单的五子棋游戏(一) | 设计模式构思),而后我们需要把剩下的一些组件所需要的模式进行分析。

游戏颜色主题

对于五子棋游戏的主题颜色的创建,我们使用了工厂方法模式,UML图如下:

image.png

玩家状态

游戏玩家状态的可以进行切换,如是否可以悔棋等,因此在这里使用了状态模式。

image.png

悔棋

而对于玩家的下棋步骤记录,我们使用备忘录模式,万一玩家需要悔棋,也可以进行悔棋。

image.png

3.编码

棋子的创建

这里主要涉及到棋子创建所使用的享元模式。我们根据类图对棋子的创建进行编码。

我们定义了抽象类Chess,他本质上是一个抽象享元。

```Dart ///棋子的抽象类
///使用了桥接模式,外观和颜色是两个不同的维度
abstract class Chess{

Color? _color;

Color get color => _color!;

ChessShape? _chessShape;

ChessShape get chessShape => _chessShape!;

set chessShape(ChessShape? __chessShape);
} ```

由于会重复构建棋子,因此我们使用享元工厂创建享元类。

```Dart ///棋子的享元工厂,采用单例模式
class ChessFlyweightFactory {
  ChessFlyweightFactory._();

static ChessFlyweightFactory? _factory;

static ChessFlyweightFactory getInstance() {
    if ( factory == null) {
      _factory = ChessFlyweightFactory.
();
    }
    return _factory!;
  }

HashMap _hashMap = HashMap();

Chess getChess(String type) {
    Chess chess;
    if (_hashMap[type] != null) {
      chess = _hashMap[type]!;
    } else {
      if (type == "white") {
        chess = WhiteChess();
      } else {
        chess = BlackChess();
      }
      _hashMap[type] = chess;
    }
    return chess;
  }
} ```

而对于具体的黑白棋子,则需要继承自Chess类

```Dart class BlackChess extends Chess{
  BlackChess() {
    _color = Colors.black;
  }

set chessShape(ChessShape? __chessShape) {
    super._chessShape = __chessShape;
  }
} ```

白色棋子同理,这里就不再重复放出代码。

总结

目前已完成了对所有模式的具体分析,以及棋子的构建。下一步,就是把所有的设计模式的代码都设计出来,并完成整个App的编写。

最终效果图会如下:

image.png