如何在Phaser游戏中添加Div

Question

我有一个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);

Answer 1

这是因为Phaser.Game正在向您的<div id="game">中添加一个新的canvas子元素，如果您检查页面，您将看到它。

<canvas>是块级元素，与<div>类似，因此兄弟元素将一个接一个地显示。

如果希望div#health-bar显示在画布元素之上，则需要相应地对其进行定位。有多种方法可以做到这一点，但一个选项可能是将以下CSS添加到页面中，根据需要更改top和left值：

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

如果您搜索CSS定位，您会发现有关这个主题的大量资源，包括这是从学习CSS布局中获得的一个相当好的结果。。

Answer 2

在DOM结构中轻松(且可读)解决Phaser画布的方法

document.querySelector("#game canvas")