画布和DOM分层

Question

我使用melonJS引擎制作HTML5游戏......使用画布（导入并使用Tiled TMX地图）

我使用DOM元素创建了一个谜题（我发现比在Tiled地图编辑器中制作谜题要容易得多）。玩家实体类（melonJS帮助我绘制画布和动画的类）需要能够在弹出时弹出拼图......

不幸的是，DOM与玩家精灵重叠，因为拼图与DOM分开。

SIMPLIFIED FIDDLE

解决此问题：

• 我认为我可以调整播放器的z-index比DOM拼图更多......但它仍然保持重叠。在这里，player.z索引和puzzle z索引显示z-index并不重要，因为它们位于完全不同的层上...否则玩家的36会明显重叠谜题0：

  var player = me.game.world.getChildByName("mainPlayer")[0];
  log(player.z);  //logs 36
  log($("#puzzle").css("z-index"));  //logs 0
  

• 我想我可以添加辅助画布，并且：

  - 暂时删除/隐藏游戏画布上的玩家精灵（game.PlayerEntity）

  - 将新玩家精灵添加到顶层画布

  - 给予该玩家精灵焦点/控制 - 又名。将键绑定到新的播放器对象

但这似乎是很多不必要的工作

我的意思是：

有没有办法绘制画布元素，以便我可以看到播放器精灵？