Question

我有一个game.js，渲染了我的Phaser游戏中的所有子画面。我还有一个index.html，它调用此脚本来渲染游戏。我想在game.js画布上添加一个<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向您的canvas添加了一个新的<div id="game">子元素，如果您检查页面，就会看到它。

<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 画布

document.querySelector("#game canvas")

如何在Phaser游戏中添加Div

2 个答案: