#9 桌球計分板(Scoreboard)

前幾天看到彼得傳了一張照片，是參加桌球比賽第一名的照片，恭喜恭喜！然後昨天奧運桌球男團也順利晉級8強，所以就決定來練習這個作業，做個桌球記分板，先把要做的功能列出來。

• 每局 11 分制，輸流發球，發球時每 2 球輪替一次，達到 11 分時獲勝，上方獲勝的局數更新。
• 10 比 10 平手後(deuce)，發球改成每 1 球輪替一次，先多得 2 分的獲勝。
• 顯示目前的發球方。
• 可在畫面上輸入雙方的名字。
• 更換背景。
• 點選 Reset 會將比數清空，大數字和小數字都清成 0。
• 點選 Change Side 將讓左右的分數互換。
• 點選 Rewind 會回到上一步。

1. 更換背景。

一開始做這功能時，我想用Pop Up Button 顯示可以更換背景的選單，之前沒用過這元件，第一次用時發現不知道要怎麼拉線到IBAction，google了一下剛好有影片可以參考，照著影片上面跟著做就能成功拉線，可以從左邊物件選項直接拉線到下面的First Responder選擇要連線的IBAction。

參考影片

完成IBAction的拉線後，我是用switch來判斷sender.title要顯示哪個顏色。

@IBAction func setBackgroundStyle(_ sender: UIAction){
    switch sender.title {
        case "Dark" :
            backgroundImageView.backgroundColor = .darkGray
        case "Light" :
            backgroundImageView.backgroundColor = .systemBackground
        case "Blue" :
            backgroundImageView.backgroundColor = UIColor(red: 48/255, green: 124/255, blue: 245/255, alpha: 1)
        case "Orange" :
            backgroundImageView.backgroundColor = UIColor(red: 221/255, green: 100/255, blue: 63/255, alpha: 1)
        case "Green" :
            backgroundImageView.backgroundColor = UIColor(red: 105/255, green: 155/255, blue: 64/255, alpha: 1)
        default:
            return
     }
}

更換背景

2.可在畫面上輸入雙方的名字。

把兩邊更改名字的Button都連到同一個IBAction，並用tag值區分是哪邊要改名子，在用UIAlertController彈出視窗。

顯示警告訊息和選單的 UIAlertController

3. 點選 Rewind 會回到上一步。

這功能想了一下還是不知道怎麼做，看了彼得所提供的AI方法，決定直接拿來用，照抄！主要就是用 ”陣列” 把雙方得分紀錄存下來，回到上一步時先移除陣列最後一個元素，在把陣列的最後一個資料取出來顯示。

AI 實作的 UIKit 桌球計分板(Scoreboard) rewind 功能

4.補上其他功能，也是參考之前學長姐作品，就不贅述了～

DEMO:

Gisthub:

GitHub - ggisfun/TableTennis_Scoreboard

Reference:

#154 桌球計分板(Scoreboard)