Flutter从头到尾设计一款简单的五子棋游戏(三) | 具体代码设计

前言

在前面两篇文章中，我们已经介绍了设计一款五子棋游戏的所使用的一些思想以及部分的代码，以便我们更好地对设计模式进行理解。这次我们全面把代码铺开来讲，注意，我们这次的设计是完全使用Flutter自带的包进行设计。

正文

1.前情回顾

在上一篇文章中，我们对棋子的代码进行了设计。现在我们再进行回顾一下。先放个整个项目所使用到的类图的概览图。

棋子创建——享元模式

对于棋子的创建，我们使用享元模式，因为享元模式的设计思路就是将大量相同的对象进行复用。

在本项目中，棋子创建的类图如下：

在编码上，我们定义了抽象类Chess，他本质上是一个抽象享元。

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

  Color? _color;  

  Color get color => _color!;  

  ChessShape? _chessShape;  

  ChessShape get chessShape => _chessShape!;  

  set chessShape(ChessShape? __chessShape);  
}

随后对具体的两个棋子进行了设计。也就是设计模式中的具体享元进行设计。

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

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

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

白色棋子同理，代码如下：

class WhiteChess extends Chess{  
  WhiteChess() {  
    _color = Colors.*white*;  
  }  

  set chessShape(ChessShape? __chessShape) {  
    super._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;  
  }  
}

至此，我们对基本的棋子编写也已经完成了。

2.其他设计

棋子形状——桥接模式

因为形状主要是用来装饰棋子的，比如玩家根据自身等级可以购买不同的棋子皮肤、形状，因此我们这里抽出来单独设计。这里使用到

在本次的设计中，我们的棋子可以有方棋子和圆棋子。

类图如下：

由于Chess、WhiteChess、BlackChess已经在上方给出了代码， 因此这里我们只给出剩下的三个类。

abstract class ChessShape{  
  int? _shape;  

  int get shape => _shape!;  

  set shape(int value) {  
    _shape = value;  
  }  
}

ChessShape是一个抽象类，定义了其返回的形状类型。这里我们使用1代表圆，0代表方。具体的类设计如下：

class CircleShape extends ChessShape{  
  CircleShape(){  
    shape = 1;  
  }  
}

class RectShape extends ChessShape{  
  RectShape(){  
    shape = 2;  
  }  
}

玩家状态的切换——状态模式

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

玩家类设计如下：

class UserContext {  

  late State _state;  

  State get state => _state;  

  UserContext(){  
    _state = StartState(this);  
  }  

  play() {  
    _state.play();  
  }  

  //悔棋只能悔棋三次  
  bool regretChess() {  
    return _state.regretChess();  
  }  

  // 认输 10步之内不能认输  
  bool surrender() {  
    return _state.surrender();  
  }  

  setState(State state){  
    _state = state;  
  }  

  void reset() {  
    _state = StartState(this);  
  }  
}

这里对玩家的一些动作进行了限制，比如悔棋只能悔棋三次，前10步不能认输。这个玩家类在状态模式中也叫环境类。

随后我们设计抽象状态类：

abstract class State {  
  int _step = 0;  

  int get step => _step;  
  int _reg = 0;  

  int get reg => _reg;  
  UserContext _userContext;  

  State(UserContext userContext):_userContext = userContext;  

  // 悔棋只能悔棋三次  
  bool regretChess();  

  // 认输10步之内不能认输  
  bool surrender();  

  play() {  
    _step++;  
  }  

}

随后设计具体的状态类：

class StartState extends State {  

  StartState(UserContext userContext) : super(userContext);  

  //悔棋只能悔棋三次  
  @override  
  bool regretChess(){  
    return false;  
  }  

  @override  
  bool surrender() {  
    return false;  
  }  

  @override  
  play() {  
    super.play();  
    if(_step >= 4) {  
      _userContext.setState(MidState(_userContext).._step = _step.._reg = _reg);  
    }  
  }  

}  

在开始状态中，我们设置不能悔棋，也不能投降。当步数大于4时，我们进行状态转移到MidState。效果图如下：

class MidState extends State {  
  MidState(UserContext userContext) : super(userContext);  

  @override  
  int get _reg{  
    return super._reg;  
  }  

  //悔棋只能悔棋三次  
  @override  
  bool regretChess(){  
    _reg++;  
    if(_reg == 3) {  
      print('切换到白热化阶段');  
      _userContext.setState(EndState(_userContext).._step = _step.._reg = _reg);  
    }  
    return true;  
  }  

  @override  
  bool surrender() {  
    return true;  
  }  

}  

在这个MidState中，我们允许投降，也允许悔棋。当悔棋超过3次，则进入到EndState。效果图如下：

class EndState extends State {  
  EndState(UserContext userContext) : super(userContext);  

  //悔棋只能悔棋三次  
  @override  
  regretChess(){  
    return false;  
  }  

  @override  
  surrender() {  
    return true;  
  }  

}

在EndState中，我们只允许投降。效果图如下：

3.总结

今天在复习了原有的享元模式上，再介绍了桥接模式以及状态模式。关于棋子的创建以及玩家的状态我们也就已经设计完成，后续我们将把悔棋、以及App主题变换加上，基本就大功告成了。

作者：Jalor
链接：https://juejin.cn/post/7176111304745156665

最后

如果想要成为架构师或想突破20~30K薪资范畴，那就不要局限在编码，业务，要会选型、扩展，提升编程思维。此外，良好的职业规划也很重要，学习的习惯很重要，但是最重要的还是要能持之以恒，任何不能坚持落实的计划都是空谈。

如果你没有方向，这里给大家分享一套由阿里高级架构师编写的《Android八大模块进阶笔记》，帮大家将杂乱、零散、碎片化的知识进行体系化的整理，让大家系统而高效地掌握Android开发的各个知识点。

相对于我们平时看的碎片化内容，这份笔记的知识点更系统化，更容易理解和记忆，是严格按照知识体系编排的。

全套视频资料：

一、面试合集

二、源码解析合集

三、开源框架合集

欢迎大家一键三连支持，若需要文中资料，直接点击文末CSDN官方认证微信卡片免费领取↓↓↓