Flutter从头到尾设计一款简单的五子棋游戏(三) | 具体代码设计
敞开生长之旅!这是我参与「日新计划 12 月更文挑战」的第12天,点击检查活动详情

前言

在前面两篇文章中,咱们已经介绍了规划一款五子棋游戏的所运用的一些思想以及部分的代码,以便咱们更好地对规划形式进行了解。这次咱们全面把代码铺开来讲,留意,咱们这次的规划是彻底运用Flutter自带的包进行规划。

正文

1.前情回顾

在上一篇文章中,咱们对棋子的代码进行了规划。现在咱们再进行回顾一下。先放个整个项目所运用到的类图的概览图。

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

棋子创立——享元形式

关于棋子的创立,咱们运用享元形式,因为享元形式的规划思路便是将很多相同的目标进行复用。

在本项目中,棋子创立的类图如下:

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

在编码上,咱们界说了笼统类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;  
 }  
}

而关于享元工厂,咱们则能够运用单例形式进行创立。

类图如下:

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

代码如下:

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.其他规划

棋子形状——桥接形式

因为形状主要是用来装修棋子的,比方玩家依据自身等级能够购买不同的棋子皮肤、形状,因而咱们这儿抽出来独自规划。这儿运用到

在本次的规划中,咱们的棋子能够有方棋子和圆棋子。

类图如下:

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

因为ChessWhiteChessBlackChess已经在上方给出了代码, 因而这儿咱们只给出剩余的三个类。

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;  
 }  
}

玩家状况的切换——状况形式

游戏玩家状况的能够进行切换,如是否能够悔棋等,因而在这儿运用了状况形式。

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

玩家类规划如下:

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。效果图如下:

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

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。效果图如下:

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

class EndState extends State {
 EndState(UserContext userContext) : super(userContext);  
 //悔棋只能悔棋三次  
  @override  
 regretChess(){  
 return false;  
 }  
 @override  
 surrender() {  
 return true;  
 }  
}

EndState中,咱们只答应屈服。效果图如下:

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

3.总结

今天在复习了原有的享元形式上,再介绍了桥接形式以及状况形式。关于棋子的创立以及玩家的状况咱们也就已经规划完结,后续咱们将把悔棋、以及App主题变换加上,基本就大功告成了。