1

我正在用 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()一次只调用一次，所以我的两个问题是：

(1) 为什么控制台先显示“[24]Assigning card image...”两次？预期的事件过程是它显示此消息一次并直接进入实际加载图像。(2) 为什么在图像加载过程重新启动并最终完成之前，仅加载了 24 张图像中的 23 张？

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

在 JavaScript 中加载图像是否有一些我不知道的复杂性？

4

1 回答 1

0

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

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

祝你好运！

于 2013-07-18T17:45:47.963 回答