앱인벤터2 강좌 16: 카드암기 게임

 저번 강좌에서 말했다시피 앱인벤터로도 게임을 개발해서 구글 플레이 스토어에 등록할 수 있다. 그래서 그런지 많은 분들이 aia파일을 요청하셔서 대부분은 파일을 보내드리고 있다. 제가 강의하고 있는 게임들은 대부분 구글플레이 스토어에 등록한 게임들이며 여기에 공개하는 내용은 조금 축약해서 설명하고 있다. 이 시간에는 카드 암기게임에 대해 설명한다. 트럼프 카드 한질이 52장이나 여기에는 한가지 그림의 갯수에 해당하는 13장만 가지고 설명을 진행한다. 1.5초 동안 클로버 카드가 화면에 노출되었다가 사라지고 다음카드가 또 1.5초 동안 보이고 사라지는 식으로 13장 모두가 나오면 플레이어가 화면하단의 번호 버튼을 눌러 암기한 카드를 맞추면 된다. 맞으면 그 카드가 하단에 쌓이고 틀리면 경고 메시지가 나오며 다시 버튼을 눌러야 한다.  이제 그림을 통해 구체적인 방법을 설명하겠다.

 

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

 

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

 

 

 스크린5(보통은 스크린2) 디자이너 에디터에 위와 같이 컴포넌트들을 배치한다. 캔버스를 화면의 중앙에 배치하고 이미지 스프라이트를 13개 배치시킨다. 하단에는 TableArrangement를 배치해서 클로버 카드 숫자에 해당하는 수만큼 버튼을 배치한다. 필요한 컴포넌트들은 좌측 패널 붉은 박스속에서 꺼내 사용하면 되는데 Notifier 하나 clock2개 TinyDB 하나를 배치한다. clock의 이름을 기억하기 좋은 이름으로 바꾼다. 카드가 1.5초 동안 나왔다 사라지게 하는 randomCardViewClock의 TimeInterval을 1500(1.5초), 해당 버튼을 눌렀을때 그 카드가 맞는지 틀리는지를 비교하기 위해 필요한 randomStackClock의 TimeInterval은 100(0.1초)로 설정한다.

 

이제 이 게임의 블럭 에디터를 살펴보자. 위의 그림은 변수설정과 초기화 설정부분이다. 초기화 과정을 보면 먼저 TinyDB(cardViewSaveDB로 이름변경)에 들어있던 이전 기록들을 모두 지우는 것부터 시작한다. 그래야 새로 시작되는 카드들을 기록할 수 있다. 아니면 이전 기록과 현재 기록이 뒤죽박죽되어 어느것이 현재 것인지 알 수 없게 된다. 처음에는 카드들이 화면에 표시되지 않게 하다가 나중 NewGame버튼이 눌려지면 하나씩 화면에 표시되게 할 것이다. cardImage 리스트에는 13개의 클로버카드 이미지가 설정되어 있다. 이 중에서 랜덤하게 하나씩 화면에 출력하고 출력된 이미지는 이 리스트에서 제거하는 과정을 거쳐야 한다.

 

 

 

 위의 그림에서 좌측 타이머가 1.5초에 한장씩 카드를 화면에 나타나게 해 주는 루틴이다. Math항목에 들어있는 'pick a random item list' 블럭을 이용하여 카드이미지 리스트에서 한장씩 무작위적으로 선택해 화면에 출력한다. 그리고 나온 카드들은 TinyDB항목속에있는 randomImageView. StoreValue블럭을 이용하여 저장한다. tag에 따라 카드가 한장씩 저장되므로 겹치는 카드가 없도록 알고리즘을 잘 짜야 한다. 13장이 모두다 출력되었으면 타이머를 중지 시키고 다음으로 넘어간다. 오른쪽 타이머는 하단부의 선택버튼들을 눌렀을때 내가 선택한 카드가 맞으면 카드를 하나씩 표시해 주는 루틴이다. 즉 첫번째 나온 카드를 잘 기억했다가 그 카드를 처음에 선택하면 그 카드가 하단부에 표시된다.

 

위의 그림은 하단부의 각 선택버튼들을 누를때 어떻게 맞고 틀리는지를 판단하는지 보여주는 루틴이다. B10은 클로버 10번을 나타내고 B2는 클로버 2번을 의미한다. 그림에는 클로버 10번 버튼을 눌렀을때 내부적으로 어떤 처리과정을 거치는지 보여주고 있다. 아무 버튼이던지 버튼을 하나 누르면 buttonPushCount과 cardStackCount가 하나씩 올라간다. 만약 처음에 10번 버튼을 눌렀다면 buttonPushCount은 1이고 cardStackCount도 1이다. 이때 DB의 1번에 클러버10 그림이 들어 있으면 화면에 클로버 10번이 표시되고 아니면 틀렸으니 다른 카드를 고르라는 알림창이 뜬다. 만일 13번째로 B10버튼을 눌렀을때 맞았다면 축하 한다는 메시지와 함께 다시 게임을 시작할 것인지 그만둘 것인지를 선택하는 알림창이 나온다. 이렇게 13개의 버튼모두에 위와 같은 루틴을 지정한다.

 

 

 위의 그림은 newGame 버튼을 눌렀을때 어떤 처리를 해야 하는지와, 알림창에서 NewGame을 선택했을때와 Exit를 선택했을때 어떤 처리과정을 거치는지를 보여주는 그림이다. 둘의 처리과정이 똑같은데 이해를 돕기 위해 모두 표시했다. 실제 프로그램을 작성할때는 저렇게 동일한 부분은 블럭으로 처리하고 불러오기를 하면 된다. 그러면 블럭의 갯수가 많이 줄어든다. 내용은 초기화 과정과 동일하므로 설명은 생략한다. 간단하게 설명했지만 실제 코드의 양은 상당히 방대하다. 13개의 카드를 암기하는 게임도 좀 복잡한 편인데 52개 카드 전체의 암기게임을 작성하려면 만만치 않은 과정을 거쳐야 한다. 실제 52개 카드암기 게임을 구글 플레이 스토어에 출시했으며 "카드암기왕(kussonjj제작)"으로 검색하시면 필자가 등록한 게임을 무료로 다운받아 사용할 수 있다.

 

실제 이 앱을 필자의 스마트폰으로 실행해 본 동영상이다. 13장도 암기하기가 쉬운것은 아니다. 26장 39장 52장까지 도전해 보고 싶은 사람은 구글 플레이 스토어에서 필자의 앱을 다운받아 사용해 보기 바란다. 물론 무료다.

 

 

 

마찬가지로 aia파일이 필요하신분은 댓글을 남기거나 kusson@hanmail.net로 요청하시면 아낌없이 보내드린다.