슈팅게임 JetBoy #1

[준비과정]

• http://www.helloworld.or.kr/ 에 들어가셔서 Run 버턴을 클릭합니다.
• HelloWorld 어플리케이션이 실행되면, 화면 밑에 JetBoy 밑에 있는 Run 버턴을 클릭합니다.
• 이제 모든 소스를 지우고 아래 내용을 하나씩 따라해보시기 바랍니다.

[소스 1]

Ship.Visible = true;
Ship.Left = 0;
Ship.Top  = 0;
Ship.Start();

[Run 버턴을 클릭합니다]

[설명]

Ship은 미리 제공되는 콤포넌트입니다.  다만, JetBoy 프로젝트 모듈에서만 제공되기 때문에 다른 프로젝트에서는 사용 하실 수가 없습니다.  앞으로 나오는 미사일과 혹성들도 마찬가지 입니다.  이들은 나중에 여러분들이 스스로 만들 수가 있습니다.  이것에 대해서는 다음에 공부하도록 하겠습니다.

1: 라인에서는 Ship 콤포넌트의 Visible 속성을 true로 변경합니다.  이로써 우주선이 화면에 보이기 시작합니다.  만약 Ship.Visible = false 로 변경한다면 화면에 나타나지 않게 됩니다.

2-3: 라인에서는 Ship 콤포넌트의 Left, Top 속성을 각각 0으로 변경합니다.  우주선은 화면의 왼쪽 맨 윗 쪽에 자리 잡게 됩니다.

4: 라인에서는 Ship 콤포넌트의 애니메이션 동작을 시작하게 됩니다.  우주선의 불꽃이 움직이면서 날아가는 느낌이 나도록 해줍니다.

[소스 2]

Ship.Visible = true;
Ship.Left = 0;
Ship.Top  = 0;
Ship.Start();

function loop() {
}

[Run 버턴을 클릭합니다]

[설명]

6-7: 라인에서보면 함수가 추가되었습니다.  함수 이름을 loop라고 하면 Stop 버턴이 클릭되기 전까지 계속 반복 됩니다.  하지만, 함수 안에 아무것도 없기 때문에 아직은 아무 변화도 나타나지 않습니다.

[소스 3]

Ship.Visible = true;
Ship.Left = 0;
Ship.Top  = 0;
Ship.Start();

function loop() {
  if (Keyboard.IsUp)   Ship.Top = Ship.Top - 1;
  if (Keyboard.IsDown) Ship.Top = Ship.Top + 1;
}

[Run 버턴을 클릭합니다]

[설명]

7-8: 라인에 보면 함수 안에 코드를 추가한 내용이 보입니다.  이 두 라인은 Stop 버턴이 클릭되기 전까지 계속 반복 됩니다.

7: 라인에서는 이전에 배운 if 문이 나타납니다.  괄호 안에 있는 내용이 진실이면 뒤에 오는 문장이 실행됩니다.  따라서, Keyboard.IsUp 이 진실(true)이라면, Ship.Top = Ship.Top - 1; 문장이 실행됩니다.  Ship 콤포넌트의 Top 속성으로 현재 Top이 가진 값에 1 만큼 빼고 난 결과를 대입(복사)합니다.  화면은 윗 쪽으로 갈 수록 숫자가 낮아지기 때문에 우주선이 위로 올라가게 됩니다.

Keyboard는 미리 제공되는 콤포넌트입니다.

8: 라인에서는 7: 라인과 반대로 Top 속성에 1을 계속 더하게 됩니다.  즉, 우주선이 아래로 내려오게 됩니다.

Run 버턴을 클릭하셨다면, 키보드에서 화살표 키 중 윗쪽 화살표와 아랫쪽 화살표를 눌러보시기 바랍니다.  우주선이 위 아래로 정신 없이 움직입니다.  심지어 화면 밖으로 사라지기도 합니다.

[소스 4]

Ship.Visible = true;
Ship.Left = 0;
Ship.Top  = 0;
Ship.Start();

function loop() {
  if (Keyboard.IsUp)   Ship.Top = Ship.Top - 1;
  if (Keyboard.IsDown) Ship.Top = Ship.Top + 1;

  if (Ship.Top < 0) Ship.Top = 0;
  if (Ship.Bottom > Screen.Bottom) Ship.Bottom = Screen.Bottom;
}

[Run 버턴을 클릭합니다]

[설명]

10: 라인에서는 괄호 안에 (Ship.Top < 0) 이라고 되어 있습니다.  즉, 우주선의 Top 속성이 0보다 더 작은 경우에 뒤에 오는 문장인 Ship.Top = 0; 이 실행 됩니다.  결국 0보다 작은 경우에는 0으로 다시 대입(복사)되기 때문에 우주선은 0보다 작은 값을 가질 수 없게 됩니다.  이제 윗 쪽으로 사라지는 일이 없어집니다.

11: 라인에서는 괄호 안에 (Ship.Bottom > Screen.Bottom) 라고 되어 있습니다.  즉, 우주선의 바닥이 화면의 바닥보다 더 밑에 있다면, 다음 문장인 Ship.Bottom = Screen.Bottom; 이 실행 됩니다.  결국 화면의 바닥보다 더 밑으로 내려 갈 수 없게 됩니다.

[소스 5]

Ship.Visible = true;
Ship.Left = 0;
Ship.Top  = 0;
Ship.Start();

var repeaterForShip = createRepeater( 5000 );

repeaterForShip.OnInterval = on_RepeatForShip;
    
function on_RepeatForShip() {
  if (Keyboard.IsUp)   Ship.Top = Ship.Top - 1;
  if (Keyboard.IsDown) Ship.Top = Ship.Top + 1;

  if (Ship.Top < 0) Ship.Top = 0;
  if (Ship.Bottom > Screen.Bottom) Ship.Bottom = Screen.Bottom;
}    

function loop() {

}

[Run 버턴을 클릭합니다]

[설명]

우주선이 너무 빠르게 움직이기 때문에 이번에는 우주선의 속도를 조절 할 수 있도록 코드를 변경하였습니다.

6: 라인에서는 createRepeater() 함수(function)를 통해서 Repeater 콤포넌트를 생성합니다.  Repeater 콤포넌트는 지정 된 시간마다 다른 함수를 반복해서 실행해주는 기능이 있습니다.  () 안에 있는 숫자가 반복되는 시간을 나타냅니다.  5000은 "5/1000" 초를 의미합니다.  0.005 초 마다 한 번씩 실행 된다는 의미입니다.  숫자를 변경하면 우주선이 움직이는 속도가 달라집니다.  생생 된 콤포넌트는 = (대입문)을 통해서 repeaterForShip 변수(보관함)에 저장 됩니다. 

8: 라인에서는 repeaterForShip 콤포넌트의 OnInterval 속성을 on_RepeatForShip로 지정합니다.  이제 정해진 시간 마다 on_RepeatForShip 함수를 찾아서 실행합니다.  on_RepeatForShip 함수는 10-16: 라인에 있습니다.

10-16: 라인에서는 on_RepeatForShip 함수가 정의되어 있습니다.  이전에 loop 함수에 있던 코드가 그대로 옮겨진 것을 보실 수가 있습니다.  동작은 이전과 동일 합니다.

[마무리]

얼마 되지 않은 코드이지만, 코드를 변경해 가면서 이런 저런 실험을 해보시기 바랍니다.