Game Tutorial OOP 2


  • Create Enemy class extending TM.ILoopObject class.


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

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

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

Enemy class is created extending TM.ILoopObject class. TM.ILoopObject is for things that repeat over. TM.ILoopObject is extended from TM.IObject so it has the same data. speed is the interval time(milliseconds) of loop. Enemy class does not have data as a parameter at this moment, every data is set in x and y indicate the current x and y positions, pX and pY indicate the previous x and y position to delete enemy after it moves and at last dX and dY indicate the direction of object. Values for x, y, pX and pY will be assigned later and they don't need to be passed in data parameter, so I used null to distinguish undefined(need to be passed in data parameter). 

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

TM.ILoopObject has init, inactivate, calculate and draw functions. init and inactivate has the same role as TM.IObject. calculate and draw are repeated as a loop with interval of this.speed. calculate is for updating, draw is updating Screen using Same is TM.IObject, add code in _init, _inactivate, _calculate and _draw functions instead of extending directly.

_init: sets x and y position for the instance and set interval speed using this.interval.setSpeed function (this.interval of TM.ILoopObject is an instance of TM.Interval)

_inactivate: deletes the instance on Screen.

_calculate: this code will be repeated. It calls move function and reset the instance if it hits frame.

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

// Enemy functions
Enemy.prototype.move = function(){ =; =; +=; +=;
Enemy.prototype.checkHitFrame = function(frame){
  return (>;

move: moves instance.
checkHitFrame: determines if it hits the frame.

var frame;
var enemy;
  frame = new Frame({x:5,y:2});
  enemy = new Enemy();

Put the code for creating enemy instance in TMS.onReady.

Run Example

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

enemy.inactivate() //inactivates enemy.(The loop of draw and calculate stops.)
enemy.init() //re-activates enemy.(enemy is reset, the loop of draw and calculate functions starts)
frame.inactivate() //inactivates frame.(frame and score will be deleted) frame.init() //re-activates frame.(frame and score will be drawn)


Add Comment

Login with SNS account to write comments. see details