Game Tutorial OOP 4

목표

  • TM.ILoopObject 클라스를 상속하여 Player 클라스를 생성합니다.
  • Program_Main 클라스를 수정하여 키입력을 받아 player를 이동할 수 있게 합니다.
  • TMD(TM.DebugManager의 인스턴스)를 사용하여 디버깅 데이터를 출력합니다.

코드

**소스 코드: game-tutorial-oop4.js

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

//=============================
// Player
//=============================
// Object Type: TM.ILoopObject
var Player = function(data){
  this.speed = 30;
  this.data = {
    x: undefined,
    y: undefined,
    refMainObjects: undefined,
    pX: null,
    pY: null,
    dX: 0,
    dY: 0,
    text: "[-<>-]",
  };
  TM.ILoopObject.call(this, this.speed, data);
};
Player.prototype = Object.create(TM.ILoopObject.prototype);
Player.prototype.constructor = Player;

TM.ILoopObject를 상속하여 Player 클라스를 만들었습니다. 

// TM.ILoopObject functions implementation
Player.prototype._init = function(){};
Player.prototype._inactivate = function(){
  var frame = this.data.refMainObjects.frame;
  TMS.deleteTextAt(frame.data.x+this.data.x,frame.data.y+this.data.y,this.data.text);
};
Player.prototype._calculate = function(){
  this.move();
};
Player.prototype._draw = function(){
  var frame = this.data.refMainObjects.frame;
  if(this.data.pX && this.data.pY){
    TMS.deleteTextAt(frame.data.x+this.data.pX,frame.data.y+this.data.pY,this.data.text);
  }
  TMS.insertTextAt(frame.data.x+this.data.x,frame.data.y+this.data.y,this.data.text);
};

TM.ILoopObject의 init, inactivate, calculate, draw를 직접 상속받지 말고, _init, _inactivate, _calculate, _draw, _timeline, _getInput에 코드를 넣어 줍니다. 코드가 없더라도 빈함수를 넣어 해당 함수들이 존재함을 표시하였습니다.

Player의 비활성화(inactivate)시에는 인스턴스를 지웁니다.

Player의 반복함수중 calculate에는 인스턴스를 이동시키는 move 함수를 호출합니다.

Player의 반복함수중 draw에는 이전 좌표(pX,pY)의 player를 지우고 현재좌표의 player를 그리는 코드가 들어있습니다.

// Player functions
Player.prototype.move = function(){
  this.data.pX = this.data.x;
  this.data.pY = this.data.y;
  this.data.x += this.data.dX;
  this.data.y += this.data.dY;
  this.data.dX = 0;
  this.data.dY = 0;
};
Player.prototype.updateDirection = function(dX,dY){
  this.data.dX += dX;
  this.data.dY += dY;
};

move는 인스턴스를 이동시키는 함수입니다.
updateDirection은 player의 dX, dY를 수정하는 함수입니다.

// Static properties
Program_Main.KEYSET = {
  LEFT: 37,
  UP: 38,
  RIGHT: 39,
  DOWN: 40,
};

키입력 코드의 가독력을 높히기 위해 key code를 Program 클라스의 static 항목으로 추가합니다. static 항목은 클라스 단위의 값, 함수를 지정하기 위해 사용됩니다.

var Program_Main = function(){
  this.speed = 30;
  this.data = {};
  this.objects = {
    frame: null,
    enemy: null,
    player: null,
  };
  TM.IProgram.call(this, this.speed);
};

Program_Main의 this.objects에 player가 추가되었습니다.

// TM.IProgram functions implementation
Program_Main.prototype._init = function(){
  TMS.cursor.hide();
  this.objects.frame = new Frame({x:5,y:2});
  this.objects.enemy = new Enemy({refMainObjects:this.objects});
  this.objects.player = new Player({x:22,y:10,refMainObjects:this.objects});
};
Program_Main.prototype._inactivate = function(){};
Program_Main.prototype._calculate = function(){
  var player = this.objects.player;
  TMD.print("Player",{x:player.data.x,y:player.data.y});
};
Program_Main.prototype._draw = function(){};
Program_Main.prototype._timeline = function(loopCount){};
Program_Main.prototype._getInput = function(){
  var player = this.objects.player;
  var frame = this.objects.frame;
  if(TMI.keyboard.checkKey(Program_Main.KEYSET.LEFT) && player.data.x>2){
    player.updateDirection(-1,0);
  }
  if(TMI.keyboard.checkKey(Program_Main.KEYSET.UP) && player.data.y>1){
    player.updateDirection(0,-1);
  }
  if(TMI.keyboard.checkKey(Program_Main.KEYSET.RIGHT) && player.data.x+player.data.text.length<frame.data.width-2){
    player.updateDirection(1,0);
  }
  if(TMI.keyboard.checkKey(Program_Main.KEYSET.DOWN) && player.data.y<frame.data.height-2){
    player.updateDirection(0,1);
  }
};

_init에 player를 생성하는 코드가 추가되었습니다.
_calculate에 디버깅 데이터를 출력하는 코드가 추가되었습니다.
_getInput에 TMI.keyboard.checkKey으로 키입력을 확인하고 player.updateDirection을 호출하여 player의 이동 방향을 설정하는 코드가 추가되었습니다.

예제의 실행

스크린을 한번 클릭한 후에 키보드 방향키를 눌러주면 플레이어가 움직입니다.

현재 페이지의 브라우저 콘솔을 연 다음 아래의 명령어들을 입력하여 바로 테스트해 봅시다.

main.inactive() //main과 main.objects들을 비활성화 시킵니다.(frame, enemy, player가 비활성화됩니다.)
main.init() //main과 main.object들이 생성됩니다. (frame, enemy, player가 생성됩니다.)
main.objects.player.inactivate() //player를 비활성화 시킵니다.
main.objects.player.init() //player를 초기화 시킵니다.
main.objects.enemy.inactivate() //enemy를 비활성화 시킵니다.
main.objects.enemy.init() //enemy를 초기화 시킵니다.
main.objects.frame.inactivate() //frame을 비활성화 시킵니다.
main.objects.frame.init() //frame을 초기화 시킵니다.

댓글

댓글쓰기

이 글에 댓글을 다시려면 SNS 계정으로 로그인하세요. 자세히 알아보기

UP