한국어

Programming

twin 주소복사
조회 수 50 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

두더지 잡기 게임을 만들어보겠습니다. 

먼저 <그림 1>의 실행화면을 보겠습니다. 앱이 시작되면 9개의 두더지 굴에서 랜덤하게 두더지가 나타납니다. 이때 두더지를 터치하면 점수가 올라갑니다. 효과를 주기위해 두더지를 잡으면 소리와 함께 스마트폰이 진동하게 합니다. 두더지를 많이 잡을 수록 두더지가 나타나는 속도가 빨라지며, 60마리를 잡으면 종료하게 됩니다.

<그림 1> 두더지잡기 앱의 실행화면

디자인을 보겠습니다.

Canvas 하나와 ImageSprite 하나(이름은 mole), 그리고 화면 아래에 HorizontalArrangement 안에 레이블 하나, 버튼 두개가 사용됩니다. 
 

<그림 2> 디자인 화면

두장의 이미지가 사용됩니다. 하나는 캔버스의 배경화면이고 또 다른 하나는 이미지스프라이트로 두더지 이미지입니다. 레이블은 점수를 나타내기 위해 사용되고 버튼 두개는 각각 시작과 리셋 버튼입니다.

보이지않는 컴포넌트로 Sound와 Notifier, Clock을 사용했습니다. Sound는 두더지를 터치했을 때 나는 효과음과 진동을 위해 사용합니다. Notifier는 게임이 끝났음을 알리기 위해 사용합니다.

 

다음은 블록 코딩을 보겠습니다. 

<그림 3>에서와 같이 이미지스프라이트의 위치는 왼쪽 위의 좌표로 주어집니다. 두더지가 나오는 위치는 9군데로 정해져 있으므로 x 좌표 3개, y좌표 3개를 리스트에 넣어두고 랜덤하게 x좌표 중 하나, y 좌표중 하나를 가져와서 두더지의 위치를 정하게 됩니다. 
 

<그림 3> 두더지의 위치를 랜덤하게 만들기 위한 List

<그림 4>에서 처음에 앱이 시작될 때, Xoord, Ycoord 라는 리스트를 만들고 각각 세개씩의 좌표를 넣어줍니다. 이 수치들은 사실 여러번의 시행착오를 거치며 수정하여 만들었습니다. 시작할 때는 Clock1을 Disable 시키고, Mole 이미지스프라이트도 Disable 시킵니다. 이미지스프라이트가 Disable되면 터치가 안됩니다.
 

<그림 4> 시작할 때 리스트를 초기화하고 Clock1, Mole을 Disable 시킵니다

다음 코딩을 설명하겠습니다. <그림 5>에서 처음 score는 0으로 초기화합니다. Mole이 터치될 때마다 10점씩 증가시킬 겁니다. Start 버튼이 클릭되면 1초에 한번씩 Clock의 타이머가 동작하게 하고 Mole은 Enable시켜 터치할 수 있게 해줍니다.
 

<그림 5> Start 버튼과 Reset 버튼, PrintScore 프로시져의 코딩

Reset 버튼이 클릭되면 score를 0으로 초기화하고 clock1과 Mole은 Disable 시킵니다. 
PrintScore 프로시저는 레이블에 점수를 표시하는 함수입니다.

<그림 6> Clock1의 Timer 이벤트 처리 함수

<그림 6>이 두더지 앱의 핵심 코드입니다. 일정한 시간마다(처음엔 1초마다) Timer 이벤트가 생기고 이때 MoveMole() 프로시져를 호출합니다. 

<그림 3>에서 설명한 것처럼 랜덤하게 Xcoord 리스트에서 하나, Ycoord 리스트에서 하나의 값을 가져와서 Mole의 위치를 정합니다. 그런데 같은 좌표값이 또 만들어질 수도 있으므로 이를 방지하기 위해서 if~then~else 블록을 만듭니다. 만일 새로 만들어진 x, y좌표값이 이전의 x,y좌표값과 같으면 다시 MoveMole()을 호출하여 겹치지 않는 새로운 좌표값을 만드는 겁니다.

<그림 7> 두더지를 터치했을 때의 코딩

<그림 7>은 두더지를 터치했을 때의 동작을 코딩한 것입니다. 점수를 10점 올리고, 소리와 함께 0.1초간 진동하게 합니다. 점수가 600점 이상이면 종료하고, 400점이상이면 타이머의 인터벌을 600ms, 즉 0.6초에 한번씩 타이머를 발생합니다, 200점 이상이면 타이머의 인터벌을 800ms, 즉 0.8초에 한번씩 타이머를 발생시킵니다. 

이렇게 하면, 20마리, 40마리를 잡을 때마다 속도가 조금씩 빨라지고 60마리를 잡으면 게임이 끝나게 됩니다. 


List of Articles
번호 제목 글쓴이 날짜 조회 수
48 Korea SW 자료  twin 2017.10.30 193
47 MIT App Inventor 2 소개  twin 2017.03.26 62
46 [앱 인벤터2] 간단한 계산기  twin 2018.08.30 103
45 [앱 인벤터2] 두더지 잡기 게임2  twin 2018.09.14 240
44 [앱 인벤터2] 우주선게임  twin 2018.08.30 140
43 [앱 인벤터2] 공튀기기  1 twin 2018.08.30 98
42 [앱 인벤터2] 알람시계  twin 2018.08.27 410
41 [앱 인벤터2] 위치센서와 문자 보내기, SOS 앱  twin 2018.08.27 359
» [앱 인벤터] 캔버스와 이미지 스프라이트, 두더지잡기 게임(Molemash)  twin 2018.08.27 50
39 [앱인벤터2 강좌] 나침반과 센서  twin 2018.08.27 88
38 [앱인벤터2 강좌] 만보기앱, Pedometer 센서  twin 2018.08.27 101
37 [앱인벤터2] BMI 계산기  twin 2018.08.27 75
36 [앱인벤터2] Clock 센서, 디지털 시계  twin 2018.08.27 130
35 [앱인벤터2] Extension(확장기능)을 사용한 깜박이는 플래시라이트  twin 2018.08.27 75
34 [앱인벤터2] PasswordTextBox와 TinyDB를 사용한 PIN 번호 체크  twin 2018.08.27 258
33 [앱인벤터2] Slider를 사용하는 타이머  twin 2018.08.27 381
32 [앱인벤터2] 두 개의 스크린 사이의 값 전달, 구구단 예제  twin 2018.08.27 267
31 [앱인벤터2] 말하는 Hello World 앱  twin 2018.08.27 32
30 [앱인벤터2] 아날로그 시계 만들기  twin 2018.08.27 229
29 [앱인벤터2] 캔버스와 이미지스프라이트, Bouncing Ball 예제  twin 2018.08.27 64
Board Pagination Prev 1 2 3 Next
/ 3