Transcript PPT - 앱 인벤터 2

PART 1
앱 인벤터 프로젝트
03 잡아라! 두더지
두더지 잡기 게임
 추억의 게임기
 동전 넣고 하는 ‘두더지 잡기 게임기’
 구멍에서 튀어나오는 두더지 머리 맞추어 점수 얻는
게임기
 앱 인벤터로 개발해보자.
 1970년대에 고안된 스프라이트 기능
 엘렌 스퍼투스 (이 책의 저자 중 한 명)가 앱 인벤터에
ImageSprite 컴포넌트 추가함
 이 장에서는 Canvas, ImageSprite, Clock 컴포넌트 등
을 이용하여 <두더지 잡기> 앱을 개발
무엇을 개발하는가?
 <두더지 잡기> 앱에서 개발하는 기능들
 두더지가 화면의 임의 위치에 나타나면 1초에 한 번씩
이동
 두더지를 맞추면 폰이 진동하며 “맞춤” 횟수 증가
두더지는 즉시 다른 곳으로 이동
 두더지를 놓치면 “놓침” 횟수 증가
 [다시 하기] 버튼 누르면 점수가 0으로 초기화됨
무엇을 배우는가?
 <두더지 잡기> 앱을 만들며 배우는 것들
 터치하면 알아차리고, 이곳저곳 옮겨 다닐 수 있는 ImageSprite 컴포넌트
 ImageSprite가 옮겨다니는 공간을 제공하는 Canvas 컴포넌트
 스프라이트가 이동하는 시간 간격을 재는 Clock 컴포넌트
 두더지를 맞추면 폰을 진동시키는 Sound 컴포넌트
 누르면 새로운 게임이 시작되는 Button 컴포넌트
 두더지 이동과 같이 반복되는 일을 지원하는 프로시저
 난수 생성
 덧셈과 뺄셈을 계산해 주는 블록
프로젝트 생성
 프로젝트 만들고, 라이브 테스팅 연결
 프로젝트 이름은 “MoleMash”
 Screen1의 Title 속성은 “두더지 잡기”
 두더지 이미지 업로드
 http://appinventor.org/bookFiles/MoleMash/mole.png에서 두더지 이미지 다운로드
 Media 영역에서 [Upload File ..]을 클릭하여 파일을 앱 인벤터에 업로드
컴포넌트 설계
동작 관련 컴포넌트 추가하기
 절차
1. Canvas 컴포넌트 끌어오기
 Canvas1이라는 이름을 캔버스1로 바꿈
2. ImageSprite 컴포넌트 끌어오기
 이름을 두더지로 바꿈
3. Button 컴포넌트 끌어오기
 이름을 리셋버튼으로 바꿈
4. Clock 컴포넌트 끌어오기
 이름을 클록1로 바꿈
5. Sound 컴포넌트 끌어오기
 이름을 사운드1로 바꿈
레이블 컴포넌트 추가하기
 절차
1. HorizontalArrangement 컴포넌트
끌어오기
2. Label 컴포넌트 두 개를 끌어와 수평
배치 (“맞춤” 용)
3. HorizontalArrangement 컴포넌트
끌어오기
4. Label 컴포넌트 두 개를 끌어와 수평
배치 (“놓침” 용)
컴포넌트 동작 프로그래밍
 프로그래밍할 일들
 두더지를 1초에 한 번씩 화면의 임의 위치로 옮겨줌
 사용자가 화면을 터치할 때마다 두더지를 맞추었는지 확인
 결과에 따라 맞춤 또는 놓침 횟수를 갱신
 [다시 하기] 버튼을 누르면 점수를 0으로 초기화
두더지 이동시키기
 지금까지는 앱 인벤터가 제공하는 내장 프로시저 사용
 예) 폰을 떨게 하는 Vibrate 프로시저, 원을 그려주는 DrawCircle 프로시저 등
 ImageSprite를 임의 위치로 옮겨주는 내장 프로시저는 없음
프로그래머가 스스로 프로시저를 만드는 기능 활용
 해결책
 두더지이동이라는 프로시저를 작성
 1초에 한 번씩 두더지이동 프로시저를 호출함
