한국어

Programming

twin 주소복사
조회 수 2655 추천 수 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
번호 제목 글쓴이 날짜 조회 수
31 [앱 인벤터2] 공튀기기  1 twin 2018.08.30 2422
30 앱인벤터2 강좌 : 숫자 암기 게임  twin 2018.10.12 2286
29 [앱인벤터2] Slider를 사용하는 타이머  twin 2018.08.27 2186
28 [앱인벤터2] Extension(확장기능)을 사용한 깜박이는 플래시라이트  twin 2018.08.27 2130
27 문자메시지 보내기  twin 2018.10.12 1794
26 Korea SW 자료  twin 2017.10.30 1749
25 앱인벤터2 강좌: fingerFind5 게임  twin 2018.10.12 1737
24 앱인벤터 에뮬레이터 다운 설치  twin 2017.03.26 1663
23 [앱인벤터] ActivityStarter 액티비티 스타터를 사용한 여행앱  twin 2018.08.27 1650
22 앱인벤터 아두이노 교재  3 twins 2017.03.18 1643
21 메모장 앱 만들기  twin 2018.10.12 1633
20 색상 팔렛트 만들기  twin 2018.09.14 1535
19 [앱인벤터2] 말하는 Hello World 앱  twin 2018.08.27 1524
18 [앱인벤터2 강좌] 폭탄 돌리기  twin 2019.09.17 1496
17 [앱인벤터2 강좌] 만보기앱, Pedometer 센서  twin 2018.08.27 1466
16 [앱인벤터] App Inventor 2 Tips  twin 2018.08.27 1355
15 [앱인벤터2] BMI 계산기  twin 2018.08.27 1352
14 [앱인벤터] 카메라와 캔버스, PaintPot 앱  twin 2018.08.27 1322
13 [앱인벤터2] 캔버스와 이미지스프라이트, Bouncing Ball 예제  twin 2018.08.27 1122
12 [앱인벤터]Player(플레이어)를 이용한 I have a dream 앱  twin 2018.08.27 1095
Board Pagination Prev 1 2 3 Next
/ 3