앱인벤터 두더지잡기 앱

앱인벤터 두더지잡기 앱

 

앱인벤터 홈페이지에 나와 있는 튜터리얼을 참고해서 작성한 것이다. 튜터리얼의 목적은 앱인벤터의 많은 블록은 이해하고 활용할 수 있도록 도와주는 프로그램들로 구성되어 있다.

 

이번 튜터리얼은 두더지 잡기 앱이다. 어렸을 때 동네 문방구나, 게임장 앞에 두더지잡기 게임을 한번쯤 해 본 경험이 있을 것이다. 이와 유사한 두더지잡기 게임을 만들어보자.

앱인벤터 두더지잡기 게임

 

이번에는 캔버스 컴포넌트에 낙서하는 앱이다.

기본 개념은 다음과 같다.

스마트폰 화면 위에 두더지 그림이 나왔다가 사라지고, 두더지가 나왔을 때 손으로 두더지를 터치하면 점수가 추가되는 앱이다.

 

자, 이제 시작해보자...

 

. 두더지잡기 기본 설계

캔버스 컴포넌트를 활용한다. 캔버스 위에 움직임을 제공하는 개체가 볼과 이미지 스프라이트이다. 이번에는 이미지 스프라이트를 활용하여 캔버스 위에 이미지 스프라이트를 움직여보자.

 

캔버스 컴포넌트는 이미지 스프라이트가 움직일 수 있는 공간을 제공한다. 

이미지 스프라이트 컴포넌트는 캔버스 컴포넌트에서 움직임을 제공한다.

주기적으로 이미지 스프라이트를 이동하기 위해 타이머 컴포넌트를 사용한다.

소리 컴포넌트를 활용하여 두더지가 잡히면 소리를 출력한다.

점수를 계산하여 사용자에게 보여준다.

 

컴포넌트

앱인벤터 구성 요소는 디자이너 창의 왼쪽 팔레트 제목에 있다. 컴포넌트는 안드로이드 폰이나 아이폰에서 앱을 만들 때 사용하는 기본 요소이다. 화면에 캔버스, 이미지스프라이트, 레이블, 버튼,  소리, 타이머 컴포넌트를 사용할 것이다. 

 

캔버스 컴포넌트 설정값 설정하기

캔버스 컴포넌트에 알고 싶으면 아래 글을 참고하세요

 

앱인벤터 캔버스 컴포넌트

앱인벤터 캔버스 컴포넌트

캔버스의 높이 : 300

캔버스의 너비 : 300

 

캔버스 컴포넌트는 이미지 스프라이트가 이동하는 공간을 제공한다. 

 

이미지스프라이트 컴포넌트 설정값 설정하기

이미지 스프라이트에 시간간격 : 500사진 : mole.png (아래 파일을 다운로드 받아서 사용)

mole.png

0.00MB

이미지 스프라이트 컴포넌트에 대해 더 자세히 알고 싶으면 아래 글을 참조바란다.

 

앱인벤터 이미지스프라이트 컴포넌트

앱인벤터 이미지스프라이트 컴포넌트

 

 

레이블 컴포넌트 설정값 설정하기

점수를 표기하기 위해 사용된다.

해당 레이블에 두더지를 잡으면 1씩 점수를 증가시킨다.

리셋 버튼을 누르면 레이블의 텍스트값을 0으로 초기화한다.

 

