SwiftUI100天：使用SwiftUI搭建一个剪刀石头布App（下）

携手创造，共同成长！这是我参加「日新方案 8 月更文挑战」的第4天，点击检查活动概况。

在本章中，咱们持续完成运用SwiftUI搭建一个剪刀石头布App。

交互逻辑

咱们持续来完成石头剪刀布的逻辑部分，本章或许对于初学者有点难度，咱们一步一步来。

体系出牌办法

首要是体系出牌部分，咱们能够运用随机数来取得数组中的数据来作为体系出牌效果，示例：

// 随机猜拳办法
func randomPush() {
let index = Int.random(in: 0 ... 2)
computerPushImage = gameModels[index]
gameTimes -= 1
}

上述代码中，咱们经过random函数取得0到2的随机数值，然后把computerPushImage体系出牌效果赋值为从gameModels数组中随机取的的效果，而且每次出牌后gameTimes游戏次数就会削减。

然后咱们在当即猜拳的操作中增加点击交互，示例：

// 当即猜拳
func playGame() -> some View {
Text("当即猜拳")
.font(.system(size: 17))
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 10, maxHeight: 32)
.padding()
.foregroundColor(.white)
.background(Color(red: 51 / 255, green: 51 / 255, blue: 51 / 255))
.cornerRadius(8)
.onTapGesture {
if isSelected {
randomPush()
}
}
}

上述代码中，咱们给playGame视图中的Text添加了onTapGesture修饰符，当咱们点击时判别下用户是否了出牌，挑选后咱们才调用体系随机猜拳的办法。

猜拳效果判别

有了体系猜拳后，在用户挑选出牌后，咱们需求合体系出牌进行比照，看看谁赢，咱们这里创立一个办法来判别猜拳效果。

首要要声明3个变量来展现所需的效果。示例：

@State var computerWinCount: Int = 0
@State var winName: String = ""
@State var winMessage: String = ""

上述代码中，咱们声明晰三个变量computerWinCount计算机赢的次数，winName谁赢，winMessage效果的描绘信息。

然后咱们创立一个办法来判别猜拳效果。示例：

// 判别终究猜拳效果
func showWinner() {
if computerPushImage == "rock" && selectedImage == "paper" || computerPushImage == "paper" && selectedImage == "scissors" || computerPushImage == "scissors" && selectedImage == "rock" {
winName = "你输了"
computerWinCount += 1
winMessage = "你还有" + String(gameTimes) + "次时机"
} else if computerPushImage == selectedImage {
gameTimes += 1
winName = "平手"
winMessage = "你还有" + String(gameTimes) + "次时机"
} else {
winName = "你赢了"
winMessage = "你还有" + String(gameTimes) + "次时机"
}
}

上述代码中，咱们创立了一个办法showWinner。

咱们判别computerPushImage体系出牌和selectedImage用户挑选出牌的效果，假如计算机赢了，咱们给winName赋值，奉告赢方。

若计算机赢了，computerWinCount计算机赢的次数加1，且winMessage拼接展现剩下的gameTimes游戏次数。

若两者平手，则gameTimes游戏次数加1，且相同展现赢方和剩下的gameTimes游戏次数。

若用户赢了，也相同展现赢方和剩下的gameTimes游戏次数。

然后咱们在playGame当即猜拳的视图中，点击操作时调用判别猜拳效果的办法，示例：

// 当即猜拳
func playGame() -> some View {
Text("当即猜拳")
.font(.system(size: 17))
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 10, maxHeight: 32)
.padding()
.foregroundColor(.white)
.background(Color(red: 51 / 255, green: 51 / 255, blue: 51 / 255))
.cornerRadius(8)
.onTapGesture {
if isSelected {
randomPush()
    showWinner()  
}
}
}

游戏是否完毕

有了体系猜拳的办法后，由于咱们有几种规矩：一局定输赢、三局两胜、五局三胜。

因此咱们在每次猜拳后，还要依据游戏次数规矩，判别游戏终究是否完毕。

首要需求声明一个游戏的总次数参数，然后和体系赢的次数computerWinCount做比照，示例：

@State var gameTotal: Int = 1
@State var isShowWinner: Bool = false

咱们声明晰一个变量gameTotal，用来存储游戏总次数，再声明晰一个Bool变量isShowWinner，用来最后确定是否展现效果。

下一步还需求在体系规矩中依据用户挑选的游戏规矩，对gameTotal游戏总次数进行赋值，示例：

