如何在 Phaser 游戏中添加 Div答案

【问题标题】：How to add a Div on a Phaser Game如何在 Phaser 游戏中添加 Div
【发布时间】：2019-04-02 18:16:10
【问题描述】：

我有一个game.js，其中渲染了我的 Phaser 游戏中的所有精灵。我还有一个index.html 调用这个脚本来渲染游戏。我想为 game.js 画布上的健康栏添加一个 <div>，但我无法做到，当我尝试时，它只显示在游戏上方或下方。

索引.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);

【问题讨论】：

标签： javascript html css phaser-framework

【解决方案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 定位，您会发现有关该主题的大量资源，包括 this fairly good one from Learn CSS Layout。

【讨论】：

谢谢，成功了！有没有办法获得Phaser生成的画布的ID？所以我可以使用这个命令吗？ var ctx = document.getElementById('canvas').getContext('2d');
可能有更好的方法来获得您正在寻找的东西，但我可能会推荐类似 document.getElementById("game").getElementsByTagName('canvas')[0] 的东西，因为 Phaser 本身似乎不允许您在创建的画布上设置 id .

【解决方案2】：

在您的 DOM 结构中简单（且可读）的方式解决 Phaser 的画布

document.querySelector("#game canvas")

【讨论】：