View source code:


Interface Class (extends TM.IObject)

**There is no "interface class" in JavaScript. It just means the role of this class is interface. This class should be extended and creates new classes


A interface class to create instances that repeated in loop. (for example: enemy unit in game, player plane, etc.)

Createdinstance is created by Constructor.
Activatedactivated by init function. It starts the loop.
Loopcalculateexecutes calculate function.
drawexecutes draw function.
Inactivatedinactivated by inactivate function. It stops the loop.

Constructor Parameters

new TM.ILoopObject(speed, data, skipInit)
  • speed: Interval time(unit: milliseconds) for the loop
  • data(optional): object with data that will be used in the class(for example:{x:1,y:2}. data will be saved as
  • skipInit(optional): TM.ILoopObject executes init function when an instance is created by default. if skipInit is passed as true, it will not execute init when an instance is created.


  • isActive: It will be set true after calling init function, false after calling inactivate. The Object status(active/inactive) can be checked by this property.
    **Inactivated(this.isActive == false) does not mean it inactivates all functions of it. The functions need to be coded for each status(this.isActive is true- active, false- inactive) if different behaviors are required.
  • speed: Once init function is executed, this value(unit: milliseconds) will be the interval time of loop cycle.
  • interval: TM.Interval's instance that control interval


  • init(): activates/initializes the instance. It's executed when the instance created as default but It is not executed if skipInit is passed as true. In this case, you need to call this function manually to initiate instance. It starts loop cycle.
  • inactivate(): inactivates the instance. It stops loop cycle.
  • calculate(): executed repeatedly when instance is active. It updates
  • draw(): executed repeatedly when instance is active. It update Screen with

**calculate and draw are nothing special but they are just separated for better visibility.

Extension of Functions

When you extends TM.ILoopObject functions above, create new functions with there name starts "_" instead of extending them directly. The functions blow with "_" will be executed when the TM.ILoopObject functions are called.

  • _init(): Write the code that should executed when instance is initiated.(for example: draw a game frame on Screen)
  • _inactivate(): Write the code that should executed when instance is inactivated.(for example: delete a game frame on Screen)
  • _calculate(): Write the code that updates during the loop.
  • _draw(): Write the code that updates Screen using during the loop.

Code Example

**View example source code: i-loop-object-tutorial.js

Let's create MovingObject class extending TM.ILoopObject that creates instances moving 10 columns in reciprocation. It will be easy to understand if you compare below with the full source code(i-loop-object-tutorial.js).

Create Manager Instance

var TMS = new TM.ScreenManager();

Extend TM.ILoopObject Class

// MovingObject
// Object Type: TM.ILoopObject
// Description: a sample moving object
var MovingObject = function(speed, data){ = {
    x: undefined,
    y: undefined,
    dX: undefined, // x direction -1 or 1 (-1:left, 1:right)
    pX: null, // previous x position
    text: '[<>]',
    width: 4,
    turnCount: 0,
  };, speed, data);
MovingObject.prototype = Object.create(TM.ILoopObject.prototype);
MovingObject.prototype.constructor = MovingObject;

MovingObject class is created extending TM.ILoopObject. is the structures and default values of class. data passed as the parameter will overwrite this.dataundefined in means the value should be passed as data parameter, null in means no default value for them. Therefore x, y, dx should be passed as data parameter to create instance of this class.

skipInit is not passed to so init will be executed when an instance is created.

Extend TM.ILoopObject Functions

As I already mentioned above, TM.ILoopObject functions shouldn't be extended directly but create functions with "_" then they will be executed together when they are executed. TM.ILoopObject has init, inactivate, calculate and draw functions so we need to write _init, _inactivate, _calculate and _draw.

// TM.ILoopObject functions implementation
MovingObject.prototype._init = function(){ =;
MovingObject.prototype._inactivate = function(){
MovingObject.prototype._calculate = function(){
MovingObject.prototype._draw = function(){

Add MovingObject Class Functions

// MovingObject function
MovingObject.prototype.move = function(){ =; +=;
MovingObject.prototype.changeDirection = function(){;
  if( == 0){ = 0; = ( == 1)?-1:1;

These are custom functions of the class.

Creating Instance

var myMovingObject = new MovingObject(200,{x:12,y:2,dX:1});

Create a myMovingObject instance their interval is 200, data is {x:12,y:2,dX:1}.

Run Example

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

//inactivate myMovingObject 

//re-activate(initialize) myMovingObject
myMovingObject.init(); //create new MovingObject's instance (myMovingObject2)
var myMovingObject2 = new MovingObject(300,{x:24,y:4,dX:-1});


Add Comment

Login with SNS account to write comments. see details