Game Tutorial OOP 3


  • Create Program_Main class that manages frame and enemy extending TM.IProgram class.


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

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

// Program_Main
// Object Type: TM.IProgrm
var Program_Main = function(){
  this.speed = 30; = {};
  this.objects = {
    frame: null,
    enemy: null,
  };, speed);
Program_Main.prototype = Object.create(TM.IProgram.prototype);
Program_Main.prototype.constructor = Program_Main;

Program_Main is created extending TM.IProgram class. TM.IProgram is for managing instances of classes extended from TM.IObject and TM.ILoopObject. TM.IProgram is exteneded from TM.ILoopObject so it has the same data and speed. objects has the structure of instances to manage. data is not used for Program_Main class but let's keep the structure.

// 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});
Program_Main.prototype._inactivate = function(){};
Program_Main.prototype._calculate = function(){};
Program_Main.prototype._draw = function(){};
Program_Main.prototype._timeline = function(loopCount){};
Program_Main.prototype._getInput = function(){};

TM.IProgram has init, inactivate, calculate, draw, timeLine and getInput functions. init, inactivate, calculate and draw has the same role of TM.ILoopObject. timeline and getInput are repeated as a loop with interval of this.speed with calculate and draw. timeline gets loopCount as a parameter that has how many loop passed so you can code things need to be done at the loop count. getInput checks user inputs.

Same as TM.IObject and TM.ILoopObject, add code in _init, _inactivate, _calculate, _draw, _timeline and _getInput functions instead of extending directly. Keep these functions even if there is no code for them.

_init: hide cursor and create frame and enemy instance. enemy cannot access frame directly but through refMainObjects.

// Enemy
// Object Type: TM.ILoopObject
var Enemy = function(data){
  this.speed = null; = {
    refMainObjects: undefined,
    x: null,
    y: null,
    pX: null,
    pY: null,
    dX: 0,
    dY: 1,
    text: "X",
  };, this.speed, data);

Enemy constructor updated so it can get refMainObjects as data.

// TM.ILoopObject functions implementation
Enemy.prototype._init = function(){
  var frame =;
  this.interval.setSpeed(50+Math.floor(Math.random()*100)); = 2+Math.floor(Math.random()*(; = 1;
Enemy.prototype._inactivate = function(){
  var frame =;
Enemy.prototype._calculate = function(){
  var frame =;
Enemy.prototype._draw = function(){
  var frame =;
  if( &&{

Now frame can be accessed in enemy as var frame = is added to every _ functions.

var main = new Program_Main();

main.init added in TMS.onReady.

Run Example

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)
enemy.inactivate() //inactivates enemy.
enemy.init() //re-activates enemy.
frame.inactivate() //inactivates frame.
frame.init() //re-activates frame.


Add Comment

Login with SNS account to write comments. see details