[문제풀이]앱인벤터2 - "03. 잡아라! 두더지" 확장하기 P82

앱인벤터2 문제풀이 - 82페이지 "잡아라! 두더지" 확장하기

* 캔버스 너비(Width) : 보통 폰너비 300픽셀

* Ball(색과 크기만변경 가능)과 ImageSprite(이미지파일 변경가능) 둘 다 스프라이트다.

* EdgeReached 이벤트 : 캔버스의 경계에 닿으면 공을 (1,1)로 이동(포켓볼당구게임)

   - 북=1 / 북동=2 / 동=3 / 남동=4 / 

     남=-1 / 남서=-2 / 서=-3 / 북서=-4

* CollidedWith(충돌하는순간)와 NoLongerCollidingWith(물체가 떨어지는 순간) : 

  물체간의 충돌 처리

* 프로시저만들기 : 프로시저는 여러번 반복해야 하는 코드를 압축시켜 만든 일종의 함수와 같다.  같은 동작을 반복해야할 필요가 있을 때 프로시저를 호출하여 사용 할 수 있고, 프로시저를 모아 라이브러리를 제작할 수 있으며, 다른 앱에서 라이브러리를 재활용할 수도 있다. 

앱인벤터에서 프로시저를 가져다 쓰는 방법은, 프로시저를 모아 놓은 라이브러리 앱을 만들어두고, 이 라이브러리앱을 복사한 다음 필요한 프로시저만 선별하여 사용하는 방법밖에 없다.

1. 두더지 움직임을 빠르게 하는 버튼과 느리게 하는 버튼을 추가한다.

  위 보이는 화면은 적용된 예이고,  디자이너탭에서 버튼"빠르게", "느리게"를 버튼을 추가하고, 블록탭에서 빠르게하기 서랍에 when 빠르게하기.Click do 블록에 클록1 서랍에서 set 클록1.TimerInterval to "30" 느리게하기 서랍에 when 느리게하기.Click do 블록에 클록1 서랍에서 set 클록1.TimerInterval to "500" 으로 설정하면 된다.

2. 두더지가 튀어나온(이동한) 횟수를 보여주는 레이블을 추가한다. 

  디자이너탭에서 좌측 Layout -> HorizontalArrangement -> User Interface -> Label추가 -> Rename -> 두더지이동레이블 -> Text="두더지 이동횟수:" -> Label추가 -> Rename -> "두더지이동횟수"-> Text="0"

  블록탭에서 두더지이동횟수서랍에 set 두더지이동횟수.Text to를 기존에 있던 to 두더지이동do 블록에 조립하고 -> Math서랍에 "+"기호를빼서 -> 좌측에 두더지이동횟수.Text -> 우측에 "1"을 삽입하면 된다.

3. 새로운 ImageSprite를 추가하고 꽃, 나무 등과 같이 원하는 이미지를 덧붙인다. 사용자가 이 스프라이트를 건드리면 점수를 줄이거나 게임을 끝내도록 프로그램을 만든다.

  디자이너탭에서 Drawing and Animation -> ImageSprite 추가 -> Rename = 꽃 -> Picture : 꽃.png -> ImageSprite 추가 -> Rename = 나무 -> Picture : 나무.png 

꽃이동과 나무이동 프로시저 만들기

  블록탭으로 와서 우선 꽃이동 프로시저를 만들어야 하는데, Procedures서랍에 to procedure do를 가져와서 "procedure"를 클릭해서 "꽃이동"으로 바꾸고, 꽃서랍에 call 꽃.MoveTo x y 를 가져다 넣고, Math서랍에 random integer from to 를 가져다 x축의 좌우에 "0"과 "캔버스1.Width - 꽃.Width", y축의 좌우에 "0"과 "캔버스1.Height - 꽃.Height"를 삽입한다.

그 다음 나무이동 프로시저도 동일한방법으로, Procedures서랍에 to procedure do를 가져와서  "procedure"를 클릭해서 "나무이동"으로 바꾸고, 나무서랍에 call 나무.MoveTo x y 를 가져다 넣고, Math서랍에 random integer from to 를 가져다 x축의 좌우에 "0"과 "캔버스1.Width - 나무.Width", y축의 좌우에 "0"과 "캔버스1.Height - 나무.Height"를 삽입한다.

동시에 when Screen1.Initialize do 에 Procedures서랍에 call 꽃이동과 call 나무이동을 추가하고, 동일한 방법으로 when 클록1.Timer do 에도  call 꽃이동과 call 나무이동을 추가한다. 

  블록탭에서 꽃을 클릭할 때 맞춤횟수레이블이 1개씩 줄게하는 것은, 꽃이 스프라이트이기 때문에 스프라이트 선택시 자동으로 맞춤횟수레이블이 1개씩 증가하므로, 꽃 서랍에서 when 꽃.Touched do를 꺼내어 set 맞춤횟수레이블.Text to 에 "맞춤횟수레이블.Text" - "2"를 입력하면 된다.

  나무를 클릭할 때 종료되게 하려면, 나무서랍에서 when 나무.Touched do를 꺼내어 클록1의 set 클록1. TimerEnabled to  false (Logic)로 맞추어 끼운다.

더불어 when 리셋버튼.Click do 에 추가로 set 클록1.TimerEnabled to true 를 삽입한다.

4. ImageSprite 영상을 두더지로 고정하지 말고, ImagePicker 컴포넌트를 이용하여 사용자가 영상을 선택하도록 개선한다. 

  디자이너탭에서 Media -> ImagePicker 를 추가하고, Rename = "이미지가져오기", Text를 "가져오기..." 로 이름 붙인 다.

  블럭탭에서에서 이미지가져오기 서랍에 when 이미지가져오기.AfterPicking do 를 꺼내어, 두더지서랍에 set 두더지.picture to 를 넣고, 이미지가져오기.Selection을 끼운다.

그리고 다시하기 눌렀을 때 바뀐 이미지가 두더지로 원상복구되게 하기 위해, when 리셋버튼.Click do 에도 set 두더지.Picture to "mole.png"(두더지이미지명)를 추가한다.

<출처 :  David Wolber, Hal Abelson, Ellen Spertus, Liz Looney(2015), 

앱인벤터2(초판)(오일석, 이진선 번역, 서울:한빛아카데미. (원서는 2014년에 출판)>