슬롯 머신 구현하기 > 고객센터

프로젝트하다가 슬롯머신 사용하게 된 슬롯머신 구현!!!
생각보다 재밌었고,, 재밌었고 뿌듯했다 !! ㅎㅎ,,

???? 결과물




lastRolledMachineCount은 슬롯을 돌릴 숫자이다. 이건 선호에 맞게 바꿔서 쓰면 된다.
그리고 finalNumberList는 마지막에 보여주고자 하는 숫자의 리스트이다. 나는 [3,4,5]로 돌렸는데, 만약에 [1,5,2,6,4]를 넣으면 5개의 박스가 돌아가고 마지막에 1,5,2,6,4 순서대로 초록박스가 공개된다!
???? 고민 Point
처음에 어떻게 만들지.. 할 때는 ScrollView가 생각났다. ScrollView로 구현하고 위 아래를 막아서 일부만 보여주면 될 것 같다는 생각.
그래서 ScrollView에서 버튼을 눌렀을 때 ScrollView가 스크롤 되게 구현했다. 자동으로 스크롤때 멈추는 숫자가 박스마다 다르면 자연스럽게 따로 돌아가는 느낌이 날 것 같아서 숫자를 랜덤으로 불러오게 했다. 그리고 ScrollView 위로 frame 크기를 세워서 일부만 보이도록 하게 했다. lastRolledMachineCount와rolledMachineCount(현재 돌아간 숫자)가 같다면, 그때는finalNumberList에 해당하는 숫자를 박스에 보여주고, 배경을 초록색으로 바꾼다.

이렇게 하니까 얼추 비쥬얼은 완료가 되었다.

그리고 마지막으로는 버튼을 삭제하고, timer를 설정해서 0.7초마다 머신이 자동으로돌아가게 했다.

???? 코드
struct SlotMachineView: View {

@State private var finalNumberList: [Int]
@State private var rolledMachineCount: Int = 0
@State private var timer: Timer?

@State private var isFinished: Bool = false

/// 슬롯머신을 자동으로 돌릴 횟수
private let lastRolledMachineCount = 4

init(finalNumberList: [Int]) 슬롯머신 {
self.finalNumberList = finalNumberList
}

var body: some View {
VStack {
HStack {
ForEach(finalNumberList.indices, id: \.self) { index in
ScrollView {
ScrollViewReader { proxy in
ForEach(0..<10) { index in
Text(index.description)
.frame(width: 31, height: 31)
.background(isFinished ? .subGreen : .gray700)
.foregroundStyle(.white)
.cornerRadius(4)
.padding(.horizontal, 2)
.padding(.vertical, 4)
.id(index)
}
.onChange(of: rolledMachineCount, { _, newValue in
withAnimation(.spring()) {
if isFinished {
timer?.invalidate()
proxy.scrollTo(finalNumberList[index], anchor: .center)
} else {
proxy.scrollTo(Int.random(in: 1..<10), anchor: .center)
}
}
})
}
}
.frame(height: 40)
}
}
.padding(.bottom, 100)
.onAppear {
self.timer = Timer.scheduledTimer(withTimeInterval: 0.7, repeats: true) { timer in
rolledMachineCount += 1
if rolledMachineCount == lastRolledMachineCount {
isFinished = true
}
}
}
}
}
}

#Preview {
SlotMachineView(finalNumberList: [3,4,5])
}