Game Dev JS Storing objects to Arrays

Question

I work with many language, and am expanding my experience with JS (not jquery). While this works with many languanges I use, What I thought was going to be an easy program, has me stumped at the Array/Object issue. And I could be attacking it from the wrong direction.

In short this is a simple game(I am learning about objects and arrays in JS, and thought this would be a good challenge). Comprises of 15 mobs, each mob attacks 10x in waves, and each wave has up to 5 different criteria for winning that wave. Once the wave is complete, it moves to the next mob, and repeat.

With other languages and even PHP, you can do something similar to the pseudo code below:

aMob = record {
    id: integer,
    name: string
    hp: integer
    etc....
}
mob[15]: aMob

now I have an array of 15 aMobs

so you can use mobCnt = 0 and get mob[mobCnt].name

And I can do this is in JS. Pretty simple array, but this is where it gets complicated (for me)

I watched and read several tutorial and learned about Objects. That seemed to be the right way to go, but I could create the object (boiler plate?) But then I could not create the multidimensional array that each mob would be associated with 10 waves, and each of those waves had 5 items to meet. 3D array?

this snipped below sorta works. But very kludgy coding. And the problem arises when I click the attack button, the mobhp will not decrease, so I put that var as global. But after change the code, it just kept getting bigger. So this has to be junked. this was the only code that I got so at least do something, but I feel the object/array method would be better.

function setBattleRoundNFO(currMobCnt, currWaveCnt  ) {
    switch(currMobCnt) {
        case 0:  mobName = "Rodents";
                // mob = 100; 
                switch(currWaveCnt){
                    case 0:  weaponId = 1; armorId = 0; powerMoveId = 3; break; // weapon, armor and powermove skill
                    case 1:  weaponId = 4; armorId = 5; powerMoveId = 6; break;
                }
                break;
        case 1: mobName = "Wolf Pack";
                mobHp *= 1.15;
                switch(currWaveCnt){
                    case 0:  weaponId = 7; armorId = 8; powerMoveId = 9; break; // weapon, armor and powermove skill
                    case 1:  weaponId = 10; armorId = 11; powerMoveId = 12; break;
                }
                break;

    }
}

Ideally, what I want to happen, is it displays (by tracking variables) show

mob[1].wave[1].hp,armor,weapon,level... etc..

after this battle is won, then move to the next wave

mob[1].wave[2].hp,armor,weapon,level .. etc..

I tried this on pascal, qb64 and php, works fine, but I want it in JS, And the array part is stumping me.

thanks

ktilcu · Accepted Answer · 2019-04-26 13:22:51Z

4

If I understand correctly, You want multiple mobs. Each with multiple waves. Each wave has multiple characters. Each character has attributes.

It sounds like you want a mix of arrays and objects.

const mob = [
  { wave: [{ weapon: "foo", hp: 10 }, { weapon: "bar", hp: 20 }] },
  { wave: [{ weapon: "baz", hp: 30 }, { weapon: "quux", hp: 40 }] }
];

With this structure you can access the data as indicated above:

mob[1].wave[1].hp // 40

or

mob[0].wave[0].weapon // foo

edited Apr 26, 2019 at 13:22

answered Apr 26, 2019 at 13:14

ktilcu

3,1381 gold badge20 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jake Stone Over a year ago

oh my!!! I had that, but the wrong braces after mob = [ I had mob = {. duh. TYVM. That will give me something to go on. What is the diff between using var and const. isn't const static? As throughout the game the hp will need to change.

ktilcu Over a year ago

const means you can't reassign but you can definitely modify the contents.

Jake Stone Over a year ago

Well shoot! thank you very much. I was staring at this for like a week off and on at that one spot. Best answer - thanks!!

Shilly · Accepted Answer · 2019-04-26 13:33:53Z

1

Just apply some OOP principles. One battle has 10 waves, each wave has 15 monsters and 5 items.

So you can create classes for all of these concepts and use them that way.

Or you could model the entire battle as an array containing objects:

const state = {
    active_wave: null,
    monsters: [],
    wave_number: 0
};

const battle_model = [
    {
        id: 14574125754,
        type: "wave",
        criteria: [
            {
                id: 213156421,
                type: "criterium",
                description: "Defeat at least 50% of all monsters.",
                validate: state => state.monsters.length <= state.active_wave.monsters.length / 2
            },
            {
                id: 213156422,
                type: "criterium",
                description: "Kill the boss monster.",
                validate: state => !state.monsters.includes( monster => monster.type === "boss" )
            }
        ],
        monsters: [
            {
                id: 789545,
                type: "monster",
                power: 10,
                health: 15
            },
            {
                id: 789546,
                type: "boss",
                power: 50,
                health: 200
            },
        ]
    },
    {
        id: 14574125755,
        type: "wave",
        criteria: [

        ],
        monsters: [

        ]
    }   
];

const check_criteria = () => state.active_wave.criteria.every( criterium => criterium.validate( state ));

const start_wave = ( state, wave ) => {
    state.active_wave = wave;
    state.monsters = JSON.parse(JSON.stringify( wave.monsters ));
    state.wave_number = state.wave_number + 1;
    return state;
};

By seperating the current active wave and the entire battle plan, you don't actually ever need to write wave[1].monster[3].hp or similar, since activating a wave just copies all the relevant wave information to the active state.

Any changes in HP and such, can be made inside the state.monsters array, so we have both the original monster and a copy to work on.

edited Apr 26, 2019 at 13:33

answered Apr 26, 2019 at 13:25

Shilly

8,5991 gold badge20 silver badges24 bronze badges

7 Comments

ktilcu Over a year ago

That last line is slightly inaccurate in a very dangerous way. If you edit the monster's hp in the copied state.monsters you are still editing the original. The ... spread operator copies non-primitive types by reference. const omg = {monsters: [{hp:20}]}; const b = [...omg.monsters]; b[0].hp = 30; omg.monsters[0].hp //30

Shilly Over a year ago

Changed to the JSON.parse cloning method.

Jake Stone Over a year ago

This one is good too, however might be a little too much coding to accomplish the same thing that @ktilcu was able to do, in short. It was a little more challenging than I thought, as I read JS is not much on arrays like other languages. Sadly, I am not much on OOP either LOL. old habits.

ktilcu Over a year ago

To be clear. JS is huge on arrays! There are a ton of array methods. There could be more but cest la vie. Shilly's answer is good looking forward to how you will manage that state, update it and use it in the game. Mine is very focused on answering your question.

Shilly Over a year ago

If you like creating games in JS, I would strongly advice reading eloquentjavascript.net/2nd_edition/07_elife.html Coding that simulation taught me alot about how a good structure can make coding 'complicated' interactions more easily.

|

Collectives™ on Stack Overflow

Game Dev JS Storing objects to Arrays

2 Answers 2

3 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related