앱인벤터2 강좌 19: fingerFind5 게임

 이번시간에는 여러분이 TV에서 한번쯤 보셨을 게임을 하나 만들어 보겠다. 일본의 영장류 연구소에서 침팬지를 오랫동안 연구하고 있었는데 아유무라는 침팬지에게 어렸을 때 부터 숫자를 기억하게 하는 훈련을 시켰다. 커가면서 하나둘씩 과제를 잘 처리하더니 나중에는 인간이상의 기억력을 보이는 여러 정황을 목격하게 된다. 그게 우리에게 잘 알려진 숫자 누르기 게임이다. 컴퓨터 모니터에 1부터 10까지의 숫자가 잠시 보이고 숫자는 커턴으로 가려서 뒤의 숫자가 보이지 않게 한다. 그런데 아유무는 거침없이 1부터 올라가는 순서로 숫자를 클릭하는 것이다. 그 속도가 얼마나 빠른지 인간이 따라갈 수 없을 정도의 스피드와 정확도를 겸비하고 있었다. 나도 그 화면을 보면서 숫자를 기억해 볼려고 한참 노력했는데 아유무를 도저히 당할 수 없었다. 그래서 이번에 앱인벤터로 아유무가 하던 똑같은 게임을 개발해 보고 인간이 얼마나 빠르고 정확하게 미션을 클리어 할 수 있는지 살펴보기로 했다.

 

                         침팬지의 기억력이 상당함을 보여주는 동영상

 

     

 첫 화면에서 'fingerFind5' 버튼을 클릭하면 가운데 화면처럼 5개의 숫자가 임의의 위치에 출현한다. 1초의 시간동안만 기다리고 세번째 화면같이 숫자를 가린다. 그러면 유저는 1번부터 올라가는 순서로 번호가 있던 커턴을 터치하면 된다. 5개를 다 터치하면 'OK' 메시지와 '딩동댕'이란 축하음이 나온다.

 

 앱인벤터 디자이너 에디터에 위와 같이 화면을 구성한다. 화면중간에 Canvas를 하나 배치하고 그위에 이미지 스프라이트를 8개 갖다 둔다. 그리고 이미지 스프라이트에 Picture를 지정한다. 즉 숫자나 OK, NO, Time Over 메시지는 미리 png 파일로 준비해 두고 Picture로 설정한다. png파일로 준비해야 그림뒤의 화면을 가리지 않지 jpg나 bmp파일은 뒤의 화면을 가리기 때무에 보기에 좋지 않다. 위의 Time Over 메시지 처럼 흰바탕화면이 뒤의 배경을 가리기 때문에 보기에 답답한 상황이 발생한다. 클락들은 숫자를 블락하기 위한 것과 시간을 슬리아드로 처리하기 위한 것, 그리고 OK, NO메시지 출력을 위한것, 그리고 timeOver메시지를 화면에 나타내기 위한 것 등이 필요하다. OK, NO 메시지 표시때 사운드를 울리기 위해 Sound 컴포넌트도 2개 필요하다.

 

숫자의 x, y 위치를 표시하기 위한 좌표들이다. 스마트폰에서는 보통 가로(x축)가 300픽셀, 세로(y축)가 400픽셀 정도 이므로 위와같이 50픽셀 단위로 지정한다.

 

 

 위 그림은 숫자가 화면에 임의로 표시되는 로직을 보여준다. 1번 이미지 스프라이트에는 1이 그려진 png 파일을 설정하고 x좌표는 앞의 x리스트 6개 중에서 하나를 선택한다. y좌표는 앞의 y리스트 8개 중에서 하나를 선택해 x,y좌표를 설정한다. 이번 게임에서는 5개의 숫자만 표시되므로 5개의 숫자에 대해서 앞의 과정을 반복한다.

 

 

 게임이 시작되면 'curtainCountClock.Timer'가 enable되면서 카운트를 시작하고 1초가 지나면 숫자에 커턴을 친다.

그리고 'slideCountClock.Timer' 이벤트 블럭이 enable 되면서 3부터 내려오는 순으로 카운터가 시작되고 slideValue가 0이 되면 게임을 클리어 하지 못했다는 뜻이므로 timeOver 메시지를 표시한다.

 

 

 이제 커턴이 쳐진 숫자를 클릭하면 어떤 상황이 벌어지는지를 설정하는 부분이다. 만약 1번에 커턴이 쳐진 숫자를 클릭하면 어떤 상황이 벌어질까? 그러면 touchNumCount가 1씩 증가하고 1번을 제대로 맞혔으므로 커턴을 벗기고 1번 숫자를 다시 표시한다. 또 만약 1번이 아닌 숫자를 눌렀다면 touchNumCount를 제자리로 돌리고 'NO'메시지와 '땡'이란 음을 울린다. 1번부터 올라가는 순으로 번호를 터치해야 번호가 open되면서 다음 터치를 기다리지 순서가 틀리면  언제든지 'NO' 메시지와 '땡'이란 경고음을 듣게 된다. 그렇게 5번까지 순서대로 제대로 터치하면 'OK' 메시지와 '딩동댕'이란 축하음을 듣게 된다.

 

 

 위 그림은 처음 게임을 시작할 때 어떤 루틴을 거치는지를 나타내는 부분이다. 모든 변수를 0으로 설정하고 clock들은 off 시킨다. 그리고 commandStart 블럭에 실제 시작에 필요한 내용이 설정되어 있다. slideValue를 4로 설정하고 curtainCountClock.Timer와 slideCountClock.Timer를 enable시킨다. 그리고 숫자들의 위치를 표시하는  moveNumber 블럭을 호출한다. 이리하여 게임이 시작된다. 게임 중간에 newGame 버튼을 클릭하면 언제든지 게임을 새로 시작할 수 있다.

 

 여기서는 5개의 숫자로만 게임을 제작했지만 제가 구글 플레이 스토어 올린 '브레인 게임(침팬지를 이겨라)'라는 게임을 다운받아 보시면 5개, 8개, 10개의 숫자로 구성된 풀버전의 게임을 즐길 수 있다.