Game Tutorial OOP 4


  • 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).


**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; = {
    x: undefined,
    y: undefined,
    refMainObjects: undefined,
    pX: null,
    pY: null,
    dX: 0,
    dY: 0,
    text: "[-<>-]",
  };, 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 =;
Player.prototype._calculate = function(){
Player.prototype._draw = function(){
  var frame =;
  if( &&{

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(){ =; =; +=; +=; = 0; = 0;
Player.prototype.updateDirection = function(dX,dY){ += dX; += 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.objects = {
    frame: null,
    enemy: null,
    player: null,
  };, this.speed);

player is added to this.objects in Program_Main.

// TM.IProgram functions implementation
Program_Main.prototype._init = function(){
  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;
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) &&>2){
  if(TMI.keyboard.checkKey(Program_Main.KEYSET.UP) &&>1){
  if(TMI.keyboard.checkKey(Program_Main.KEYSET.RIGHT) &&<{
  if(TMI.keyboard.checkKey(Program_Main.KEYSET.DOWN) &&<{

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

Click Screen first, then press arrow keys in your keyboard to move player.

Type these commands into the browser console on this page to test.

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.


Add Comment

Login with SNS account to write comments. see details