Swift 遊戲開發之「能否關個燈」（一）

PJHubs發表於2019-09-07

前言

在上一篇文章中，我們已經完成了對《能否關個燈》小遊戲的介面和遊戲邏輯進行了初步搭建，並且也具備了一定的可玩性。但細心的你會發現，這種「隨機過程」的遊戲開局，我們幾乎一把都不會贏，因為這並不符合這個遊戲的初衷——逆序出開燈的順序去關燈。

關卡配置

在現有程式碼中，每次新開局遊戲裡各種燈的狀態都是之前我們通過「隨機化」Light 模型中的 status 狀態做到的，這種做法之前也說過了幾乎不可能把所有燈都關掉，因此我們需要對資料來源做一些處理，使之能夠通過「配置」去生成遊戲開局。

至此，我們的 ContentView 已經比較龐大了，而且作為一個 View 它所承載的內容已經到了需要被抽離的時間點，我們不能再往 ContentView 裡塞關卡配置的邏輯了。

因此，還是那句話「電腦科學領域的任何問題都可以通過增加一個間接的中間層來解決」，所以我們將引入一個 GameManager 來處理關卡配置。GameManager 中負責的主要內容有：

配置關卡的 size（3x3 or 4x4...
配置關卡的隨機過程；
維護燈狀態；
配置關卡的一些 UI 。

新建一個 GameManager 類，並把之前寫在 ContentView 中的邏輯都遷移進去。經過一番調整後，我們的程式碼就變成了：

import SwiftUI
import Combine

class GameManager {
    var lights = [
        [Light(), Light(status: true), Light()],
        [Light(), Light(), Light()],
        [Light(), Light(), Light()],
    ]

    /// 通過座標索引修改燈狀態
    /// - Parameters:
    ///   - column: 燈-列索引
    ///   - size: 燈-行索引
    func updateLightStatus(column: Int, row: Int) {
        lights[row][column].status.toggle()

        // 上
        let top = row - 1
        if !(top < 0) {
            lights[top][column].status.toggle()
        }
        // 下
        let bottom = row + 1
        if !(bottom > lights.count - 1) {
            lights[bottom][column].status.toggle()
        }
        // 左
        let left = column - 1
        if !(left < 0) {
            lights[row][left].status.toggle()
        }
        // 右
        let right = column + 1
        if !(right > lights.count - 1) {
            lights[row][right].status.toggle()
        }
    }
}

ContentView 中的程式碼被修改為了：

import SwiftUI

struct ContentView: View {    
    var gameManager = GameManager()

    var body: some View {
        ForEach(0..<gameManager.lights.count) { row in
            HStack(spacing: 20) {
                ForEach(0..<self.gameManager.lights[row].count) { column in
                    Circle()
                        .foregroundColor(self.gameManager.lights[row][column].status ? .yellow : .gray)
                        .opacity(self.gameManager.lights[row][column].status ? 0.8 : 0.5)
                        .frame(width: UIScreen.main.bounds.width / 5,
                               height: UIScreen.main.bounds.width / 5)
                        .shadow(color: .yellow, radius: self.gameManager.lights[row][column].status ? 10 : 0)
                        .onTapGesture {
                            self.gameManager.updateLightStatus(column: column, row: row)
                    }
                }
            }
                .padding(EdgeInsets(top: 0, leading: 0, bottom: 20, trailing: 0))
        }
    }
}

執行工程！發現居然點不動了！！！給第 17 行程式碼加上斷點，你會發現實際上是執行了這個方法的。回顧上篇文章中我們所闡述的內容，這是因為 lights 變數的修改未觸發 SwiftUI 的 diff 演算法去檢測需要改變的內容導致的，而之所以 lights 變數未被同步修改是因為Light 模型是值型別，值型別的變數在不同物件間傳遞時，這個變數會遵循值語義而發生複製，也就是說 GameManager 和 ContentView 裡的 lights 是兩個完全不一樣的變數。而以往我們傳遞模型時，模型本身幾乎都是引用型別，所以不會出現這種問題。

把我們遺忘的 @State 補上，通過這個加上這個修飾詞把 lights 變數與遊戲佈局繫結起來：

class GameManager {
    @State var lights = [
        [Light(), Light(status: true), Light()],
        [Light(), Light(), Light()],
        [Light(), Light(), Light()],
    ]

