html5 API 입문 (5) 'Canvas 키보드 이벤트'

html5 API 'Canvas 키보드 이벤트'

이번 포스팅에서는 캔버스를 활용해서 키보드 움직임을 구현해보자.

 

1 『 캔버스 변수 작성 』

---

//코드

 var canvas = document.getElementById('myCanvas');
 var ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;            ------>1)
canvas.height = window.innerHeight;

 //변수 설정 

 var keys = { };                                      ------->2)
 var bullets = [ ];

 var Box = function( options ) {                -------->3)

     this.x = options.x;
     this.y = options.y;

     this.width = options.width;
     this.height = options.height;

     this.speed = options.speed;
     this.color = options.color;

     this.direction = options.direction;
 }

---

1) 캔버스 넓이와 높이를 웹브라우저 전체로 설정한다.

 2) 사용자 키보드 키를 넣을 keys 객체를 선언한다. bullets 배열을 만들어서 총알 발사버튼이 호출될 때마다 배열에 총알을 만들어서 넣어준다.

 

3) Box 클래스를 생성한다. (자바스크립트에서는 객체 인스턴스)

 

2 『 이벤트 생성하기 』

---

//이벤트 생성 

 window.addEventListener( 'keydown', function(e) {

      keys[e.keyCode] = true;
      e.preventDefault( );

 });

 window.addEventListener('keyup',function(e){

       delete keys[e.keyCode];

 });

---

-> keydown은 키보드를 눌렀을 때 발생하는 이벤트, keyup은 키에서 뗐을 때 발생하는 이벤트이다.

 

-> keys 객체의 속성으로 e.keyCode값(키보드의 각 키에 해당하는 값)을 지정하고, true를 담는다.

 

-> delete는 삭제기능을 갖춘 내장함수다. 

3 『 input함수 생성 』

-> input함수를 생성하기 전에 먼저 player객체를 생성해서 Box 클래스를 상속받는다. 

---

//코드 

//player 인스턴스 객체 생성

 var player = new Box( {

        x : 10,
        y : 10,
        width : 30,
        height : 30,
        color : 'tomato',
        speed : 5,
        direction : 'right'
 });

function input( player ) {

      if(37 in keys) {      

            player.x -= player.speed;
            player.direction = 'left';
      }

      if(39 in keys) {

          player.x += player.speed;
          player.direction ='right';
      }

      if(38 in keys) {

          player.y -= player.speed;
          player.direction = 'up'
     }

     if(40 in keys) { 

          player.y += player.speed;
          player.direction ='down'
     }

     if(32 in keys) {

          bullets[bullets.length] = new Box({       

                   x : player.x + player.width/2,
                   y : player.y + player.height/2,
                   width : 4,
                   height : 4,
                   color : 'blue',
                   speed : 10,
                   direction : player.direction
              })
        }
 }

---

-> 37 : 왼쪽 방향키, 39 : 오른쪽 방향키, 40 : 위쪽 방향키 , 38: 아래쪽 방향키

-> '변수 in 객체' 를 활용한 37 in keys 구문으로 사용자 input값을 검사한다.

-> 키보드 이벤트를 생성할 때 keys[e.keyCode] = true 를 설정했기 때문에 키보드 방향키 코드가 들어오면 해당 keyCode이름으로 객체 속성이 생성되고, true값이 저장된다.

 

-> 32번 키가 입력되면, 총알을 생성해야 한다. bullets[bullets.length]라고 입력하면 총알(bullets)배열이 하나씩 쌓이는 순서대로 인덱스값이 설정된다. update되는 상황에서 유용한 알고리즘이니만큼 숙지해두자.

4 『 boundary함수 생성 』 

벽돌깨기 게임에서 사용했던 로직을 다시 한번 사용하자. box의 x값이 canvas 너비보다 작으면 0이 되고, canvas너비를 넘어서면 canvas너비가 되도록 설정한다.(높이도 같다)

 

---

//코드 

function boudary (box) {

      if(box.x <= 0 ){     

              box.x = 0;
      }

      if(box.x > canvas.width - box.width) {

             box.x = canvas.width - box.width;
      }

      if(box.y <= 0) {

            box.y = 0;
      }

      if(box.y > canvas.height - box.height) {

           box.y = canvas.height -box.height;
     }
 }

---

5 『 DrawBox, update, draw, loop함수 생성 』

---

//DrawBox코드 

function drawBox(box) {

      ctx.fillStyle ='red';
      ctx.fillRect(box.x,box.y,box.width,box.height);
 }

---

-> drawBox를 draw함수에서 떼어낸다. 그 이유는, 게임 속의 개체수가 늘어나면, 계속 그려줘야 하는데 draw함수 내에서 반복이 되기 때문이다.

 

---

//update코드 

function update( ) {

     input(player);
     bullets.forEach(function(b){
  

         if(b.direction == 'left') {
               b.x -= b.speed;
         }

         if(b.direction == 'right') {
               b.x += b.speed;
         }

         if(b.direction == 'up') {
               b.y -= b.speed;
         }

        if(b.direction == 'down') {
               b.y += b.speed;
         }
    });
 }

---

-> update와 draw 함수에 들어올 코드가 가끔 헷갈릴 때가 있다. 간단하게 생각해보자. update는 말 그대로 사용자의 input값 혹은 게임 변화에 따라서 변하는 변수들이다. 여기에서는 bullets(총알)배열값은 방향에 맞게 프레임마다 움직여야 한다.

 

사용자의 인풋값은 변하기 때문에 update에 넣고, 총알 배열의 총알 하나하나도 변할 수 있다.

 

forEach구문을 사용해서 'b'라는 변수에 각 배열값을 넣고, if구문으로 방향에 맞게끔 speed를 가산하거나 감산하는 형식으로 코드를 작성한다.

 

---

//draw코드 

function draw( ) {

      ctx.clearRect(0,0,canvas.width,canvas.height);

      boudary(player);
      drawBox(player);
      

      bullets.forEach(function(b){

            drawBox(b)
      });
 }

---

-> draw함수에는 변하지 않는 변수를 할당한다. player는 게임이 끝나지 않는 한 시작부터 그려져 있어야 한다. 총알도 update함수에 의해 움직일 뿐 일단 생성은 되어 있어야 한다.

---

//loop코드 

 function loop( ) {

      update( );
      draw( );
      requestAnimationFrame(loop);

    }

loop( );

---

-> loop 기본 구문을 작성한다.