❀ 18 乾杯遊戲App

今天的文章主要是由點餅乾遊戲延伸出的「乾杯遊戲🍺」～～
先來看看畫面☟

❁ 功能

這次用到的功能有ImageView的動畫、Label顯示乾杯的次數、利用Array跟While條件做出隨機更換背景、AVFoundatoin播放音效等。
以下是這次的程式 ⇣
♫音效
✚乾杯次數
☐背景
🍻啤酒乾杯動畫
(為了方便辨識在看的到底是哪部分，我就用圖案分類了😂程式真的是越來越複雜ＱＱ)

import UIKit
//♫為了使用播放音樂的功能，需要加入AVFoundation
import AVFoundation

class ViewController: UIViewController {
    
    //♫建立AVPlayer用來播放音樂，為了不在程式執行funtion時被消除而無法播完聲音，所以要寫在funtion外
    var touchPlayer = AVPlayer()
    
    //✚先宣告乾杯的初始次數為0
    var cheersCounte = 0
    
    //☐建立背景圖的陣列(Array)，宣告當前背景為"酒吧"
    let backgroundArray = ["酒吧", "夜店", "超商", "居酒屋"]
    var currentPlace = "酒吧"
    
    //把會用程式調整到的UI元件拉進來(像畫面中的cheers沒有需要設定的地方，就沒有拉進來)
    @IBOutlet weak var backgroundImageView: UIImageView!
    @IBOutlet weak var countLabel: UILabel!
    @IBOutlet weak var animateImageView: UIImageView!
    @IBOutlet weak var nextButton: UIButton!
    //這邊的cheerButton是放在啤酒圖案上方的按鈕，讓使用者感覺是按到啤酒
    @IBOutlet weak var cheersButton: UIButton!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //♫導入音效，連結上面的AVPlayer
        let url = Bundle.main.url(forResource: "乾杯", withExtension: "mp3")!
        let player = AVPlayerItem(url: url)
        touchPlayer.replaceCurrentItem(with: player)
    }

    //按下啤酒按鍵時做的事情
    @IBAction func cheers(_ sender: Any) {
        //✚增加乾杯次數，顯示在Label
        cheersCounte += 1
        countLabel.text = "\(cheersCounte)"
        
        //🍻製作啤酒動畫(可以參考「利用 UIImageView 實現多張圖片連續播放的動畫」這篇文章)
        var images = [UIImage]()
        for i in 0...3 {
            images.append(UIImage(named: "beer-\(i)")!)
        }
        animateImageView.animationImages = images
        animateImageView.animationDuration = 0.3
        animateImageView.animationRepeatCount = 1
        animateImageView.startAnimating()
        
        //♫設定音效的數度、播出音效、將音效進度拉回原點(像一般影片播放完需要拉回原點後才能再次播放一樣)
        touchPlayer.rate = 0.01
        touchPlayer.play()
        touchPlayer.seek(to: .zero)
    }

    //按下「下一間」時做的事情
    @IBAction func next(_ sender: Any) {
        //✚乾杯次數歸零，顯示在Label
        cheersCounte = 0
        countLabel.text = "\(cheersCounte)"
        
        //☐宣告新的背景圖newPlace為背景陣列的亂數(隨機產生)
        var newPlace = backgroundArray.randomElement()!
        //☐判斷如果新的背景圖跟隨機產生的背景圖一樣的話，再隨機產生一次背景
        while currentPlace == newPlace {
            newPlace = backgroundArray.randomElement()!
        }
        //☐讓一開始設定的當前背景換成新產生的背景，這樣在顯示及下一次執行next functoin時，currentPlace才會是當前的背景
        currentPlace = newPlace
        //☐背景ImageView換成當前背景
        backgroundImageView.image = UIImage(named: currentPlace)
    }
    
}

另外補充一下，因為我不會找音效，所以我是自己錄的😂之後再來研究，音檔的資源是直接放在Navigator，我是參考下面學長姐的文章～

#18 積功德App－ ④ background music & audio effect 讓App更生動

接下來看看操作畫面(๑•̀ㅂ•́)و✧
(一樣想聽音效的話要下載下來的GitHub來試試呦～gif展示成果的乾杯動作也不是很流暢，直接下載執行會更完整一點！)

❁ 附上GitHub

GitHub - labcgood/cheersClicker

又完成了一個App，先來去乾杯啦(“￣▽￣)-o█ █o-(￣▽￣”)/