두더지이동 프로시저 작성하기
 먼저 안드로이드 폰의 그래픽을 이해하자.
 Canvas의 x(수평) 축은 오른쪽으로 갈수록 증가, y(수평) 축은 아래로 내려갈수록 증가
 좌표 범위
• x 축은 0~캔버스1.Width-1
• y 축은 0~캔버스1.Height-1
 두더지가 Canvas 밖으로 나가지 않으려면
• x 좌표 범위는 0~캔버스1.Width-두더지.Width
• y 좌표 범위는 0~캔버스1.Height-두더지.Height
두더지이동 프로시저 작성하기
 두더지이동 프로시저 작성 절차
1. Procedure 서랍을 연다.
2. to procedure 블록 끌어오기
3. 프로시저 이름을 두더지이동으로 바꾸기
4. call 두더지.MoveTo 블록을 끌어와 두더지이동 블록의 do 홈에 끼움
5. x 좌표를 0~캔버스1.Width-두더지.Width까지 범위의 난수로 설정
6. y 좌표를 0~캔버스1.Height-두더지.Height까지 범위의 난수로 설정
앱이 시작될 때 두더지이동 호출하기
 사용자는 앱이 시작하면 화면에 무엇인가 등장하길 기대함
 Screen1.Initialize는 앱이 시작될 때 자동으로 실행되는 이벤트 처리기 블록
 여기에서 두더지이동 프로시저를 호출하여 사용자 기대에 부응해보자.
 절차
1. Screen1 서랍에서 Screen1.Initialize 블록을 끌어옴
2. Procedure 서랍을 열고 call 두더지이동 블록을 끌어와 Screen1.Initialize에 끼움
1초마다 두더지이동 호출하기
 Clock 컴포넌트에 대한 이해
 TimerEnabled 속성이 체크되어 있으면(즉 true로 설정) TimerInterval 속성 값을 주기로
사용하여 반복 실행됨
 TimerInterval은 밀리초 단위로서, 기본값은 1000(1초)으로 설정됨
 절차
1. 클록1 서랍에서 클록1.Timer 블록 끌어오기
2. Procedure 서랍에서 call 두더지이동 블록을 끌어와 클록1.Timer에 끼움
점수 매기기
 사용자가 두더지를 맞추었는지 검사하는 방법
 사용자가 터치한 곳과 두더지 위치가 일치하는지 검사해야 함
 Canvas.Touched 블록이 자동으로 검사하여 touchedAnySprite라는 매개변수에 저장해둠
 절차
1. 캔버스1 서랍에서 캔버스1.Touched 블록 끌어오기
2. Control 서랍에서 if-then 블록을 꺼내옴
 파란 아이콘을 클릭하여 else 추가한 다음 if-then-else 블록을 캔버스1.Touched 블록에 끼움
점수 매기기
 절차
3. get touchedAnySprite 블록을 끄집어 if-then-else의 if 홈에 끼움
4. then에서 맞춤횟수레이블.Text를 1만큼 증가시킴
5. else에서 놓침횟수레이블.Text를 1만큼 증가시킴
프로시저 추상화
 프로시저 추상화
 명령어 집합을 묶어 이름을 붙이고, 나중에 필요할 때 호출해 사용하는 방식
 컴퓨터 공학에서 매우 중요한 개념
 프로시저를 개발하는 사람과 사용하는 사람이 다른 경우가 대부분
 구체적인 내부 동작 원리를 몰라도 사용할 수 있음
 추상화라는 용어를 사용하는 이유
 모든 공학 분야에서 추상화 사용: 예) 자동차 제작 과정과 운전 과정
 프로시저 추상화의 장점
 프로그램 테스트가 쉬움
 코드에 오류가 있을 때 한 곳만 수정
 프로그램 기능 개선할 때 한 곳만 수정
 라이브러리 제작
 분할 정복 전략 구사
 문서화 용이
점수 초기화
두더지를 맞추었을 때 폰 진동시키기
전체 앱 프로그램
확장해 보기
감사합니다.