javascript - 如何在 Phaser 游戏中添加 Div

Question

我有一个 game.js我的 Phaser 游戏中的所有 Sprite 都在这里渲染。我还有一个 index.html调用此脚本来渲染游戏。我想添加一个 <div>在 game.js Canvas 上创建一个健康栏，但我无法做到，当我尝试时，它只显示在游戏上方或下方。

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

游戏.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正在添加一个新的 canvas <div id="game"> 的子元素，如果您检查页面，就会看到它。

A <canvas>是 block 级元素，如 <div> , 因此兄弟元素将一个接一个地显示。

如果你想要 div#health-bar要显示在 Canvas 元素上方，您需要相应地定位它。有多种方法可以做到这一点，但一种选择可能是将以下 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 .