Exploring the world of object-oriented JavaScript programming

Question

Exploring the world of object-oriented JavaScript programming

As someone new to the world of object-oriented programming, I am currently working on modeling a character in a game with various levels, classes, and equipment choices.

My ultimate goal is to create a "dresser" feature where players can try on different equipment, see how it affects their parameters, and calculate costs. I have already started programming the basic structure (here), but as my first attempt using html, css, and javascript, it's quite messy. I want to approach this project more efficiently this time :)

Let's say we have an object for the character simulation:

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 issue lies in the fact that different factions provide stat boosts that cannot be reallocated, while leveling up allows for reallocating points spent on parameters. Additionally, equipping items grants stat boosts that also cannot be reallocated unless unequipped.

In my previous attempts, I used arrays to represent default stat boosts from factions, total boosts from equipment, and manually allocated stats. The final array would display the sum of these values, allowing players to only readjust points in one specific array.

How can I effectively implement this using object-oriented programming? Despite reading about concepts like encapsulation, inheritance, and polymorphism, I still struggle to fully grasp how to apply them practically.

-

Responses

This website seems a bit challenging to navigate :o

I will consider qternion's answer for guidance:

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);

To enhance the above code using prototypes, I will refer to

Thank you to everyone for your valuable contributions :)

javascript oop

Answer 1

Answer №1

If you want to enhance the flexibility of your statistics values, consider implementing them as methods rather than simple member variables. This will allow you to dynamically calculate a specific stat whenever it is called, like knight.defense(). By creating methods for each stat in your character class that call upon corresponding methods in other classes such as faction and equipmentSet, you can easily incorporate additional modifiers in the future.

Furthermore, each faction class can customize its own defense() method to include unique modifiers.

This approach may not be considered the most traditional object-oriented design, but as a JavaScript programmer, this is how I would tackle it.

In addition, following Pluto's suggestion can help create reusable "classes" instead of individual objects. It's also beneficial to turn Faction into a proper class with type-checking capabilities using 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

If you want to enhance the flexibility of your statistics values, consider implementing them as methods rather than simple member variables. This will allow you to dynamically calculate a specific stat whenever it is called, like knight.defense(). By creating methods for each stat in your character class that call upon corresponding methods in other classes such as faction and equipmentSet, you can easily incorporate additional modifiers in the future.

Furthermore, each faction class can customize its own defense() method to include unique modifiers.

This approach may not be considered the most traditional object-oriented design, but as a JavaScript programmer, this is how I would tackle it.

In addition, following Pluto's suggestion can help create reusable "classes" instead of individual objects. It's also beneficial to turn Faction into a proper class with type-checking capabilities using 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 3

Answer №2

To convert Lord into a function, you simply need to declare it as a function like this:

var Lord = function() { /* current code */ }

. Set its properties using this.Level = 1;. After doing this, you can create multiple instances of Lords by using new Lord(), similar to other object-oriented programming languages.

Here is an example to demonstrate how this works...

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();

Answer 4

To convert Lord into a function, you simply need to declare it as a function like this:

var Lord = function() { /* current code */ }

. Set its properties using this.Level = 1;. After doing this, you can create multiple instances of Lords by using new Lord(), similar to other object-oriented programming languages.

Here is an example to demonstrate how this works...

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();

Answer 5

Answer №3

If you prefer, you can choose to maintain your arrays. When it comes to object-oriented programming, the key concept is encapsulation. This essentially means providing a way to interact with your Character object without needing to understand the detailed implementation at a low level. The goal is to work with objects, rather than arrays or hashtables (even if ultimately, these elements are used in building the object!) What you aim for is code that resembles this:

var link = Knight();
link.equip(new MasterSword());
alert(link.getAttackPoints());

Looks like @qternion beat me to the punch on this one. As a result, I'm transitioning this response into a collaborative wiki. Let's tap into the collective knowledge of the Stack Overflow community.

Answer 6

If you prefer, you can choose to maintain your arrays. When it comes to object-oriented programming, the key concept is encapsulation. This essentially means providing a way to interact with your Character object without needing to understand the detailed implementation at a low level. The goal is to work with objects, rather than arrays or hashtables (even if ultimately, these elements are used in building the object!) What you aim for is code that resembles this:

var link = Knight();
link.equip(new MasterSword());
alert(link.getAttackPoints());

Looks like @qternion beat me to the punch on this one. As a result, I'm transitioning this response into a collaborative wiki. Let's tap into the collective knowledge of the Stack Overflow community.

Exploring the world of object-oriented JavaScript programming

Answer №1

Answer №2

Answer №3

Similar questions

I recently started learning about Node JS and I am attempting to make a post to a particular request, but I keep encountering an error

What are the comparable alternatives in V8 for Javascript?

AngularJS - creating cascading dropdowns from a single data source

Are the methods of accessing the Realtime Reporting API on Google Analytics, specifically through javascript, comparable to those used for the Core Reporting API, or do they differ significantly from

Error encountered within the mounted hook in threejs referencing issue

Leveraging the withWidth higher order component (HOC) provided by

What mistakes did I make in my Ajax code?

Surprising behavior experienced with Angular alert functionality

Tips for dividing an array based on a defined regex pattern in JavaScript

Vue API and Frame

BibInt output in JavaScript shows unusual data when combined with NaN

The authorization header for jwt is absent

How can I use jQuery to programmatically submit a form?

Can you define the "tab location" in an HTML document using React?

Is it possible to send notifications via email prior to reaching a particular deadline?

Choose a single image by clicking on the <img> tag

Uncovering the entire list of results with NodeJS RegExp

Updating device information in real-time using React Native

Assign tags using a variable within a loop

Validating Forms and Files with jQuery and C# in ASP.NET