Making a combat simulator in JavaScript, having trouble not displaying the whole simulation at once

Question

This is my code for one of the players.

var jintoki = {
    name: 'jintoki',
    hp: 50,

    stats: function() {
        console.log('Gintoki');
        console.log('HP: ' + jintoki.hp);
    },

    attack: function() {
        console.log('Jintoki attacks Hiji and deals ' + attack + ' pts of damage!');
    }
};

This is my code for the simulation.

$('#start').on('click', function() {

while(jintoki.hp > 0 && hiji.hp > 0) {
    console.log('---------------------');
    jintoki.stats();
    console.log('*********************');  // displays stats
    hiji.stats();
    console.log('---------------------'); 

    attack = Math.floor((Math.random() * 10) + 1); // random attack damage
    jintoki.attack();
    hiji.hp -= attack;

    attack = Math.floor((Math.random() * 10) + 1); // random attack damage
    hiji.attack();
    jintoki.hp -= attack;

    if (jintoki.hp <= 0) {
        console.log('Jintoki is dead! Hiji wins!!');
    };

    if (hiji.hp <= 0) {
        console.log('Hiji is dead! Gintoki wins!!');
    };


    }
});

The problem is that when the button with id #start is clicked, the whole simulation runs from start to end. I want it so that the simulation displays the stats, waits a second or so, then displays the first attack, waits a second or so, then displays the next attack. How do I do this? I also tried doing

setTimeout(jintoki.attack(), 1000);

but it doesn't work.

score 1 · Accepted Answer · answered Mar 19 '16 at 06:22

First, extract the logic for single step to separate function:

function fight(){
    if(jintoki.hp > 0 && hiji.hp > 0){
        console.log('---------------------');
        jintoki.stats();
        console.log('*********************');  // displays stats
        hiji.stats();
        console.log('---------------------'); 

        attack = Math.floor((Math.random() * 10) + 1); // random attack damage
        jintoki.attack();
        hiji.hp -= attack;

        attack = Math.floor((Math.random() * 10) + 1); // random attack damage
        hiji.attack();
        jintoki.hp -= attack;

        if (jintoki.hp <= 0) {
            console.log('Jintoki is dead! Hiji wins!!');
            return true;    // fight is over
        };

        if (hiji.hp <= 0) {
            console.log('Hiji is dead! Gintoki wins!!');
            return true;    // fight is over
        };
        return false;   // fight is not over
    }
}

Then, create a function that executes fight, checks the result and sets timeout for another round if necessary:

function combatRound(){
    var isGameOver = fight();       // fight and check if the game is over
    if(isGameOver === false){       // if the game is not over ...
        setTimeout(combatRound, 1000);       // schedule another round
    }
}

And then launch the combat:

combatRound();

didn't emphasis this, but not his `setTimeout` vs yours. In yours, you were *calling* your function and then passing the results of that call to setTimeout. In his, he passing the `combatRound` function itself to `setTimeout`. — Jeremy J Starcher, Mar 19 '16 at 08:00
Why is there a triple equals sign for isGameOver === false? what's the difference? — user298519, Mar 20 '16 at 00:49
@user298519 see http://stackoverflow.com/questions/523643/difference-between-and-in-javascript for the difference between `==` and `===` — dotnetom, Mar 20 '16 at 06:21

Making a combat simulator in JavaScript, having trouble not displaying the whole simulation at once

1 Answers1