Game Tutorial 2

목표

• player 객체를 만들고 키입력을 받아 움직이게 합니다.
• TMI.keyboard(TM.InputManager_Keyboard의 인스턴스)로 키보드 입력을 확인하는 법을 익힙니다.
• 키보드의 key code를 찾는 법을 익힙니다.
• window.setInterval로 함수를 반복실행하는 법을 익힙니다.
  

코드

**소스 코드: game-tutorial2.js

이전 튜토리얼에서 변경이 없는 부분은 설명을 생략합니다.

var KEYSET = {
  LEFT: 37,
  UP: 38,
  RIGHT: 39,
  DOWN: 40,
};

키입력 확인에 사용될  키보드의 상하좌우 방향키의 key code를 모아서 KEYSET에 넣었습니다.

아래의 방법으로 키보드의 key code를 구할 수 있습니다.

1. Text Game Maker JS의 Starter Program을 실행합니다.(index.html을 더블클릭합니다)
2. 브라우저 콘솔을 엽니다.
3. 스크린을 클릭합니다.
4. 키보드의 키를 누릅니다.
5. 해당 키의 key code가 브라우저 콘솔에 표시됩니다.

**TM.InputManager의 인스턴스를 생성할 때 두번째 인자로 true를 넣어주면 이렇게 콘솔에 key code가 표시됩니다. 현재 TM.InputManager에 두번째 인자로 debugSetting.devMode가 들어가므로 key code가 표시됩니다.

var player = {
  x: 22,
  y: 10,
  text: "[-<>-]",
};

플레이어 좌표와 텍스트를 가진 오브젝트를 만들어 줍니다. 플레이어의 기본 위치는 (22,10)입니다.

function calculate(){
  // check key and move player
  if(TMI.keyboard.checkKey(KEYSET.LEFT) && player.x>2) player.x--;
  if(TMI.keyboard.checkKey(KEYSET.UP) && player.y>1) player.y--;
  if(TMI.keyboard.checkKey(KEYSET.RIGHT) && player.x+player.text.length<frame.width-2) player.x++;
  if(TMI.keyboard.checkKey(KEYSET.DOWN) && player.y<frame.height-2) player.y++;
}

calculate함수는 데이터를 변경하는 함수입니다. 키입력을 체크하고 키입력이 있는 경우 player의 x,y좌표를 변경합니다.
TMI.keyboard.checkKey함수를 사용해서 루프중에 키입력이 있는지 확인할 수 있습니다.(TMI.keyboard에는 TM.InputManager_keyboard의 인스턴스가 들어있습니다.)

function draw(){
  //clearScreen
  TMS.clearScreen();

  //draw score
  TMS.insertTextAt(frame.x,frame.y-1,"Score: ");
  TMS.insertText(frame.score);

  //draw frame
  for(var i=0; i<frame.height; i++){
    for(var j=0; j<frame.width; j++){
      if((i===0 || i==frame.height-1 || j===0 || j==frame.width-2)&&(j%2 === 0)){
        TMS.insertTextAt(frame.x+j,frame.y+i,"■");
      }
    }
  }

  //draw player
  TMS.insertTextAt(frame.x+player.x,frame.y+player.y,player.text);
}

//draw player 부분에 player를 그리는 코드가 추가되었습니다.

var mainInterval = window.setInterval(function(){
  calculate();
  draw();
},30);

window.setInterval 함수를 사용해서 calculate함수와 draw함수를 반복시킵니다. 이 window.setInterval 함수는 Text Game Maker JS의 함수가 아니라 자바스크립트의 window오브젝트에서 기본적으로 제공되는 함수입니다. window.setInterval(반복할_함수, 반복간격시간)의 형식이며 반복간격시간의 단위는 millisecond입니다. 즉 0.03초마다 키입력을 체크하고 화면을 업데이트하게 됩니다.

예제의 실행

스크린을 한번 클릭한 후에 키보드 방향키를 눌러주면 플레이어가 움직입니다. 또한 키보드에 아무 키나 누르면 브라우저 콘솔에 해당 키의 key code가 표시되는 것을 볼 수 있습니다.

다음 강의로 넘어가기 전에 스크린의 플레이어의 이동 키를 a,w,s,d로 바꾸어 보는 연습을 해봅시다.