본문 바로가기

Programming/iOS & swfit

[iOS/swift] 랜덤 숫자 맞추기 간단 게임 만들기 | Making to guess random number on iOS with swift

짬짬이 ios/swift application을 가지고 놀 수 있는 코딩을 해 보려고 한다. 왜냐.. 심심해서 -_-; 인터넷 + 관련 서적에서 쉽게 찾을 수 있는 예제들을 조금씩 바꾸어 작성해 보려고 한다. 중간 중간 틀리거나 오류가 있으면 알려주시면 땡큐~!

X-CODE를 실행하면 위와 같은 창이 나타난다. 여기서는 새로운 프로젝트를 만들 예정이므로 'Create a new Xcode project' 를 선택하면 된다.


간단한 iOS app (앱이라고 하기 보다 테스트라고 하는게....ㅎㅎ)을 만들 예정이기에 'Single View Application' 을 선택한다.


Product Name 을 넣으라는 창이 나온다. 여기에 이 프로젝트를 어떤 이름으로 할지 물어보는 것이기에 적당한 이름을 넣어주면 된다.


여기서는 1-99까지 숫자를 맞추는 간단한 코딩을 해보려고 하기에 'Guess The Number Game' 이라는 이름을 명명하였다.



이렇게 새로운 프로젝트를 시작하면 위와 같은 형태의 새로운 창이 나타난다.


ios application 을 만들때는 MVC 모델을 기억하면 된다. 

M: model

V: view

C: controller



왼쪽의 패널에서 Main storyboard 를 클릭하면 위의 그림과 같이 사용자가 볼 수 있는 UI(User Interface) 창이 나타난다. 여기에 사용자가 컨트롤 하거나 볼 수 있는 객체(Object) 를 넣어주면 된다.


오른쪽 하단에 있는 원형 모양을 클릭 후 찾고자 하는 객체를 검색하여 위와 같이 보드로 드랙(Drag)하여 가져다 놓으면 된다. 여기서는 text field 하나를 가져다 놓았다. 여기에 숫자를 입력할 예정이다.


text field 를 클릭하면 오른쪽 상단에 6개의 창 중 오른쪽에서 3번째에 있는 Attribute(우리말로는 속성 정도에 해당) 창이 뜬다. 여기서 이 텍스트 필드의 속성을 바꾸어 줄수 있다. 폰트 크기며, 정렬을 어떻게 할지 등등...


가운데 정렬, 기본적으로 보이는 텍스트를 변경해 주었다.


이번에는 Label 객체를 추가하였다. 텍스트에 넣은 숫자가 높은 숫자인지 낮은 숫자인지 혹은 정확한 숫자인지를 사용자에게 알려주게 할 용도로 추가한 것이다. 기본적인 속성 변경은 위의 텍스트 필드 속성을 변경하는 것과 동일하다.


이번에는 버튼을 추가하였다. 이 버튼을 클릭하였을시에 넣어준 숫자가 낮은지, 높은지 혹은 정확하게 예측한 값인지를 판가름 하게 하는 일종의 트리거이다. 물론 맞는 값을 찾은후에는 다시 도전하게 할 용도의 버튼이다.


이제 코딩을 통해서 각각의 객체가 어떻게 작동할지를 지정해주면 된다. 오른쪽 상단에 동그라미가 2개 있는 것을 클릭하면 위와 같이 2개의 창이 나타난다. 왼쪽은 사용자가 확인하는 창이고, 오른쪽은 이 사용자가 보는 창이 어떻게 작동할지 코드를 통해서 control 하는 창이라고 보면 된다.


왼쪽 객체 위에서 control 키를 누른 상태로 마우스(혹은 트랙패드) 왼쪽 클릭을 한 후에 오른쪽 코드로 드래그 하면 파란색 선이 나타나면서 어디에 끌어다 놓을지 정하면 되는 선이 나타난다. 이렇게 끌어다 놓으면 위의 그림과 같이 connection 에 두가지 경우가 있는데, 하나는 outlet 이고  또 다른 하나는 action 이다. 간단히는 outlet 은 그 값을 활용한다고 생각하면 되고, action 은 버튼과 같이 클릭했을 시에 어떤 동작을 취한다고 보면 된다.


