0

我正在使用 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 文件中

有谁知道为什么不调用此函数，以及如何确保调用它？

4

3 回答 3

2

后面加分号：

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;

于 2013-02-15T10:07:35.167 回答
0

您需要确保在您的 html 文件中包含此之前的另一个 javascript 文件，然后一切都应该正常工作。还要确保你用 a 关闭你的函数体，}尽管我觉得这是一个复制粘贴错误。

正如其他人所解释的那样，您需要；在javascript中结束每个语句。

于 2013-02-15T10:08:33.107 回答
0

与其在您的 javascript 代码中包含如此长的应用程序特定的 id 名称列表，不如考虑通过它们共有的类来获取这些 html 元素。

<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 添加到源列表来确保预加载某些内容。而且您的代码仍然更加灵活，因为您可以在任何其他项目中简单地使用它而无需对其进行任何更改。

于 2013-02-15T10:25:10.827 回答