iOS HW結合圖片、文字、button 的 UIKit IBAction 練習題-搖搖猜猜0903
Published in
12 min readSep 4, 2024
本周作業練習：
- IBOutlet
- IBAction
- 點擊播放音樂
- SegmentedControl切換
- If…else
作業發想的靈感來源：
小時候拿到玩具盒，還沒拆封前都會先搖一搖，很期待裡面的玩具是甚麼、零錢罐也是，總要搖個幾次，聽聽裡面的聲音再猜一下，也更期待裡面的驚喜(拆玩具的時候，總是最開心的時刻)，就像健達出奇蛋，或是以前雜貨店買的10元玩具一樣，屬於一種儀式感。
Copilot設計的情境圖
搖搖猜猜APP：
玩具盒、搖瑤看、聽聲音猜裡面是什麼玩具
零錢罐、搖搖看、聽聲音猜總共存多少硬幣
搖越多下、分數越高、猜的越準喔！
先來看最後的成果：
搖搖猜猜APP分兩個項目：
玩具盒和零錢罐
作業看了很多同學作品，一開始想的有點太大，但是自己很多功能還做不出來，程式也有點看不懂，於是把簡化和模仿，最後只好先做自己會的部分。
程式說明：
- 在ImageView上面放四個UIBotton(做成透明)，針對不同地方點擊會有不同的搖搖次數。
- SegmentedControl切換時，也會有對應的音效，並且切換時分數會重新計算。
- 增加Reset按鍵，重新開始。
- viewDidLoad()設定初始的畫面。
- 音樂播放需要注意，記得增加幾行程式，不然聲音只會撥放一次。
touchPlayer.rate = 0.01
touchPlayer.play()
touchPlayer.seek(to: .zero)完整程式：
//
// ViewController.swift
// game
//
// Created by Billagood on 2024/9/2.
//
import UIKit
import AVFoundation
class ViewController: UIViewController {
let moneyPlayer = AVPlayer()
let toyPlayer = AVPlayer()
var touchPlayer = AVPlayer()
//var gameTime = 30
//var gameTimer:Timer?
var clickCount = 0
var moneyCount = 0
var toyCount = 0
//遊戲時間沒用到
//分數顯示
@IBOutlet weak var scoreLabel: UILabel!
//零錢和玩具的圖片
@IBOutlet weak var stuffImageView: UIImageView!
//點擊按鈕
@IBOutlet weak var pressButton: UIButton!
@IBOutlet weak var pressButton2: UIButton!
@IBOutlet weak var pressButton3: UIButton!
@IBOutlet weak var pressButton4: UIButton!
//兩個切換的分類選單
@IBOutlet weak var stuffSegmentedControl: UISegmentedControl!
//玩具盒 搖瑤看 聽聲音猜裡面是什麼玩具
//零錢罐 搖搖看 聽聲音猜總共存多少硬幣
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
//初始畫面設定
stuffImageView.image = UIImage(named: "toybox")
scoreLabel.text = ("快點開始搖")
//音樂播放
let moneyUrl = Bundle.main.url(forResource: "shaking_moneybox_voice", withExtension: "mp3")!
let moneyPlayerItem = AVPlayerItem(url: moneyUrl)
let toyUrl = Bundle.main.url(forResource: "shaking_toybox_voice", withExtension: "mp3")!
let toyPlayerItem = AVPlayerItem(url: toyUrl)
moneyPlayer.replaceCurrentItem(with: moneyPlayerItem)
toyPlayer.replaceCurrentItem(with: toyPlayerItem)
touchPlayer = toyPlayer
clickCount = 0
//gameTime = 30沒用到
//gameTimeLabel.text = "遊戲時間：\(gameTime)"
}
@IBAction func Segment(_ sender: Any) {
//切換的同時分數 聲音都要跟著切換
let stuffChangePage = stuffSegmentedControl.selectedSegmentIndex
if stuffChangePage == 0{
stuffImageView.image = UIImage(named: "toybox")
toyCount = 0
scoreLabel.text = ("搖的次數：\(toyCount)")
touchPlayer = toyPlayer
touchPlayer.rate = 0.01
touchPlayer.play()
touchPlayer.seek(to: .zero)
}else if stuffChangePage == 1 {
stuffImageView.image = UIImage(named: "moneybox")
moneyCount = 0
scoreLabel.text = ("搖的次數：\(moneyCount)")
touchPlayer = moneyPlayer
touchPlayer.rate = 0.01
touchPlayer.play()
touchPlayer.seek(to: .zero)
}
}
@IBAction func press(_ sender: Any) {
if stuffImageView.image == UIImage(named: "toybox"){
toyCount += 1
scoreLabel.text = ("搖的次數：\(toyCount)")
touchPlayer = toyPlayer
touchPlayer.rate = 0.01
touchPlayer.play()
touchPlayer.seek(to: .zero)
} else if stuffImageView.image == UIImage(named: "moneybox"){
moneyCount += 1
scoreLabel.text = ("搖的次數：\(moneyCount)")
touchPlayer = moneyPlayer
touchPlayer.rate = 0.01
touchPlayer.play()
touchPlayer.seek(to: .zero)
}
}
@IBAction func press2(_ sender: Any) {
if stuffImageView.image == UIImage(named: "toybox"){
toyCount *= 3
scoreLabel.text = ("搖的次數：\(toyCount)")
touchPlayer = toyPlayer
touchPlayer.rate = 0.01
touchPlayer.play()
touchPlayer.seek(to: .zero)
} else if stuffImageView.image == UIImage(named: "moneybox"){
moneyCount *= 3
scoreLabel.text = ("搖的次數：\(moneyCount)")
touchPlayer = moneyPlayer
touchPlayer.rate = 0.01
touchPlayer.play()
touchPlayer.seek(to: .zero)
}
}
@IBAction func press3(_ sender: Any) {
if stuffImageView.image == UIImage(named: "toybox"){
toyCount -= 5
scoreLabel.text = ("搖的次數：\(toyCount)")
touchPlayer = toyPlayer
touchPlayer.rate = 0.01
touchPlayer.play()
touchPlayer.seek(to: .zero)
} else if stuffImageView.image == UIImage(named: "moneybox"){
moneyCount -= 5
scoreLabel.text = ("搖的次數：\(moneyCount)")
touchPlayer = moneyPlayer
touchPlayer.rate = 0.01
touchPlayer.play()
touchPlayer.seek(to: .zero)
}
}
@IBAction func press4(_ sender: Any) {
if stuffImageView.image == UIImage(named: "toybox"){
toyCount -= 10
scoreLabel.text = ("搖的次數：\(toyCount)")
touchPlayer = toyPlayer
touchPlayer.rate = 0.01
touchPlayer.play()
touchPlayer.seek(to: .zero)
} else if stuffImageView.image == UIImage(named: "moneybox"){
moneyCount -= 10
scoreLabel.text = ("搖的次數：\(moneyCount)")
touchPlayer = moneyPlayer
touchPlayer.rate = 0.01
touchPlayer.play()
touchPlayer.seek(to: .zero)
}
}
@IBAction func reset(_ sender: Any) {
if stuffImageView.image == UIImage(named: "toybox"){
toyCount = 0
scoreLabel.text = ("搖的次數：\(toyCount)")
}else if stuffImageView.image == UIImage(named: "moneybox"){
moneyCount = 0
scoreLabel.text = ("搖的次數：\(toyCount)")
}
}
}參考其他學長姊的作業案例，期望還有增加的功能(未來待加強)：
開始按鈕、倒數計時、切換背景、有些重複的地方可以寫成func、聲音變化(點擊分數隨不同得分有音效變化，增加趣味性)、或是…等太多。希望自己在加強程式的部分，不然看別人的作品有點心癢癢。
心得：
- 這次作業真的絞盡腦汁，遇到許多問題，花很多時間研究，中間也問彼得潘和chatGPT，真的幫助很大(有問題真的可以先問AI如下連結參考)，從許多次debug學到不少要注意的小地方和程式的邏輯。https://chatgpt.com/share/0b4d0a8a-d26e-412c-adcc-f6f7b6381d87
- 寫程式真的還是量力而為，有些自己還沒學過的先不要看別人的作品好厲害就想趕快拿來用，這樣有點危險，畢竟還是初學者，結果後續就遇到一堆問題，搞了好幾天。應該回到基本面，課堂有教的一定要會而且要熟悉，再看彼得潘推薦的補充，循序漸進的學習比較適合，俗語說：貪多嚼不爛，也是同樣的道理，基礎打好之後再學其他進階的更好。
- 一開始作業難產，想不到合適的主題，可能大家做的都太優秀了，後來先從mp3音效找起，也花了不少時間搜尋，推薦小森平的音效，資源很多，原本也想用氣泡紙當主題，但是沒找到氣泡紙按壓的合適音效，最後才鎖定用玩具盒和零錢罐來當作主題，可能也是兒時回憶吧，接著才是找圖片素材，這次作業很像在做遊戲APP，尤其程式也比之前複雜一些。
- 寫作業和寫程式很容易專注一件事情達到「心流」的狀態，時間一下子就過了，嘗試的過程中一直try and error，最後做出來成果也很有心得，所以本篇心得寫的特別多。
參考資料：
