0

我正在做一个猪游戏。整个游戏和代码在这里：http ://cisp362.info/johng/CISP362_Pig/Pig.html 我的问题是电脑播放器玩得太快了，你看不到柱子颜色的变化，所有的滚动看起来都像是发生了立刻。我知道 setInterval 和 setTimeout 是我唯一可以用来减慢速度的方法，但我不知道如何重新排列我的代码以使其工作，因为它处于一个取决于变量结果的循环中thisRoll。我尝试使用 setTimeout，但它具有不可预测的结果，因为其余代码继续运行并且不等待thisRoll更改rollDie(). 我尝试使用 setInterval 代替 do while 循环，但我不知道如何合并条件语句和/或之后如何运行清理代码。我只是想让它运行得慢一点。也许我只是盯着这个太久了。

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

2 回答 2

1

我用我在这个链接上找到的东西弄清楚了：http: //nokarma.org/2011/02/02/javascript-game-development-the-game-loop/

javascript示例：

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

以及对应的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-03T00:00:33.377 回答
0 
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-15T05:39:59.663 回答