#5 輪盤遊戲(Roulette) App

江子安
海大 SwiftUI iOS / Flutter App 程式設計
5 min readMar 14, 2023

哈囉~我又回來拉。休息了一個月之後,決定要挑戰更難的遊戲設計。這次要設計的是著名的俄羅斯轉盤,參考歐洲的評分規則。主要目的是讓玩家能在基本的遊戲規則上,體驗更生動有趣的遊戲畫面。這次ㄧ樣是以Disney為主題。

一、成果MP4

youtube 成果

二、Github link

三、iPhone、iPad截圖

iPhone 14 Pro
iPad Pro 11 inch

四、功能介紹

  1. 使用者可以選擇籌碼價錢進行下注

問題:一開始在設計的時候,變更一個數的籌碼,之前下注的籌碼也會跟著改變。

原因:因為籌碼的變數是用Binding去做輸入,所以其他的Button改變所有的都會跟著改變。

解決:用另一個變數去存Button的籌碼。

2. 選擇下著數字後,會在上面顯示籌碼金額,方便玩家了解下注情況

下注GIF

3. 下注的時候會伴隨籌碼音效,讓玩家更身歷其境

— 利用AVFoundation去找歌曲的路徑,按下按鈕後觸發player.play()

4. 玩家所擁有的籌碼會隨著下注金額減少,即時知道有多少餘額可以支配

— 因為總金額,總下注籌碼在許多頁面都會用到,所以把它設定為environmentObject

class Chips:ObservableObject{
@Published var total = 0
@Published var budget = 1000000
}

5. Spin功能 — 按下Spin後會隨機選取一個數字

6. Spin功能 — 搭配轉動的輪盤,讓使用者像在拉斯維加斯賭注一樣緊張刺激

— 這個功能也是我花最多時間在研究的功能,能夠做出來真的直接痛哭流涕!!!主要是用圓去計算角度,360/總共數字數量,最後再搭配陣列去取得數字跟顏色

Roulette GIF

7. Spin功能 — 跳出最終得獎結果

— 利用Alter去顯示最終數字和總共贏得多少錢,並將增加的錢傳回玩家總擁有的金額上

8. Reset 功能

— 覺得自己下錯了嗎?不用擔心,只要按下Reset鍵一切重新來過

Reset GIF

9. 背景音樂

— 想要增加刺激感嗎?只要打開App即可享有無限循環的歡樂背景音樂

— 利用AVPlayerLooper循環播放音樂

五、程式碼介紹

  1. 架構圖
架構圖

a. Roulette專門設計轉動的輪盤和隨機數字

b. Button為不同規則的按鈕,以及執行結果

c. Model存環境及類別設定

struct ChoseNumber:Hashable{
var number:Array<Int>
var money:Int
}

//1-18 10-36
struct ChoseHalf:Hashable{
var number:Array<Int>
var money:Int
}

//Red Black
struct ChoseColor:Hashable{
var color:Array<Color>
var money:Int
}

//Odd Even
struct ChoseOdd:Hashable{
var number:Array<Int>
var money:Int
}

//1st 12 2st 12 3st 12
struct ChoseTwoToOne:Hashable{
var number:Array<Int>
var money:Int
}

//3's two to one
struct ChoseTriple:Hashable{
var number:Array<Int>
var money:Int
}

當按下數字按鈕後,會將數字的規則和下注金額存入提前設定好的陣列當中,最後在計算總金額的時候,只需將陣列取出來判斷隨機的數字有沒有在陣列裡面。

不同頁面之前利用Binding去傳遞變數

六、結論與心得

因為是隔一段時間才重新碰swiftul,所以花了一些時間去熟悉。這次作業花最多心力的是在讓輪盤轉動的地方,因為轉動出來的結果要能夠和找到的圖片符合,在計算角度上面要不斷地去更正,雖然很辛苦,但做出來超有成就感的。

這次還有很多功能想做,像是紀錄上一次下注狀況,轉盤可以轉得更順一點,還有籌碼收回的特效。但因為在計算角度上花太多時間了,所以沒能實現,期待之後更新!!

--

--