비행슈팅 게임 만들기(4) - 적군 총알 그리기

적군 총알(미사일)을 그리고 화면 중앙으로 움직여본다.

화면 중앙에는 아군 비행체가 있다. 비행체는 지난시간 까지 구현한 키보드로 적군 총알을 피할 수 있다.

1. 적군 총알 불러오기

//미사일 이미지 로딩하기
var missile = new Image();
missile.src = "img/missile.png";

Image 객체를 사용해서 총알 이미지를 불러온다.

 

2. 총알 초기 좌표점 과 이동 값 설정하기

//여러개의 미사일 좌표점을 하나로 묶어서 관리.
//미사일 좌표 클래스 정의함.
var mP = {
  x1 : 10 ,   y1 : 10 , mx1 : 10 , my1 : 10,
  x2 : 850 ,  y2 : 10 , mx2 : -10 , my2 : 10,
  x3 : 10 ,   y3 : 820 , mx3 : 10 , my3 : -10,
  x4 : 850 ,  y4 : 820 , mx4 : -10 , my4 : -10,
}

- 객체 리터럴 방식으로 4개의 좌표점에 대한 초기 위치와 이동시의 x,y측 좌표값 수치값을 기재했다.

- x,y: 총알 초기 위치.

- mx,my : 한번에 이동하는 거리.

 

3. 화면에 총알 그리기

- drawScreen 함수에서 컨텍스트를 사용해서 미사일을 화면에 그린다.

//화면 그리기
function drawScreen() {
  //웹 문서에서 캔버스 로딩하기
  var canvas = document.getElementById("canvas");
  //캔버스를 이용해서 컨텍스트 만들기
  var context = canvas.getContext("2d");
  //컨텍스트로 배경 이미지 그리기
  context.drawImage(backImg, 0, 0);

   //컨텍스트 로 적군 미사일 이미지 그리기
    context.drawImage(missile, mP.x1, mP.y1);
    context.drawImage(missile, mP.x2, mP.y2);
    context.drawImage(missile, mP.x3, mP.y3);
    context.drawImage(missile, mP.x4, mP.y4);
   //컨텍스트로 아군 이미지 그리기
    context.drawImage(player, pX, pY , 100, 80);
}

 

브라우저에서 확인한 결과는 하기와 같다.

다음 시간에는 

타이머를 사용해서 총알을 화면 중앙으로 이동시킨다.