A06-2. 두더지 잡기

두더지 잡기 게임을 만들어 보자

 

1. 아이디어

지금 까지 앞서서 만들어온 앱들에 사용된 기능들을 이용해서 충분히 만들 수 있다.

3X3의 두더지 굴에서 랜덤하게 두더지가 나올 것이고, 두더지가 사라지기 전에 클릭을 하면 점수가 오르는 방식이다.

 

2. 디자인

우선 게임에 사용될  배경 이미지를 넣어 줄 것이다. 

canvas를 넣어 주자.

 물론 Height 와 width는 Fill Parents이다.

canvas를 넣어 주었다면 일단, 배경을 넣기 전에 두더지를 표현해줄 imagesprite를 추가해주자.

추가적으로 점수를 나타내주는 Label과 Start버튼, Reset버튼을 추가해 주자.

HorizontalScrollArrangement를 이용해서 점수판과 start버튼과 reset버튼을 만들어 주었다.

이제 배경을 넣어주자.

배경은 아까 넣어 두었던 canvas를 통해 넣을 수 있다.

배경을 넣어 주니 뭔가 그럴 듯 해졌다!

배경으로 두더지 굴을 넣어 주었으니 image sprite에 두더지를 넣어주자.

귀여운 두더지를 넣어 주었으면 일단 보이는 디자인은 완료 되었다.

코딩으로 넘어가기 전에 보이지 않는 컴포넌트들을 넣어주고 이름들을 수정해주자.

 

총 3가지 보이지 않는 컴포넌트가 추가되었다.

- 시간을 측정할 clock

- 소리를 나타나게 해줄 sound

- 알림창을 나오게 해줄 notifier

 

위 컴포넌트들이 추가되었고, sound의 경우 이미지를 넣는 방식으로 사운드파일을 넣어줄 수 있다.

이번에는 아이콘을 추가해 보려고 한다.

아이콘의 경우 Screen Properties의 Icond을 통해서 넣어 줄 수 있다.

넣는 방법은 캔버스에 이미지를 넣는 것과 동일하다.

또한 이름도 수정해 줄수 있다. 기존에 앱 이름을 따로 정해주지 않고 설치를 하게되면 앱 이름은 프로젝트의 이름이 되지만 

설정해 준다면 설정해준대로 나타난다.

이제 코딩으로 넘어가보자

 

3. 코딩

코딩을 하기에 앞서서 List를 알아둘 필요가 있다.

리스트를 설명하기에는 너무 많은 시간이 걸리기 때문에 다음 게시글을 참조하는 것을 추천한다.

 

various-data-analysis.tistory.com/18?category=917538\

리스트(list)

가장 먼저

두더지가 나올 두더지 굴의 좌표들을 리스트로 만들어줄 것이다.

리스트를 만들어 주었고 이제 스크린이 이니셜라이즈 되면 해당 두더지굴의 좌표 값들을 저장해 주자.

 

게임이 시작될 때, 두더지의 위치 초기값을 정해줄 것이다.

물론 두더지의 위치는 랜덤이다.

X좌표와 y좌표를 랜덤으로 배치해 주자.

 

또한 게임이 스크린이 이니셜라이즈될 때 시작이 아닌 스타트 버튼을 누르고 나서 시작할 것이므로

clock을 정지시켜주고 두더지를 가려주자.

 

이제 버튼을 누르면 게임이 시작되는 것을 만들어 주자

위 코드를 통해 시작버튼이 눌리면, clock이 1000밀리초 단위로 작동하고 mole의 상태도 enable될 것이다.

그렇다면 버튼이 눌려서 clock이 작동해 시간이 흐르게 된다면 어떤 이벤트가 발생할지 생각해보고 코딩해 보자

 

게임이 시작되어 clock이 작동하고 시간이 흐르면 위에서 설정했듯이 1초를 주기로 두더지의 위치가 변경될 것이다.

그렇다면 만약, 두더지가 나타나고 다음 랜덤으로 나타나는 위치도 똑같다면 두더지는 어떻게 될까?

