『iOS APP-17』乒乓球計分App

target

完成下方目標：

• 每局 11 分制，每人每發 2 球換對方發球。(以皇冠顯示發球方)
• 得 11 分贏得一局 (回合)，5 局先得 3 局 (回合) 獲勝。
• 贏一局後，雙方交換場地。
• 重新開局，全部重置。

process

step 1 . 配置版面

配置數個 Label、數個 Button。
這邊為了方便更改按鈕的文字格式，在按鈕上面都有放置 Label。

step 2 . 拉 IBOutlet、宣告變數

將配置好的物件都拉上 IBOutlet，並宣告後面程式碼要用的的變數。

    @IBOutlet var mainView: UIView!
    
   //左方分數、回合分數
    @IBOutlet var leftScoreLabel: UILabel!
    @IBOutlet var leftRoundScoreLabel: UILabel!
   //右方分數、回合分數
    @IBOutlet var rightScoreLabel: UILabel!
    @IBOutlet var rightRoundScoreLabel: UILabel!

    
   //隊伍A、B 
    @IBOutlet var teamALabel: UILabel!
    @IBOutlet var teamBLabel: UILabel!

    
   //比賽結束
    @IBOutlet var gameOverLabel: UILabel!
 
   
   //左邊分數按鈕
    @IBOutlet var leftScoreButton: UIButton!
   //右邊分數按鈕
    @IBOutlet var rightScoreButton: UIButton!
    
    
   //用button當作切換發球權的皇冠logo
    @IBOutlet var leftCrown: UIButton!
    @IBOutlet var rightCrown: UIButton!
    

   //重置按鈕、重置按鈕標籤
    @IBOutlet var resetButton: UIButton!
    @IBOutlet var resetLabel: UILabel!


   //交換場地按鈕、交換場地按鈕標籤
    @IBOutlet var changeSideLabel: UILabel!
    @IBOutlet var changePlace: UIButton!
    
    
    
    var index :Int = 0
   //
    var totalScore :Int = 0
    
   //左邊分數
    var leftScore :Int = 0
   //右邊分數
    var rightScore :Int = 0
   //左邊回合分數
    var leftRoundScore :Int = 0
   //右邊回合分數
    var rightRoundScore :Int = 0
   
   //場地互換的暫存用變數
    var temporaryRoundScore = 0
    var temporaryTeamName = ""

step 3 . 設置 ViewDidLoad

    //載入畫面
     override func viewDidLoad() {
        super.viewDidLoad()

        leftScoreLabel.text = "00"
        rightScoreLabel.text = "00"
        leftRoundScoreLabel.text = String(0)
        rightRoundScoreLabel.text = String(0)


     //左邊分數標籤外框設置
        leftScoreLabel.layer.borderWidth = 10
        leftScoreLabel.layer.borderColor = UIColor.cyan.cgColor
        leftScoreLabel.layer.cornerRadius = 30
        leftScoreLabel.layer.masksToBounds = true
      //右邊分數標籤外框設置 
        rightScoreLabel.layer.borderWidth = 10
        rightScoreLabel.layer.borderColor = UIColor.cyan.cgColor
        rightScoreLabel.layer.cornerRadius = 30
        rightScoreLabel.layer.masksToBounds = true
        
      //交換場地按鈕設置
        changeSideLabel.layer.borderWidth = 3
        changeSideLabel.layer.borderColor = UIColor.cyan.cgColor
        changeSideLabel.layer.cornerRadius = 15
        changeSideLabel.layer.masksToBounds = true
        
      //重新開局按鈕設定
        resetLabel.layer.borderWidth = 3
        resetLabel.layer.borderColor = UIColor.cyan.cgColor
        resetLabel.layer.cornerRadius = 15
        resetLabel.layer.masksToBounds = true
        

      //比賽結束標題設定
        gameOverLabel.layer.borderWidth = 3
        gameOverLabel.layer.borderColor = UIColor.yellow.cgColor
        gameOverLabel.layer.cornerRadius = 20
        gameOverLabel.layer.masksToBounds = true
        
      //隊伍A標題設定
        teamALabel.layer.borderWidth = 3
        teamALabel.layer.borderColor = UIColor.yellow.cgColor
        teamALabel.layer.cornerRadius = 20
        teamALabel.layer.masksToBounds = true
      //隊伍B標題設定
        teamBLabel.layer.borderWidth = 3
        teamBLabel.layer.borderColor = UIColor.yellow.cgColor
        teamBLabel.layer.cornerRadius = 20
        teamBLabel.layer.masksToBounds = true
     
      //隱藏右邊皇冠
        rightCrown.isHidden = true
      //不隱藏場地交換標題
        changeSideLabel.isHidden = false
      //隱藏比賽結束標籤
        gameOverLabel.isHidden = true

    }

