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

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

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

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

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


javascript html craftyjs
person Tristan McPherson    schedule 06.04.2013    source источник
comment
Это не так работает; обычно код решает, где он будет создавать новые элементы. Тот факт, что вы добавили скрипт в div, не имеет значения.   -  person bfavaretto    schedule 06.04.2013
comment
Значит, это где-то внутри Javascript игрового фреймворка, который я использую?   -  person Tristan McPherson    schedule 06.04.2013
comment
Наверное. Пожалуйста, добавьте к вопросу название фреймворка и ссылку на документацию, это должно помочь нам найти решение.   -  person bfavaretto    schedule 06.04.2013
comment
Из документации: Создайте div с идентификатором cr-stage, если есть еще не является HTMLElement с идентификатором cr-stage (от Crafty.viewport.init).   -  person bfavaretto    schedule 06.04.2013

Ответы (3)


arrow_upward
1
arrow_downward

Как упоминалось в одном из комментариев, div с идентификатором «cr-stage» важен для 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-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>
person jep    schedule 28.05.2013

arrow_upward
2
arrow_downward

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

person ZER0    schedule 06.04.2013

arrow_upward
1
arrow_downward

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

person Rujikin    schedule 06.04.2013