[앱인벤터 예제] 인형뽑기 게임 앱 만들기

앱인벤터를 이용해 인형 뽑기 게임 앱을 만들어보도록 하겠습니다.

인형 뽑기 게임 앱은 기울기 센서를 이용해서 집게를 뽑고 싶은 인형 위로 가져다 놓고 버튼을 터치한 후 입구까지 가져간 후 버튼을 땠을 때 인형을 뽑을 수 있는 게임입니다.

 

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

 

---

동작사진

 

1. 4개의 인형이 화면에 랜덤하게(무작위로) 배치됩니다.

 

2. 스마트폰을 기울여서 파란공(집게역할)이 인형 위로 올라가게 합니다.

 

3. '잡기' 버튼을 누르고 있으면 인형과 파란공이 같이 움직입니다.

 

4. 검은공(출구역할) 위로 이동한 후 '잡기' 버튼에서 손을 때면 인형이 뽑혔다고 알림창이 뜹니다.

 

 

 

---

이미지

 

1) 인형

www.freepik.com/free-icon/matryoshka_921819.htm#page=1&query=doll&position=5

Download Matryoshka for free

 

2) 곰인형

www.flaticon.com/free-icon/teddy-bear_2884019?term=doll&page=1&position=2 

Teddy Bear free vector icons designed by iconixar

3) 토끼인형

www.flaticon.com/free-icon/rabbit_2884000?term=doll&page=1&position=1

Rabbit free vector icons designed by iconixar

4) 여자아이인형

www.flaticon.com/free-icon/doll_1390221?term=doll&page=1&position=42

Doll free vector icons designed by Freepik

5) 배경 - 책상

www.freepik.com/free-photo/stationary-composition-yellow-background-with-copy-space_6598836.htm#page=2&query=table+top+view&position=28

Download Stationary Composition On Yellow Background With Copy Space for free

 

---

화면구성

 

전체적인 화면구성입니다. 먼저 스크린을 가로로 설정한 후 시작합니다. 수평배치를 넣고 왼쪽에는 버튼, 오른쪽에는 캔버스를 배치합니다. 캔버스 안에는 이미지스프라이트를 4개 넣고 인형 그림을 각각 넣어줍니다. 그리고 공을 2개 넣어서 하나는 집게 역할을, 하나는 출구 역할을 하도록 합니다. 집게가 가속도 센서에 따라 움직여야 하므로 보이지 않는 컴포넌트에 가속도센서를 넣어줍니다. 시계의 타이머 기능을 사용해서 누르고 있는 동안 인형이 집게를 따라 오도록 합니다.

 

---

코딩하기

 

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

 

스크린이 초기화 되었을 때 4개의 이미지스프라이트를 랜덤한 곳에 배치하기 위해서 임의의 정수 블록을 가져와서 X좌표 값과 Y값을 바꾸어줍니다. 캔버스 너비에서 이미지스프라이트 너비를 빼주어야 이미지스프라이트가 화면안에 들어옵니다. 높이도 같은 원리로 코딩해줍니다.

 

가속도 센서 값이 바뀔 때 공_집게의 X와 Y의 값을 바꾸어 줍니다. 화면을 가로로 바꾸어준 상태이므로 X의 값에서 Y가속도 값을 반영합니다. 반대로 Y좌표의 값에서는 X가속도 값을 더해서 바꾸어줍니다. 

 

잡기 버튼을 터치다운(눌렀을 때)하면 공_집게와 충돌한 이미지스프라이트가 누구인지 변수에 저장합니다. 변수에 저장된 값이 비어있지 않다면 공_집게 좌표로 이미지스프라이트를 이동시킵니다. 그리고 시계를 활성화합니다. 

 

잡기 버튼을 터치업(땠을 때)하면 변수의 값을 비우고 시계를 비활성화합니다.

 

공_출구가 충돌했을때는 변수 값이 비어있지 않으면 이미지스프라이트(인형)를 안보이게 하고 알림창에 '뽑기 성공!'을 표시합니다. 

 

시계의 타이머가 작동할때는 버튼을 누르고 있을 때 따라오게 하기 위해서 이미지스프라이트(인형)의 X, Y의 값을 공_집게로 바꾸어줍니다.

 

 

---

확인하기

 

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

 

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

 

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