비행슈팅 게임 만들기 기본 3편

 

비행슈팅 게임 만들기 기본 2편

 

2편에서는 배경화면을 만들었다.

이번 시간은 비행기를 화면에 그려본다.

 

1. 비행기 그리기

window.addEventListener("load",drawScreen);

var img = new Image();
img.src = "1942.png";

var x = 300, y = 200;

function drawScreen(){
    //(도화지)캔버스 얻어오기 
   var canvas =  document.getElementById("canvas");
    //(펜)컨텍스트 얻기
   var context = canvas.getContext("2d");
   
   // 펜 색상 입히기
   context.fillStyle = "#1100000";
   // 네모 상자 그리기
   context.fillRect(0, 0, 800, 600);
   // 이미지 그리기
   context.drawImage(img, x, y ,100,80);  
}

 

비행기를 그리기 위해서 Image 클래스를 사용한다.

자바스크립트 이미지 로드 방법은 하기 포스팅을 참고바란다.

자바스크립트 캔버스에 이미지 띄우기

 

x, y 변수를 생성한 뒤 비행기 가 그려질 초기 좌표값으로 쓰일 위치를 저장한다.

drawScreen() 함수에서는 context.drawImage() 함수를 사용해서 비행기 이미지를 그린다.

결과 화면은 아래와 같다.

 

비행기가 화면에 그려졌다.

하지만, 비행기가 움직이지는 않는다.  비행기를 키 이벤트에 따라 움직이게 하기 위해서 다음편에서는

추가 코드를 작성한다