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

Button Hover effects on different Z-Indexes

本文关键字：索引 悬停 按钮      更新时间：2023-09-26

这是我的问题：几周前，我开始使用JavaScript和HTML进行游戏，并决定在上周继续重新格式化代码并使其更加面向对象（这实际上与我的问题没有任何关系，但在将事情放在上下文中时它的价值），除了使其更加面向对象之外，我决定将我的游戏设计分解为不同的画布， 我的理解是，您可以将画布相互叠加（我已经阅读了有关将多个画布用于不同作业（包括图像缓冲）的各种建议）为了提高性能，画布可以通过应用 z-index：; 在 CSS 中，此时我有以下 CSS 代码，我正在使用它来管理网站的设计和分层画布。

#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;
}
第一个画布位于索引 1，据

我所知，这是在索引 0 的顶部分层的，第一个画布绘制玩家和敌人，第二个画布 bgCanvas 专用于背景，这是在 z-index：0这意味着它应该位于玩家的下方。然后我有第三个画布，它在 z-index：2，这应该提供以下层次结构2 - 游戏按钮1 - 介绍图像，玩家和敌人图像（更新并显示在此图层上）0 - 背景

现在进入实际问题：在以前的JavaScript文件中（如前所述，我正在重构该文件中的代码），我有代码可以启用悬停在按钮上的效果上，例如以下代码，顺便说一下，它位于一个名为update（）的函数中：

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 指数从 2 调整为 1 时，悬停和鼠标效果会起作用。所以我的问题是，我可以在不同的 z 指数上应用悬停效果吗？或者我应该减少画布等的数量，如果您需要更多信息，我可以尝试提供并提前表示感谢。

这个问题已经解决了，哈哈。问题是这样的：函数 update（） 保存 onclick、onmouseout 等。当你在draw（）中绘制介绍屏幕并使用if语句if（gameStarted===false）{时，你需要在if和else语句中包含update（）函数，这是修复^^的代码 

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);
}

};
相关文章：