如何在 Phaser 游戏中添加 Div

Question

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

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 显示在 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.

Answer 2

在您的 DOM 结构

中以简单（且可读）的方式解决 Phaser 的 canvas

document.querySelector("#game canvas")

如何在 Phaser 游戏中添加 Div

How to add a Div on a Phaser Game

html

javascript

css

phaser-framework