[ 개발 기본 지식 ] 텍스트 기반의 가위 바위 보 게임 -1

마지막으로 Playground 로 텍스트 기반의 게임을 만드는 과정을 담아보았다.
컴퓨터와 랜덤 가위바위보 게임이 그나마 간단 하다고 하여 도전 !

import와 struct 선언

import SwiftUI
import PlaygroundSupport

import SwiftUI: SwiftUI를 사용하여 화면(UI)를 만드는 데 필요한 코드들을 가져온다.

import PlaygroundSupport: Swift Playgrounds에서 코드를 실행하고 결과를 화면에 보여주기 위해 필요하다.

struct ContentView: View {

struct ContentView: View: 화면을 나타내는 구조체를 정의한다. View를 채택하여 SwiftUI의 사용자 인터페이스를 구성한다.

변수 선언

let options = ["가위", "바위", "보"]

@State private var userChoice: String? = nil
@State private var computerChoice: String = ""
@State private var result: String = "결과가 여기에 표시됩니다."
@State private var resultColor: Color = .black

options: 게임에서 선택할 수 있는 가위, 바위, 보를 담은 배열이다.

@State: SwiftUI에서 화면에 표시되는 값을 변경하기 위해 사용한다. 예를 들어, 사용자의 선택, 컴퓨터의 선택, 결과 메시지 등을 저장한다.

userChoice: 사용자가 선택한 가위, 바위, 보를 저장한다.

computerChoice: 컴퓨터의 선택을 저장한다.

result: 게임 결과 메시지를 저장한다.

resultColor: 결과 메시지의 색상을 저장한다.

화면을 구성하는 body

var body: some View {
    ZStack {
        Color.yellow.opacity(0.3).edgesIgnoringSafeArea(.all)

body: 화면에 무엇을 보여줄지 정의하는 부분이다.

ZStack: 화면에 여러 요소를 겹쳐서 배치할 수 있게 한다. 여기서는 배경색과 그 위에 다른 요소들을 겹쳐서 표현한다.

Color.yellow.opacity(0.3).edgesIgnoringSafeArea(.all): 화면 전체에 노란색 배경을 설정하고, opacity(0.3)로 반투명하게 만든다. edgesIgnoringSafeArea(.all)은 배경색이 화면의 모든 영역을 채우도록 한다.

게임 제목 및 컴퓨터의 선택

VStack {
    Text("가위바위보 게임을 시작합니다!")
        .font(.largeTitle)
        .fontWeight(.bold)
        .padding()
    
    Text("컴퓨터의 선택: \(computerChoice)")
        .padding()
        .font(.title2)

VStack: 여러 요소를 수직으로 배치한다.

Text: 텍스트를 화면에 표시한다.

첫 번째 Text는 게임 제목을 표시하고, 폰트 크기를 largeTitle로 지정하고 굵게(fontWeight(.bold)) 표현한다.

두 번째 Text는 컴퓨터의 선택을 보여주며, computerChoice 변수의 값을 업데이트해 화면에 나타낸다.

게임 결과 표시 및 버튼

Text(result)
    .padding()
    .font(.title)
    .foregroundColor(resultColor)

Text(result): 게임 결과 메시지를 표시한다. resultColor에 따라 글자 색이 바뀐다.

HStack {
    ForEach(options, id: \.self) { option in
        Button(action: {
            playGame(userChoice: option)
        }) {
            Text(option)
                .padding()
                .background(Color.blue)
                .foregroundColor(.white)
                .cornerRadius(10)
                .shadow(radius: 5)
        }
    }
}
.padding()

HStack: 요소들을 수평으로 배치한다. 여기에 가위, 바위, 보 버튼을 만든다.

ForEach: 배열 options의 각 요소에 대해 반복하여 버튼을 만든다.

Button: 각 옵션에 대한 버튼을 생성한다. 사용자가 버튼을 누르면 playGame 함수가 실행되어 게임 결과를 계산한다.

action: 버튼이 눌렸을 때 실행할 코드를 정의한다.

Text(option): 버튼 안에 표시될 텍스트를 정의한다.

padding, background, cornerRadius, shadow: 버튼의 모양과 스타일을 설정한다.

게임 로직 함수

func playGame(userChoice: String) {
    computerChoice = options.randomElement()!
    
    if userChoice == computerChoice {
        result = "비기비기 야야 비겼네요"
        resultColor = .gray
    } else if (userChoice == "가위" && computerChoice == "보") ||
              (userChoice == "바위" && computerChoice == "가위") ||
              (userChoice == "보" && computerChoice == "바위") {
        result = "당신이 이겼...어요"
        resultColor = .green
    } else {
        result = "저런 저에게 졌네요^^"
        resultColor = .red
    }
}

playGame 함수: 사용자가 버튼을 누를 때 호출된다. 컴퓨터의 선택을 무작위로 결정하고, 결과를 비교하여 메시지와 색상을 업데이트한다.

게임 화면 표시

PlaygroundPage.current.setLiveView(ContentView())

PlaygroundPage.current.setLiveView: Swift Playgrounds에서 이 코드를 실행했을 때 화면에 ContentView를 보여준다.

이렇게 각 부분을 하나씩 살펴보면 화면에 텍스트, 버튼, 배경색 등을 구성하고, 사용자의 선택에 따라 게임 결과를 표시하는 로직을 이해할 수 있게 된다. Swift Playgrounds에서 이 코드를 직접 실행해보고 각 부분을 조금씩 변경해 보면서 더 익숙해질 수 있을 것 같다.

---

그렇게 아래는 총 코드인데, 플레이라운드에서 돌려보면 실행 된다.

import SwiftUI
import PlaygroundSupport

struct ContentView: View {
    let options = ["가위", "바위", "보"]
    @State private var userChoice: String? = nil
    @State private var computerChoice: String = ""
    @State private var result: String = "결과가 여기에 표시됩니다."
    @State private var resultColor: Color = .black

    var body: some View {
        ZStack {
            Color.orange.opacity(0.3).edgesIgnoringSafeArea(.all) // 배경색 설정
            
            VStack {
                Text("자,가위바위보 게임을 시작합니다!")
                    .font(.largeTitle)
                    .fontWeight(.bold)
                    .padding()
                
                Text("MAC이 낸 것: \(computerChoice)")
                    .padding()
                    .font(.title2)
                
                Text(result)
                    .padding()
                    .font(.title)
                    .foregroundColor(resultColor) // 결과에 따라 색상 변경
                
                HStack {
                    ForEach(options, id: \.self) { option in
                        Button(action: {
                            playGame(userChoice: option)
                        }) {
                            Text(option)
                                .padding()
                                .background(Color.blue)
                                .foregroundColor(.white)
                                .cornerRadius(10)
                                .shadow(radius: 5)
                        }
                    }
                }
                .padding()
            }
        }
    }
    
    func playGame(userChoice: String) {
        computerChoice = options.randomElement()!
        
        if userChoice == computerChoice {
            result = "비기비기 야야 비겼네요"
            resultColor = .gray
        } else if (userChoice == "가위" && computerChoice == "보") ||
                  (userChoice == "바위" && computerChoice == "가위") ||
                  (userChoice == "보" && computerChoice == "바위") {
            result = "당신이 이겼...어요"
            resultColor = .green
        } else {
            result = "저런 저에게 졌네요^^"
            resultColor = .red
        }
    }
}

PlaygroundPage.current.setLiveView(ContentView())