PART 1 앱 인벤터 프로젝트 03 잡아라! 두더지. PART 1 앱 인벤터 프로젝트 03 잡아라! 두더지.

Presentation on theme: "PART 1 앱 인벤터 프로젝트 03 잡아라! 두더지. PART 1 앱 인벤터 프로젝트 03 잡아라! 두더지."— Presentation transcript:

1

2 PART 1 앱 인벤터 프로젝트 03 잡아라! 두더지

3 두더지 잡기 게임 추억의 게임기 앱 인벤터로 개발해보자. 동전 넣고 하는 ‘두더지 잡기 게임기’
구멍에서 튀어나오는 두더지 머리 맞추어 점 수 얻는 게임기 앱 인벤터로 개발해보자. 1970년대에 고안된 스프라이트 기능 엘렌 스퍼투스 (이 책의 저자 중 한 명)가 앱 인벤터에 ImageSprite 컴포넌트 추가함 이 장에서는 Canvas, ImageSprite, Clock 컴 포넌트 등을 이용하여 <두더지 잡기 > 앱을 개발

4 무엇을 개발하는가? <두더지 잡기> 앱에서 개발하는 기능들
두더지가 화면의 임의 위치에 나타나면 1초에 한 번씩 이동 두더지를 맞추면 폰이 진동하며 “맞춤” 레이블 증가. 두더지는 즉시 다른 곳으로 이동 두더지를 놓치면 “놓침” 레이블 증가 [다시 하기] 버튼 누르면 점수가 0으로 초기화됨

5 무엇을 배우는가? <두더지 잡기> 앱을 만들며 배우는 것들
터치하면 알아차리고, 이곳저곳 옮겨 다닐 수 있는 ImageSprite 컴포넌트 ImageSprite가 옮겨다니는 공간을 제공하는 Canvas 컴포넌트 스프라이트가 이동하는 시간 간격을 재는 Clock 컴포넌트 두더지를 맞추면 폰을 진동시키는 Sound 컴포넌트 누르면 새로운 게임이 시작되는 Button 컴포넌트 두더지 이동과 같이 반복되는 일을 지원하는 프로시저 난수 생성 덧셈과 뺄셈을 계산해 주는 블록

6 프로젝트 생성 프로젝트 만들고, 라이브 테스팅 연결 두더지 이미지 업로드 프로젝트 이름은 “MoleMash”
Screen1의 Title 속성은 “두더지 잡기” 두더지 이미지 업로드 appinventor.org/bookFiles/MoleMash/mole.png에서 두더지 이미지 다운로드 Media 영역에서 [Upload File ..]을 클릭하여 파일을 앱 인벤터에 업로드

7 컴포넌트 설계

8 동작 관련 컴포넌트 추가하기 절차 Canvas 컴포넌트 끌어오기  Canvas1이 라는 이름을 캔버스1로 바꿈
ImageSprite 컴포넌트 끌어오기  이름을 두더지로 바꿈 Button 컴포넌트 끌어오기  이름을 리셋 버튼으로 바꿈 Clock 컴포넌트 끌어오기  이름을 클록1 로 바꿈 Sound 컴포넌트 끌어오기  이름을 사운 드1로 바꿈

9 레이블 컴포넌트 추가하기 절차 HorizontalArrangement 컴포넌트 끌 어오기
Label 컴포넌트 두 개를 끌어와 수평 배치 (“맞춤” 용) Label 컴포넌트 두 개를 끌어와 수평 배치 (“놓침” 용)

10 컴포넌트 동작 프로그래밍 할 일들 두더지를 1초에 한 번씩 화면의 임의 위치로 옮겨줌
사용자가 화면을 터치할 때마다 두더지를 맞추었는지 확인 결과에 따라 맞춤 또는 놓침 횟수를 갱신 [다시 하기] 버튼을 누르면 점수를 0으로 초기화

11 두더지 이동시키기 지금까지는 앱 인벤터가 제공하는 내장 프로시저 사용 해결책
예) 폰을 떨게 하는 Vibrate 프로시저, 원을 그려주는 DrawCircle 프로시저 ImageSprite를 임의 위치로 옮겨주는 내장 프로시저는 없음  프로그래머가 스스로 프 로시저를 만드는 기능 제공 해결책 두더지이동이라는 프로시저를 작성 1초에 한 번씩 두더지이동 프로시저를 호출함

