減慢JavaScript！我如何形成setInterval或setTimeout調用？

我在做一個豬的遊戲。整個遊戲和代碼在這裏：http://cisp362.info/johng/CISP362_Pig/Pig.html 我的問題是，電腦播放器播放如此之快，你不能看到列的顏色變化，所有的卷看起來像他們一次發生。我知道setInterval和setTimeout是我可以用來減慢速度的唯一東西，但我無法弄清楚如何重新排列我的代碼以使其工作，因爲它的循環取決於變量thisRoll的結果。我嘗試使用setTimeout，但它有不可預知的結果，因爲其餘的代碼一直在運行，並且不會等待thisRoll用rollDie()更改。我嘗試使用setInterval代替do while循環，但我無法弄清楚如何合併條件語句和/或如何在後來運行清理代碼。我只是希望它運行得更慢。也許我只是盯着這個太久了。減慢JavaScript！我如何形成setInterval或setTimeout調用？

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

來源

2013-10-15 jgrant

這裏有一些關於這個問題的答案 http://stackoverflow.com/questions/3048005/document-onclick-settimeout-function-javascript-help – chiliNUT

我理解了它使用的是什麼我這個鏈接上找到：http://nokarma.org/2011/02/02/javascript-game-development-the-game-loop/

的JavaScript樣本：

function get_random_color() { 
    var letters = 'ABCDEF'.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); 
}

以及相應的HTML文件：

<!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>

來源

2013-11-03 00:00:33 jgrant

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

來源

2013-10-15 05:39:59

減慢JavaScript！我如何形成setInterval或setTimeout調用？

回答

相關問題