2017-04-06 8 views
2

javascriptでブラックジャックゲームを構築しています。ユーザーが「ヒットミー」をクリックすると、カードが処理され、カードの画像がcurrent_hand divに追加されます。カードが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> 

私は私はそれが道Iを機能しています知っているカードはそう表示さんif (result == "YOU LOSE")後、すべてをコメントアウトする場合など、アラート機能、前に呼び出すために別の「リセット」機能を作り、周りのものを移動しようとしましたそれが欲しい。

+0

もし正しく動作しているのであれば、プレイヤーが見るのが速すぎるだけです... – Alfabravo

+0

to @ 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 = "";   
 
    }

コンソールログが失われ、画像が表示されている場合は、 alert()の呼び出しがJSスレッドを一時停止しているため、画像がロードされないことを100%確信できます。このような場合は、あなたのメッセージを表示するために警告以外のものを使用する必要があります。