step 4. 設置 function

 //分數計算 (左方贏一局)
    func leftRoundScoreCalculate(){
        if leftScore >= 11 //在左方分數大於等於11分時 {
            leftRoundScore = leftRoundScore + 1 //左方回合分數+1分
            leftRoundScoreLabel.text = String(leftRoundScore) //左方分數標籤顯示加分後的分數
            leftScore = 0 //左方分數歸0
            leftScoreLabel.text = "00" //左方分數標籤顯示0
            rightScore = 0 //右方分數歸0
            rightScoreLabel.text = "00" //右方分數標籤顯示0
            changePlace.isEnabled = true     //「開啟」交換場地按鈕
            changeSideLabel.isHidden = false //「顯示」交換場地標籤
            rightScoreLabel.isHidden = true  //「隱藏」右邊分數標籤
            leftScoreLabel.isHidden = true   //「隱藏」左邊分數標籤
            
            if leftRoundScore >= 3 { //如果左方回合分數大於等於3分
                mainView.backgroundColor = UIColor.darkGray //則主畫面背景顏色改為深灰色
                gameOverLabel.isHidden = false  //「顯示」比賽結束按鈕
                changeSideLabel.isHidden = true //「隱藏」交換場地標籤
                changePlace.isEnabled = false   //「關閉」交換場地按鈕
            }else { //其餘狀況的話
                mainView.backgroundColor = UIColor.black //背景顏色一樣維持黑色
            }
        }else { //其餘狀況的話
            leftRoundScoreLabel.text = String(leftRoundScore) //一樣顯示左邊分數
        }
    }


  //分數計算 (右方贏一局)
    func rightRoundScoreCalculate(){
        if rightScore >= 11 //在右方分數大於等於11分時 {
                rightRoundScore = rightRoundScore + 1 //右方回合分數+1分
                rightRoundScoreLabel.text = String(rightRoundScore) //右方分數標籤顯示加分後的分數
                rightScore = 0 //右方分數歸0
                rightScoreLabel.text = "00" //右方分數標籤顯示0
                leftScore = 0 //左方分數歸0
                leftScoreLabel.text = "00" //左方分數標籤顯示0

                changePlace.isEnabled = true     //「開啟」交換場地按鈕
                changeSideLabel.isHidden = false //「顯示」交換場地標籤

                rightScoreLabel.isHidden = true  //「隱藏」右邊分數標籤
                leftScoreLabel.isHidden = true   //「隱藏」左邊分數標籤
            
            if rightRoundScore >= 3 { //如果右方回合分數大於等於3分
                mainView.backgroundColor = UIColor.darkGray //則主畫面背景顏色改為深灰色
                gameOverLabel.isHidden = false  //「顯示」比賽結束標籤
                changeSideLabel.isHidden = true //「隱藏」交換場地標籤
                changePlace.isEnabled = false   //「關閉」交換場地按鈕
            }else { //其餘狀況的話
                mainView.backgroundColor = UIColor.black //背景顏色一樣維持黑色
            }
        }else { //其餘狀況的話
            rightRoundScoreLabel.text = String(rightRoundScore) //一樣顯示右邊分數
        }
    }

step 5. 拉 IBAction

交換場地

