Game Tutorial OOP 1

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.

Objective

• Create Frame class extending TM.IObject class.

Code

**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.

Run Example

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.