[iOS/Swift] 짝 맞추기 게임(Matching game) 만들기 (1)

 Matching game을 만들어 보자

 Matching game은 말 그대로 카드를  Matching시키는 게임이다.

 

프로젝트를 생성해준다.

 

Main storyboard에 버튼 하나를 드래드 앤 드롭 해준다.

 

 

 

카드처럼 보이게 크기를 조정해주고

카드 뒷면처럼 보이게 background색을 바꿔준다.

배경색도 검은색으로 바꿔주었다.

 

이번엔 카드 앞면 처럼 보이도록

background를 흰색으로 바꿔주고 이모티콘을 넣어준다.

이모티콘의 크기가 너무 작으므로 크기도 40으로 키워준다.

 

앱을 실행시켜본다.

버튼을 클릭하면 반응은 있지만 아무런 변화도 일어나지않는다.

 

ViewController에서 변화를 일으켜보자.

 

필요없는 부분을 지워주고

저 안에 메소드를 만들어준다.

그리고 버튼을 누르면 메소드를 호출하게 해준다.

 

그전에 UI와 코드가 같은 화면에 있도록 만들어준다.

 

왜냐하면 둘을 연결해주어야하기 때문인데,

버튼을 클릭하고 control키를 누른후 코드로 드래그 해준뒤 손을 떼면 

사진과 같은 화면이 나오게 된다.

 

여기서 Action은 버튼을 눌렸을때 메소드를 호출하라는 뜻이다.

메소드의 이름도 정할 수 있는데 touchCard라고 해준다.

Type은 인수의 타입인데, Any로 되어있는 것을 Button으로 바꿔준다.

(버튼이 이 메소드를 보내주는것이기 때문)

 

Connect를 누르면

메소드가 생성된다.

 

그리고 코드를 보면 원이 하나 나타나게 되는데

여기에 마우스를 올리면(누르는거 아님)

사진과 같이 어떤 버튼이 메소드를 부르는지 보여준다.

@IBAction이 이렇게 표시해준다.

 

이제 print를 이용해 버튼을 눌렀을 때 잘 되는지 확인해보자.

 

버튼을 눌러보면 잘 나오는걸 확인할 수 있다.

 

이제 카드를 뒤집는 함수를 만들어보자.

flipCard라는 함수를 만들고, 인수 두개를 만든다.

하나는 카드에 표시되는 이모티콘이고, 다른 하나는 이모티콘을 넣을 버튼이다.

 

이제 touchCard를 호출해보자.

 

if문을 이용해 button title에 유령이 있으면

빈 문자와 주황색으로,

유령이 없다면

이모티콘과 흰색으로 변경해준다.

 

앱을 실행하면 잘 작동된다.

 

이제 카드를 두장으로 만들어준다.

하나는 호박으로 바꿔준다.

 

그리고 아까처럼 메소드를 만들어준다.

 

다시 실행해보면...

유령은 잘 되지만 호박은 잘 되지 않는다.

print문을 넣어 호박이 flipCard를 호출하는지 확인해보자.

 

유령과 호박을 순서대로 눌렀는데 

유령은 한번, 호박은 유령하나 호박하나가 출력된다.

 

코드번호 대신있는 원을 클릭하면 답을 알 수 있다.

 

touchCard

 

touchSecondCard

유령을 복사 붙여넣기 했기 때문에 이렇게 된다.

 

호박에 오른쪽 클릭을 하게되면 아래와 같은 화면이 나온다.

Touch Up In...에 두개가 연결되어있을것이다.

touchCard를 연결 취소해준다.

 

다시 실행해보면 잘 되는것을 볼 수 있다.

 

카드를 더 추가하기전에 

카드를 몇 번 뒤집었는지 알려주는 UI를 추가해보자.

 

flipCount라는 변수를 만들어 0으로 초기화해주고,

카드를 누를때마다 1씩 증가되도록 만들어준다.

 

이제 사용자가 카드를 몇 번 뒤집었는지 볼 수 있도록 UI를 만들어준다.

여기서는 Label을 사용한다.

Text Color, Font Size 등을 바꿔준다.

 

그리고 이것도 UI와 코드를 연결해준다.

이번엔 Outlet을 사용하는데 Outlet은 인스턴스 변수를 만든다.

이름은 flipCountLabel이라고 지정했다.

 

참고로 여기선 타입추론이 불가능하기때문에 UILabel이라고 명시해주어야한다.

 

버튼을 눌렀을때 Label의 숫자가 변하도록 해준다.

 

앱을 실행해보면 잘되는것을 볼 수 있다.

 

하지만 비효율적인 코드이다.

didset이라는것을 사용하면 flipCount가 바뀔때마다 

didset을 실행해 자동으로 업데이트 된다.

 

잘 작동된다.

 

또한 지금의 구조는 카드를 추가했을때 메서드를 계속 추가해주어야한다.

touchSecondCard를 없애고

touchSecondCard의 연결을 끊어준 뒤, touchCard에 ctrl + 드래그 해 준다.

 

잘 연결된걸 확인할 수 있다. 

 

이제 모든 카드에 다른 이모티콘이 나오게 배열을 만들어준다.

 

이번엔 Outlet Collection으로 설정해주는데

이건 배열이다.

배열이 생성되었다.

 

이제 다른 카드들도 cardButtons에 연결해준다.

storyboard 위쪽에 첫번째를 클릭하고 ctrl을 누른뒤 끌어준다.

 

이제 카드 index를 확인해보기위해 코드를 작성한다.

경고 2개가 뜨는데 첫번째는 var을 let으로 바꾸라는 경고이다.

저번에 배웠지만 let은 상수이다.

 

Fix를 누르면 알아서 고쳐준다.

 

두번째 경고는 앱을 실행해 버튼을 눌러보면 알수있다.

Optional이라고 나오는데

cardButton에 없는 카드를 클릭하게 되면 nil이라고 나온다.

 

cardButtons.firstIndex(of: sender) 뒤에 느낌표를 붙여준 뒤 다시 실행해본다.

 

cardButtons.firstIndex(of: sender)!

 

이제 잘 나온다.

하지만 cardButton에 없는 카드를 클릭하게 되면 충돌이 일어난다.

 

느낌표를 없애고 if문을 이용해 코드를 다시 작성해준다.

이제 없는 카드를 눌러도 충돌되지 않고 선택된 카드가 cardButtons에 없다고 잘 나온다.

 

이렇게 옵셔널을 풀면된다.

 

이제 배열을 만들고

cardNumber를 출력하는게 아닌 flipcard를 호출해준다.

 

완성!