SwiftUI国旗猜谜游戏如何实现带得分等级的游戏结束弹窗重启功能

问题原因 #

你遇到的弹窗不生效问题主要由3点导致：

• SwiftUI视图仅绑定了单轮答题结果的alert弹窗，endGameAlert状态没有绑定对应的弹窗组件，所以状态变更后无法触发弹窗
• 轮次判断逻辑错误：当前逻辑要等到用户第21次点击国旗才会触发结束判断，应该在第20轮答题完成后立即触发结束逻辑
• 缺少得分等级计算、游戏数据重置的配套逻辑

完整修改代码 #

import SwiftUI
struct ContentView: View {
    @State private var countries = [
        "afghanistan",
        "albania",
        // 这里保持你原来的国家列表不变
        "zimbabwe"
    ].shuffled()
    @State private var correctAnaswer = Int.random(in: 0...2)
    @State private var score = 0
    @State private var showingAlert = false
    @State private var endGameAlert = false
    @State private var alertTitle = ""
    @State private var currentRound = 0
    @State private var maxRound = 20
    
    var body: some View {
        NavigationView {
            VStack{
                ForEach((0...2), id:\.self) { number in
                    Image(self.countries[number])
                        .border(Color.black, width: 1)
                        .onTapGesture {
                            self.flagTapped(number)
                        }
                }
                Text("你的得分：\(score)，当前轮次：\(currentRound)/\(maxRound) ")
                Spacer()
            }
            .background(Image("background").resizable().scaledToFill().edgesIgnoringSafeArea(.all).blur(radius: 20))
            .navigationBarTitle(Text(countries[correctAnaswer].uppercased()))
            // 原有单轮答题结果弹窗
            .alert(isPresented: $showingAlert) {
                Alert(title: Text(alertTitle),
                      message:Text("当前得分：\(score)"),
                      dismissButton: .default(Text("继续")){
                        self.askQuestion()
                    })
            }
            // 新增：游戏结束弹窗绑定
            .alert(isPresented: $endGameAlert) {
                Alert(title: Text("游戏结束"),
                      message: Text("你的结果为\(getScoreLevel())，最终得分：\(score)"),
                      dismissButton: .default(Text("重新开始")){
                        self.resetGame()
                    })
            }
        }
    }
    
    func flagTapped(_ tag: Int){
        // 处理当前答题逻辑
        if tag == correctAnaswer {
            score += 1
            alertTitle = "答对了"
        } else {
            score -= 1
            alertTitle = "答错了"
        }
        currentRound += 1
        
        // 答题后立即判断是否达到最大轮次
        if currentRound >= maxRound {
            endGameAlert = true
        } else {
            showingAlert = true
        }
    }
    
    func askQuestion() {
        countries.shuffle()
        correctAnaswer = Int.random(in: 0...2)
    }
    
    // 新增：计算得分等级
    func getScoreLevel() -> String {
        // 你可以根据需求调整等级对应的分数区间
        switch score {
        case ..<7:
            return "差"
        case 7..<14:
            return "中等"
        default:
            return "良好"
        }
    }
    
    // 新增：重置游戏数据
    func resetGame() {
        score = 0
        currentRound = 0
        countries.shuffle()
        correctAnaswer = Int.random(in: 0...2)
    }
}

逻辑说明 #

1. 新增了第二个alert修饰符和endGameAlert状态绑定，实现结束弹窗的显示
2. 调整了轮次判断逻辑，每轮答题完成后立刻判断是否到20轮，符合预期交互
3. 新增的getScoreLevel函数可以根据最终得分返回对应等级，你可以自行调整分数区间
4. 新增的resetGame函数会在用户点击结束弹窗的「重新开始」按钮后重置所有游戏数据，开启新一轮游戏

内容的提问来源于stack exchange，提问作者Kseniia Piskun