슈팅게임 JetBoy #3

[준비과정]

• http://ryulib.tistory.com/329 를 먼저 보시고 오세요

[소스 1]

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;
}    

var repeaterForMissile = createRepeater( 2000 );

repeaterForMissile.OnInterval = on_RepeatForMissile;
    
function on_RepeatForMissile() {
  if (Missile.Visible) {
    Missile.Left = Missile.Left + 1;
    
    if (Missile.IsOutOfScreen) Missile.Visible = false;
    
    return;
  }

  if (Keyboard.IsFire && Ship.Visible) {
    Missile.Left = Ship.Right;
    Missile.CenterY  = Ship.CenterY;
    Missile.Visible = true;

    soundFire();
  }
}

Asteroids.Start();

var repeaterForAsteroids = createRepeater( 4000 );

repeaterForAsteroids.OnInterval = on_RepeatForAsteroids;
    
function on_RepeatForAsteroids() {
  Asteroids.Move( 1 );
}

function loop() {

}

[Run 버턴을 클릭합니다]

[설명]

40-48: 라인이 추가되었습니다.  방식은 동일하기 때문에 특징적인 부분만 설명을 하도록 하겠습니다.

40: 라인에서는 혹성들을 관리하는 콤포넌트인 Asteroids의 애니메이션 동작을 시작하도록 합니다.  화면에 혹성이 나타나면 빙글 빙글 돌게 됩니다.

47: 라인에서는 Repeater에 지정 된 시간마다 한 칸 씩 화면에 보이는 혹성들을 앞으로 이동하게 합니다.

[소스 2]

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;
}    

var repeaterForMissile = createRepeater( 2000 );

repeaterForMissile.OnInterval = on_RepeatForMissile;
    
function on_RepeatForMissile() {
  if (Missile.Visible) {
    Missile.Left = Missile.Left + 1;
    
    if (Missile.IsOutOfScreen) Missile.Visible = false;
    
    return;
  }

  if (Keyboard.IsFire && Ship.Visible) {
    Missile.Left = Ship.Right;
    Missile.CenterY  = Ship.CenterY;
    Missile.Visible = true;

    soundFire();
  }
}

Asteroids.Start();

var repeaterForAsteroids = createRepeater( 4000 );

repeaterForAsteroids.OnInterval = on_RepeatForAsteroids;
    
function on_RepeatForAsteroids() {
  Asteroids.Move( 1 );

  if (Asteroids.CheckCollision(Missile)) {
    Missile.Visible = false;
    soundBoom();
  }

  if (Asteroids.CheckCollision(Ship)) {
    Ship.Visible = false;
    soundBoom();
  }
}

function loop() {

}

[Run 버턴을 클릭합니다]

[설명]

새로 추가 된 코드 위주로 설명 드리겠습니다.

49: 라인에 보시면 if 문의 괄호 안에 Asteroids.CheckCollision(Missile) 라고 되어 있습니다.  혹성 중에 하나라도 미사일과 부디치면 괄호 안이 true가 됩니다.  그러면 50-51: 라인이 실행 됩니다.  또한, 충동이 있다면 혹성이 그 자리에 서서 폭발하도록 콤포넌트 내부에서 자동으로 처리해 줍니다.

50: 라인에서는 미사일의 Visible 속성을 false로 변경합니다.  이제 미사일은 화면에 보이지 않게 됩니다.

51: 라인에서는 폭발음을 출력합니다.  soundBoom 함수도 JetBoy 프로젝트에서만 제공됩니다.

54: 라인에서는 우주선과 혹성 중에 하나가 부디치면 같은 동작을 하게 됩니다.  이번에는 우주선을 보이지 않도록 하고, 폭발음을 출력합니다.

우주선이 보이지 않으면 게임은 종료되며, 다시 시작하실려면 Run 버텅을 다시 클릭하시면 됩니다.

[소스 3]

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;
}    

var repeaterForMissile = createRepeater( 2000 );

repeaterForMissile.OnInterval = on_RepeatForMissile;
    
function on_RepeatForMissile() {
  if (Missile.Visible) {
    Missile.Left = Missile.Left + 1;
    
    if (Missile.IsOutOfScreen) Missile.Visible = false;
    
    return;
  }

  if (Keyboard.IsFire && Ship.Visible) {
    Missile.Left = Ship.Right;
    Missile.CenterY  = Ship.CenterY;
    Missile.Visible = true;

    soundFire();
  }
}

Asteroids.Start();

var repeaterForAsteroids = createRepeater( 4000 );

repeaterForAsteroids.OnInterval = on_RepeatForAsteroids;
    
function on_RepeatForAsteroids() {
  Asteroids.Move( 1 );

  if (Asteroids.CheckCollision(Missile)) {
    Missile.Visible = false;
    soundBoom();
  }

  if (Asteroids.CheckCollision(Ship)) {
    Ship.Visible = false;
    soundBoom();
  }
}

function shutdown() {
  Asteroids.Stop();
}

function loop() {

}

[Run 버턴을 클릭합니다]

[설명]

76-78: 라인이 추가 되었습니다.

76: 라인에 보시면 함수의 이름이 shutdown으로 되어 있습니다.  이 함수는 Stop 버턴이 눌리거나 프로그램이 종료 되었을 때 실행 됩니다.  Run 버턴을 클릭하셔도 일단 실행 중에 있었다면, shutdown 함수가 실행 된 이후에 프로그램이 실행 됩니다.

77: 라인은 프로그램이 종료하기 전에 혹성들의 애니메이션 동작을 멈추고, 혹성을 화면에서 사라지도록 합니다.

[마무리]

이로써 JetBoy 게임을 함께 만들어 보았습니다.  프로그래밍 자체가 익숙하지 않으신 분들은 외워서라도 지금까지의 코드를 스스로 작성 할 수 있을 때까지 반복하시길 권합니다.  기본적인 것들이 몸에 배어서 자연스럽게 코드를 작성 할 수 있게되면 앞으로 공부가 보다 쉽고 효율적으로 진행 될 수 있습니다.