비행슈팅 게임 만들기(6) - 충돌검사 만들기

지난 시간 총알이 움직이는 것 까지 구현했다.

총알이 아군 비행기에 부딪혔을때 게임이 종료되도록 구현해본다.

총알과 비행선이 충돌 여부를 검사하는 것을 #충돌검사 라고 부른다.

1. 충돌검사 로직

충돌검사는 비행선 네모영역에 총알이 들어오면 충돌이 되었다고 판단하다.

게임엔진 처럼, 세부영역까지 모두 체크하기에는 어려움이 있다. 이런면에서는 게임엔진을 사용하는 것이 훨씬 편하다는 것을 알수 있다. 물론 물리엔진을 구현하는 것도 포함된다. 여기서는 우선 단순하게 네모영역의 충돌로직을 만들어본다.

사실 일부 캐쥬얼 게임의 경우는 단순히 네모 영역만으로도 게임성을 커버할 수  있다.

//아군 비행선 사각형 기준으로 충돌검사를 체크한다.
function collision(mx, my){
    if(pX < mx  && pX+70 > mx && pY < my && pY+70 > my){
    return true;
  }else{
    return false;
  }
}

 

collision 이라는 함수를 만들었다. 인자로는 총알의 현재 위치값을 넘겨받는다.

collision() 함수는 지난 시간 만들었던, moveFire() 라는 총알의 좌표점을 변경해주었던 함수내에서 호출할 예정이다.

다시 collision() 함수를 살펴보자.

 

pX, pY 는 현재 비행선의 좌표점이다. 

자바스크립트에서 이미지의 x,y 좌표는 왼쪽 상단 모서리가 된다. 

그렇기에 하기 코드는

X축에서는 왼쪽 상단 모서리 -> 오른쪽 끝까지,

Y축은 왼쪽 상단 모서리 -> 이미지 크기 하단 까지가 된다.

 if(pX < mx  && pX+70 > mx && pY < my && pY+70 > my)

 

다만 네모영역 이다보니, 비행선이 그려져 있지 않는 부분을 감안하여, pX+70 , pY+70 으로 안쪽까지 충돌영역을 보정했다. (실제 비행선의 크기는 가로100, 세로80 이기에 각각 70영역으로 세팅하면 비행선이 그려진 실제 그림까지 맞아떨어진다.)

 

즉, 해당 영역안에 총알이 들어왔다면, true 

아니면 false 이다. 이제 우리는 드디어 충돌검사 로직을 완성했다.

다음으로는 충돌검사 루틴을 moveFire() 함수에서 호출해보자.

 

2. 충돌검사 루틴 호출하기

- 총알이 움직일때 마다 충돌검사 루틴을 실행하고, 반환값이 true 이면 gameOver() 함수를 실행한다.

- 총 4개의 총알에 모두 충돌검사 루틴을 넣었고, 각 총알의 현재 좌표점을 충돌검사 함수 인자로 넘겼다.

 

/적군 총알을 움직인다.
function moveFire() {
  mP.x1 += mP.mx1; 
  mP.y1 += mP.my1; 
  if(collision(mP.x1 , mP.y1)){  
    //게임 스테이트를 게임오버로 변경
    gameOver();
  }
  mP.x2 += mP.mx2; 
  mP.y2 += mP.my2; 
  if(collision(mP.x2 , mP.y2)){  
    //게임 스테이트를 게임오버로 변경
    gameOver();
  }
  mP.x3 += mP.mx3; 
  mP.y3 += mP.my3; 
  if(collision(mP.x3 , mP.y3)){  
    //게임 스테이트를 게임오버로 변경
    gameOver();
  }
  mP.x4 += mP.mx4; 
  mP.y4 += mP.my4; 
  if(collision(mP.x4 , mP.y4)){  
    //게임 스테이트를 게임오버로 변경
    gameOver();
  }
  drawScreen();
}

 

3. gameOver() 함수 구현하기

 - 충돌이 되었을때 실제 그 역할을 수행하는 함수이다.

- gameOver() 함수안에서 비행선이 터지는 것을 구현할 수 도 있다. 하지만 여기서는 바로 게임오버 텍스트가 나오도록 한다.