0

在我的游戏中，点击左上角的 HUD 按钮。然后弄乱子菜单。我想要它，所以当你单击一个子项时，它会打开那个菜单并且按钮会滑出。所有这些都有效，但有时需要额外的点击。不知道是canvas的原因还是我的方法？在这里测试它：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;

        }

    }


}

鼠标点击方法：

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

 }  
 }



}
4

1 回答 1

0

您似乎正在使用诸如 HUD4Flag 之类的变量，其含义是：

  1. false 表示图标 4 突出
  2. true 表示图标 4 处于默认位置

这意味着如果您单击一个图标并且它伸出（假），您将正常绘制所有内容，并且图标 4 将返回其默认位置（真）。

通过这种解释，您应该确保当您将 HUD4Flag 设置为 false 时，所有其余标志都应设置为 true。但是，目前还没有这样做，您最终可能会同时得到多个错误标志。

目前的问题是，当你点击 1，然后点击 2 时，你最终会得到 HUD1Flag=false 和 HUD2Flag=false。如果您然后再次单击 1，则似乎没有任何反应。事实上，您正在将 HUD1Flag 更改为 true，并且第二次单击将使图标出现。

解决此问题的一种方法是更改​​行，例如

HUD3Flag = false;

也清除其他标志

HUD1Flag = true;
HUD2Flag = true;
HUD3Flag = false;
HUD4Flag = true;
于 2013-06-02T19:02:40.550 回答