Question

我正在用javascript构建一个二十一点游戏。当用户点击“点击我”时，会发出一张卡片并将卡片的图像附加到current_hand div。当一张卡片将用户超过21分时，该卡片不会在警告告诉他们丢失之前附加到div，因此他们无法看到他们的最后一张卡片是什么。我很难理解为什么在附加卡之前发生警报。

有问题的代码位于dealCard函数的最底层。任何人都可以解释为什么会发生这种情况以及如何解决它？

<body onload="startGame()">

    <script type="text/javascript" src='cards.js' ></script>

    <button id="start" onclick="addPlayer()">Start a Game</button>
    <div id="current_hand"></div>
    <button id="hit" onclick="dealCard()">Hit Me!</button>

<script>
var sum = 0

function startGame() {
    deck = new DeckConstructor();
}

function addScore(rank) {
    var points;
    var result;
    if (rank == "k" || rank == "q" || rank == "j" || rank == "a") {
        points = 10;
    } else {
        points = Number(rank);
    }
    sum += points;
    if (sum == 21) {
        result = 'YOU WIN!';
    } if (sum > 21) {
        result = 'YOU LOSE';
    } else {
        result = sum;
    }
    return result;
}

function dealCard() {
    var result;
    var el = document.querySelector('div');
    player.dealCard();
    var suit = (player.hand[player.hand.length-1]['suit']);
    var rank = (player.hand[player.hand.length-1]['rank']);

    var src = suit[0]+rank
    el.innerHTML += '<img id='+src+' src="cards-png/'+src+'.png"</img>'; 
    ^^^^^^^^^^^this line does not seem to execute when player loses^^^^^^^^^^^
    result = addScore(rank) 

    if (result  == "YOU LOSE") {
        alert(result)            
        var el = document.querySelector('div');
        sum = 0;
        el.innerHTML = "";        
    }
    return player.hand;
}
</script>
</body>

我尝试过移动的东西，在警报功能之前调用单独的“重置”功能等。当我在if (result == "YOU LOSE")之后注释掉所有内容时，卡片会显示出来，所以我知道它的功能是我的想要它。

Answer 1

让JS在新游戏开始时放手，而不是在完成失败检查时。这是你的罪魁祸首：

el.innerHTML = "";

Answer 2

如果不测试您的代码，我会尝试将其用于开发目的：

    if (result  == "YOU LOSE") {
        console.log ("LOSE")         
        var el = document.querySelector('div');
        sum = 0;
        //el.innerHTML = "";        
    }

如果控制台记录LOSE并显示图像，则可以100％确定对alert（）的调用是否挂起JS线程，导致您的图像永远不会被加载。如果是这种情况，您将不得不使用除警报之外的其他内容来显示您丢失的消息。

JS执行顺序

2 个答案: