javascript - 不同 Z 索引上的按钮悬停效果

Question

这是我的问题: 几周前我开始使用 JavaScript 和 HTML 玩游戏，上周决定继续重新格式化代码并使其更加面向对象(这实际上与我的问题没有任何关系，但在将事情置于上下文中时值得) ，除了让它更加面向对象外，我还决定将我的游戏设计分解成不同的 Canvas ，我的理解是你可以将 Canvas 叠加在一起(我已经阅读了关于使用多个 Canvas 完成不同工作的各种建议(包括图片缓冲)为了提高性能，可以通过应用 z-index 对 Canvas 进行分层:；在 CSS 中，此时我有以下 CSS 代码，我正在使用它来管理网站的设计和对 Canvas 进行分层。

#canvas{
position: absolute;
top: 10px;
left: 100px;
z-index: 1;
background: transparent;
}
#bgCanvas{
position: absolute;
top: 10px;
left: 100px;
z-index: 0;
background: transparent;
}
#button{
position: absolute;
top: 430px;
left: 305px;
width: 116px;
border-style: solid;
border-color: red;
z-index:2;
background-color: #FFF;
}

第一个 Canvas 位于索引 1，据我所知，它位于索引 0 之上，第一个 Canvas 绘制玩家和敌人，第二个 Canvas bgCanvas 专用于背景，位于 z -index:0 表示它应该位于玩家下方。然后我有第三个 Canvas ，它位于 z-index:2，它应该提供以下层次结构 2 - 游戏按钮 1 - 介绍图像、玩家和敌人图像(更新并显示在这一层) 0 - 背景

现在是真正的问题:在之前的 JavaScript 文件中(如前所述，我正在重构该文件的代码)我有一些代码可以启用悬停效果对按钮的影响，例如以下代码，顺便说一句，它在一个函数中称为更新():

document.getElementById('button').style.left = canvas.width /2;
document.getElementById('button').css('z-index',1000);
document.getElementById('button').onmouseover = function(){
button.style.color = "red"; 
button.style.cursor= "pointer";
};

document.getElementById('button').onmouseout = function(){
button.style.color = "black";   
};

document.getElementById('button1').onmouseover = function(){
button1.style.color = "red";
button1.style.cursor= "pointer";    
};

document.getElementById('button1').onmouseout = function(){
button1.style.color = "black";  
};

document.getElementById('button').onclick = function(){
button.style.visibility = "hidden";
button1.style.visibility = "hidden";
gameStart = true;
};

但是，与之前的 JavaScript 文件不同，这个新文件使用不同的层来管理正在绘制的内容，因此之前有效的悬停和鼠标效果不再有效。但更重要的是，当我将按钮的 z-index 从 2 调整为 1 时，悬停和鼠标效果起作用。所以我的问题是，我可以在不同的 z-index 上应用悬停效果吗？或者我应该减少 Canvas 的数量等。如果您需要更多信息，我可以尝试提供，在此先感谢您。

Answer 1

这个问题已经解决了哈哈。问题是这样的:函数 update() 包含 onclick、onmouseout 等。当您在 draw() 中绘制介绍屏幕并使用 if 语句时 if(gameStarted===false){ 您需要包含更新( ) 在 if 和 else 语句中都起作用，这里是固定的代码 ^^

function draw(){
if(gameStarted === false){
startS.draw();
update();
}
else{
ctx1.drawImage(bgImage,0,0);
update();
ctx.clearRect(0,0,canvas.width, canvas.height);
p.draw();

h.draw();

requestId = window.requestAnimationFrame(draw);
}


};