Game Tutorial OOP 4

Objective

• Create Player class extending TM.ILoopObject class.
• Update Program_Main class to check user inputs and move player.
• Print debug data using TMD(an instance of TM.DebugManager).

Code

**View source code: game-tutorial-oop4.js

I will only explain the code that is new or updated from the previous tutorial.

//=============================
// Player
//=============================
// Object Type: TM.ILoopObject
var Player = function(data){
  this.speed = 30;
  this.data = {
    x: undefined,
    y: undefined,
    refMainObjects: undefined,
    pX: null,
    pY: null,
    dX: 0,
    dY: 0,
    text: "[-<>-]",
  };
  TM.ILoopObject.call(this, this.speed, data);
};
Player.prototype = Object.create(TM.ILoopObject.prototype);
Player.prototype.constructor = Player;

Player class is created extending TM.ILoopObject. 

// TM.ILoopObject functions implementation
Player.prototype._init = function(){};
Player.prototype._inactivate = function(){
  var frame = this.data.refMainObjects.frame;
  TMS.deleteTextAt(frame.data.x+this.data.x,frame.data.y+this.data.y,this.data.text);
};
Player.prototype._calculate = function(){
  this.move();
};
Player.prototype._draw = function(){
  var frame = this.data.refMainObjects.frame;
  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);
};

Code in _init, _inactivate, _calculate and _draw functions instead of extending TM.ILoopObject functions directly. Keep these functions even if there is no code for them.

_inactivate: delete the instance.

_calculate: call move function.

_draw: It removes the text at the previous position(pX, pY) and draws current position(x, y).

// Player functions
Player.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;
  this.data.dX = 0;
  this.data.dY = 0;
};
Player.prototype.updateDirection = function(dX,dY){
  this.data.dX += dX;
  this.data.dY += dY;
};

move: moves the instance.
updateDirection: updates dX and dY.

// Static properties
Program_Main.KEYSET = {
  LEFT: 37,
  UP: 38,
  RIGHT: 39,
  DOWN: 40,
};

Static property KEYSET is added to Program_Main for better visibility. Static property means the properties can be accessed as class properties not through instance.

var Program_Main = function(){
  this.speed = 30;
  this.data = {};
  this.objects = {
    frame: null,
    enemy: null,
    player: null,
  };
  TM.IProgram.call(this, this.speed);
};

player is added to this.objects in Program_Main.

// TM.IProgram functions implementation
Program_Main.prototype._init = function(){
  TMS.cursor.hide();
  this.objects.frame = new Frame({x:5,y:2});
  this.objects.enemy = new Enemy({refMainObjects:this.objects});
  this.objects.player = new Player({x:22,y:10,refMainObjects:this.objects});
};
Program_Main.prototype._inactivate = function(){};
Program_Main.prototype._calculate = function(){
  var player = this.objects.player;
  TMD.print("Player",{x:player.data.x,y:player.data.y});
};
Program_Main.prototype._draw = function(){};
Program_Main.prototype._timeline = function(loopCount){};
Program_Main.prototype._getInput = function(){
  var player = this.objects.player;
  var frame = this.objects.frame;
  if(TMI.keyboard.checkKey(Program_Main.KEYSET.LEFT) && player.data.x>2){
    player.updateDirection(-1,0);
  }
  if(TMI.keyboard.checkKey(Program_Main.KEYSET.UP) && player.data.y>1){
    player.updateDirection(0,-1);
  }
  if(TMI.keyboard.checkKey(Program_Main.KEYSET.RIGHT) && player.data.x+player.data.text.length<frame.data.width-2){
    player.updateDirection(1,0);
  }
  if(TMI.keyboard.checkKey(Program_Main.KEYSET.DOWN) && player.data.y<frame.data.height-2){
    player.updateDirection(0,1);
  }
};

Functions of Program_Main are updated to handle player.

_init: player instance is created.
_calculate: print debug data using TMD.
_getInput: checks user input using TMI.keyboard.checkKey function and update player directions by calling player.updateDirection function.

Run Example

main.inactive() //inactive main and main.objects(frame, enemy)
main.init() //re-activate main and main.object(frame, enemy)
main.objects.player.inactivate() //inactivate player.
main.objects.player.init() //re-activate player.
main.objects.enemy.inactivate() //inactivates enemy.
main.objects.enemy.init() //re-activates enemy.
main.objects.frame.inactivate() //inactivates frame.
main.objects.frame.init() //re-activates frame.