이제 이 앱의 핵심이라고 할 수 있는! 게임 화면을 만들어 봅시다!
게임화면에는 그 동안 우리가 써보지 못 했던 Canvas(캔버스), ImageSprite(이미지스프라이트)가 중요한 역할을 합니다. 우리 함께 만들어 보면서 Canvas, ImageSprite가 무엇인지 알아봅시다.
게임화면의 중요 기능을 먼저 정리해 볼까요?
1) 게임 시간은 30초이며, 카멜레온을 터치하면 10점씩 점수가 올라간다.
2) 카멜레온 두 마리(ImageSprite1,2)가 0.4초, 0.7초 시간 간격을 두고 Canvas에 마음대로 돌아다닌다.
3) 점수가 250의 배수(250, 500점...)가 될 때마다 게임 시간이 5초씩 늘어난다.
4) 게임 시간이 끝나면 ScoreScreen으로 이동한다.
여러 부분에서 사용하기 위해서 획득한 점수를 저장할 Score 변수와 게임시간을 나타낼 Time 변수를
미리 지정해 주겠습니다.
Canvas위에서 두 마리의 카멜레온(ImageSprite1, ImageSprite2)을 임의로 움직여야 합니다.
앱 인벤터에서 위치 표시하는 방법을 알아봅시다. 위치표시는 왼쪽 위 모서리를 기준으로 가로, 세로에서
떨어진 거리로 나타냅니다.
아래 그림을 참고하면 가로는 (캔버스 가로길이 – 이미지 가로길이)보다 짧은 곳에 위치해야 하고,
세로는 (캔버스 세로길이 – 이미지 세로길이)보다 짧은 곳에 위치해야 합니다.
Canvas위에 임의의 위치를 잡기 위해서는 ‘random fraction’ 블록과 ‘GameCanvas.Width’, ‘GameCanvas.Height’블록을 사용하여 잡을 수 있습니다.
ImageSprite1을 클릭하면 나오는 블록 중 [call ImageSprite1. Move to x y]블록을
빈 화면에 드래그 해줍니다.
Math항목을 클릭하여 곱하기 연산을 할 수 있는 블록을 드래그하여 [call ImageSprite1. Move to x y]
블록 옆에 맞춰 줍니다.
X 부분(Width)에 Math블록에 있는 random fraction블록을 드래그 하여 곱하기 블록의 왼쪽 공간
안으로 넣어 줍니다.
곱하기 블록의 오른쪽에는 Math항목을 클릭하여 빼기 연산을 할 수 있는 블록을 드래그 해주고
빼기 블록의 왼쪽에는 GameCanvas.Width 블록을, 오른쪽에는 ImageSprite1.Width 블록을 끼워줍니다.
Y부분(Height)에도 같은 방식으로 블록을 끼워줍니다. 다른점은 Width가 아니고 Height가 되어야겠죠?
이와 같은 방법으로 ImageSprite2블록을 만들어 주세요.
GameScreen에선 3개의 Timer가 필요합니다.
1) ImageSprite1Clock - 0.4초마다 카멜레온 이미지 움직이기
2) ImageSprite2Clock - 0.7초마다 카멜레온 이미지 움직이기
3) GameClock- 1초 마다 게임시간(Time)을 1초씩 줄이고 남은 시간 표시하기
카멜레온 잡기의 동작 기능을 함수로 처리해서 ImageSprite1,2에서 간단하게 사용할 수 있도록
만들어 보겠습니다.
Procedures블록의 [to do]블록을 드래그 하여 빈 공간에 끌어다 놓고 함수 이름을 TouchAction으로
변경해 주세요.
이제 이 함수가 실행될 때 수행되는 기능들을 만들어 보겠습니다.
카멜레온 잡기의 주요과정을 정리해 보면 다음과 같습니다.
1) TouchAction이 실행되면 점수가 10점씩 올라가고
2) 점수판에 점수를 업데이트 합니다.
다음 페이지에서는 if문과 modulo연산을 이용해 보너스 시간 기능을 구현해 보겠습니다.