앱인벤터2 강좌 15: 두더지 잡기게임II

앱인벤터로 게임을 개발해서 구글 플레이 스토어에 등록할 수 있다고 하니 관심을 가지는 사람이 많은 것 같다. 그래서 제가 이제까지 개발한 여러 게임들을 순차적으로 공개해 볼 생각이다.

 

 먼저 두더지 잡기 게임에 대해 설명한다. 두더지 잡기 게임은 5×5개의 구멍 즉 25개의 구멍에서 두더지 2마리가 무작위로 출현한다. 타이머를 0.8초로 설정했기 때문에 0.8초 간격으로 두마리의 두더지가 나오는데 다른 구멍으로 가기 전에 손가락으로 터치를 해야한다. 터치를 하면 점수가 일점씩 올라가고 50점이 되면 게임을 그만두겠냐고 알림창을 띄운다. 이제 그림을 통해 구체적인 방법을 설명하겠다.

 

위의 그림은 게임의 초기화면이다. 가운데 두더지 잡기란 버튼을 클릭하면 두더지 잡기 게임화면으로 넘어간다. 먼저 앱인벤터2의 디자이너 에디터에 위와같이 컴포넌트들을 배치한다. 초기 화면에 실제 필요한 것은 버튼하나와 Notifier1이란 알림용 컴포넌트 뿐이다. 그 외에는 부가적인 이미지나 화면배치를 위해 삽입한 Label들이다. 두더지 잡기 버튼의 이름을 catchMole로 변경했다. Notifier1은 Non-visible components이기 때문에 화면안에는 배치되지 않는 요소다. 그래서 끌어다가 화면 가운데 드랍시키면 자동으로 화면 하단에 자리를 잡는다.

 

 

 Screen1의 블럭에디터에는 catchMole버튼을 클릭하면 두더지 잡기 게임이 있는 Screen6으로 이동하는 이벤트 블럭과 알림기능, 스마트폰의 이전 버튼을 눌렀을때 나타나는 효과들을 설정한다. 필자의 경우 여러 스크린을 지우고 두더지 잡기 스크린만 남겨놓았기 때문에 Screen1과 Screen6만 남아있지 보통의 경우에는 Screen1, Screen2 등과 같이 순차적으로 스크린 번호가 매겨진다. 좌측 패널에 여기서 쓰이는 이벤트블럭들이 들어있는 요소들을 빨간 박스로 표시했다. catchMole.Click 이벤트 블럭은 catchMole버튼을 눌렀을때 드랍박스가 새로 열리면서 나타나고, Notifier1.AfterChoosing은 Notifier1을 클릭하면 드랍박스가 열리면서 표시된다. Screen1.BackPressed 이벤트 블럭은 Screen1을 클릭하면 나오므로 해당 이벤트 블럭들을 드래그해서 화면에 드랍시킨다.

 

 catchMole.Click 이벤트 블럭은 catchMole(두더지 잡기)버튼을 누르면 Screen6화면으로 이동하란 명령이다.

두번째 When Notifier1.AfterChoosing 블럭은 스마트폰의 백버튼을 눌렀을때 나오는 메시지 중 'OK'를 선택했을 때 게임을 중지하란 명령이다. 그외의 것을 눌렀을 때는 무시하란 명령도 들어있다.

 

 when Screen1.BackPressed이벤트 블럭은 스마트폰의 백버튼을 눌렀을 경우 나오는 알림창의 내용을 표시한다.

"Do you want to exit this app?"이라는 제목의 알림창이 뜨면서 세개중 하나의 선택을 요구하는 버튼들이 나온다. 이 버튼을 눌렀을 때 When Notifier1.AfterChoosing 블럭이 그 선택을 받아 결과를 처리하는 루틴이다.

 

 

 위의 그림이 두더지 잡기 게임의 메인 화면이다. 디자이너 에디터에 위와같이 컴포넌트들을 배치한다. 화면 상단과 하단에 HorizontalArrangement를 하나씩 배치하고 가운데에는 좌측패널 중 Drawing and Animation 속에 있는 Canvas를 하나 위치시킨다. 캔버스가 배치되면 그 위에는 ImageSprite들을 얼마든지 배치시킬수 있으므로 그림과 같이 5×5개의 이미지스프라이트를 갖다 둔다. 이미지 스프라이트에는 각각의 Picture 이미지를 준비한 땅구멍그림으로 지정해 준다. 이미지스프라이트 이름도 순서대로 번호를 지정해 두면 뒤에서 프로그램 짤때 편리하므로 이름도 번호순으로 바꾸어 준다. 그리고 두더지 두마리도 이미지스크라이트의 형태로 배치한다. 그림은 본인이 따로 준비하던지 아니면 저에게 요청하면 aia파일을 보내드립니다. 위아래의 HorizontalArrangement 속에는 Label을 두개씩 배치해서 글자를 입력한다. 하단의 Reset은 게임을 다시 시작하기 위한 버튼이므로 버튼을 하나 끌어다 놓는다. Sound1과 클락이 두개 필요한데 Media와 Sensor에서 끌어다 쓴다. 클락의 TimerInterval은 0.8초 정도가 적당하다.

 

 

 위그림은 두더지를 랜덤하게 출현하게 하는 x, y 좌표를 설정하는 부분과 리셋 버튼, 알림창에 대한 설정부이다. x,y좌표는 앞의 디자이너 화면에서 두더지 구멍이 위치하는  x,y 좌표를 잘 기록했다가 50~60씩 증가하는 수치를

입력한다. 이미지 스프라이트의 위치 또한 저 숫자의 xy조합과 일치해야한다. 리셋 버튼을 누르면 2개의 클락을 On 시키고 스코어를 0으로 설정한다.

 

 

 두더지가 두마리 이므로 하나의 이름은 두더지1, 또하나는 두더지2로 명명했다. 위 그림은 두더지1에 대한 설정만 모은 것이다. mole1Clock에 의해 0.8초간격으로 두더지가 랜덤하게 출현한다. 두더지를 제대로 클릭하면 0.5초간의 진동이 오고 스코어가 하나씩 올라간다. 그리고 점수가 50점이 되면 "게임을 다시하시겠습니까?"라는 제목의 알람창이 뜬다.

 

 

 위 그림은 두더지2에 대한 설정이다. 두더지1의 설정과 이름만 다르므로 설명은 생략한다.

 

실제 이 앱을 필자의 스마트폰으로 실행해본 동영상이다. 두더지가 상당히 빨리 움직이므로 부지런히 손가락을 움직여야 50점을 얻을 수 있다.

 

※ 위 설명을 보시고 aia파일이 필요하신 분은 댓글을 남기거나 kusson@hanmail.net으로 메일주시면 아낌없이 보내드립니다.