이번 튜토리얼 부터는 Text Game Manager를 프레임워크로 사용하며 OOP방식으로 코딩하여 게임을 다시 만듭니다. TM.IObject, TM.ILoopObject, TM.IProgram이 사용됩니다. 이 문서들을 읽어보고 진행하면 좋습니다.
**소스 코드: 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() //점수가 증가되고 점수를 새로 그립니다.
댓글
이 글에 댓글을 다시려면 SNS 계정으로 로그인하세요. 자세히 알아보기