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

时间:2016-03-31 22:31:07

标签: html5 ipad audio canvas preloading

我正在尝试使用flash cs6和createjs制作游戏。当我在本地测试它时(意思是,我点击输出中的.html文件)它可以正常工作。

然后我将它上传到Newgrounds并用我的电脑预览(Windows 8.1,谷歌浏览器)并且游戏卡在白色屏幕上 - 这意味着预加载功能无法正常工作?

然后我在我的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>

0 个答案:

没有答案