비행슈팅 게임 만들기(5) - 적군 총알 움직이기

총알을 움직여 보겠다.

총알을 움직이기 위해서는 타이머를 사용해야 한다. 

 

1. 타이머 설정

-setInterval() 이란 자바스크립트 내장함수를 사용한다.

- 인터벌 이란 영어단어의 뜻은 짧은 시간내에 어떤 행동을 반복한다는 의미이다.

- 즉, 이 함수의 기능도 100ms(0.01초) 마다 moveFire 란 함수를 실행한다.

//타이머로 총알 움직이기
var timerId = setInterval( moveFire , 100 );

 

- 우리는 moveFire() 란 함수를 만들고, 그 안에 총알의 좌표를 바꾸어 주면 된다.

- 그리고, 화면을 갱신하면 총알이 움직이는 로직이다.

- timerId 라는 변수는 setInterval() 함수의 반환값을 받는다. 이 반환값은 타이머의 아이디 이다.

  타이머 아이디가 필요한 이유는, 타이머 동작이 더 이상 필요치 않을때 타이머를 멈추기 위함이다.

  이는 이후 살펴보자.

 

2. 총알 좌표를 움직이는 함수를 구현하자

//적군 총알을 움직인다.
function moveFire() {
  mP.x1 += mP.mx1; 
  mP.y1 += mP.my1; 

  mP.x2 += mP.mx2; 
  mP.y2 += mP.my2; 

  mP.x3 += mP.mx3; 
  mP.y3 += mP.my3; 

  mP.x4 += mP.mx4; 
  mP.y4 += mP.my4; 

  drawScreen();
}

 

mP 객체 리터럴로 정의된 값을 가져와서 적군 총알의 위치를 바꾼다.

즉, 타이머가 반복적으로 불리우면 좌표점은 계속 변하게 된다. 총알이 움직이는 로직이다.

마지막으로는 drawScreen() 함수를 사용해서 화면을 그린다.

 

이렇게 구현된 내용을 브라우저에서 확인 해보면

위와 같이 총알이 움직이게 된다. 총알이 비행선을 지나가지만, 비행선은 폭발 하지 않는다.

비행선 폭발을 위해서는 충돌검사 라는 것이 필요하다.

다음 시간에서는 이 충돌 검사라는 것을 만들어 보자!