Flutter從頭到尾設計一款簡單的五子棋遊戲(二) | 構思與程式碼

語言: CN / TW / HK
時間 2022-12-12 03:15:11

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

「」
「」