Game Tutorial OOP 1

이번 튜토리얼 부터는 Text Game Manager를 프레임워크로 사용하며 OOP방식으로 코딩하여 게임을 다시 만듭니다. TM.IObject, TM.ILoopObject, TM.IProgram이 사용됩니다. 이 문서들을 읽어보고 진행하면 좋습니다.

목표

• TM.IObject 클라스를 상속하여 Frame 클라스를 만듭니다.

코드

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

이전 소스코드와는 세팅만 같습니다.

var screenSetting = {
  column: 55,
  row: 22,
  fontFamily: 'Nanum Gothic Coding',
  fontSource: 'https://fonts.googleapis.com/css?family=Nanum+Gothic+Coding',
};

var charGroups = {
  wall: {
    chars: '■',
    isFullwidth: true,
    sizeAdj: 1.2,
    xAdj: -0.05,
    yAdj: 0.03,
  },
};

var debugSetting = {
  devMode: true,
};

var TMS = new TM.ScreenManager(screenSetting,charGroups),
    TMI = new TM.InputManager(screenSetting.canvasId,debugSetting.devMode),
    TMD = new TM.DebugManager(debugSetting);

TMS.cursor.hide();

TMS, TMI, TMD를 생성하고 커서를 숨깁니다.

//=============================
// Frame
//=============================
// Object Type: TM.IObject
var Frame = function(data){
  this.data = {
    x: undefined,
    y: undefined,
    width: 44,
    height: 18,
    score: 0,
  };
  TM.IObject.call(this,data);
};
Frame.prototype = Object.create(TM.IObject.prototype);
Frame.prototype.constructor = Frame;

TM.IObject를 상속하여 Frame 클라스를 만들었습니다. Frame은 data를 parameter로 받습니다. this.data는 받게 될 data의 구조를 나타냅니다.data와 this.data는 TM.IObject.call(this,data)에 의해 합쳐지게 됩니다. x, y 처럼 undefined로 표시된 값은 data를 통해 반드시 받아야 하는 값을 뜻하며 width, height, score는 이미 값이 들어 있으므로 전달받지 않아도 됩니다.

// TM.IObject functions implementation
Frame.prototype._init = function(){
  this.drawFrame();
  this.drawScore();
};
Frame.prototype._inactivate = function(){
  this.drawFrame(true);
  this.drawScore(true);
};

TM.IObject는 init과 inactivate 함수를 가지고 있습니다. init은 인스턴스 생성시 자동으로 실행되는 인스턴스를 초기화 시키는 함수이며, inactivate은 인스턴스를 비활성화시킬 때 호출하는 함수입니다. init함수는 인스턴스가 비활성화가 된 후 다시 초기화및 활성화시키기 위해 호출할 수도 있습니다. 

TM.IObject의 init과 inactivate함수를 상속받기 위해서는 해당 함수를 직접 상속받지 말고, _init, _inactivate에 할일을 넣어줍니다. init, inactivate함수가 호출되면 _init, _inactivate함수가 호출되도록 되어 있습니다.

Frame 클라스의 초기화(init)시에는 테두리를 그리고, 점수를 그리는 함수를 호출하고 있습니다.

Frame 클라스의 비활성화(inactivate)시에 같은 함수에 true를 전달합니다. 아래에서 그 함수들을 살펴봅시다.

// Frame functions
Frame.prototype.drawFrame = function(remove){
  for(var i=0; i<this.data.height; i++){
    for(var j=0; j<this.data.width; j++){
      if((i===0 || i==this.data.height-1 || j===0 || j==this.data.width-2)&&(j%2 === 0)){
        var frameText = "■";
        if(remove) TMS.deleteTextAt(this.data.x+j,this.data.y+i,frameText);
        else TMS.insertTextAt(this.data.x+j,this.data.y+i,frameText);
      }
    }
  }
};
Frame.prototype.drawScore = function(remove){
  var scoreText = "Score: ";
  if(remove){
    TMS.deleteTextAt(this.data.x,this.data.y-1,scoreText);
    TMS.deleteText(this.data.score);
  }
  else {
    TMS.insertTextAt(this.data.x,this.data.y-1,scoreText);
    TMS.insertText(this.data.score);
  }
};
Frame.prototype.addScore = function(){
  this.data.score += 100;
  this.drawScore();
};

drawFrame은 테두리를 그리는 함수지만, remove인자로 true를 받으면 반대로 테두리를 지웁니다.
drawScore역시 점수를 그리는 함수이지만 remove인자로 true를 받으면 점수를 지웁니다.
addScore는 점수를 100 증가시키고 점수를 새로 그리는 함수입니다.

var frame;
TMS.onReady(function(){
  frame = new Frame({x:5,y:2});
});

Frame 클라스로 frame 인스턴스를 생성합니다. data로 {x:5,y:2}를 전달합니다.

예제의 실행

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

frame.inactivate() //frame을 비활성화 시킵니다.(테두리, 점수를 지웁니다)
frame.init() //frame을 초기화 시킵니다.(테두리, 점수를 그립니다)
frame.addScore() //점수가 증가되고 점수를 새로 그립니다.