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

Answer 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.

Answer 2

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