Question

我在HTML5 Canvas Cordova中制作了一款游戏。它工作正常，但是“跳转”等实例在第一次引起轻微延迟，然后第二次正常工作。我认为这与新的动画图像“加载它”有关。有没有办法在游戏开始之前从一开始就加载所有内容（例如加载屏幕）？提前谢谢！

Answer 1

有第三方工具允许您这样做，我过去使用Modernizr并对此非常满意。它有一个名为load的调用，允许您提取资源，然后提供在加载所有资源时调用的回调。

因此，一个简单的案例可能如下所示：

Modernizr.load([
    {
        load: [ 'preload!scripts/myscript1.js', 'images!image/myimage.jpeg' ],
        complete: function () {
            console.log('Everything is loaded!');
            initMyThing();
        }
    }
]);

您可以立即运行加载屏幕脚本（加载一些微不足道的事情），然后在complete函数中破坏加载屏幕并启动游戏。

Answer 2

我不知道Cordova，但几个月前我做了一个HTML5 game（但是使用DOM，而不是Canvas），我使用AJAX调用来加载我想要的所有文件。

1）服务器端： A script which create a JSON List containing all URLs of the files needed

所以像[＆＃39; /assets/img1.png' ;,＆＃39; /assets/sound.mp3' ;, ...]

这样的列表

2）a）客户方： AJAX calls the server script

2）b）中 Once the list is received make a GET request for each URL of the list

您可以通过存储列表长度来跟踪加载，并在每次收到文件时将其递增，currentFileCount == totalFileCount，下载完成后，您可以初始化游戏。

由于GET获取的文件是由您的浏览器缓存的，因此下次您想要加载游戏时，如果文件存在，浏览器将首先检查缓存，如果不存在，它将会提出要求。

（StackOverflow的文件有点长，但您可以查看我创建的LoadingManager，它还跟踪每个文件的进度，法语评论，抱歉）。

我希望这会对你有所帮助。

Answer 3

使用以下代码：

function init()
{
    // load stuff here - page has loaded
    // loop through images using an array and don't call the rest of the functions until they have all loaded
}
// browsers with modern versions
if (window.addEventListener)
{
    window.addEventListener("load", init);
}
// other browsers / earlier versions like Internet Explorer pre- 11
else if (window.attachEvent)
{
    window.attachEvent("load", init);
}

重要的是要注意你可以做window.onload或使用插件，但

Answer 4

我想在开始游戏之前加载我的图像，这是我的代码

var images = [];
for (let imageNumber = 0; imageNumber < (rowsNumber * colsNumber) / 2; imageNumber++) {
    image = new Image();
    image.src = './assets/' + imageNumber + '.png';
    images[imageNumber] = image;

}

如何在开始之前加载HTML5 Canvas游戏？

4 个答案: