비행슈팅 게임 만들기(3) - 키보드로 아군 비행선 움직이기

이번 시간은 키보드로 비행선을 움직여 본다

1. 키보드 이벤트 리스너를 등록한다.

window.addEventListener("keydown", onkeydown);

- keydown 이벤트가 발생했을때 onkeydown 함수를 부른다.

 

2. onkeydown() 함수에서 키동작 작업하기

- onkeydown 함수에서는 자동으로 이벤트 클래스 e 를 받는다.

- e.keycode 를 통해서 키 이벤트 값을 알수 있다.

- console.log() 를 통해서 사전에 미리 키코드 값을 찍어보면서 코드를 작성하면 편하다.

//키보드가 눌렸을때 실행되는 콜백함수 (이벤트 객체를 인자로 받는다)
function onkeydown(e){
  //키 값을 찍어본다.
  console.log(e.keyCode); 
  
  //상키 입력시
  if(e.keyCode == 38){
    //좌표점을 이동후
    pY -= 10;
    //화면을 다시 그린다.
    drawScreen()

  }else if(e.keyCode == 40){ //하키 입력시    
       //좌표점을 이동후
       pY += 10;
       //화면을 다시 그린다.
       drawScreen()   

  }else if(e.keyCode == 37){//왼쪽
      //좌표점을 이동후
      pX -= 10;
      //화면을 다시 그린다.
      drawScreen()   

  }else if(e.keyCode == 39){//오른쪽
      //좌표점을 이동후
      pX += 10;
      //화면을 다시 그린다.
      drawScreen()   
  }  
}

- 방향키 4방향에 대한 동작을 구현한다.

- pX,pY 라는 비행선의 좌표값을 변경하면 비행선이 움직이게 되는 구조이다.

- 좌표점이 변경되었으면 다음으로는 화면을 갱신하기 위해서 drawScreen() 함수를 불러준다.

 

해당 코드를 브라우저에서 실행해보면 위와 같이 4방향에 따라 비행체가 움직인다.

현재까지의 전체코드를 살펴보자. 

window.addEventListener("load",drawScreen);
window.addEventListener("keydown", onkeydown);

//배경 이미지 로딩하기
var backImg = new Image();
backImg.src = "img/back.jpg";

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

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

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

//키보드가 눌렸을때 실행되는 콜백함수 (이벤트 객체를 인자로 받는다)
function onkeydown(e){
  //키 값을 찍어본다.
  console.log(e.keyCode);
 
  //상키 입력시
  if(e.keyCode == 38){
    //좌표점을 이동후
    pY -= 10;
    //화면을 다시 그린다.
    drawScreen()

  }else if(e.keyCode == 40){ //하키 입력시    
       //좌표점을 이동후
       pY += 10;
       //화면을 다시 그린다.
       drawScreen()   

  }else if(e.keyCode == 37){//왼쪽
      //좌표점을 이동후
      pX -= 10;
      //화면을 다시 그린다.
      drawScreen()   

  }else if(e.keyCode == 39){//오른쪽
      //좌표점을 이동후
      pX += 10;
      //화면을 다시 그린다.
      drawScreen()   
  }  
}

 

다음 시간은 적 미사일을 그리고 움직여본다.