likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 39

前言

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

正文

1.构思

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

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

2.具体设计

游戏颜色主题

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

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

玩家状态

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

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

悔棋

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

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

3.编码

棋子的创建

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

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

///棋子的抽象类  
///使用了桥接模式,外观和颜色是两个不同的维度  
abstract class Chess{  
  
  Color? _color;  
  
  Color get color => _color!;  
  
  ChessShape? _chessShape;  
  
  ChessShape get chessShape => _chessShape!;  
  
  set chessShape(ChessShape? __chessShape);  
}

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

///棋子的享元工厂,采用单例模式  
class ChessFlyweightFactory {  
  ChessFlyweightFactory._();  
  
  static ChessFlyweightFactory? _factory;  
  
  static ChessFlyweightFactory *getInstance*() {  
    if ( _factory == null) {  
      _factory = ChessFlyweightFactory._();  
    }  
    return _factory!;  
  }  
  
  HashMap<String, Chess> _hashMap = HashMap<String, Chess>();  
  
  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类

class BlackChess extends Chess{  
  BlackChess() {  
    _color = Colors.black;  
  }  
  
  set chessShape(ChessShape? __chessShape) {  
    super._chessShape = __chessShape;  
  }  
}

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

总结

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

最终效果图会如下:

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

转载自:https://juejin.cn/post/7175522152178221111
评论
请登录