    // ...
}

此時再次執行工程，卻發生了一個 crash：

Thread 1: Fatal error: Accessing State<Array<Array<Light>>> outside View.body

再研究一下我們剛才寫的程式碼，總的來說，我們違反了 SwiftUI 單一資料來源的規範，導致 SwiftUI 在執行 DSL 解析時，跑的資料來源是非自己所有的。因此，我們要把 lights 這個資料來源「轉移」給 ContentView。在解決這個問題之前，我們還需要明確一點，GameManager 是用來解決 ContentView 中邏輯太多導致程式碼臃腫的「中間層」，換句話說，我們要把在 ContentView 中執行的操作都要通過這個「中間層」去解決，因此我們需要用上 Combine 中的 ObservableObject 協議來協助完成單一資料來源的規範，修改後的 GameManager 程式碼如下所示：

class Manager: ObservableObject {
    @Published var lights = [
        [Light(), Light(status: true), Light()],
        [Light(), Light(), Light()],
        [Light(), Light(), Light()],
    ]

    // ...
}

修改後的 ContentView 程式碼如下所示：

struct ContentView: View {    
    @ObservedObject var gameManager = Manager()

    // ...
}

此時執行工程，問題解決啦！接下來我們來看看如何配置關卡。我們需要再明確一點，關卡是遊戲開局時就已經要確定的，所以我們要在遊戲佈局渲染之前就要確定此次遊戲開局的關卡，也就是要對 GameManager 的初始化方法搞事情。

在 GameManager 中實現一個便捷構造方法，使得我們可以在 ContentView 的初始化方法中重新對 gameManager 變數進行初始化，丟進一些我們真正需要對此次遊戲開局時的初始化引數。

class GameManager: ObservableObject {
    @Published var lights = [[Light]]()
    /// 遊戲尺寸大小
    private(set) var size: Int?

    // MARK: - Init

    init() {}

    /// 便捷構造方法
    /// - Parameters:
    ///   - size: 遊戲佈局尺寸，預設值 5x5
    ///   - lightSequence: 亮燈序列，預設全滅
    convenience init(size: Int = 5,
                     lightSequence: [Int] = [Int]()) {
        self.init()

        var size = size
        // 太大了不好玩
        if size > 8 {
            size = 7
        }
        // 太小了沒意思
        if size < 2 {
            size = 2
        }
        self.size = size
        lights = Array(repeating: Array(repeating: Light(), count: size), count: size)

        updateLightStatus(lightSequence)
    }

    // ...
}

通過 size 引數控制了遊戲佈局尺寸，並考慮了一些 UI 上的規整。新增了一個 updateLightStatus(_ lightSequence: [Int]) 方法，通過這個方法去做遊戲的「隨機過程」。

// ...

/// 通過亮燈序列修改燈狀態
/// - Parameter lightSequence: 亮燈序列
private func updateLightStatus(_ lightSequence: [Int]) {
    guard let size = size else { return }

    for lightIndex in lightSequence {
        var row = lightIndex / size
        let column = lightIndex % size

        // column 不為 0，說明非最後一個
        // row 為 0，說明為第一行
        if column > 0 && row >= 0 {
            row += 1
        }
        updateLightStatus(column: column - 1, row: row - 1)
    }
}

// ...

因為在 GameManager 的便捷構造方法中傳入的 lightSequence 是一個 Int 型別的陣列，而且這個陣列裡元素的實際作用是標記出「亮燈」的順序，所以我們不能使用 Swift 中一些函式式的做法去加快「點亮」速度，只能使用原始方法去做了。我們在 ContentView 中的程式碼就變成了：

import SwiftUI

struct ContentView: View {    
    @ObservedObject var gameManager = GameManager()

    init() {
        gameManager = GameManager(size: 5, lightSequence: [1, 2, 3])
    }

    var body: some View {
        ForEach(0..<gameManager.lights.count) { row in
            HStack(spacing: 20) {
                ForEach(0..<self.gameManager.lights[row].count) { column in
                    Circle()
                        .foregroundColor(self.gameManager.lights[row][column].status ? .yellow : .gray)
                        .opacity(self.gameManager.lights[row][column].status ? 0.8 : 0.5)
                        .frame(width: self.gameManager.circleWidth(),
                               height: self.gameManager.circleWidth())
                        .shadow(color: .yellow, radius: self.gameManager.lights[row][column].status ? 10 : 0)
                        .onTapGesture {
                            self.gameManager.updateLightStatus(column: column, row: row)
                    }
                }
            }
                .padding(EdgeInsets(top: 0, leading: 0, bottom: 20, trailing: 0))
        }
    }
}

此時執行工程，會發現我們已經配置好了關卡啦～

關卡配置完成

判贏判輸

這個遊戲判贏和判輸都非常簡單，如果把燈全都熄滅了就贏得比賽。如果燈全亮了就是輸了。那麼我們可以用一個 lightingCount 變數去記錄下當前遊戲中燈亮的盞數，新增一個方法 updateGameStatus：

// ...

/// 判贏
private func updateGameStatus() {
    guard let size = size else { return }

    var lightingCount = 0

    for lightArr in lights {
        for light in lightArr {
            if light.status { lightingCount += 1 }
        }
    }

    if lightingCount == size * size {
        currentStatus = .lose
        return
    }

    if lightingCount == 0 {
        currentStatus = .win
        return
    }
}

// ...

在此，為了連線 SwiftUI 使用 currentStatus 變數記錄了當前遊戲的狀態，經過我們之前的遊戲經驗，《能否關個燈》遊戲的整體狀態就三個：

贏；
輸；
進行中。

因此我們可以建立一個列舉去記錄下當前的遊戲狀態：

extension GameManager {
    enum GameStatus {
        /// 贏
        case win
        /// 輸
        case lose
        /// 進行中
        case during
    }
}

並把 GameManager 做如下修改：

class GameManager: ObservableObject {
    /// 燈狀態
    @Published var lights = [[Light]]()
    @Published var isWin = false
    /// 當前遊戲狀態
    private var currentStatus: GameStatus = .during {
        didSet {
            switch currentStatus {
            case .win: isWin = true
            case .lose: isWin = false
            case .during: break
            }
        }
    }

    // ...
}

我們又新增了一個 @Published 修飾的變數 isWin，用於遊戲狀被修改時通知 SwiftUI 做檢視的更新。

重新開始

接下來我們要考慮，當玩家贏得遊戲時遊戲要重新開始。重新開始遊戲本質上只是對 lights 資料來源的狀態更新，因為此時遊戲佈局已經生成好，不需要重新渲染。對 GameManager 增加一個新方法：

// ...

/// 便捷構造方法
/// - Parameters:
///   - size: 遊戲佈局尺寸，預設值 5x5
///   - lightSequence: 亮燈序列，預設全滅
convenience init(size: Int = 5,
                    lightSequence: [Int] = [Int]()) {

    self.init()

    var size = size
    // 太大了不好玩
    if size > 8 {
        size = 7
    }
    // 太小了沒意思
    if size < 2 {
        size = 2
    }
    self.size = size
    lights = Array(repeating: Array(repeating: Light(), count: size), count: size)

    start(lightSequence)
}

// MARK: Public

/// 遊戲配置
/// - Parameter lightSequence： 亮燈序列
func start(_ lightSequence: [Int]) {
    currentStatus = .during
    updateLightStatus(lightSequence)
}

// ...

對 ContentView 做如下修改：

import SwiftUI

struct ContentView: View {    
    @ObservedObject var gameManager = GameManager(size: 5, lightSequence: [1, 2, 3])

    var body: some View {
        ForEach(0..<gameManager.lights.count) { row in
            HStack(spacing: 20) {
                ForEach(0..<self.gameManager.lights[row].count) { column in
                    Circle()
                        .foregroundColor(self.gameManager.lights[row][column].status ? .yellow : .gray)
                        .opacity(self.gameManager.lights[row][column].status ? 0.8 : 0.5)
                        .frame(width: self.gameManager.circleWidth(),
                               height: self.gameManager.circleWidth())
                        .shadow(color: .yellow, radius: self.gameManager.lights[row][column].status ? 10 : 0)
                        .onTapGesture {
                            self.gameManager.updateLightStatus(column: column, row: row)
                    }
                }
            }
                .padding(EdgeInsets(top: 0, leading: 0, bottom: 20, trailing: 0))
        }
            .alert(isPresented: $gameManager.isWin) {
                Alert(title: Text("黑燈瞎火，摸魚成功！"),
                      dismissButton: .default(Text("繼續摸魚"),
                                              action: {
                                                self.gameManager.start([3, 2, 1])
                      }
                    )
                )
            }
    }
}

告知使用者贏得比賽，我的做法是在遊戲介面中彈出一個 alert，並通過 GameManager 中的 isWin 變數來控制 alert 出現和隱藏，當 alert 出現時，使用者點選 alert 中的「繼續摸魚」即可開始下一局比賽。執行工程，又可以愉快的玩耍啦！

黑燈瞎火，摸魚成功！

後記

在這篇文章中，我們對遊戲邏輯做了進一步的完善，可以說通過不斷的抽象，把遊戲邏輯和介面進行了分離。通過這種做法可以讓後續實現的需求魯棒性更強！

現在，我們的需求已經完成了：

[x] 燈狀態的互斥
[x] 燈的隨機過程
[x] 遊戲關卡難度配置
[ ] 計時器
[ ] 歷史記錄
[ ] UI 美化

趕快把工程跑起來，配置一個屬於你自己的關卡，拉上小夥伴來體驗一番吧～

GitHub 地址：https://github.com/windstormeye/SwiftGame

來源：我的小專欄《 Swift 遊戲開發》：https://xiaozhuanlan.com/pjhubs-swift-game

優秀的人遵守規則，頂尖的人創造規則

Swift 遊戲開發之「能否關個燈」（〇）
2019-09-02
Swift遊戲開發
Swift跑馬燈效果
2019-01-31
Swift
使用一session能否記錄一個集合？？？
2005-08-26
Session
微軟面試題--三個燈泡--三個開關
2012-12-16
微軟面試題
一個想法，不知能否實現。
2010-05-24
MySQL能否成下一個Oracle？(轉)
2007-08-16
MySqlOracle
前端--開關燈
2020-02-04
前端
Swift iOS : 建立一個POD
2017-08-17
SwiftiOS
[譯] 看！Swift 裡竟然有紅綠燈 ?！
2017-03-31
Swift
STM32之GPIO及第一個STM32程式（跑馬燈）
2015-11-05
LeetCode之加一-Swift
2019-01-15
LeetCodeSwift
新發布丨一個關於遊戲開發的加速計劃
2023-01-17
遊戲開發
用js寫的一個跑馬燈
2020-04-06
JS
【javascript】一個可以配置的紅綠燈
2019-02-27
JavaScript
換一個燈泡，要多少個程式設計師？
2016-07-25
程式設計師
斑竹，能否講一下，關於值物件，應用。
2002-11-04
物件
遊戲開發的一個BLOG
2010-03-01
遊戲開發
swift相關
2017-12-13
Swift
bang能否指點一下，如何將JBPM3與WEB整合？能否給個例子？
2005-07-02
Web
Swift 返回一個漸變的 UIImageView
2018-04-23
SwiftUIView
我的小專欄《 Swift 遊戲開發》開始創作啦～一起來用 Swift 寫遊戲吧！
2019-08-29
Swift遊戲開發
Swift之 ? 和 !
2015-06-16
Swift
使用 Flutter 實現一個走馬燈佈局
2019-11-23
Flutter
一個不用定時器簡易51呼吸燈
2018-12-05
定時器
一個51程式設計和模擬——流水燈
2020-10-03
程式設計
swift之與h5之間的互動（一）
2024-03-07
SwiftH5
Swift 關鍵字
2019-08-22
Swift
Swift 效能相關
2017-04-28
Swift
Swift —— 關鍵字
2018-01-11
Swift
關於Swift中Properties的一些理解
2019-02-26
Swift
大家看看這個問題能否解決？關於無線應用
2003-12-05
Swift 寫一個完整的介面(實戰)
2016-06-30
Swift
Swift iOS : 閉包的一個應用
2017-08-14
SwiftiOS
遊戲開發者怎麼做出一個成功的demo？
2020-11-26
遊戲開發
一份關於Roguelike遊戲開發的啟示
2019-11-07
遊戲開發
讓我們構建一個Swift.Array
2019-03-02
Swift
用 Swift 實現一個簡單版 React
2019-03-13
SwiftReact
EFResume 一個普通的 Swift 簡歷模板
2017-12-25
Swift

Swift 遊戲開發之「能否關個燈」（一）

前言

關卡配置

判贏判輸

重新開始

後記

相關文章