답은 '이동하지 않는다' 이다.

이는 게임을 루즈하게 만드는 원흉중 하나이므로 코딩을 통해서 이러한 상황이 발생하지 않도록 만들어 줄것이고,

이를 procedures(함수)를 이용하여 만들어 보자.

변수를 추가로 생성해주어서 다음에 나타날 x좌표와 y좌표를 알아낸 후, 현재와 동일하다면, 다시 Movemole 함수를 호출하는 방식으로 만들어 주었다. 이를 통해서 중복되는 위치에 연달아 두더지가 나오는 상황을 방지할 수 있고,

코드를 자세히 들여다 보면 함수 내부에서 자기 자신을 호출하는 것을 확인할 수 있다.

우리는 이를 '순환'이라고 부른다. 순환에 대해 자세한 설명은 다음 링크를 참고해 보자.

various-data-analysis.tistory.com/19?category=917538

순환(recursion, aka.재귀)

 

이를 통해 시간이 흐를 수록 두더지의 위치가 변경될 것이다.

이제 두더지를 잡는 부분에 대해 코딩하여보자.

 

두더지를 잡으면 점수가 오른다. 이는 즉, score라는 변수가 필요하다는 것이다.

해당 변수를 만들고 두더지를 터치하면 점수가 오르게 코딩을 해보자

 

imagesprite의 블록에 Touched라는 블록을 이용하면 image가 클릭되었을 때 발생하는 이벤트를 만들어 줄 수 있다.

추가로 두더지를 잡으면 소리가 나게 하고 동시에 진동도 0.1초 주도록하자.

이제 조건문을 통해서 게임이 흘러가는 방식을 정해보도록하자.

게임은 총 3단계로 구성되고 단계가 높아질 수록 두더지가 이동하는 속도를 증가시킬 것이다.

두더지를 5마리 잡으면 단계가 올라갈 것이고 총 15마리를 잡으면 Notifier를 이용하여 게임을 다시할 것인지

아니면 종료할 것인지 선택을 해주는 선택지를 줄 것이다.

++ 수정

call Notifier1.showChooseDialog 아래의 close screen을 삭제해야합니다.

삭제를 안할 경우, 게임이 끝나고 바로 메세지 박스가 열렸다가 선택할 시간도 없이 닫힙니다.

 

if문이 중요한 핵심이니 그쪽을 자세하게 공부해보자

만약 150점 이상이 된다면, notifier를 이용해서 버튼이 2개있는 메세지 박스를 출력해서 게임을 다시할 건지 물어보며

150점 이상이 아닌 경우 단계별로 난이도를 올리는 것이다.

마지막으로 notifier의 선택지에 따라 어떻게 진행이되는지 설정해 주자.

해당 코드를 통해서 사용자의 선택지에 따라 프로그램이 작동하는 방식이 달라지도록 만들 수 있다.

NO를 클릭할 경우 스크린이 닫히며, 반대의 경우는 게임을 다시 시작할 준비를 하는 것이다.

 

이로써 길고 길었던 코딩도 마무리가 되었다.

이제 테스트로 넘어가자.

 

4. 테스트

가장먼저 테스트를 했을 때, 문제가 발생하였다.

발로 두더지의 위치가 정확히 두더지굴 위에 위치하지 않는 다는 것이다.

생각해보니 우리는 두더지의 위치 값들을 리스트에 저장할 때, 우리가 직접 비율을 계산해서 넣어 주었으나

그런 경우, 각각의 휴대폰과 테블릿의 픽셀과 비율이 다른 것으로 인해 지금과 같이 오류가 발생할 것이다.

따라서 우리가 직접 넣지 말고 코드로 계산을 해서 넣어 주도록 하자.

리스트의 아이템들을 전부 다음과 같이 바꿔주면 오류를 해결할 수 있다. 두더지의 비율도 마찬가지이다.

 

이를 수정해 주고 다시 테스트를 진행한 결과 정상작동을 확인할 수 있었다.