Question

这是我的问题：几个星期前我开始使用JavaScript和HTML开始游戏，并决定在上周继续重新格式化代码并使其更加面向对象（这实际上与我的问题没有任何关联，但在将事情放入上下文时它的价值）为了使它更加面向对象，我决定将我的游戏设计分解成不同的画布，我的理解是你可以将画布叠加在一起（我已经阅读了关于为不同作业使用多个画布的各种建议（包括图像）为了性能的好处，可以通过应用z-index来分层画布：在CSS中，此时我有以下CSS代码，我用它来管理网站的设计和分层画布。 / p>

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

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


};

按钮悬停效果对不同的Z-Indexes

1 个答案: