[앱인벤터 예제] 두더지 게임 앱 만들기

앱인벤터를 이용해 두더지 게임 앱을 만들어보도록 하겠습니다.

두더지 게임은 화면에 두더지가 나타날 때 두더지를 터치하면 점수가 늘어나는 게임입니다. 일정 시간안에 점수를 많이 획득해야 합니다.  

 

먼저 완성된 앱을 사진으로 확인해봅시다.

---

동작사진

 

1. 앱 시작화면입니다. 게임시작 버튼을 클릭하면 게임이 시작됩니다.

 

2. 9마리 두더지가 화면에 나타나고 무작위로 두더지가 밖으로 나옵니다. 

3. 밖으로 나온 두더지를 터치하면 점수가 5점씩 늘어나게 됩니다.

 

4. 30초가 지나면 두더지가 사라지고 최종점수만 남게 됩니다.

 

 

 

---

이미지

 

1) 배경이미지 

www.freepik.com/free-vector/man-digging-hole-park_4932759.htm#page=1&query=hole&position=18

 

---

화면구성

 

전체적인 화면구성입니다. 가장 위에는 레이블을 넣어서 점수를 보여주게 구성하였고, 가운데에는 표형식배치를 넣어서 게임화면을 구성하였습니다. 9개의 이미지를 표형식배치에 3X3으로 넣어줍니다. 캡처한 화면에서 보이진 않지만 게임 시작버튼을 아래에 넣어줍니다. 시계를 총 4개를 드래그해서 넣어줍니다. 각각의 시계는 이미지를 다르게 보이게 하거나 게임 종료시간을 측정하게 해줍니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

---

코딩하기

 

디자이너 화면에서 블록 화면으로 들어갑니다. 

 

가장 먼저 9개의 이미지 컴포넌트를 저장할 리스트를 하나 만들어줍니다. 그리고 점수를 저장할 변수를 하나 만듭니다. 

이 리스트는 9개의 이미지 컴포넌트에 대해서 전체 적용할 수 있게 만들기 위해서 필요합니다. 

 

첫번째 이벤트로 스크린이 초기화되었을때 시작버튼을 보이게하고 표형식배치를 화면에서 숨기게합니다. 그리고 시작 버튼을 클릭하면 버튼은 사라지고 표형식배치가 화면에 나타나게 합니다. 4개의 시계(타이머)를 활성화합니다. 1~9까지반복하면서 9개의 이미지의 사진 값을 m_1.png로 바꾸게 합니다. (두더지가 땅에 있는 모양) 그리고 너비퍼센트를 33%로 정합니다.

 

9개의 이미지 중 아무거나 클릭했을때 사진이 m_2.png(두더지가 나타난 모양)이면 m_3.png(두더지가 맞은 모양)으로 바꾸고 점수 값을 5점 추가합니다.

 

시계1의 타이머가 동작할 때(즉, 0.7초마다) 9개의 이미지를 전부 처음 이미지로 변경해줍니다. 

 

시계2와 시계3 타이머가 작동할때는 무작위로 뽑은 번호의 이미지를 m_2.png(두더지가 나타난 모양)로 변경해줍니다.

 

시계4의 타이머가 작동할때는 타임오버인 상태이므로 표형식배치를 안보이게 하고 모든 시계를 비활성화시켜줍니다. 

 

 

 

---

확인하기

 

앱인벤터로 만든 앱을 스마트폰에 설치하기 위해 [빌드] - [앱(APK용 QR코드 제공)] 을 클릭해서 QR 코드를 만듭니다. 

 

설치할 스마트폰에서 네이버 앱을 열어 QR코드를 찍도록 합니다.

 

앱을 설치한 후 완성된 모습을 확인합니다. (완성~ :D )