我使用的平台代码：＆＃34; Sublime Text。＆＃34; 因此，每当我尝试在chrome或任何浏览器上打开我的html文件时，我的页面都会变为空白。我的最新项目我遵循与youtuber完全相同的代码，但我的页面仍然空白。问题是什么，html保存为.html，javascript保存为.js
这是我的网站代码： 索引（保存为index.html）
<!doctype html>
<html>
<head>
<title>Happy Guinea Pigs</title>
<script src="Box2dWeb-2.1.a.3.min.js"></script>
<script src="boxbox.min.js"></script>
</head>
<body>
<canvas id="game" width=640 height=380>
Text that you see if you don't support Canvas :(
</canvas>
<script src="game.js"></script>
</body>
</html>
然后是game.js
var canvasElem = document.getElementById("game");
var world = boxbox.createWorld(canvasElem);
world.createEntity({
name: "player",
shape: "circle",
radius: 1,
image: "pig.png",
imageStretchToFit: true,
density: 4,
x: 2,
onKeyDown: function(e) {
this.applyImpulse(200, 60);
}
});
world.createEntity({
name: "ground",
shape: "square",
type: "static",
color: "rgb(0,100,0)",
width: 20,
height: .5,
y: 12
});
var block = {
name: "block",
shape: "square",
color: "brown",
width: .5,
height: 4,
onImpact: function(entity, force) {
if (entity.name() === "player") {
this.color("black");
}
}
};
world.createEntity(block, {
x: 15
});
world.createEntity(block, {
x: 17
});
world.createEntity(block, {
x: 16,
y: 1,
width: 4,
height: .5
});
所以我把这两个保存为index.html和game.js一旦我在浏览器中打开index.html，就什么都没有了，不是图像，圆圈或任何东西。只是一个纯粹的空白页面..我在这里做错了什么？只是普通的html代码总能正常工作。
请原谅我的英语不好，我真的希望得到一个答案，因为我很想学习更多有关网络开发的知识。我已经尝试了很长时间来弄清楚问题，但没有运气。这就是为什么我在这里问。感谢您的任何帮助x）
答案 0 :(得分：1)
正如您从 代码段 ， jsfiddle 和 codepen < / em> 下面，您的代码原则上是：
window.onload = function() {
var canvasElem = document.getElementById("game");
var world = boxbox.createWorld(canvasElem);
world.createEntity({
name: "player",
shape: "circle",
radius: 1,
/*image: "pig.png",*/
imageStretchToFit: true,
density: 4,
x: 2,
onKeyDown: function(e) {
this.applyImpulse(200, 60);
}
});
world.createEntity({
name: "ground",
shape: "square",
type: "static",
color: "rgb(0,100,0)",
width: 20,
height: .5,
y: 12
});
var block = {
name: "block",
shape: "square",
color: "brown",
width: .5,
height: 4,
onImpact: function(entity, force) {
if (entity.name() === "player") {
this.color("black");
}
}
};
world.createEntity(block, {
x: 15
});
world.createEntity(block, {
x: 17
});
world.createEntity(block, {
x: 16,
y: 1,
width: 4,
height: .5
});
};<script src="http://incompl.github.io/boxbox/boxbox/Box2dWeb-2.1.a.3.js"></script>
<script src="http://incompl.github.io/boxbox/boxbox/boxbox.js"></script>
<canvas id="game" width=640 height=380>You don't support Canvas :(</canvas>
请确保您已涵盖以下问题，我认为问题出在某处：
/*image: "pig.png",*/。<script src="game.js"></script>放在<body>内和<canvas>之后，就像在问题中一样，这不是必需的。） document.ready或window.load事件处理程序中。document.ready可能是首选，但在纯JS 中并不像window.load那么简单（我在后面的所有三个演示中使用后者）。document.ready， jQuery 提供$(document).ready(function(){ your code });，但我不确定是否值得加载整个jQuery库，如果这是你用它的唯一的东西答案 1 :(得分：0)
您可能希望将game.js放入原始文档中。此外，脚本src文件不应位于<head>中，它们应位于<body>.