//交換場地
    @IBAction func changePlace(_ sender: Any) //交換場地需要用到「暫存變數」{
        temporaryRoundScore = rightRoundScore  //將「右邊」回合分數存到「暫存」回合分數
        rightRoundScore = leftRoundScore       //將「左邊」回合分數存到「右邊」回合分數
        leftRoundScore = temporaryRoundScore   //將「暫存」回合分數存到「右邊」回合分數
        leftRoundScoreLabel.text = String(leftRoundScore)
        rightRoundScoreLabel.text = String(rightRoundScore)

        changePlace.isEnabled = false //按交換場地後，「關閉」更換場地按鈕
        
        temporaryTeamName = teamBLabel.text! //將「TeamB」名稱存到「暫存」名稱中
        teamBLabel.text = teamALabel.text!   //將「TeamA」名稱存到「TeamB」名稱中
        teamALabel.text = temporaryTeamName  //將「暫存」名稱存到「TeamA」名稱中
        
        if leftCrown.isHidden == true //如果左邊皇冠「隱藏」的話 {
            leftCrown.isHidden = false  //「顯示」左邊皇冠
            rightCrown.isHidden = true  //「隱藏」右邊皇冠
        }else { //如果左邊皇冠「顯示」的話
            leftCrown.isHidden = true   //「隱藏」左邊皇冠
            rightCrown.isHidden = false //「顯示」右邊皇冠
        }

        changeSideLabel.isHidden = true  //按交換場地後，「隱藏」交換場地標籤
        rightScoreLabel.isHidden = false //按交換場地後，「顯示」右邊分數標籤
        leftScoreLabel.isHidden = false  //按交換場地後，「顯示」左邊分數標籤
    }

換邊發球

乒乓球發球規則為，每人每發 2 球換對方發球。
所以這邊用雙方分數加總除以 2，整除的話即換邊發球。
其餘只要考慮好「皇冠位置 (球權)」的全部條件，並用 if else 條件式來列出就可以了。

//換邊發球 (更改皇冠位置)
    func changeServe() {
        if leftCrown.isHidden == true //如果左邊皇冠是「隱藏」的話 {
            let totalScore = leftScore + rightScore //總分＝左邊分數＋右邊分數
            if totalScore % 2 == 0 { //如果總分除以2 餘數為0的話
                leftCrown.isHidden = false  //「顯示」左邊皇冠
                rightCrown.isHidden = true  //「隱藏」右邊皇冠
            }else { //餘數不為0的狀況的話
                leftCrown.isHidden = true   //「隱藏」左邊皇冠
                rightCrown.isHidden = false //「顯示」右邊皇冠
            }
        }else if leftCrown.isHidden == false //如果左邊皇冠是「顯示」的話 {
            let totalScore = leftScore + rightScore
            if totalScore % 2 == 0 { //如果總分除以2 餘數為0的話
                leftCrown.isHidden = true   //「隱藏」左邊皇冠
                rightCrown.isHidden = false //「顯示」右邊皇冠
            }else {
                leftCrown.isHidden = false  //「顯示」左邊皇冠
                rightCrown.isHidden = true  //「隱藏」右邊皇冠
            }
        }

    }

左右按鈕加分數

    @IBAction func addLeftScore(_ sender: Any) {
        leftScore += 1 //按一下加一分

        if leftScore >= 10 //如果加分完，左邊分數大於等於10 {
            leftScoreLabel.text = "\(leftScore)"  //顯示 "10、11"
        }else { //左邊分數小於10的話
            leftScoreLabel.text = "0\(leftScore)" //顯示 "00、01、02..."
        }
        
        changeServe() //換球權func
        leftRoundScoreCalculate() //計算左邊分數func
        
    }
    
    @IBAction func addRightScore(_ sender: Any) {
        rightScore += 1
        if rightScore >= 10 //如果加分完，右邊分數大於等於10 {
            rightScoreLabel.text = "\(rightScore)"  //顯示 "10、11"
        }else { //右邊分數小於10的話
            rightScoreLabel.text = "0\(rightScore)" //顯示 "00、01、02..."
        }

        changeServe() //換球權func
        rightRoundScoreCalculate() //計算右邊分數func
    }

重置

@IBAction func reset(_ sender: Any) {
        changeSideLabel.isHidden = false
        changePlace.isEnabled = true
        gameOverLabel.isHidden = true
        rightScoreLabel.isHidden = false
        leftScoreLabel.isHidden = false
        mainView.backgroundColor = UIColor.black
        leftScore = 0
        leftRoundScore = 0
        leftScoreLabel.text = "00"
        leftRoundScoreLabel.text = "0"
        rightScore = 0
        rightRoundScore = 0
        rightScoreLabel.text = "00"
        rightRoundScoreLabel.text = "0"
        leftCrown.isHidden = false
        rightCrown.isHidden = true
    }

完整程式碼

import UIKit

class ViewController: UIViewController {
    
    @IBOutlet var mainView: UIView!
    //左方分數
    @IBOutlet var leftScoreLabel: UILabel!
    //左方回合分數
    @IBOutlet var leftRoundScoreLabel: UILabel!
    //右方分數
    @IBOutlet var rightScoreLabel: UILabel!
    //右方回合分數
    @IBOutlet var rightRoundScoreLabel: UILabel!
    
    
    @IBOutlet var changeSideLabel: UILabel!
    @IBOutlet var resetLabel: UILabel!
    
    
    @IBOutlet var teamALabel: UILabel!
    @IBOutlet var teamBLabel: UILabel!
    
    @IBOutlet var gameOverLabel: UILabel!
    
    
    @IBOutlet var leftScoreButton: UIButton!
    @IBOutlet var rightScoreButton: UIButton!
    
    
    //用button當作切換發球權的logo
    @IBOutlet var leftCrown: UIButton!
    @IBOutlet var rightCrown: UIButton!
    
    @IBOutlet var resetButton: UIButton!
    
    @IBOutlet var changePlace: UIButton!
    
    
    
    var index :Int = 0
    var totalScore :Int = 0
    
    var leftScore :Int = 0
    var rightScore :Int = 0
    var leftRoundScore :Int = 0
    var rightRoundScore :Int = 0
    
    var temporaryRoundScore = 0
    var temporaryTeamName = ""


    
    //載入畫面
     override func viewDidLoad() {
        super.viewDidLoad()

        leftScoreLabel.text = String(00)
        rightScoreLabel.text = String(00)
        leftRoundScoreLabel.text = String(0)
        rightRoundScoreLabel.text = String(0)

     //左邊分數標籤外框設置
        leftScoreLabel.layer.borderWidth = 10
        leftScoreLabel.layer.borderColor = UIColor.cyan.cgColor
        leftScoreLabel.layer.cornerRadius = 30
        leftScoreLabel.layer.masksToBounds = true
      //右邊分數標籤外框設置 
        rightScoreLabel.layer.borderWidth = 10
        rightScoreLabel.layer.borderColor = UIColor.cyan.cgColor
        rightScoreLabel.layer.cornerRadius = 30
        rightScoreLabel.layer.masksToBounds = true
        
      //交換場地按鈕設置
        changeSideLabel.layer.borderWidth = 3
        changeSideLabel.layer.borderColor = UIColor.cyan.cgColor
        changeSideLabel.layer.cornerRadius = 15
        changeSideLabel.layer.masksToBounds = true
        
      //重新開局按鈕設定
        resetLabel.layer.borderWidth = 3
        resetLabel.layer.borderColor = UIColor.cyan.cgColor
        resetLabel.layer.cornerRadius = 15
        resetLabel.layer.masksToBounds = true

      //比賽結束標題設定
        gameOverLabel.layer.borderWidth = 3
        gameOverLabel.layer.borderColor = UIColor.yellow.cgColor
        gameOverLabel.layer.cornerRadius = 20
        gameOverLabel.layer.masksToBounds = true
        
      //隊伍A標題設定
        teamALabel.layer.borderWidth = 3
        teamALabel.layer.borderColor = UIColor.yellow.cgColor
        teamALabel.layer.cornerRadius = 20
        teamALabel.layer.masksToBounds = true
      //隊伍B標題設定
        teamBLabel.layer.borderWidth = 3
        teamBLabel.layer.borderColor = UIColor.yellow.cgColor
        teamBLabel.layer.cornerRadius = 20
        teamBLabel.layer.masksToBounds = true
     
      //隱藏右邊皇冠
        rightCrown.isHidden = true
      //不隱藏場地交換標題
        changeSideLabel.isHidden = false
      //隱藏比賽結束標籤
        gameOverLabel.isHidden = true

    }
    