label 도 위의 텍스트 필드와 마찬가지로 끌어다 놓고 적당한 변수명을 넣어준다.


버튼은 어떤 동작이 이루어져야 하므로 connection 을 action 으로 정하고, 이름을 명명해준다.

끌어다 놓는 위치는 viewdidload 아래는 일종의 초기화하는 곳이다. 이곳에서는 이 프로그램이 실행될 때 자동으로 작동하는 곳이다. 여기서는 input text와 label 은 이 초기화되는 곳 위에, 버튼은 아래쪽으로 위치시켜 놓았다.


버튼도 연결을 시켜주었다.


3개의 객체 전체를 연결한 모습이다. 그림이 너무 커서 코드가 잘 안보이겠지만, 다 연결한 모습이다. ;;


이제 각각 어떻게 작동할지 코딩을 위와 같이 해주면 된다.

코드는 아래와 같다.



import UIKit


class ViewController: UIViewController {


    

    

    @IBOutlet weak var inputText: UITextField!

    

    

    @IBOutlet weak var displayLabel: UILabel!

    

    

    private var guessNumber = 0

    private var countGuesses = 0

    private var guessAgain = false

    


    override func viewDidLoad() {

        super.viewDidLoad()

        

        guessNumber = Int(arc4random_uniform(100))


    }


    

    override func didReceiveMemoryWarning() {

        super.didReceiveMemoryWarning()

        

        

    }


    

    @IBAction func checkButton(_ sender: Any) {

        if guessAgain {

            countGuesses = 0

            inputText.text! = ""

            guessNumber = Int(arc4random_uniform(100))

            guessAgain = false

        }

        

        

        

        

        if Int(inputText.text!) != nil {

            

            let inputnum = Int(inputText.text!)

            countGuesses += 1

            

            if inputnum == guessNumber {

                displayLabel.text = "Congratulations. You got the number. It took You \(countGuesses) guesses to guess the number. Try Again?"

                guessAgain = true

                

                

            } else if inputnum! < guessNumber {

                displayLabel.text = "Try higher number !!"

                

            } else if inputnum! > guessNumber {

                displayLabel.text = "Try lower number !!"

            }

            

            inputText.text = ""

            

        }

            

        else {

            displayLabel.text = "Please Enter a Number you are guessing !!"

        }

        

    }

    

    

    


}



이렇게 연결하여 작성한 코드를 실행시키면 시뮬레이터가 작동하여 아래와 같은 창이 나타난다. 여기에서 텍스트 필드에 1 ~ 99 사이의 값을 넣으면 그 값이 랜덤하게 만들어진 값과 비교를 하여 랜덤값보다 크면 조금 더 작은값을 넣으라고 알려준다. 물론 반대의 경우도 동일하다.


위의 그림은 44를 넣어주었다. 그랬더니 조금 더 낮은 값을 넣으라고 알려주고 있다.


33을 넣으니 여전히 더 낮은 값을 넣으라고 알려주고 있다.


20을 넣으니 이번에는 조금 높은 값을 넣으라고 알려주고 있다.


27을 넣으니 조금 더 높은값을 넣으라고 한다.


30을 넣으니 아직도 더 높은값을 요구한다 -_-;


32를 넣으니 이번에는 낮은 값을 요구한다. 아이씨~ @#$#@$&%*$*%#*$%&^&@*#$




마지막으로 31 넣으니 랜덤하게 만들어 낸 값이 맞다고 알려주면서 8번의 시도 끝에 맞춘거라고 한다 -_-

이 상태에서 Click to Check 를 다시 눌러주면 새롭게 생성된 랜덤값이 만들어져서 위와 같은 과정으로 다시 시도 할 수 있다.

스샷을 찍으면서 하려니 너~무 귀찮아지고 있다. 동영상으로 만들까 고민중이다. 귀찮은게 싫은 나이(?)라서 그런가 .........