Как мне содержать мою игру JavaScript в div?

В моем HTML у меня есть раздел, в котором у меня есть JavaScript, который добавляет прослушиватель событий, который запускает мою игру:

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

Как мне сделать так, чтобы JavaScript содержался внутри div над ним? Когда он показывает, игра полностью за ее пределами.

Я использую фреймворк crafty.js. Документация здесь: http://craftyjs.com/api/

Источник

3 ответа

Решение

Как упомянуто в одном из комментариев, для crafty.js важен div с идентификатором "cr-stage". Тем не менее, вы на самом деле не должны включать его. Если вы пропустите его, он будет создан автоматически.

<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-stage, созданный для вас.

Другая вещь, которая может иметь отношение к вашему вопросу, - это если вы хотите отцентрировать 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>
Источник

Не уверен что 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") чтобы получить ссылку на нужный элемент, а затем использовать его для добавления узлов, которые вы хотите.

Источник

Вам нужно дать этому Div идентификатор, а затем изменить javascript для загрузки объекта в идентификатор вашего div.

Источник
Другие вопросы по тегам