// 规矩
func ruleView() -> some View {
Menu {
Button("一局定输赢") {
self.gameTimes = 1
self.ruleName = "一局定输赢"
self.gameTotal = 1
}
Button("三局两胜") {
self.gameTimes = 3
self.ruleName = "三局两胜"
self.gameTotal = 3
}
Button("五局三胜") {
self.gameTimes = 5
self.ruleName = "五局三胜"
self.gameTotal = 5
}
} label: {
Label(ruleName, systemImage: "slider.horizontal.3")
.foregroundColor(.gray)
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 10, maxHeight: 60)
.background(Color(.systemGray6))
.cornerRadius(8)
}
}

这时，咱们就有了3个参数来记录游戏玩的进程：gameTotal游戏总次数，gameTimes游戏剩下次数，computerWinCount计算机赢的次数。

咱们需求有个办法判别游戏是否完毕，示例：

// 判别游戏是否完毕
func isEndGame() {
if gameTimes == 0 {
if gameTotal == 5 && computerWinCount == 3 || gameTotal == 3 && computerWinCount == 2 || gameTotal == 1 && computerWinCount == 1 {
computerWinCount = 0
gameTimes = gameTotal
winName = "计算机赢了"
winMessage = "游戏完毕"
isShowWinner = true
} else {
computerWinCount = 0
gameTimes = gameTotal
winName = "你赢了"
winMessage = "游戏完毕"
isShowWinner = true
}
} else {
isShowWinner = true
}
}

上述代码中，咱们创立了一个办法isEndGame，用来判别游戏是否效果。

判别规矩首要判别gameTimes游戏剩下次数是否为0，假如游戏剩下次数为0，则代表游戏完毕。

游戏完毕时，咱们还需求判别gameTotal游戏总次数和computerWinCount计算机赢的次数的联系，假如满意规矩，则代表计算机赢了。

这时咱们需求重置计算机赢的次数computerWinCount``为0，而且重置剩下的游戏次数gameTimes等于游戏总次数，并奉告winName终究效果谁赢了，现已奉告winMessage游戏完毕的信息。

假如游戏没有完毕，也便是gameTimes不为0，则仍是展现效果isShowWinner。

咱们把判别游戏是否完毕的办法加到判别每次猜拳的效果办法中，示例：

// 判别终究猜拳效果
func showWinner() {
if computerPushImage == "rock" && selectedImage == "paper" || computerPushImage == "paper" && selectedImage == "scissors" || computerPushImage == "scissors" && selectedImage == "rock" {
winName = "你输了"
computerWinCount += 1
winMessage = "你还有" + String(gameTimes) + "次时机"
isEndGame()
} else if computerPushImage == selectedImage {
gameTimes += 1
winName = "平手"
winMessage = "你还有" + String(gameTimes) + "次时机"
isEndGame()
} else {
winName = "你赢了"
winMessage = "你还有" + String(gameTimes) + "次时机"
isEndGame()
}
}

上述代码中，咱们在每一次判别时，都调用isEndGame判别游戏是否完毕的办法。

猜拳效果展现

咱们有了体系随机出牌的办法randomPush，还有判别猜拳效果的办法showWinner，再完成了判别游戏是否完毕的办法isEndGame。

最后咱们还需求展现效果，咱们能够经过Alert弹窗来奉告用户效果。示例：

// 展现猜拳效果
func showResult() -> Alert {
let alert = Alert(
title: Text(winName),
message: Text(winMessage),
dismissButton: .default(Text("持续")) {
self.computerPushImage = "game"
self.isSelected = false
}
)
return alert
}

上述代码中，咱们创立了一个Alert视图showResult。

咱们Alert视图的标题title相关winName，信息message相关winMessage，当咱们点击持续按钮时，computerPushImage体系出牌康复到默认图片，且用户挑选isSelected切换为未挑选。

咱们在body主要视图中，调用Alert办法，示例：

var body: some View {
VStack(spacing: 20) {
titleView()
ruleView()
computerPush()
Spacer()
Spacer()
if isSelected {
personPush()
} else {
personSelected()
}
Spacer()
playGame()
}
.padding()
.alert(isPresented: $isShowWinner) {
showResult()
}
}

项目效果展现

祝贺你，完成了整个项目的全部内容！

快来着手试试吧。

假如本专栏对你有协助，不妨点赞、评论、重视～