Как добавить Div в игру Phaser - PullRequest
Новая
       6

Как добавить Div в игру Phaser

0 голосов
/ 29 октября 2018

У меня есть game.js, где отображаются все спрайты из моей игры Phaser. У меня также есть index.html, который вызывает этот скрипт для рендеринга игры. Я хотел бы добавить <div> для индикатора здоровья поверх холста game.js, но я не могу этого сделать, когда я пытаюсь, он показывает только выше или ниже игры.

Index.html: 

<div id="game">

    <script src="/js/game.js"></script>
    <script src="/js/script2.js"></script>
    <script src="/js/script3.js"></script>
    <script src="/js/script4.js"></script>= 

    <div id="health-bar">the code of my health bar</div>    
</div>

game.js: 

var game = new Phaser.Game( 3840, 2176, Phaser.CANVAS , 'game', { preload: preload, create: create, update: update, render:render}, false, true);

1 Ответ

0 голосов
/ 30 октября 2018

Это потому, что Phaser.Game добавляет новый canvas дочерний элемент к вашему <div id="game">, который вы увидите, если осмотрите страницу.

A <canvas> является элементом уровня блока, таким как <div>, поэтому элементы одного уровня будут отображаться один за другим.

Если вы хотите, чтобы div#health-bar отображался над элементом canvas, вам нужно расположить его соответствующим образом. Есть несколько способов сделать это, но одним из вариантов может быть добавление следующего CSS на вашу страницу, при необходимости изменяя значения top и left: 

div#health-bar {
  position: absolute;
  z-index: 100;
  color: white;
  top: 50px;
  left: 100px;
}

Если вы выполните поиск по позиционированию CSS, вы найдете множество ресурсов по этой теме, включая этот довольно неплохой материал из Learn CSS Layout .

...