練習筆記 44 : 選擇題 App -Color 9X9

最近看到一個有趣的小遊戲White 200~

200色の白から見つけよう！ - White 200

遊戲要在200格中選出正確的顏色

原本覺得應該不會很難吧～

結果真的有點難😆 一直被扣分🥲

這次的作業要做選擇題app

就模仿這個遊戲的概念做成簡易版的,然後將200格縮減成9格～

這次的作業主要用亂數產生9個選項的RGB

從9個選項中隨機選一個當題目的顏色

再用if else判斷是否選到正確答案以及計分

在viewController裡宣告分數.題數.正確及錯誤要顯示的文字

初始的分數設為100 後續再設定答錯倒扣及答對加分

    var score = 100
    var question = 1
    let correct = ["答對了 🎉","讚讚 👍🏻👍🏻👍🏻","太棒了 🥰","難道你是超級英雄嗎 😍"]
    let wrong = ["再試一下 😵‍💫","請再接再厲 😰","不要再亂猜了 🤢","請加油 😡"]

建立需要的IBOutlet 並將button拉成outlet collection

//題目Label
    @IBOutlet weak var colorLabel: UIView!
    //選項button
    @IBOutlet weak var button1: UIButton!
    @IBOutlet weak var button2: UIButton!
    @IBOutlet weak var button3: UIButton!
    @IBOutlet weak var button4: UIButton!
    @IBOutlet weak var button5: UIButton!
    @IBOutlet weak var button6: UIButton!
    @IBOutlet weak var button7: UIButton!
    @IBOutlet weak var button8: UIButton!
    @IBOutlet weak var button9: UIButton!
    @IBOutlet var buttons: [UIButton]!
    
    //正確錯誤文字顯示
    @IBOutlet weak var emojiLabel: UILabel!
    //計分
    @IBOutlet weak var scoreLabel: UILabel!
    @IBOutlet weak var scoreSlider: UISlider!
    //題數
    @IBOutlet weak var questionNumber: UILabel!
    @IBOutlet weak var questionNumberSlider: UISlider!

建立設定選項button顏色的function

func setButtonColor(){
        button1.backgroundColor = UIColor(red: CGFloat.random(in: 0.93...1), green: CGFloat.random(in: 0.93...1), blue: CGFloat.random(in: 0.93...1), alpha: 1)
        button2.backgroundColor = UIColor(red: CGFloat.random(in: 0.93...1), green: CGFloat.random(in: 0.93...1), blue: CGFloat.random(in: 0.93...1), alpha: 1)
        button3.backgroundColor = UIColor(red: CGFloat.random(in: 0.93...1), green: CGFloat.random(in: 0.93...1), blue: CGFloat.random(in: 0.93...1), alpha: 1)
        button4.backgroundColor = UIColor(red: CGFloat.random(in: 0.93...1), green: CGFloat.random(in: 0.93...1), blue: CGFloat.random(in: 0.93...1), alpha: 1)
        button5.backgroundColor = UIColor(red: CGFloat.random(in: 0.93...1), green: CGFloat.random(in: 0.93...1), blue: CGFloat.random(in: 0.93...1), alpha: 1)
        button6.backgroundColor = UIColor(red: CGFloat.random(in: 0.93...1), green: CGFloat.random(in: 0.93...1), blue: CGFloat.random(in: 0.93...1), alpha: 1)
        button7.backgroundColor = UIColor(red: CGFloat.random(in: 0.93...1), green: CGFloat.random(in: 0.93...1), blue: CGFloat.random(in: 0.93...1), alpha: 1)
        button8.backgroundColor = UIColor(red: CGFloat.random(in: 0.93...1), green: CGFloat.random(in: 0.93...1), blue: CGFloat.random(in: 0.93...1), alpha: 1)
        button9.backgroundColor = UIColor(red: CGFloat.random(in: 0.93...1), green: CGFloat.random(in: 0.93...1), blue: CGFloat.random(in: 0.93...1), alpha: 1)
    }

建立畫面重設的function

題目的產生是從隨機產生的9個button中再隨機選其一的顏色做為題目

func setUI(){
        let randomButton = Int.random(in: 0...8)
        //選項button隨機色號
        setButtonColor()
        //題目Label隨機跟一個button同色
        colorLabel.backgroundColor = buttons[randomButton].backgroundColor
        //分數
        score = 100
        scoreLabel.text = "\(score)"
        scoreSlider.value = 100
        //題號
        question = 1
        questionNumber.text = "第 \(question) 題"
        questionNumberSlider.value = 1
        //emoji
        emojiLabel.text = ""
        
    }

建立跳下一題的function

題目設定為20題 當題數計算>20時 會跳出遊戲結束的訊息框

func next(){
        let randomButton = Int.random(in: 0...8)
        //選項button隨機色號
        setButtonColor()
        //題目Label隨機跟一個button同色
        colorLabel.backgroundColor = buttons[randomButton].backgroundColor
        //題數
        question += 1
        questionNumber.text = "第 \(question) 題"
        questionNumberSlider.value += 1
        //message
        if question > 20{
            popOutMessage()
            setUI()
        }
    
    }

設定彈出訊息框的function

並在測驗結束的訊息框框顯示獲得的分數

func failMessage(){
        let failMessage = UIAlertController(title: "失敗", message: "0分了 🥲🥲🥲 QQ",preferredStyle:.alert )
        let tryAgainAction = UIAlertAction(title: "再試一次", style: .default, handler: nil)
        failMessage.addAction(tryAgainAction)
        present(failMessage, animated: true, completion: nil)
    }
    
    func popOutMessage(){
        let message = UIAlertController(title: "恭喜", message: "測驗結束 獲得\(score)分🎉", preferredStyle:.alert)
        let tryAgainAction = UIAlertAction(title: "再試一次", style: .default, handler: nil)
        message.addAction(tryAgainAction)
        present(message, animated: true, completion: nil)
    }

拉IBAction

將9個選項button拉到同一個IBAction 用if else判斷是否選到正確的顏色

正確加20分 答錯扣10分 當分數扣到0分時跳出失敗訊息

@IBAction func selectButton(_ sender: UIButton) {
        if sender.backgroundColor == colorLabel.backgroundColor{
            score += 20
            scoreLabel.text = "\(score)"
            scoreSlider.value += 20
            emojiLabel.text = correct[Int.random(in: 0...3)]
            next()
            
            
        }else{
            score -= 10
            scoreLabel.text = "\(score)"
            scoreSlider.value -= 10
            emojiLabel.text = wrong[Int.random(in: 0...3)]
            if score <= 0{
                failMessage()
                setUI()
            }
}
    }
    
    @IBAction func reset(_ sender: UIButton) {
        setUI()
    }

完成～～

我的Github

GitHub - IRIS-ZZZzzz/QNA