在我的游戏中，单击左上角的HUD按钮。然后乱搞子菜单。 我想要它，所以当你点击一个子菜单，它打开meny和按钮滑出。所有这些都有效，但有时需要额外点击。我不知道这是因为画布还是我的方法？ 在此测试：http://www.taffatech.com/DarkOrbit.html
这是代码：
function drawHUD(num) {
ctxHUD.globalAlpha = 0.85;
if(num == 0) {
var srcX = 165;
var srcY = 605;
var drawX = 580;
var drawY = 180;
var HUDWidth = 400;
var HUDHeight = 400;
ctxHUD.drawImage(spriteImage, srcX, srcY, HUDWidth, HUDHeight, drawX, drawY, HUDWidth, HUDHeight);
var srcX = 25;
var srcY = 600;
var drawX = 448;
var drawY = 180;
var HUDWidth = 135;
var HUDHeight = 335;
ctxHUD.drawImage(spriteImage, srcX, srcY, HUDWidth, HUDHeight, drawX, drawY, HUDWidth, HUDHeight);
} else if(num == 1) {
if(HUD1Flag == false) {
drawHUD(0);
HUD1Flag = true;
} else {
var srcX = 165;
var srcY = 605;
var drawX = 580;
var drawY = 180;
var HUDWidth = 400;
var HUDHeight = 400;
ctxHUD.drawImage(spriteImage, srcX, srcY, HUDWidth, HUDHeight, drawX, drawY, HUDWidth, HUDHeight);
///////////////////////////
var srcX = 25;
var srcY = 670;
var drawX = 448;
var drawY = 250;
var HUDWidth = 135;
var HUDHeight = 270;
ctxHUD.drawImage(spriteImage, srcX, srcY, HUDWidth, HUDHeight, drawX, drawY, HUDWidth, HUDHeight);
////////////////////////////////////
var srcX = 0;
var srcY = 940;
var drawX = 421;
var drawY = 180;
var HUDWidth = 170;
var HUDHeight = 75;
ctxHUD.drawImage(spriteImage, srcX, srcY, HUDWidth, HUDHeight, drawX, drawY, HUDWidth, HUDHeight);
HUD1Flag = false;
}
} else if(num == 2) {
if(HUD2Flag == false) {
drawHUD(0);
HUD2Flag = true;
} else {
var srcX = 165;
var srcY = 605;
var drawX = 580;
var drawY = 180;
var HUDWidth = 400;
var HUDHeight = 400;
ctxHUD.drawImage(spriteImage, srcX, srcY, HUDWidth, HUDHeight, drawX, drawY, HUDWidth, HUDHeight);
///////////////////////////
var srcX = 25;
var srcY = 600;
var drawX = 448;
var drawY = 180;
var HUDWidth = 135;
var HUDHeight = 335;
ctxHUD.drawImage(spriteImage, srcX, srcY, HUDWidth, HUDHeight, drawX, drawY, HUDWidth, HUDHeight);
////////////////////////////////////
ctxHUD.clearRect(447, 251, 137, 65);
/////////////////////////////
var srcX = 0;
var srcY = 1013;
var drawX = 423;
var drawY = 249;
var HUDWidth = 170;
var HUDHeight = 75;
ctxHUD.drawImage(spriteImage, srcX, srcY, HUDWidth, HUDHeight, drawX, drawY, HUDWidth, HUDHeight);
HUD2Flag = false;
}
} else if(num == 3) {
if(HUD3Flag == false) {
drawHUD(0);
HUD3Flag = true;
} else {
var srcX = 165;
var srcY = 605;
var drawX = 580;
var drawY = 180;
var HUDWidth = 400;
var HUDHeight = 400;
ctxHUD.drawImage(spriteImage, srcX, srcY, HUDWidth, HUDHeight, drawX, drawY, HUDWidth, HUDHeight);
///////////////////////////
var srcX = 25;
var srcY = 600;
var drawX = 448;
var drawY = 180;
var HUDWidth = 135;
var HUDHeight = 335;
ctxHUD.drawImage(spriteImage, srcX, srcY, HUDWidth, HUDHeight, drawX, drawY, HUDWidth, HUDHeight);
////////////////////////////////////
ctxHUD.clearRect(447, 320, 137, 65);
/////////////////////////////
var srcX = 0;
var srcY = 1088;
var drawX = 423;
var drawY = 320;
var HUDWidth = 170;
var HUDHeight = 73;
ctxHUD.drawImage(spriteImage, srcX, srcY, HUDWidth, HUDHeight, drawX, drawY, HUDWidth, HUDHeight);
HUD3Flag = false;
}
} else if(num == 4) {
if(HUD4Flag == false) {
drawHUD(0);
HUD4Flag = true;
} else {
var srcX = 165;
var srcY = 605;
var drawX = 580;
var drawY = 180;
var HUDWidth = 400;
var HUDHeight = 400;
ctxHUD.drawImage(spriteImage, srcX, srcY, HUDWidth, HUDHeight, drawX, drawY, HUDWidth, HUDHeight);
///////////////////////////
ctxHUD.globalAlpha = 0.7;
ctxHUD.fillStyle = '#ffffff';
ctxHUD.font = '10px Verdana Bold';
ctxHUD.fillText('Dark Orbit is a highly illegal starship arena created by', 613, 207);
ctxHUD.fillText('Argok Stall, a founding member of the black market and', 613, 220);
ctxHUD.fillText('undefeated starship fighter.', 613, 233);
ctxHUD.fillText('Welcome to Dark Orbit - Currently in development', 613, 543);
ctxHUD.fillText('Design/Programming - Wayne Daly', 613, 556);
///////////////////////////
var srcX = 25;
var srcY = 600;
var drawX = 448;
var drawY = 180;
var HUDWidth = 135;
var HUDHeight = 335;
ctxHUD.drawImage(spriteImage, srcX, srcY, HUDWidth, HUDHeight, drawX, drawY, HUDWidth, HUDHeight);
////////////////////////////////////
ctxHUD.clearRect(447, 386, 137, 65);
/////////////////////////////
var srcX = 0;
var srcY = 1160;
var drawX = 423;
var drawY = 387;
var HUDWidth = 170;
var HUDHeight = 73;
ctxHUD.drawImage(spriteImage, srcX, srcY, HUDWidth, HUDHeight, drawX, drawY, HUDWidth, HUDHeight);
HUD4Flag = false;
}
}
}
鼠标cliked方法：
function HUDClicked(e)
{
mouseX = parseInt(e.clientX - offsetX);
mouseY = parseInt(e.clientY - offsetY);
if (mouseX > 910 && mouseX < 990)
{
if (mouseY > 10 && mouseY< 41)
{
if(HUDFlag == false)
{
drawHUD(0);
HUDFlag = true;
}
else
{
ClearHUD();
HUDFlag = false;
}
}
}
if (mouseX > 450 && mouseX < 582)
{
if (mouseY > 185 && mouseY< 244)
{
if(HUDFlag == false)
{
}
else
{
ClearHUD();
drawHUD(1);
}
}
}
if (mouseX > 450 && mouseX < 582)
{
if (mouseY > 252 && mouseY< 315)
{
if(HUDFlag == false)
{
}
else
{
ClearHUD();
drawHUD(2);
}
}
}
if (mouseX > 450 && mouseX < 582)
{
if (mouseY > 320 && mouseY< 382)
{
if(HUDFlag == false)
{
}
else
{
ClearHUD();
drawHUD(3);
}
}
}
if (mouseX > 450 && mouseX < 582)
{
if (mouseY > 388 && mouseY< 450)
{
if(HUDFlag == false)
{
}
else
{
ClearHUD();
drawHUD(4);
}
}
}
}
答案 0 :(得分：0)
您似乎正在使用HUD4Flag等变量及其含义：
这意味着如果你点击一个图标并且它伸出（假），你就会正常绘制所有内容，图标4会回到默认位置（true）。
通过这种解释，您应确保在设置HUD4Flag为false时，其余所有标志都应设置为true。但是，目前尚未完成此操作，您最终可能会同时出现多个错误标记。
目前的问题是当你点击1，然后点击2时，你最终会得到HUD1Flag = false和HUD2Flag = false。如果您再次单击1，则似乎没有任何事情发生。事实上，您正在将HUD1Flag更改为true，第二次单击将使图标显示。
解决此问题的一种方法是更改
等行HUD3Flag = false;
也清除其他标志
HUD1Flag = true;
HUD2Flag = true;
HUD3Flag = false;
HUD4Flag = true;