问题

Question

我使用html，css和javascript制作了一款简单的游戏。游戏界面的图像显示在

下面

使用此游戏

在这个游戏中，每个玩家轮到掷骰子。骰子上的数字会被添加到当前玩家current score中。每个玩家掷骰子直到骰子滚动到1或者玩家点击hold score标签。

如果骰子滚动到1，则当前玩家的current score变为0。在轮到他的时候，任何玩家都可以选择hold score，将current score添加到total score current score，显示在100上方，然后是下一位玩家轮到他了。

总得分等于或大于alert的第一位玩家获胜。任何玩家的胜利均由javascript player 1方法表示。

问题

示例案例：

考虑total score 95 player 1为5，然后player 1掷骰子，骰子滚动到hold score的情况。现在player 1选择total score，因此current score total score和100应加起来，player 1 has won应该成为{{} 1}}然后生成警报，指示100。问题是，当任何玩家的总得分等于或大于total score时，警报会正确生成，但在生成警报之前，该玩家的{{1}应该更新哪些不会发生。

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中显示结果），那么您将能够避免此问题。

Answer 2

这是一个时间问题。更新DOM只需要比设置总分后执行的代码稍长一些。这就是为什么您的警报几乎与您等待DOM更新的时刻相同。

只需使用超时，您就会更好地了解正在发生的事情。

<SearchBar id="search" showCancel="true" cancelButtonTitle="Hide" onCancel='hideKeyboard' />

function hideKeyboard(e) {
    // it will hide the keyboard as well
    $.search.blur();
}

（警报阻止重新呈现您的DOM，并在警报后立即重置分数，因此您看不到任何更改）

javascript不更新p标签的文本

问题

2 个答案: