Game Tutorial OOP 2

목표

  • TM.ILoopObject 클라스를 상속하여 Enemy 클라스를 만듭니다.

코드

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

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

//=============================
// Enemy
//=============================
// Object Type: TM.ILoopObject
var Enemy = function(){
  var speed = null;
  this.data = {
    x: null,
    y: null,
    pX: null,
    pY: null,
    dX: 0,
    dY: 1,
    text: "X",
  };
  TM.ILoopObject.call(this, this.speed);
};
Enemy.prototype = Object.create(TM.ILoopObject.prototype);
Enemy.prototype.constructor = Enemy;

TM.ILoopObject를 상속하여 Enemy 클라스를 만들었습니다. TM.ILoopObject는 스스로 반복하는 객체를 만들 때 사용됩니다. TM.ILoopObject는 TM.IObject를 상속받은 클라스이므로 data를 가지고 있고, 반복의 속도(단위:milliseconds)를 가진 speed를 추가로 갖습니다. Enemy 클라스는 Frame 클라스와 달리 data를 받지 않습니다. x, y는 현재 좌표이며, pX, pY는 이전 프레임을 지우기 위한 좌표, dX, dY는 객체가 나아가야할 방향을 나타냅니다. x, y, pX, pY는 클라스에 의해 값이 생성되므로 null을 사용하여 undefined(data로 받아야함)와 구별하였습니다. 

// TM.ILoopObject functions implementation
Enemy.prototype._init = function(){
  this.interval.setSpeed(50+Math.floor(Math.random()*100));
  this.data.x = 2+Math.floor(Math.random()*(frame.data.width-4));
  this.data.y = 1;
};
Enemy.prototype._inactivate = function(){
  TMS.deleteTextAt(frame.data.x+this.data.x,frame.data.y+this.data.y,this.data.text);
};
Enemy.prototype._calculate = function(){
  this.move();
  if(this.checkHitFrame(frame)){
    this.init();
  }
};
Enemy.prototype._draw = function(){
  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은 TM.IObject와 역할이 같으며 calculate와 draw는 TM.ILoopObject에서 추가된 함수로 this.speed를 간격(단위:milliseconds)으로 계속하여 반복되는 함수입니다. calculate는 data의 값을 변경하는 함수, draw는 data를 이용하여 스크린을 변경하는 함수입니다. TM.IObject와 마찬가지로 직접 상속받지 말고, _init, _inactivate, _calculate, _draw에 코드를 넣어 줍니다.

Enemy의 초기화(init)시에 x,y좌표를 생성하고, this.interval.setSpeed 함수를 통해 반복 속도를 지정합니다.(TM.ILoopObject의 this.interval에는 TM.Interval의 인스턴스가 들어있습니다.)

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

Enemy의 반복함수중 calculate에는 인스턴스를 이동시키는 move함수를 호출하고, frame에 닿았는지 체크한 후 frame에 닿았으면 초기화를 시키는 코드가 들어있습니다.

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

// Enemy functions
Enemy.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;
};
Enemy.prototype.checkHitFrame = function(frame){
  return (this.data.y>frame.data.height-2);
};

move는 인스턴스를 이동시키는 함수입니다.
checkHitFrame은 frame에 닿았는지 확인하고 그결과를 리턴하는 함수입니다.

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

Frame과 마찬가지로  TMS.onReady에 넣어줍니다.

예제의 실행

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

enemy.inactivate() //enemy를 비활성화 시킵니다. (draw, calculate 함수의 반복을 중단시키고 enemy를 지웁니다.)
enemy.init() //enemy를 초기화 시킵니다.(enemy가 새로 생성되고 draw, calculate 함수의 반복이 다시 시작됩니다.)
frame.inactivate() //frame을 비활성화 시킵니다.(테두리, 점수를 지웁니다)
frame.init() //frame을 초기화 시킵니다.(테두리, 점수를 그립니다)

댓글

댓글쓰기

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

UP