앱인벤터 두더지잡기 앱
앱인벤터 홈페이지에 나와 있는 튜터리얼을 참고해서 작성한 것이다. 튜터리얼의 목적은 앱인벤터의 많은 블록은 이해하고 활용할 수 있도록 도와주는 프로그램들로 구성되어 있다.
이번 튜터리얼은 두더지 잡기2 앱이다. 첫번째 두더지잡기는 실제 두더지잡기 게임과 같은 것이 아니라, 간단한 두더지 잡기 앱이다.
>>>> 두더지잡기 앱 <<<<
이번에는 아래 그림과 같이 실제 게임과 같은 두더지잡기 게임으로 업그레이드해서 만들어보기로 하자.
기본 개념은 다음과 같다.
스마트폰 화면 위에 구멍이 5개가 있으며, 5개 중에 임의의 위치에서 두더지 나왔다가 사라지게 한다. 이 때 사용자가 두더지가 나왔을 때 터치하면 점수가 증가하는 게임 앱이다.
자, 이제 시작해보자...
. 두더지잡기2 앱 기본 설계
캔버스 컴포넌트를 활용한다. 이전 두더지잡기 게임은 캔버스 컴포넌트 위에 하나의 이미지 스프라이트를 움직였는데, 이번에는 구멍 5개를 이미지 스프라이트로 추가해서 총 6개의 이미지 스프라이트를 만들어서 사용할 것이다.
캔버스 컴포넌트는 이미지 스프라이트가 움직일 수 있는 공간을 제공한다.
구멍 이미지 스프라이트 컴포넌트(1~5)는 특정한 위치에 구멍 이미지를 보여준다.
두더지 이미지 스프라이트 컴포넌트는 캔버스 컴포넌트에서 움직임을 제공한다.
점수를 표시하기 위한 레이블 2개와 수평배치 컴포넌트를 사용한다.
화면상에는 보이지 않지만 매우 중요한 컴포넌트 2개가 필요하다.
하나는 시계 컴포넌트로 주기적으로 두더지를 움직이는데 사용하며
나머지 하나는 소리 컴포넌트로 두더지가 잡히면 진동을 울리는데 사용한다.
. 두더지잡기2 앱 디자인
기본설계를 통해 필요한 디자인을 아래 그림과 같이 디자인하였다.
아래 그림은 두더지 이미와 구멍 이미지를 파일로 제공하였다. 다운로드 받아서 사용하시면 된다.
컴포넌트
앱인벤터 구성 요소는 디자이너 창의 왼쪽 팔레트 제목에 있다. 컴포넌트는 안드로이드 폰이나 아이폰에서 앱을 만들 때 사용하는 기본 요소이다. 화면에 캔버스, 이미지스프라이트 6개, 레이블, 2개 버튼, 소리, 시계 컴포넌트를 사용할 것이다.
캔버스 컴포넌트 설정값 설정하기
캔버스 컴포넌트에 알고 싶으면 아래 글을 참고하세요
앱인벤터 캔버스 컴포넌트
앱인벤터 캔버스 컴포넌트 앱인벤터의 컴포넌트들을 이해와 실제 예제를 통해 실습을 통해 모바일 앱 개발에 활용도를 높이고자 한다. 이번 시간에는 앱인벤터의 캔버스 컴포넌트를 활용하여
flycoding.tistory.com
배경색 : 밝은회색
캔버스의 높이 : 320
캔버스의 너비 : 320
캔버스 컴포넌트는 이미지 스프라이트가 이동하는 공간을 제공한다.
두더지 이미지스프라이트 컴포넌트 설정값 설정하기
이미지 스프라이트에 시간간격 : 100
사진 : mole.png (아래 파일을 다운로드 받아서 사용)
이미지 스프라이트 컴포넌트에 대해 더 자세히 알고 싶으면 아래 글을 참조바란다.
앱인벤터 이미지스프라이트 컴포넌트
앱인벤터 이미지스프라이트 컴포넌트 앱인벤터의 컴포넌트들을 이해와 실제 예제를 통해 실습을 통해 모바일 앱 개발에 활용도를 높이고자 한다. 이번 시간에는 앱인벤터의 이미지스프라이트
flycoding.tistory.com
구멍 이미지스프라이트 컴포넌트 설정값 설정하기
구멍 이미지 스프라이트는 통 5개이며 위치값이 다르다.
구멍1 (20, 60, 1.0)
구멍2 ( 130, 60, 1.0)
구멍3 (240, 60, 1.0)
구멍4 (75, 140, 1.0)
구멍5 (185, 60, 1.0)
레이블 컴포넌트 설정값 설정하기
점수를 표기하기 위해 사용된다.
해당 레이블에 두더지를 잡으면 1씩 점수를 증가시킨다.
리셋 버튼을 누르면 레이블의 텍스트값을 0으로 초기화한다.
레이블의 텍스트 : 0 (초기값)
버튼 컴포넌트 설정값 설정하기
버튼 컴포넌트는 점수를 초기화하는데 사용한다.
버튼을 클릭했을 때 이벤트 처리로 레이블의 텍스트를 0으로 초기화한다.
소리 컴포넌트 설정값 설정하기
두더지가 잡혔을 때, 진동을 울려 사용자에게 두더지가 잡혔음을 알려준다.
시계 컴포넌트 설정값 설정하기
주기적으로 두더지(이미지 스프라이트)가 구멍의 위치에 나타났다가 사라지는 시간 서비스를 제공하기 위해 시계 컴포넌트를 사용한다.
시계 컴포넌트에 대해 더 자세히 알고자 하면 아래 글을 참고바란다.
타이머간격 : 1000
설계 아이디어
기본 생각
두더지잡기 앱의 기본 생각은 캔버스 위에 구멍 5개를 위치시키고, 두더지는 구멍 5개 위에 임의의 위치에 나타났다가 사라지도록 한다. 사용자는 두더지가 나타났을 때, 터치하면 점수를 획득하는 앱이다.
설계 생각
5개의 구멍 이미지 스프라이트를 어떻게 관리할 것인지 생각해보아야 한다. 어떻게 임의의 구멍을 선택할 것인지 고민을 해야 한다.
1. 구멍 이미지 스프라이트를 리스트로 관리하여 리스트 내에 임의의 항목을 선택하는 것으로 기본 알고리즘을 잡았다.
변수로 구멍리스트를 정의한다.
2. 앱이 실행이 될 때, 구멍 리스트에 구멍 이미지 스프라이트 5개를 추가한다.
3. 두더지이동 함수를 정의하여 시간 타이머가 종료될 때마다 호출하도록 설계한다.
4. 두더지이동 함수는 구멍 리스트로부터 '임의의 항목 선택하기'를 통해 하나의 구멍을 선택하여 두더지를 해당하는 좌표로 이동한다.
5. 두더지를 터치했을 때, 점수를 증가시키고, 진동을 울리게 하고, 두더지를 이동시킨다.
상기의 설계대로 이제 코딩해보자!!!
코딩블럭
. 전역변수
구멍리스트 : 구멍 이미지 스프라이트 5개를 관리한다.
. 앱이 초기화될 때, 구멍리스트도 구멍 이미지 스프라이트를 추가하고 mole.png 이미지를 각 구멍 이미지 스프라이트에 수정한다.
. 앱 초기화되었을때
앱이 초기화되었을 때, 구멍리스트에 구멍이미지 스프라이트를 추가하며, 구멍이미지스프라이트의 사진을 mole.png로 변경한다.
두더지이동하기 함수를 호출한다.
| . 구멍리스트에 구멍 이미지 스프라이트 5개를 추가한다. . 구멍 이미지 스프라이트의 사진을 hole.png로 수정한다. . 두더지이동하기 함수를 호출한다. |
. 두더지이동 함수
두더지를 특정 위치로 이동해보자. 두더지 이동은 구멍1~5의 위치로 이동할 것이다.
그래서 구멍리스트의 리스트 중에 임의의 구멍 이미지 스프라이트를 선택한 후, 해당 이미지 스프라이트의 X, Y 좌표값을 두더지 이미지 스프라이트에 넣는다.
. 시계 타이머가 작동될때
두더지를 구멍의 임의의 위치로 주기적으로 이동시킬 때 사용된다.
초기 타이머값은 1000ms로 1초이다. 1초마다 '타이머가작동할때' 블록이 호출되며 '실행' 블록이 실행이 된다.
여기서는 '두더지이동' 함수를 호출하여 1초마다 두더지를 이동시킨다.
. 두더지를 터치했을때
이제 마지막으로 두더지를 터치했을 때, 해야 하는 일을 정리해보자
먼저 점수를 추가하고 진동을 울리며, 두더지를 다시 이동한다.
실행결과 화면
앱인벤터의 두더지잡기2 앱을 작성하였다. 실행 결과 화면은 아래와 같다.
첫번째 화면은 앱이 처음 구동되었을 때 화면이다.
여러차례 두더지를 터치했을 때 점수가 올라가 화면이다.
두더지잡기 실행 동영상화면이다.
지금까지 '두더지잡기2' 앱을 작성하였다. 두더지잡기 1편과 다르게 구멍 이미지 스프라이트를 5개 만들고 그 위에 두더지 이미지 스프라이트를 올려 보이도록 설계하고 코딩하였다. 여기에 하나의 코딩 기술은 구멍 이미지 스프라이트를 리스트로 관리하고 임의로 선택하도록 한 것이다. 설계 아이디어가 좋아야 쉽고 빠르게 코딩할 수 있다. 블록코딩을 처음한 경험을 살려 다음 튜터리얼도 계속 실습하기를 추천한다.
눈으로 보는 것과 직접 실행하며 하는 것은 완전히 달라요.
간단하지만 직접 해보면 이해하고 자신감이 생길거에요...
Just Do It!!!
Just Drag&Drop It!!!
감사합니다.
'앱인벤터 > 앱인벤터 코딩따라하기' 카테고리의 다른 글
| 앱인벤터 멀티스크린 도화지앱(multi-screen)-설계편 (1) | 2022.10.15 |
|---|---|
| 앱인벤터 매직 8 볼 앱 (0) | 2022.10.14 |
| 앱인벤터 두더지잡기 앱 (0) | 2022.10.12 |
| 앱인벤터 볼던지기 앱 (0) | 2022.10.06 |
| 앱인벤터 도화지 앱 (0) | 2022.10.05 |
댓글