레이블의 텍스트 : 0 (초기값

 

버튼 컴포넌트 설정값 설정하기

버튼 컴포넌트는 점수를 초기화하는데 사용한다.

버튼을 클릭했을 때 이벤트 처리로 레이블의 텍스트를 0으로 초기화한다.

 

소리 컴포넌트 설정값 설정하기

두더지가 잡혔을 때, 진동을 울려 사용자에게 두더지가 잡혔음을 알려준다.

 

타이머 컴포넌트 설정값 설정하기

주기적으로 두더지(이미지 스프라이트)가 임의의 위치에 이동했다가 사라지도록 시간 서비스를 제공하기 위해 타이머 컴포넌트를 사용한다.

기본으로 500밀리미터 간격마다 타이머가 작동해서 특정한 일을 할 수 있도록 서비스를 제공한다.

 

타이머간격 : 500

 

 

설계 아이디어

기본 생각

두더지잡기 앱의 기본 생각은 캔버스 위에 두더지 모양의 이미지 스프라이트 컴포넌트가 주기적으로 임의의 위치에 나왔다가 사라지고, 사용자는 두더지를 터치하여 점수를 획득하는 앱이다. 

 

캔버스는 이미지 스프라이트가 움직일 수 있는 공간을 제공한다.

이미지 스프라이트는 주기적으로 움직이기 위해 타이머가 동작할 때 움직이는 작업을 해야 한다.

움직임은 함수를 정의하여 사용한다.

이미지 스프라이트가 임의의 위치에 나타나도록 난수를 사용한다.

 

코딩블럭

 

. 전역변수

점수 : 두더지가 잡힐 때마자 1씩 증가하다.

        : 초기값은 0이다..

앱인벤터 두더지잡기 점수 변수 만들기

 

. 두더지 이동하기 함수

. 두더지를 이동해보자. 두더지를 이동하기 위해 두더지 이미지 스프라이트의 X, Y좌를 임의로 이동시킨다.

연산블록으로 '임의의분수'*'캔버스의너미'-'두더지의 너비'를 뺀 값을 X, Y 위치를 지정한다.

앱인벤터 두더지잡기 두더지이동하기 함수

 

. 타이머가작동할때 함수

. 타이머는 500ms로 초기값을 설정해 놓았다. '타이머가작동할때' 이벤트 블록이 500ms마다 호출될 때 '두더지이동하기' 함수를 호출하여 임의의 위치로 두더지를 이동시킨다.

앱인벤터 두더지잡기 타이머가작동할때 블록

 

. 터치했을때

. 사용자가 두더지를 터치했을 때 발생하는 이벤트 블록이다. 두더지 이미지 스프라이트의 '터치했을때' 블록을 활용하여 터치하면 점수를 증가시키고, 진동을 울리고 두더지를 이동한다.

앱인벤터 두더지잡기 두더지를 잡았을 때

. 'UpdateScore' 함수 

'점수표시' 레이블에 전역변수 '점수'를 화면 출력하는 함수이다.

앱인벤터 두더지잡기 'UpdateScore' 함수

. 리셋버튼을 클릭했을 때

리셋 버튼을 클릭했을 때, 점수를 0으로 초기화한다. 전역변수 '점수'를 0으로 초기화하며, 'UpdateScore' 함수를 호출한다.

앱인벤터 두더지잡기 리셋버튼을 클릭했을 때 블록

 

실행결과 화면

 

앱인벤터의 두더지잡기 앱을 작성하였다. 실행 결과 화면은 아래와 같다. 

 

첫번째 화면은 앱이 처음 구동되었을 때 화면이다. 

 

앱인벤터 두더지잡기앱 실행화면

 

두더지잡기하였을 때 점수가 추가된 화면이다. 두더지를 터치하면 진동이 울리고 점수가 추가된다. 필자는 6회를 두더지를 잡았다.

 

앱인벤터 두더지잡기 실행화면

 

마지막은 두더지잡기 실행 동영상이다.

앱인벤터 두더지잡기 앱 동영상 실행화면

 

좀더 생각해보기

'두더지잡기' 앱을 작성해보았다. 

이제 실제로 오프라인에서 하는 두더지잡기 앱을 만들어보자.

두더지잡기 기반으로 하여 두더지잡기2를 작성해 보자.

구멍 5개에 임의로 두더지가 나와서 두더지잡기 앱을 잡는 앱을 만들어보자.

 

지금까지 '두더지잡기' 앱을 작성하였다. 사용한 컴포넌트는 캔버스, 이미지스프라이트, 버튼 컴포넌트를 활용하여 앱을 만들어보았다.  블록코딩을 처음한 경험을 살려 다음 튜터리얼도 계속 실습하기를 추천한다.

 

눈으로 보는 것과 직접 실행하며 하는 것은 완전히 달라요.

간단하지만 직접 해보면 이해하고 자신감이 생길거에요...

 

Just Do It!!!

Just Drag&Drop It!!!

 

 

감사합니다.