비행슈팅 게임 만들기(2) - 아군 비행기 그리기

지난 시간 우주배경까지 만드는 코드를 완성했다.

이번 시간은 아군 비행체를 그려본다.

 

1. 비행기 그리기

비행기를 그리기 위해서 Image 객체를 사용하여 이미지 리소스를 로딩한다.

//아군 비행기 로딩하기
var player = new Image();
player.src = "img/1942.png";

 

2. 화면에 그리기

로딩한 이미지를 화면에 그려야 한다. 지난시간 만든 사용자 함수인 drawScreen() 내에서 컨텍스트를 사용해서 비행기 이미지를 그린다.

   //컨텍스트로 아군 이미지 그리기
        context.drawImage(player, pX, pY , 100, 80);

 

함수의 인자값으로 사용된 pX, pY 는 비행기가 그려질 좌표점 이다.

우선 화면 중앙에 비행기를 그리기 위해서, 해당 변수의 초기값을 설정한다.

//비행기를 움직이기 위한 좌표점
var pX = 400 , pY=400 ;

 

브라우저에서 확인을 해보면 화면 중앙에 비행기 이미지가 나오는것을 볼 수 있다.

 

이젠 키보드로 비행기를 움직여 보자.

다음 포스팅에서...