  //左方贏一局
    func leftRoundScoreCalculate(){
        if leftScore >= 11{
            leftRoundScore = leftRoundScore + 1
            leftRoundScoreLabel.text = String(leftRoundScore)
            leftScore = 0
            leftScoreLabel.text = "0"
            rightScore = 0
            rightScoreLabel.text = "0"
            changePlace.isEnabled = true
            changeSideLabel.isHidden = false
//            changePlace()
            rightScoreLabel.isHidden = true
            leftScoreLabel.isHidden = true
            
            if leftRoundScore >= 3 {
                mainView.backgroundColor = UIColor.darkGray
                gameOverLabel.isHidden = false
                changeSideLabel.isHidden = true
                changePlace.isEnabled = false
            }else {
                mainView.backgroundColor = UIColor.black
            }
        }else {
            leftRoundScoreLabel.text = String(leftRoundScore)
        }
    }
  //右方贏一局
    func rightRoundScoreCalculate(){
        if rightScore >= 11{
                rightRoundScore = rightRoundScore + 1
                rightRoundScoreLabel.text = String(rightRoundScore)
                rightScore = 0
                rightScoreLabel.text = "0"
                leftScore = 0
                leftScoreLabel.text = "0"
                changePlace.isEnabled = true
                changeSideLabel.isHidden = false
                
                //            changePlace()
                rightScoreLabel.isHidden = true
                leftScoreLabel.isHidden = true
            
            if rightRoundScore >= 3 {
                mainView.backgroundColor = UIColor.darkGray
                gameOverLabel.isHidden = false
                changeSideLabel.isHidden = true
                changePlace.isEnabled = false
            }else {
                mainView.backgroundColor = UIColor.black
            }
        }else {
            rightRoundScoreLabel.text = String(rightRoundScore)
        }
    }
    
    

//交換場地
    @IBAction func changePlace(_ sender: Any) {
        temporaryRoundScore = rightRoundScore
        rightRoundScore = leftRoundScore
        leftRoundScore = temporaryRoundScore
        leftRoundScoreLabel.text = String(leftRoundScore)
        rightRoundScoreLabel.text = String(rightRoundScore)
        changePlace.isEnabled = false
        
        temporaryTeamName = teamBLabel.text!
        teamBLabel.text = teamALabel.text!
        teamALabel.text = temporaryTeamName
        
        if leftCrown.isHidden == true {
            leftCrown.isHidden = false
            rightCrown.isHidden = true
        }else {
            leftCrown.isHidden = true
            rightCrown.isHidden = false
        }
        changeSideLabel.isHidden = true
        rightScoreLabel.isHidden = false
        leftScoreLabel.isHidden = false
    }
    
    
   
//換邊發球
    func changeServe() {
        if leftCrown.isHidden == true {
            let totalScore = leftScore + rightScore
            if totalScore % 2 == 0 {
                leftCrown.isHidden = false
                rightCrown.isHidden = true
            }else {
                leftCrown.isHidden = true
                rightCrown.isHidden = false
            }
        }else if leftCrown.isHidden == false {
            let totalScore = leftScore + rightScore
            if totalScore % 2 == 0 {
                leftCrown.isHidden = true
                rightCrown.isHidden = false
            }else {
                leftCrown.isHidden = false
                rightCrown.isHidden = true
            }
        }

    } 
    
    
    @IBAction func addLeftScore(_ sender: Any) {
        leftScore += 1
        leftScoreLabel.text = String(leftScore)
        changeSide()
        leftRoundScoreCalculate()       
    }
    
    @IBAction func addRightScore(_ sender: Any) {
        rightScore += 1
        rightScoreLabel.text = "\(rightScore)"
        changeSide()
        rightRoundScoreCalculate()
    }
    
    
    
  //換邊發球
    func changeSide() {
        if leftCrown.isHidden == true {
            let totalScore = leftScore + rightScore
            if totalScore % 2 == 0 {
                leftCrown.isHidden = false
                rightCrown.isHidden = true
            }else {
                leftCrown.isHidden = true
                rightCrown.isHidden = false
            }
        }else if leftCrown.isHidden == false {
            let totalScore = leftScore + rightScore
            if totalScore % 2 == 0 {
                leftCrown.isHidden = true
                rightCrown.isHidden = false
            }else {
                leftCrown.isHidden = false
                rightCrown.isHidden = true
            }
        }
        
    }
    
    @IBAction func reset(_ sender: Any) {
        leftScore = 0
        leftRoundScore = 0
        leftScoreLabel.text = "00"
        leftRoundScoreLabel.text = "0"
        rightScore = 0
        rightRoundScore = 0
        rightScoreLabel.text = "00"
        rightRoundScoreLabel.text = "0"
        leftCrown.isHidden = false
        rightCrown.isHidden = true
    }
}