javascript 不更新 p 标签的文本

Question

我使用html、css 和javascript 制作了一个简单的游戏。游戏界面图片如下图

这个游戏的运作

在这个游戏中，每位玩家轮到自己掷骰子。骰子上的数字被添加到当前玩家的当前得分。每个玩家掷骰子，直到骰子掷到 1 或玩家点击 hold score 标签。

如果骰子掷到1，则当前玩家的当前分数变为0。在他的回合中，任何玩家都可以选择保持得分，这会将玩家的当前得分添加到他的总得分中，显示在上方当前得分，然后轮到下一位玩家。

第一个总分等于或大于 100 的玩家获胜。任何玩家的胜利都由javascript 的alert 方法指示。

问题

案例:

考虑这样一种情况，玩家 1 的总分是95，然后玩家 1 掷骰子骰子掷到 5。现在player 1选择hold score，所以player 1的total score和current score 应该加起来，总分 应该变成 100，然后生成警报，指示 玩家 1 赢了。 问题 是，当任何玩家的总分等于或大于 100 时，警报会正确生成，但在生成警报之前，该玩家的总分 应该更新，但不会更新。

PS. 当任何玩家的 total score 不大于或等于 100 时，该玩家的 total score 更新没有任何问题.问题似乎只有在 total score 变得大于或等于 100

时才会出现

需要帮助确定导致此问题的原因。

以下代码负责在玩家选择hold score时更新每个玩家的总分

document.getElementById('hold-score-label').onclick = function () {

    //take current score and add it to total score of current player
    var playerTotalScore = document.getElementById('player'+playerTurn+'-dice-roll-score');
    playerTotalScore.textContent = currentScoreVal + parseInt(playerTotalScore.textContent);

    //set current score of current player to zero
    document.getElementById('p'+playerTurn+'-current-score-value').textContent = 0;

    //CHECK IF ANY PLAYER HAS WON
    if(parseInt(playerTotalScore.textContent) >= 100) {
        checkWin(playerTurn);
    }

    //change player turn
    changePlayerTurn();
};

完整的Javascript代码

var playerTurn = 1;   //1 indicates current turn is of player1
var currentScoreVal = 0; //variable to store current score for "hold score" click event

//HIDE THE PLAYER TURN IMAGE OF PLAYER 2
document.getElementById('player2-turn-img').style.display = 'none';

//ADD ACTIVE CLASS TO PLAYER1
document.getElementById('main-container').classList.add('activePlayer1');

//SET CLICK LISTNER FOR 'ROLL DICE' LABEL
document.getElementById('roll-dice-label').onclick = function() {

    var randomNum = Math.floor((Math.random() * 6) + 1);
    document.getElementById('dice-image').src = "Images/dice"+randomNum+".png";
    setScores(randomNum, playerTurn);
};

//FUNCTION THAT UPDATES CURRENT PLAYER'S SCORES
//RANDOM NUMBER GENERATED IN PREVIOUS FUNCTION IS PASSED AS ARGUMENT TO THIS FUNCTION
//CURRENT PLAYER TURN IS ALSO PASSED TO THIS FUNCTION
function setScores (diceNumber , currentPlayer) {

    //GET HTML ELEMENT OF CURRENT SCORE BASED ON CURRENT PLAYER
    var currentScore = document.getElementById('p'+currentPlayer+'-current-score-value');

    //GET HTML ELEMENT OF TOTAL SCORE BASED ON CURRENT PLAYER
    var diceRollScore = document.getElementById('player'+currentPlayer+'-dice-roll-score');

    if(diceNumber > 1) {
        currentScoreVal = parseInt(currentScore.textContent) + diceNumber;
        currentScore.textContent = currentScoreVal;
    }
    else {
        //SET CURRENT SCORE OF CURRENT PLAYER TO ZERO
        currentScore.textContent = 0;

        changePlayerTurn();
    }
}

//FUNCTION TO CHECK IF CURRENT PLAYER'S SCORE IS GREATER THAN 100 OR NOT
function checkWin(currentPlayer) {
    alert('Player '+ currentPlayer +' has won');
    resetGame();
}

//FUNCTION THAT RESETS GAME TO ITS INITIAL STATE
function resetGame() {
    //reset the current player turn indicator image
    document.getElementById('player1-turn-img').style.display = "inline-block";
    document.getElementById('player2-turn-img').style.display = 'none';

    //set dice image to 'dice1.png'
    document.getElementById('dice-image').src = "images/dice1.png";

    //set current scores of both players to zero
    document.getElementById('p1-current-score-value').textContent = 0;
    document.getElementById('p2-current-score-value').textContent = 0;

    //set total score of both players to zero
    document.getElementById('player1-dice-roll-score').textContent = 0;
    document.getElementById('player2-dice-roll-score').textContent = 0;

    //set active player background color to player1 panel
    document.getElementById('main-container').classList.remove('activePlayer2');
    document.getElementById('main-container').classList.add('activePlayer1');
}

//CLICK LISTNER FOR HOLD SCORE LABEL
document.getElementById('hold-score-label').onclick = function () {

    //take current score and add it to total score of current player
    var playerTotalScore = document.getElementById('player'+playerTurn+'-dice-roll-score');playerTotalScore.textContent = currentScoreVal + parseInt(playerTotalScore.textContent);

    //set current score of current player to zero
    document.getElementById('p'+playerTurn+'-current-score-value').textContent = 0;

    //CHECK IF ANY PLAYER HAS WON
    if(parseInt(playerTotalScore.textContent) >= 100) {
        checkWin(playerTurn);
    }

    //change player turn
    changePlayerTurn();
};

//FUNCTION TO CHANGE CURRENT PLAYER TURN
function changePlayerTurn() {
    if(playerTurn === 1) {
        playerTurn = 2;
        document.getElementById('main-container').classList.add('activePlayer2');
        document.getElementById('player1-turn-img').style.display = "none";
        document.getElementById('player2-turn-img').style.display = 'inline-block';
    }
    else {
        playerTurn = 1;
        document.getElementById('main-container').classList.remove('activePlayer2');
        document.getElementById('player1-turn-img').style.display = "inline-block";
        document.getElementById('player2-turn-img').style.display = 'none';
    }
}

您可以自己测试这个游戏: codepen

请注意，上面界面中显示的图像不会显示。所以骰子图像不会显示，但当您点击 roll dice 标签时它会更新分数值。

Answer 1

我认为这是在页面更新之前警报阻塞主线程的问题。

为避免这种情况，请尝试将 checkWin 函数调用置于窗口超时中，从而有效地将显示的警报与页面更新分离。

setTimeout(function(){checkWin(playerTurn)}, 10);

如果您使用页面提醒(有效地在不会阻止页面更新的 div 中显示结果)，那么您将能够避免这个问题。