slow down javascript! how do I form setInterval or setTimeout calls?

Question

I'm making a pig game. The whole game and code is here: http://cisp362.info/johng/CISP362_Pig/Pig.html my problem is that the computer player plays so fast you can't see the column color change and all the rolls look like they happen at once. I know setInterval and setTimeout are the only thing I can use to slow it down, but I can't figure out how to rearrange my code to make it work because it's in a loop that depends on the result of the variable thisRoll. I tried using setTimeout, but it has unpredictable results because the rest of the code keeps running and doesn't wait for thisRoll to be changed with rollDie(). I tried using setInterval in place of the do while loop, but I can't figure out how to incorporate the conditional statements and/or how to run the clean up code afterward. I just want it to run slower. Maybe I've just been staring at this for too long.

function takeNPCTurn(){
    do{
        thisRoll = rollDie();
        if(thisRoll===1){
            document.getElementById("NPCRolls").innerHTML = "------------------------------------<br>You Rolled a 1 and lost your turn!<br>" + document.getElementById("NPCRolls").innerHTML
            localStorage.whosTurnIsIt = "Player";
            changeColumnColor('col1','lime');
            changeColumnColor('col2','transparent');
            runningTotal=0;
            return;
        }else{
            runningTotal += thisRoll;
            document.getElementById("NPCRolls").innerHTML = "You Rolled a " + thisRoll + ", totalling " + runningTotal+"<br>" + document.getElementById("NPCRolls").innerHTML;
        }   
    }while(runningTotal < 20 && (parseInt(document.getElementById('NPCScore').textContent) + runningTotal) < 100);

    //finish up NPC turn and switch back to player
    document.getElementById('NPCScore').textContent = parseInt(document.getElementById('NPCScore').textContent) + runningTotal;
    document.getElementById("NPCRolls").innerHTML = "------------------------------------<br>You held at " + runningTotal + ", bringing your score to " + document.getElementById('NPCScore').textContent + "<br>" + document.getElementById("NPCRolls").innerHTML;
    runningTotal=0;
    localStorage.whosTurnIsIt = "Player";
    changeColumnColor('col1','lime');
    changeColumnColor('col2','transparent'); 
    if(parseInt(document.getElementById("NPCScore").textContent) >= 100){alert (losingMessage);}
}

Here are some answers to this very question http://stackoverflow.com/questions/3048005/document-onclick-settimeout-function-javascript-help — chiliNUT, Oct 15 '13 at 05:38

score 1 · Accepted Answer · answered Nov 03 '13 at 00:00

I figured it out using what I found on this link: http://nokarma.org/2011/02/02/javascript-game-development-the-game-loop/

The javascript sample:

function get_random_color() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}

var game = { };
game.fps = 1;

//draw entities here
game.draw = function() {  
    document.getElementById("heading").style.color = get_random_color();
};

//run game logic here
game.update = function() {  
};

game.run = function() {
  game.update();
  game.draw();
};

//start the game loop
function start() {
    game._intervalId = setInterval(game.run, 1000 / game.fps);
}

//reset the burn
function reset(){
    clearInterval(game._intervalId);
}

And the corresponding html file:

<!DOCTYPE html>
<html>
    <head>
    <link rel="stylesheet" type="text/css" href="spreadingFire.css">
        <title>Spreading Fire</title>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/ocanvas/2.0.0/ocanvas.min.js"></script>
        <script type="text/javascript" src="spreadingFire.js"></script>
         <h1 id="heading" >Spreading Fire!</h1>
    </head>

    <body> 

        <canvas id="canvas"></canvas>
        <button type="button" id="bReset" onClick="reset()">Reset</button>
    </body>
</html>

score 0 · Answer 2 · answered Oct 15 '13 at 05:39

function takeNPCTurn(){
    // disable player controls here

    // roll the die for the NPC
    thisRoll = rollDie();

    // potentially show a thinking animation here

    setTimeout(function() {
        //do something after the delay here

        //when done with things the NPC does, call the function to give turn/control back to player here
    }, 250);
}

slow down javascript! how do I form setInterval or setTimeout calls?

2 Answers2