View source code:


Interface Class (extends TM.ILoopObject)

**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 manage other TM.IObject and  TM.ILoopObject type instances.

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

Constructor Parameters

new TM.IProgram(speed, data, objects)
  • 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
  • objects(optional): object with TM.IObject and/or TM.ILoopObject as sub properties(array or object) that will be managed in class.(for example { player: player, enemies: [] }). objects will be saved as this.objects.


  • 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
  • objects: instances that will be manged in TM.IProgram.
  • loopCount: set 0 when init function is executed, increase 1 every time loop processed.


  • init(): activates/initializes the instance. TM.IProgam's instances does not execute init function when they are created. init should be executed manually. 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
  • timeline(loopCount): executed repeatedly when instance is activethis.loopCount is passed as loopCount parameter, it can know how many iteration passed. It will contain code that need to be done depends on loopCount.
  • getInput(): executed repeatedly when instance is active. It checks user inputs.

calculate, draw, timeline and getInput are nothing special but they are just separated for better visibility.

Extension of Functions

When you extends TM.IProgram functions above, create new functions with there name starts "_" instead of extending them directly. The functions blow with "_" will be executed when the TM.IProgram 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.
  • _timeline(loopCount): Write the code that updates Screen using depends on loopCount. You can calculate how much time passed using loopCount * this.speed.
  • _getInput(): Write the code that check user inputs and upates during the loop.

Code Example

**View example source code: i-program-tutorial.js

Let's create Program_main class extending TM.IProgram that manages Frame class(made in TM.IObject's example) and MovingObject class(made in TM.ILoopObject's example). It will be easy to understand if you compare below with the full source code(i-program-tutorial.js).

To see explanations of Frame class and MovingObject class, please visit TM.IObject and  TM.ILoopObject pages.

Create Manager Instances

var TMS = new TM.ScreenManager(),
    TMI = new TM.InputManager(null,true);

Extend TM.IProgram Class

// Program_main
// Object Type: TM.IProgram
var Program_main = function(){
  var speed = 100; = {};
  this.objects = {
    frame: null,
    movingObjects: [],
  };, speed);
Program_main.prototype = Object.create(TM.IProgram.prototype);
Program_main.prototype.constructor = Program_main;

Program_main class is created extending TM.IProgram.

there is no data in in this example, but let's keep the structure.
this.objects contains structure only.

Add Static Property

// Static properties
Program_main.KEYSET = {
  ESC: 27, // esc key

Static property means the properties can be accessed as class properties not through instance.

KEYSET property is created under Program_main class and ESC key code(27) is added. You can get key code on the browser console if you create TMI as TMI = new TM.InputManager(null,true);

Extend TM.IProgram Functions

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

// TM.IProgram functions implementation
Program_main.prototype._init = function(){
  this.objects.frame = new Frame({x:2,y:2});
Program_main.prototype._inactivate = function(){
Program_main.prototype._calculate = function(){};
Program_main.prototype._draw = function(){};
Program_main.prototype._timeline = function(loopCount){
  if(loopCount == 10) this.objects.movingObjects.push(new MovingObject(200,{x:4,y:5,dX:1}));
  if(loopCount == 20) this.objects.movingObjects.push(new MovingObject(400,{x:24,y:7,dX:-1}));
  if(loopCount == 30) this.objects.movingObjects.push(new MovingObject(300,{x:16,y:9,dX:1}));
Program_main.prototype._getInput = function(){

init: hides cursor and create frame instance.

timeline: creates MovingObject instance by order. this.speed is 100 milliseconds so the instances will be created after 1, 2 and 3 seconds after Program_Main instance initiated.

getInput: restarts the program if ESC is pressed.

Create Instance and initiate

var main = new Program_main();

TM.IProgram does not execute init when instance created, so you need to execute it manually. the reason why it does not execute init is that in case there are more then one programs and they need to be switched.

Run Example

Click Screen first, then your key input will be checked. you can see the program restarts when you press ESC key.

Type these commands into the browser console on this page to test.
If you cannot open browser console with keyboard shortcut, click every where else but Screen and then you can open it. Screen captures all key input and prevent other key actions.

//inactivate main 

//re-activate(initialize) main

You can see it print key code on the browser console when you press any keys so you can get key code.


Add Comment

Login with SNS account to write comments. see details