HTML5 画布游戏甚至不会在 PC 上的 Newgrounds 上预加载，但它可以在 iPad 上运行。答案

【问题标题】：HTML5 canvas game won't even preload on Newgrounds on pc, but it works on iPad.HTML5 画布游戏甚至不会在 PC 上的 Newgrounds 上预加载，但它可以在 iPad 上运行。
【发布时间】：2016-03-31 22:31:06
【问题描述】：

我正在尝试使用 flash cs6 和 createjs 制作游戏。当我在本地测试它时（意思是，我点击输出中的 .html 文件）它工作得很好并且符合预期。

然后我把它上传到Newgrounds并用我的电脑（windows 8.1，google chrome）预览了它，游戏卡在白屏上——这意味着预加载功能不能正常工作？

然后我在我的 iPad 上预览了它（总是来自 Newgrounds），它在 Safari 上运行——即使没有音频。

然后我尝试在 Newgrounds 上重新上传它 - 但这次我从游戏中删除了所有声音 - 即使在我的计算机上预览它也能正常工作。

从这一切中，我推断当我尝试在 Newgrounds 上使用我的电脑启动游戏时，肯定存在一些涉及音频预加载的冲突代码。我的问题是：

1) 当我在 Newgrounds 上预览我的游戏时，如果其中有音频并且我使用我的电脑，为什么它甚至无法加载？（请记住，如果我用 iPad 在 newgrounds 上预览它就可以工作，如果我完全删除声音文件，它甚至可以在我的电脑上工作）

2) 为什么在 Ipad 上无法播放音频？正如其他地方所建议的那样，我在游戏的第一帧添加了一个 onclick 功能来启动声音；该功能有效，但声音无法启动。

提前感谢您的帮助，请注意，我没有使用 Javascript 的经验（我曾经编写过的代码都是 Actionscript），但我愿意学习并尽力而为。

这是我的 index.html 文件中的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CreateJS export from testgame</title>

<script src="http://code.createjs.com/easeljs-0.6.0.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.4.0.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.6.0.min.js"></script>
<script src="http://code.createjs.com/preloadjs-0.3.0.min.js"></script>
<script src="http://code.createjs.com/soundjs-0.4.0.min.js"></script>
<script src="testgame.js"></script>

<script>
var canvas, stage, exportRoot;

function init() {
canvas = document.getElementById("canvas");
images = images||{};

var manifest = [
    {src:"images/Bitmap10.png", id:"Bitmap10"},
    {src:"images/Bitmap12.png", id:"Bitmap12"},
    {src:"images/Bitmap13.png", id:"Bitmap13"},
    {src:"images/Bitmap14.png", id:"Bitmap14"},
    {src:"images/Bitmap15.png", id:"Bitmap15"},
    {src:"images/Bitmap16.png", id:"Bitmap16"},
    {src:"images/Bitmap17.png", id:"Bitmap17"},
    {src:"images/Bitmap18.png", id:"Bitmap18"},
    {src:"images/Bitmap19.png", id:"Bitmap19"},
    {src:"images/Bitmap20.png", id:"Bitmap20"},
    {src:"images/Bitmap21.png", id:"Bitmap21"},
    {src:"images/Bitmap22.png", id:"Bitmap22"},
    {src:"images/Bitmap23.png", id:"Bitmap23"},
    {src:"images/Bitmap24.png", id:"Bitmap24"},
    {src:"images/Bitmap30.png", id:"Bitmap30"},
    {src:"images/Bitmap31.png", id:"Bitmap31"},
    {src:"images/Bitmap32.png", id:"Bitmap32"},
    {src:"images/Bitmap33.png", id:"Bitmap33"},
    {src:"images/Bitmap34.png", id:"Bitmap34"},
    {src:"images/Bitmap35.png", id:"Bitmap35"},
    {src:"images/Bitmap36.png", id:"Bitmap36"},
    {src:"images/Bitmap37.png", id:"Bitmap37"},
    {src:"images/Bitmap38.png", id:"Bitmap38"},
    {src:"images/Bitmap39.png", id:"Bitmap39"},
    {src:"images/Bitmap4.png", id:"Bitmap4"},
    {src:"images/Bitmap5.png", id:"Bitmap5"},
    {src:"images/Bitmap6.png", id:"Bitmap6"},
    {src:"images/Bitmap7.png", id:"Bitmap7"},
    {src:"images/Bitmap8.png", id:"Bitmap8"},
    {src:"images/Bitmap9.png", id:"Bitmap9"},
    {src:"sounds/siglaintro.mp3", id:"siglaintro"},
    {src:"sounds/siglaloop.mp3", id:"siglaloop"}
];

var loader = new createjs.LoadQueue(false);
loader.installPlugin(createjs.Sound);
loader.addEventListener("fileload", handleFileLoad);
loader.addEventListener("complete", handleComplete);
loader.loadManifest(manifest);
}

function handleFileLoad(evt) {
if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}

function handleComplete() {
exportRoot = new lib.testgame();

stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();

createjs.Ticker.setFPS(24);
createjs.Ticker.addEventListener("tick", stage);
}

function playSound(id, loop) {
createjs.Sound.play(id, createjs.Sound.INTERRUPT_EARLY, 0, 0, loop);
}
</script>
</head>

<body onload="init();" style="background-color:#D4D4D4">
<canvas id="canvas" width="820" height="480" style="background-color:#ffff66"></canvas>
</body>
</html>

【问题讨论】：

标签： html ipad audio canvas preloading

【解决方案1】：

问题已解决。我所要做的就是在 html 代码中使用最新版本的 createjs 工具，如下所示：

<script src="http://code.createjs.com/easeljs-0.7.1.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.5.1.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.7.1.min.js"></script>
<script src="http://code.createjs.com/preloadjs-0.4.1.min.js"></script>
<script src="http://code.createjs.com/soundjs-0.5.2.min.js"></script>

所以，问题解决了，请无视我，随便写代码

【讨论】：