Trying to model with object-oriented javascript

Question

I am pretty new to the whole object-oriented paradigm.

I am trying to model a character in a certain game, you have different levels, classes, and lots of equipment choices and such.

My goal in the end would be to create a "dresser" of some sort where players could open up the site, try on some equips and see how it influence their parameters, how much it would cost, etc.

I already have the main parts programmed (here), but it was my first piece of work with html, css and javascript and it's just a whole big mess at the moment. I want to start out properly this time :)

---

Suppose I have an object for the character that we will be simulating:

var Lord = function(){

    this.Level =       1;
    this.Gender =      'Male';
    this.Faction =     'Knight';

    this.Attack =      0;
    this.Defense =     1;
    this.SpellPower =  0;
    this.Knowledge =   0;
    this.Luck =        0;
    this.Morale =      1;
    this.Initiative =  0;

    this.addParameter = function(Parameter, amount){
        this[Parameter] += amount;
    };
    this.changeLevelTo = function(Level){
        this.Level = Level;
    };
    this.changeGenderTo = function(Gender){
        this.Gender = Gender;
    };
    this.changeFactionTo = function(Faction){
        this.Faction = Faction;
        //adjust default stats based on new faction
    };
};

My problem is this: A knight starts out with 1 Defense and 1 morale, different factions will give you different stat boosts. These values cannot be reallocated. A player also gains some stat points to spend on different parameters upon leveling and these can be reallocated.

Furthermore, a player may equip some equipments that give stat boosts, and these cannot be reallocated as well (only by unequiping it).

What I've done previously is that I created a whole bunch of arrays all with their indices corresponding to each of the parameters, each array representing the default stat boost from different factions, the total stat boost from equipments, and the stats the player allocated manually. I then sum each of the indices to give me a final array of parameters to display. A player can then only reallocate points in the 3rd array, and not any other arrays.

How should I go about implementing this using object-oriented programming?

I've read up on some of the fundamental concepts (encapsulation, inheritance, polymorphism) but they are rather abstract and when I get down to it, I don't really know quite what to do :s

-

-

---

Responses

---

This webstie is quite hard to use :o

Ok, I'll try and see what I can get from qternion's answer:

var Faction = function(atk, def, sp, kn, luk, mor, ini){
    this.Attack =      atk;
    this.Defense =     def;
    this.SpellPower =  sp;
    this.Knowledge =   kn;
    this.Luck =        luk;
    this.Morale =      mor;
    this.Initiative =  ini;
}

var Knight = new Faction(0,1,0,0,0,1,0);
var Wizard = new Faction(0,0,0,1,0,1,0);

Then on the Lord object, I would have

    //this.Faction = 'Knight'
    this.Faction = Knight

    this.Defense = function(){
        return this.Faction.Defense + this.someOtherClass.Defense;
    }

---

I'll be looking to improve the above with prototypes using http://javascript.crockford.com/prototypal.html

Thanks to everyone for all of your contributions :)

Answer 1

You could have your stats values be methods instead of member variables. That way, you could compute during the call a given stat, for exemple knight.defense(). In turn, the method defense() in your character class could call defense() from the faction class, defense() from the equipmentSet class, etc. The advantage of this is you could add additional stat modifiers whenever, for example if you decide you want a perk system or something.

Each faction class could then override their defense() function for their modifier.

I wouldn't call this the most object-oriented way but that's how I'd do it myself as a Javascript programmer.

Addendum: Pluto's answer is also how you get "classes" (instead of individual objects) that are reusable. As mentioned I'd also make Faction a class instead of just a string (you can type-check with instanceof):

var Faction = function (){
    this.prototype.defense = function () { return this.Defense; };
    this.prototype.initStats = function () { this.Defense = 0;};
    this.initStats(this);
};

var Knight = new Faction ();
Knight.prototype.initStats = function () { this.Defense = 1;};

For example.

Answer 2

Simply change Lord to be a function (ie. var Lord = function() { /* current code */ }) and set its properties with this.Level = 1;. Then from now on, you can create as many Lords as you want with new Lord() like most object-oriented programming languages.

An example of this in practice...

var Lord = function() {

    this.Level=1;
    this.Gender='Male';
    this.Faction='Knight';

    /* ... */

    this.addParameter=function(Parameter, amount){
        this[Parameter] += amount;
    };

    /* ... */
};
var a=new Lord();
var b=new Lord();