소스 코드 보기: https://github.com/a-mean-blogger/text-game-maker-js/blob/master/src/base-objects/i-object.js
인터페이스 클라스
**클라스의 역할이 인터페이스라는 뜻으로 자바스크립트에는 실제로 인터페이스 클라스가 없습니다. 코드 작성시 이 클라스를 직접 사용하지 않고 이 클라스를 상속받는 새로운 클라스를 만들어 사용합니다.
자체적으로 반복하지 않는 객체의 클라스를 만들 때 사용됩니다. 프로그램 실행중에 일정한 시간 간격으로 움직이지 않고 변하지 않는 객체를 만들 때 사용됩니다.(예: 게임의 테투리 등)
TM.IObject는 다른 모든 Text Game Maker JS 클라스들의 기본이 되는 클라스이기도 합니다. 다른 모든 클라스들은 이 클라스를 상속받아 만들어졌습니다.
생성 | 생성자에 의해 인스턴스가 생성됩니다. |
활성화 | init 함수로 활성화가 됩니다. |
비활성화 | inactivate 함수로 비활성화가 됩니다. |
new TM.IObject(data, skipInit)
TM.IObject를 상속할 때 위 함수들의 코드는 해당 함수를 직접 상속받아 작성하지 말고 아래의 함수들(_가 붙어있는 함수들)에 코드를 작성하여야 합니다. 아래 함수들에 코드를 작성하면 _가 없는 함수를 호출하면 _가 있는 함수가 자동으로 실행됩니다.
**예제 소스 코드 보기: i-object-tutorial.js
TM.IObject를 상속받아 x,y 좌표를 data로 받고 게임 테두리를 그리는 Frame 클라스를 만들어 봅시다. 전체 소스 코드(i-object-tutorial.js)와 함께 보시면 더 이해하기 쉽습니다.
var TMS = new TM.ScreenManager();
화면에 텍스트를 그리기 위해 TM.ScreenManager의 인스턴스를 생성하여 변수 TMS에 저장하였습니다.
//============================= // Frame //============================= // Object Type: TM.IObject // Description: a sample game frame object var Frame = function(data){ this.data = { x: undefined, y: undefined, frame: [ '+-----------< My Frame >-----------+\n', '| |\n', '| |\n', '| |\n', '| |\n', '| |\n', '| |\n', '| |\n', '+------------------------------------+\n' ], todayText: null, }; TM.IObject.call(this, data); }; Frame.prototype = Object.create(TM.IObject.prototype); Frame.prototype.constructor = Frame;
TM.IObject를 상속받아 Frame 클라스를 작성하였습니다.
this.data는 클라스가 기본적으로 가지는 값이며, 인자로 전달받는 data는 this.data를 덮어쓰게 되는 값입니다. 이때 인자로 전달받아야 할 값을 this.data의 항목의 undefined로 표시하였고, null은 기본값이 없는 것을 나타냅니다. 즉 이 클라스로 인스턴스를 만들때 data로 x, y를 받아야 한다는 것을 나타냅니다.
skipInit을 전달하지 않았으므로 위 함수를 이용해서 인스턴스를 생성하면 init함수가 자동으로 실행됩니다.
위에서 설명한 것 처럼, 함수를 직접 상속받지 말고 함수이름 앞에 _를 붙여 코드를 작성하면 해당 함수 호출시 같이 호출됩니다. TM.IObject는 init, inactivate를 가지고 있으므로 _init, _inactivate를 작성해 줍니다.
// TM.IObject functions implementation Frame.prototype._init = function(){ this.updateTodayText(); this.drawFrame(); this.drawTodayText(); }; Frame.prototype._inactivate = function(){ this.drawTodayText(true); this.drawFrame(true); };
함수가 활성화될 때와 비활성화될 때 호출되어야 하는 함수들을 기록하였습니다. 다음으로 이 함수들을 작성해 줍시다.
// Frame functions Frame.prototype.updateTodayText = function(){ var today = new Date(); var year = today.getFullYear(); var month = today.getMonth()+1; var date = today.getDate(); this.data.todayText = year+'-'+month+'-'+date; }; Frame.prototype.drawFrame = function(remove){ TMS.cursor.move(this.data.x, this.data.y); for(var i=0; i<this.data.frame.length; i++){ if(remove) TMS.deleteText(this.data.frame[i]); else TMS.insertText(this.data.frame[i]); } }; Frame.prototype.drawTodayText = function(remove){ TMS.cursor.move(this.data.x+2, this.data.y+1); if(remove) TMS.deleteText(this.data.todayText); else TMS.insertText(this.data.todayText); };
data의 값을 변경하고, TMS를 이용하여 화면에 텍스트를 그리고 지우는 Frame의 함수들입니다.
var myFrame = new Frame({x:2,y:2});
{x:2, y:2}를 초기값으로 갖는 myFrame 인스턴스를 생성합니다.
현재 창의 브라우저 콘솔에 다음의 명령어를 입력하여 테스트해 봅시다.
//myFrame 비활성화 myFrame.inactivate(); //myFrame를 다시 활성화 myFrame.init(); //Frame의 새로운 인스턴스(myFrame2) 생성 var myFrame2 = new Frame({x:4,y:4});
댓글
이 글에 댓글을 다시려면 SNS 계정으로 로그인하세요. 자세히 알아보기