Question

我正在使用JavaScript进行Blackjack游戏，我有以下功能：

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()函数的结尾包含一个部分，如果该轮结束，则计算奖金并显示带有结果的消息。大约一半时间失败。在我最近的测试中，控制台中显示以下内容：

enter image description here

接下来是：

imagesLoaded = 1 and imagesNum = 24
...
imagesLoaded = 23 and imagesNum = 24

然后

imagesLoaded = 1 and imagesNum = 24
...
imagesLoaded = 24 and imagesNum = 24

loadImages()一次只调用一次，所以我的两个问题是：

（1）为什么控制台首先显示“[24]分配卡片图像......”两次？预期的事件过程是它一次显示此消息并直接实际加载图像。（2）为什么在图像加载过程重新启动并最终完成之前，24个图像中只有23个被加载？

我应该说这个错误只发生在一轮结束时调用loadImages()而不是任何其他点。

在JavaScript中加载我不知道的图像有些复杂吗？

Answer 1

首先，看起来控制台多次显示“[24]分配卡片图像...”，因为只要我不等于playerNum，就会显示该文本。你的内部for循环运行这段代码，当第一个for循环没有达到i == playerNum的点时，在playerHands中显示每张卡的文本。

至于加载23/24图像然后重新启动的问题，我只能提供在打印imagesLoaded和imageNum的同一点将i和j的值打印到控制台的调试建议。这样，您可以在加载所有24个图像之前查看整个for循环是否重新启动。

祝你好运！

用JavaScript加载图片

1 个答案: