私は JavaScript でブラックジャック ゲームに取り組んでおり、次の機能があります。
function loadImages(){
var imagesNum = 0;
var imagesLoaded = 0;
//make sure the cardRects array is 0 before repopulating
while(cardRects.length > 0){
cardRects.pop();
cardImages.pop();
}
for(var i = 0; i <= playerNum; i++){
cardRects[i] = [];
cardImages[i] = [];
for(var j = 0; j < playerHands[i].length; j++){
imagesNum++;
}
}
for(var i = 0; i <= playerNum; i++){
for(var j = 0; j < playerHands[i].length; j++){
cardImages[i][j] = new Image();
cardImages[i][j].onload = function(){
imagesLoaded++;
console.log("imagesLoaded = " + imagesLoaded + " and imagesNum = " + imagesNum);
if(imagesLoaded == imagesNum){
console.log("Images loaded!");
draw();
}
}
if(i == playerNum && j == 1 && !showdown){
console.log("Not showdown yet, so only see back of dealer's 2nd card.");
cardImages[i][j].src = "images/cards/backsandpips/Red_Back.png";
}
else{
console.log("Assigning card image...");
cardImages[i][j].src = playerHands[i][j].imageFile;
}
}
}
}
ご覧のとおり、すべてのカード イメージが読み込まれた後、draw()
関数が呼び出されます。関数の最後にはdraw()
、ラウンドが終了した場合に賞金が計算され、結果とともにメッセージが表示される部分が含まれています。これは約半分の確率で失敗します。私の最近のテストでは、コンソールに次のように表示されます。
これに続いて:
imagesLoaded = 1 and imagesNum = 24
...
imagesLoaded = 23 and imagesNum = 24
それから
imagesLoaded = 1 and imagesNum = 24
...
imagesLoaded = 24 and imagesNum = 24
loadImages()
一度に一度だけ呼び出されるので、私の2つの質問は次のとおりです。
(1) コンソールに最初に「[24] カード イメージの割り当て中...」が2 回表示されるのはなぜですか? 予想される一連のイベントは、このメッセージが 1 回表示された後、実際に画像をロードすることです。(2) イメージのロード プロセスが再開され、最終的に完了する前に、24 個のイメージのうち 23 個しかロードされないのはなぜですか?
このエラーloadImages()
は、ラウンドの最後に が呼び出されたときにのみ発生し、他の時点では発生しません。
私が気付いていない JavaScript での画像の読み込みに複雑さはありますか?