[앱인벤터 예제] 벽돌깨기 앱 만들기

앱인벤터를 이용해 벽돌깨기 앱을 만들어보도록 하겠습니다.

벽돌깨기 게임(Breakout-style game)은 고전게임 중 하나인데 화면 안에서 움직이는 볼을 화면 아래로 떨어지지 않게 바(막대기)를 움직여서 벽돌들을 전부 깨뜨리는 게임입니다. 

 

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

---

동작사진

 

1. 스위치를 터치해서 게임을 시작합니다. 막대기를 드래그하면 좌우로 이동합니다. 

 

2. 공이 벽돌을 깨도록 합니다.

 

 

3. 공이 바닥에 닿으면 게임이 종료됩니다.

 

---

이미지

 

이번 앱에서 사용되는 이미지를 다운받을 수 있도록 하였습니다.  다운로드 받아서 사용하시면 됩니다.

 

1) 바(막대기) 

bar.png

0.00MB

2) 주황색 벽돌

1.png

0.00MB

3) 연두색 벽돌

2.png

0.00MB

 

4) 하늘색 벽돌

3.png

0.00MB

---

화면구성

 

 

전체적인 화면구성입니다. 가장 위에는 레이블을 넣어서 점수를 보여주게 구성하였고, 가운데에는 캔버스를 넣어서 게임 화면을 구성하였습니다. 이미지가 움직이기 위해서는 이미지스프라이트를 사용해야하는데 이미지스프라이트는 캔버스 안에서만 움직일 수 있습니다. 스위치를 이용해서는 게임을 시작하거나 종료하도록 하게 합니다. 소리 기능을 넣어서 공이 바닥에 닿았을 때 진동하도록 합니다. 

 

 

스크린의 속성입니다.  수평정렬을 가운데로 변경합니다. 배경색을 검정으로 바꿉니다. 

수평배치 속성입니다. 레이블 2개를 가운데로 정렬하기 위해서 수평정렬과 수직정렬을 가운데로 설정합니다. 높이를 10퍼센트로 지정합니다.

레이블1의 속성입니다. 글꼴크기를 20으로 바꾸고 텍스트에 '점수'를 입력합니다. 텍스트색상을 흰색으로 변경합니다. 

레이블2의 속성입니다. 글꼴크기를 20으로 바꾸고 텍스트에 '0'를 입력합니다. 텍스트색상을 노랑으로 변경합니다. 

 캔버스의 속성입니다. 배경색을 어두운 회색으로 변경하고 높이를 70퍼센트로 변경합니다. 너비는 부모요소에 맞춥니다. 

이미지스프라이트1(막대기)의 속성입니다. 높이를 20픽셀, 너비를 70픽셀로 바꿉니다. 사진 bar.png로 바꿉니다. 좌표를 X는 115, Y는 500으로 변경합니다. 

공 속성입니다. 페인트 색상을 청록색으로 변경합니다. 

 

이미지스프라이트2~3은 벽돌입니다. 높이는 40픽셀, 너비는 60픽셀로 변경하고 사진은 각각 1.png, 2.png, 3.png로 변경하고 좌표는 넣고 싶은 위치에 넣습니다. 

스위치와 소리를 넣습니다. 스위치는 텍스트 속성만 '시작/종료'를 입력합니다.  

---

코딩하기

 

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

 

가장 먼저 점수를 저장할 변수를 하나 만듭니다.  그리고 화면이 초기화될 때 점수값을 0으로 초기화 시킵니다. 이미지스프라이트1(막대기)를 드래그하면 손가락의 현재X좌표 값을 가져와서 막대기의 X좌표를 변경하도록합니다.

스위치가 변경될때 스위치가 ON으로 되면 공의 좌표와 방향을 랜덤하게 설정합니다. 속도를 20으로 설정하고 활성화를 참으로 변경합니다. 점수 값을 화면에 보이도록 하고 벽돌 3개를 화면에 보이도록 참으로 변경합니다.

 

공이 모서리에 닿았을 때 바닥에 닿았는지 판단하기 위해서 모서리가 -1인지 확인합니다. (여기서 천장 모서리는 1의 값을 가지고 왼쪽은 -3, 오른쪽은 3을 가집니다.) 바닥에 닿으면 스마트폰을 진동하게 하고 레이블에 게임종료를 보이게 합니다. 그 외 모서리에 닿았을 때는 튕기게 합니다.

 

벽돌 3개가 충돌했을 때는 벽돌을 안보이게 하고 점수를 1씩 늘어나게 합니다. 

 

공이 충돌하면 막대기 밖에 없으므로 튕길 수 있도록 방향 값을 '360-방향'으로 설정합니다. 

 

 

---

확인하기

 

 

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

 

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

 

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