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

비행슈팅 게임 만들기 기본 마지막 4편 이다.

오늘은 키보드 상하좌우 키를 이용해서 비행기를 움직여 본다.

 

1. 키보드로 비행기 움직이기

 - 키보드 이벤트를 받기 위해서 이벤트 리스너를 등록한다.

  키보드가 눌려졌을때 즉각 반응하기 위해서 keydown 이벤트만 캐치한다.

 - 이벤트 리스너에 등록된 keydown 콜백 함수를 정의한다.

window.addEventListener("load",drawScreen);
//키보드 조작하기
window.addEventListener("keydown",keydown);

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

 var x = 300, y = 200;

function keydown(e) {
    let value = e.keyCode;
    console.log("", value);

    //업키(화살표)
    if(e.keyCode == 38) {
        y -= 5;
        drawScreen();
    }
    //업키(화살표)
    if(e.keyCode == 40) {
        y += 5;
        drawScreen();
    }
}

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);  

}

 

keydown() 함수 에서는 인자로 받은 이벤트 객체 e 를 사용해서 keyCode 값을 받아온다.

해당 키 코드값을 console.log 로 찍어보면 방향키의 키보드 키 값을 쉽게 알수 있다.

키보드 값이 출력되고 있다.

keyCode 는 키보드의 키 값을 의미한다.  x,y 좌표값에 해당 키값에 따라 좌표점을 5 씩 가감 해준다.

그리고, 다시 drawScreen() 함수를 호출하여 화면을 다시 그려준다.

function keydown(e) {
    let value = e.keyCode;
    console.log("", value);

    //위(화살표)
    if(e.keyCode == 38) {
        y -= 5;
        drawScreen();
    }
    //아래(화살표)
    if(e.keyCode == 40) {
        y += 5;
        drawScreen();
    }
    //좌(화살표)
       if(e.keyCode == 37) {
        x -= 5;
        drawScreen();
    }
    //우(화살표)
    if(e.keyCode == 39) {
        x += 5;
        drawScreen();
    }
}

 

즉, 비행기가 키보드 방향키에 따라 상하좌우 로 이동함을 볼 수 있다.

위 결과 화면에서는

캔버스의 전체 크기와 컨텍스트로 그려진 검정 바탕 네모 영역이 구분 되어있다.

키 값에 따라 비행기가 좌측 하단으로 내려 간 것을 볼 수 있다.

 

4편의 포스팅을 통해서 우리는

1. 자바스크립트 코드로 캔버스 와 컨텍스트를 설정 하는 방법

2. 이미지를 로드 하는 방법

3. 키보드 이벤트를 적용하는 방법

 

을 배우며, 정리하게 되었다.

중급편에서는 아군기의 총알이 발사되고, 적군이 나오는 비행슈팅 게임의 틀을 완성해본다.