2017-04-06 142 views
2

我正在用JavaScript構建二十一點遊戲。當用戶點擊「打我」時,一張卡被處理,並且卡的圖像被附加到current_hand格。當一張卡使用戶超過21點時,該卡是而不是在警告告訴他們丟失之前附加到該div,因此他們不能看到他們的最後一張卡是什麼。我很難理解在添加卡之前爲什麼會發生警報。JS執行命令

有問題的代碼位於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")卡後沒有顯示,所以我知道它的運作我的方式想要它。

+0

如果可能是正確的,那只是玩家看到...... – Alfabravo

+0

到@ Alfabravo的觀點太快了 - 如果你將警報包裝在'setTimeout()'中,它是否會在警報之前顯示該卡片? – Adam

+0

圖像需要時間加載。你有沒有試過只顯示文字? – j08691

回答

0

讓JS在新遊戲開始的時候清除手,而不是在丟失檢查完成時。這是您的罪魁禍首:

el.innerHTML = ""; 
0

未經測試你的代碼,我會嘗試一下本作開發用途:

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

如果控制檯日誌失去的圖像顯示,你可以100%確定對alert()的調用是掛起JS線程,導致圖像永遠不會被加載。如果是這種情況,您將不得不使用警報以外的內容來顯示YOU LOSE消息。