Question

我在画布游戏加载方面遇到问题。

我有很多图像，一个声音效果和背景音乐。在PC上一切都会很好。问题出在移动电话上，我的网络速度很慢。图像加载但游戏开始后声音和背景音乐正在下载。

代码示例：

main = getElementById('wrapp');
bg = new Image();
bg.src = 'bg.png';

msound = new Audio('main.wav');
msound.volume = .05;
msound.load();
msound.loop = true;
msound.play();

sound = new Audio('jump.wav');
sound.volume = .20;
sound.load(); 

main.addEventListener('touchstart', function() {
     sound.play();
}

//some game functions

function Update() {
    //some functions 
}

function Start() {
    Update();
    requestAnimFrame(Start);
}

如何让页面加载所有内容然后运行游戏？例如：可能有一个信息'Please Wait ...'，在加载图像和声音后，画布将显示出来。

Answer 1

这是快速肮脏的解决方案：

mainsound.addEventListener("canplay", function()
{
   mainsound.play();
   Start();
});

然而，正确的解决方案应该包括：

设计一个负责媒体加载的课程
等待加载所有媒体。（你可以使用“$（window）.load（）”和“oncanplay”事件的组合。如果你没有使用jQuery，你可以在google中查找像this这样的东西
从那里开始游戏

画布 - 慢速互联网的游戏加载

1 个答案: