SwiftUI玩转剪刀石头布 App 开发【上】

2023-10-28 07:33:13

概述

欢迎来到 SwiftUI 100 天系列教程！在本系列教程中，您将学习如何使用 SwiftUI 框架构建各种各样的 iOS 应用程序。在今天的教程中，我们将从一个简单的应用程序开始：剪刀石头布。

SwiftUI 简介

SwiftUI 是 Apple 于 2019 年推出的一个新的用户界面框架。它基于声明式编程范式，这意味着您只需告诉 SwiftUI 您想要创建什么，而无需关心它是如何创建的。这使得 SwiftUI 比传统的 UIKit 框架更加容易学习和使用。

创建新项目

打开 Xcode，然后单击“新建项目”。
选择“App”模板，然后单击“下一步”。
输入应用程序的名称和组织名称，然后单击“下一步”。
选择“Interface Builder”作为用户界面语言，然后单击“下一步”。
选择“Single View App”作为应用程序类型，然后单击“下一步”。
确保选中“Include SwiftUI”复选框，然后单击“完成”。

创建用户界面

在 Xcode 项目导航器中，选择“ContentView.swift”文件。
在 SwiftUI 代码中，添加以下代码：

struct ContentView: View {
    var body: some View {
        Text("Hello, World!")
    }
}

运行应用程序。您应该会在模拟器中看到“Hello, World!”文本。

添加游戏逻辑

接下来，我们需要添加游戏逻辑。我们将创建一个名为“Game”的结构体，它将包含游戏的状态和逻辑。

struct Game {
    enum Result {
        case win
        case lose
        case draw
    }

    var playerChoice: Choice
    var computerChoice: Choice

    init(playerChoice: Choice, computerChoice: Choice) {
        self.playerChoice = playerChoice
        self.computerChoice = computerChoice
    }

    func getResult() -> Result {
        switch (playerChoice, computerChoice) {
        case (.rock, .scissors), (.paper, .rock), (.scissors, .paper):
            return .win
        case (.rock, .paper), (.paper, .scissors), (.scissors, .rock):
            return .lose
        default:
            return .draw
        }
    }
}

enum Choice {
    case rock
    case paper
    case scissors
}

添加用户界面元素

现在，我们需要添加用户界面元素，以便用户可以与应用程序交互。我们将创建一个名为“ContentView”的 SwiftUI 视图，它将包含游戏界面。

struct ContentView: View {
    @State private var playerChoice: Choice?
    @State private var computerChoice: Choice?
    @State private var result: Result?

    var body: some View {
        VStack {
            Text("剪刀石头布")
                .font(.largeTitle)
                .padding()

            HStack {
                Button("石头") {
                    playerChoice = .rock
                    computerChoice = Choice.random()
                    result = Game(playerChoice: playerChoice!, computerChoice: computerChoice!).getResult()
                }

                Button("剪刀") {
                    playerChoice = .scissors
                    computerChoice = Choice.random()
                    result = Game(playerChoice: playerChoice!, computerChoice: computerChoice!).getResult()
                }

                Button("布") {
                    playerChoice = .paper
                    computerChoice = Choice.random()
                    result = Game(playerChoice: playerChoice!, computerChoice: computerChoice!).getResult()
                }
            }

            if let playerChoice = playerChoice, let computerChoice = computerChoice, let result = result {
                Text("你选择了 \(playerChoice.rawValue)，电脑选择了 \(computerChoice.rawValue)，结果是 \(result.rawValue)")
            }
        }
        .padding()
    }
}