Question

我使用的平台代码：＆＃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）

Answer 1

正如您从 代码段 ， jsfiddle 和 codepen < / em> 下面，您的代码原则上是：

Answer 2

您可能希望将game.js放入原始文档中。此外，脚本src文件不应位于<head>中，它们应位于<body>.

HTML＆amp; Javascript页面显示为空白

2 个答案: