We will make the same game again in OOP using Text Game Manager as a framework. TM.IObject, TM.ILoopObject and TM.IProgram will be used. Please check the document first before you start.
**View source code: game-tutorial-oop1.js
Only the setting is the same from the previous program.
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 and TMD are created and cursor is hidden.
//============================= // 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;
Frame class is created extending TM.IObject class. Frame takes data as a parameter. this.data shows the structure of data. data will be merge to this.data in TM.IObject.call(this,data). undefined
in x, y means they should be passed in data. width, height and score does not need to be passed from data since they already have value.
// TM.IObject functions implementation Frame.prototype._init = function(){ this.drawFrame(); this.drawScore(); }; Frame.prototype._inactivate = function(){ this.drawFrame(true); this.drawScore(true); };
TM.IObject has init and inactivate functions. init has code for initializing the instance and executed when an instance created, inactivate has code for inactivating the instance. init can be called to re-activate/initialize the instance after it is inactivated.
To extend init and inactivate functions of TM.IObject, do not extends them directly but create _init and _inactivate functions. _init and _inactivate will be executed when init, inactivate are executed.
_init: calling other functions to draw frame and score.
_inactive: calling the same functions with true
. let's see them.
// 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 function draws frame but also removes them if it get true
as remove parameter.
drawScore function also works the same way.
addScore function adds score and draws score.
var frame; TMS.onReady(function(){ frame = new Frame({x:5,y:2}); });
Create frame instance using Frame class. {x:5,y:2} is passed as data.
Type these commands into the browser console on this page to test.
frame.inactivate() //inactivates frame.(frame and score will be deleted) frame.init() //re-activates frame.(frame and score will be drawn) frame.addScore() //adds score and draw score.
Comments
Login with SNS account to write comments. see details