두더지 잡기는 MIT app invetor 튜토리알 사이트에 올라와 있는 게임이다. 아무래도 튜토리알에 올라와 있는 예제라면 앱인벤터 코딩 실력을 키우기 위해서라도 반드시 해보고 넘어가야 할 예제인 듯하다. 실제 나타나는 시간을 타이머로 조절해 보면 증말 재미 있다.
코딩을 시작하기 전에 게임 코딩 사이트 주소
http://appinventor.mit.edu/explore/ai2/molemash.html
를 방문하여 두더지 그래픽 이미지 파일을 자신의 컴퓨터에 다운받아 준비해 두자.
팔레트에에서 필요한 구성품들을 가져오도록 하자.
⓵ Drawing and Animation에서 Canvas를 Viewer에 하나가져다 두면 컴포넌트 창에서 Canvas1 이 나타난다.
⓶ Drawing and Animation에서 ImageSprite를 하나 가져다 Viewer의 Canvas에 가져다 둔다.
⓷ User Interface에서 Label 하나와 button 하나를 가져 오자
⓸ Media에서 Sound 하나를 가져 온다.
⓹ Sensors에서 Clock 하나를 가져 온다.
이로서 컴포넨트 구조가 완성이 되었다. 그림의 맨 오른쪽 박스에서처럼 rename 작업을 실시한다.
MyCanvas 속성 창에서 Height 와 Width를 각각 300pixel로 스마트 폰 폭에 맞도록 설정한다.
ImageSprite인 Mole의 속성 창에서 picture 박스에서 mole.png 파일을 업로딩하면 컴포넨트 박스의 하단의 Media 박스에서 mole.png를 확인할 수 있을 것이다.
각 컴포넨트의 텍스트를 입력하자. ScoreLabel에는 Score:___,폰트는 18과 bold, ResetButton에는 Reset,, 폰트는 18과 bold를 입력해 둔다.
MoleTimer 에서는 Enabled Timer체크박스에 체크하고 TimerInterval 값을 500으로 입력한다.
앱인벤터 코딩을 진행함에 있어서 “procedure” 의 개념을 도입하자. “procedure” 란 하나의 명령으로 필요한 모든 statement들의 시궨스를 뜻한다. 필요한 모든 것을 집어넣은 서브루틴 비슷한 것으로 보자. 필요하면 값을 돌려줄 수도 있으나 여기서는 필요치 않다.
두더지 게임에서는 2개의 procedure 즉 2개의 sequence 즉 MoveMole 과 UpdateScore가 필요하다. MoveMole은 Canvas 위에서 MoleSprite를 랜덤한 위치로 이동시키며 UpdateScore는 ScoreLabel 텍스트 내용을 변화시킨다.
디자이너에서 BLOCK 편집 단계로 넘어가자. 맨 처음 Built-in에서 Procedure를 클릭하여 do procesure를 드래그 하여 procesure난에 MoveMole이라 입력하자.
다음과 같이 퍼즐요소들을 찾아내어 재미나게 직소퍼즐을 구성한다.
procedure “MoveMole”에 set Mole X 퍼즐을 넣은 후 위에서 구성한 직소퍼즐을 맞추도록 한다.
Built-in 변수에서 initialize 퍼즐을 끙어와 Bult-in 의 Mathdptj 숫자 입력 처즐 요소를 찾아다 끼우자.
procedure “UpdateScore”에 set ScoreLabel Text to 퍼즐을 찾아 끼운 후 join 으로 연결하여 텍스트 Score 와 get global score 퍼즐 요소를 맞추도록 한다.
500 msec 마다 MoleTimer를 불러내어 procedure MoveMole을 작동시키면 두더지가 랜덤하게 이동하면서 나타난다.
그렇게 두더지 사냥을 통해서 스코어를 올리다가 Reset 버튼을 누르면 글벌 스코어를 0점으로 하여 procedure인 UpdateScore를 호출하게 된다.
이와 같은 게임 작업은 Canvas 상에 자리 잡고 있는 ImageSprite인 Mole 이 스마트폰 터치에 의해 득점 작업이 이루어진다. 따라서 터치가 성공적으로 이루어지면 1 득점과 동시에 100msec 동안 찌르륵~ 하고 진동하게 됨과 동시에 procedure UpdateScore를 호출하고 이어서 procedure MoveMole을 불러 랜덤하게 두더지를 이동시키게 된다.
블록 편집이 끝났으면 디자이너로 빠져나와 파일을 저장하고 QR 코드 스캔 작업으로 넘어가서 게임이 제대로 되는지 확인해 보자.