12 두더지이동 프로시저 작성하기 먼저 안드로이드 폰의 그래픽을 이해하자.
Canvas의 x(수평) 축은 오른쪽으로 갈수록 증가, y(수평) 축은 아래로 내려갈수록 증가 좌표 범위: x 축은 0~Canvas.Width-1, y 축은 0~Canvas.Height-1 두더지가 Canvas 밖으로 나가지 않으려면, x 좌표는 0~캔버스1.Width-두더지.Width 범 위, y 좌표는 0~캔버스1.Height-두더지.Height 범위이어야 함

13 두더지이동 프로시저 작성하기 두더지이동 프로시저 작성 절차 Procedure 서랍을 연다.
to procedure 블록 끌어오기 프로시저 이름을 두더지이동으로 바꾸기 call 두더지.MoveTo 블록을 끌어와 두더지이동 블록의 do 홈에 끼움 x 좌표를 0~캔버스1.Width-두더지.Width까지 범위의 난수로 설정 y 좌표를 0~캔버스1.Height-두더지.Height까지 범위의 난수로 설정

14 앱이 시작될 때 두더지이동 호출하기 사용자는 앱이 시작하면 화면에 무엇인가 등장하길 기대함 절차
Screen1.Initialize는 앱이 시작될 때 자동으로 실행되는 이벤트 처리기 블록 여기에서 두더지이동 프로시저를 호출하여 사용자 기대에 부응해보자. 절차 Screen1 서랍에서 Screen1.Initialize 블록을 끌어옴 Procedure 서랍을 열고 call 두더지이동 블록을 끌어와 Screen1.Initialize에 끼움

15 1초마다 두더지이동 호출하기 Clock 컴포넌트에 대한 이해 절차
Enabled 속성이 true로 설정되어 있는 한 TimerInterval 속성을 주기로 반복 실행됨 TimerInterval은 밀리초 단위로서, 기본값은 1000(1초)으로 설정됨 절차 클록1 서랍에서 클록1.Timer 블록 끌어오기 Procedure 서랍에서 call 두더지이동 블록을 끌어와 클록1.Timer에 끼움

16 점수 매기기 사용자가 두더지를 맞추었는지 검사하는 방법 절차 사용자가 터치한 곳과 두더지 위치가 일치하는지 검사해야 함
Canvas.Touched 블록은 자동으로 검사하여 touchedAnySprite라는 매개변수에 저장해둠 절차 캔버스1 서랍에서 캔버스1.Touched 블록 끌어오기 Control 서랍에서 if-then 블록을 꺼내옴  파란 아이콘을 클릭하여 else 추가한 다음 if-then-else 블록을 캔버스1.Touched 블록에 끼움

17 점수 매기기 절차 get touchedAnySprite 블록을 끄집어 if-then-else의 if 홈에 끼움
then에서 맞춤횟수레이블.Text를 1만큼 증가시킴 else에서 맞놓침횟수레이블.Text를 1만큼 증가시킴

18 프로시저 추상화 프로시저 추상화 프로시저 추상화의 장점
명령어 집합을 묶어 이름을 붙이고, 나중에 필요할 때 호출해 사용하는 방식  컴퓨터 공학에서 매우 중요한 개념 프로시저를 개발하는 사람과 사용하는 사람이 다른 경우가 대부분 구체적인 내부 동작 원리를 몰라도 사용할 수 있음  추상화라는 용어를 사용하는 이유 모든 공학 분야가 추상화 사용: 예) 자동차 제작 과정과 운전 과정 프로시저 추상화의 장점 프로그램 테스트가 쉬움 코드에 오류가 있을 때 한 곳만 수정 프로그램 기능 개선할 때 한 곳만 수정 라이브러리 제작 분할 정복 전략 구사 문서화 용이

19 점수 초기화

20 두더지를 맞추었을 때 폰 진동시키기

21 전체 앱 프로그램

22 확장해 보기

23