Question

在我的HTML中，我有一个部分，其中我有一个JavaScript，它添加了一个运行我的游戏的事件监听器：

<div class="content">
<script>
        window.addEventListener('load', Game.start);
</script>
</div>

如何将JavaScript包含在上面的div中？当它显示时，游戏完全在它之外。

我正在使用crafty.js框架。文档在这里： http://craftyjs.com/api/

Answer 1

不确定Game.start的作用。但是，脚本不需要位于容器元素中。你可以简单地拥有这样的东西：

<html>
  <head>
    <script>
      // here some library that defines `Game.start`
      window.addEventListener('load', Game.start);
    </script>
  </head>
  <body>
    <div class="content" id="game-container"></div>
  </body>
</html>

在Game.start内，您必须使用document.getElementById("game-container")才能获得所需元素的引用，然后使用它来添加您想要的节点。

Answer 2

你需要给该Div一个ID然后修改javascript以加载div的id中的对象。

Answer 3

正如其中一条评论中所提到的，id为“cr-stage”的div对于crafty.js非常重要。但是，您实际上不必包含它。如果将其遗漏，将自动创建。

<html>
  <head>
    <!-- this is the crafty.js library, which you could load from another server -->
    <script src="crafty.js"></script>

    <!-- this is the script where all your game's JS goes -->
    <script src="mygame.js"></script>

    <script>
      window.addEventListener('load', Game.start);
    </script>
  </head>
  <body>
  </body>
</html>

如果您使用上述内容，您将获得为您创建的cr阶段ID。

另一件可能与您的问题相关的事情是，如果您想要将cr阶段居中并移除自动出现在其上方的小间隙。为此，请使用以下代码：

<html>
  <head>
    <!-- this is the crafty.js library, which you could load from another server -->
    <script src="crafty.js"></script>

    <!-- this is the script where all your game's JS goes -->
    <script src="mygame.js"></script>

    <script>
      window.addEventListener('load', Game.start);
    </script>

    <style type="text/css">
      /* remove the small gap at the top */
      body { margin-top: 0 }

      /* horizontally center your stage on the page */
      #cr-stage { margin: 0 auto 0 }
    </style>
  </head>
  <body>
  </body>
</html>

如何在div中包含我的JavaScript游戏？

3 个答案: