『iOS APP-17』乒乓球計分App
Published in
26 min readApr 27, 2023
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
}
}