Question

我正在使用HTML5画布创建一个简单的基于Web的游戏。

目前，当我的页面加载时，许多图像会显示在画布上的随机位置，用户需要将其拖动到正确的位置。

这很好，但是我想在画布上添加一个开始按钮，用户在显示这些图像之前必须单击它，以便开始玩游戏。

我在index.html页面中有以下JS函数：

window.onload = function(){
    var sources = [];
        sources[0] = document.getElementById("building").src,
        sources[1] = document.getElementById("chair").src,
        sources[2] = document.getElementById("drink").src,
        sources[3] = document.getElementById("food").src,
        sources[4] = document.getElementById("fridge").src,
        sources[5] = document.getElementById("land").src,
        sources[6] = document.getElementById("money").src,
        sources[7] = document.getElementById("oven").src,
        sources[8] = document.getElementById("table").src,
        sources[9] = document.getElementById("van").src,

        sources[10] = document.getElementById("burger").src,
        sources[11] = document.getElementById("chips").src,
        sources[12] = document.getElementById("drink").src,
        sources[13] = document.getElementById("franchiseFee").src,
        sources[14] = document.getElementById("wages").src,

        sources[15] = document.getElementById("admin").src,
        sources[16] = document.getElementById("cleaners").src,
        sources[17] = document.getElementById("electricity").src,
        sources[18] = document.getElementById("insurance").src,
        sources[19] = document.getElementById("manager").src,
        sources[20] = document.getElementById("rates").src,
        sources[21] = document.getElementById("training").src,
        sources[22] = document.getElementById("water").src,

        sources[23] = document.getElementById("burger").src,
        sources[24] = document.getElementById("chips").src,
        sources[25] = document.getElementById("drink").src,

        sources[26] = document.getElementById("creditors").src,
        sources[27] = document.getElementById("electricity").src,
        sources[28] = document.getElementById("food").src,
        sources[29] = document.getElementById("hirePurchase").src,
        sources[30] = document.getElementById("loan").src,
        sources[31] = document.getElementById("overdraft").src,
        sources[32] = document.getElementById("payeTax").src,
        sources[33] = document.getElementById("tax").src

    drawStartButton();
    loadImages(sources, drawImage);
    drawGameElements();
    drawDescriptionBoxes();

};

正在调用对此函数末尾的其他函数的所有函数调用，并执行其预期的函数，但我刚添加的drawStartButton();函数除外。

我不太明白为什么没有调用这个函数... drawStartButton();的代码位于单独的JS文件中，如下所示：

function drawStartButton(){
            image.onload = function(){
                context.drawImage(image, 410.5, 120);
            };
            image.src = startButton;

我是否需要引用存储该功能的文件？我还没有完成其他函数调用，它们与drawStartButton() ...

在同一个JS文件中

有没有人知道为什么没有调用这个函数，以及如何确保它被调用？

Answer 1

添加分号：

sources[33] = document.getElementById("tax").src

（只是好习惯）

此外，在尝试获取src之前，请确保所有这些元素都存在（并且已加载）（但您已经有onload，所以这应该没问题。）

现在，您可以简化所有这些getElementById：

var sources = [],
    sourceNames = [
    'building',  'chair',       'drink',       'food',         'fridge',  'land',      'money',    'oven', 'table', 'van',
    'burger',    'chips',       'drink',       'franchiseFee', 'wages',                
    'admin',     'cleaners',    'electricity', 'insurance',    'manager', 'rates',     'training', 'water',
    'burger',    'chips',       'drink',                       
    'creditors', 'electricity', 'food',        'hirePurchase', 'loan',    'overdraft', 'payeTax',  'tax'
];

for(var i = 0, l = sourceNames.length; i < l; i++){
    sources[i] = document.getElementById(sourceNames[i]).src;
}

由于getElementById之一返回null，您的代码很可能会中断（另外，你在那里有重复，是故意的吗？）

您可以使用此循环来测试：

for(var i = 0, l = sourceNames.length; i < l; i++){
    console.log('Getting ' + sourceNames[i]);
    sources[i] = document.getElementById(sourceNames[i]).src;
}

你会看到最后获得的元素。

您还必须确保首先加载包含drawStartButton()函数的文件，否则此函数将不存在。

最后：

将image.src = startButton;替换为image.src = startButton.src;

Answer 2

你需要确保在你的html文件中包含其他javascript文件，然后一切都应该正常工作。另外，请确保使用}关闭函数体，尽管我感觉这是一个复制粘贴错误。

正如其他人已经解释过你的需要;以javascript结束每个语句。

Answer 3

您应该考虑通过他们共同拥有的类来抓取这些html元素，而不是在您的javascript代码中包含这么长的应用程序特定ID列表。

<img class="preload_image" src"...">

和你的javascript类似

var preload_images = document.getElementsByClassName('preload_image');
var sources = [];
for(var i = 0;i < preload_images.length;i++){
sources.push(preload_images[i].src);
}

这样可以保持代码清洁，只需在标记中添加一个类而不是添加标记然后必须转到js文件并将标记的ID添加到源列表中，就可以确保预先加载代码。而且您的代码仍然更加灵活，因为您可以在任何其他项目中使用它而无需对其进行任何更改。

JavaScript函数调用显然没有触发

3 个答案: