0

私のゲームで、左上の HUD ボタンをクリックします。次に、サブメニューをいじります。サブメントをクリックすると、その多くが開き、ボタンがスライドアウトするようにしたい. これはすべて機能していますが、余分なクリックが必要になる場合があります。これがキャンバスのせいなのか、私の方法のせいなのかわかりませんか？ここでテストしてください: 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 がデフォルトの位置にあることを意味します

これは、アイコンをクリックしてはみ出している (false) 場合、すべてを通常どおりに描画し、アイコン 4 がデフォルトの位置に戻る (true) ことを意味します。

この解釈では、HUD4Flag を false に設定するときに、残りのすべてのフラグを true に設定する必要があることを確認する必要があります。ただし、これは現時点では行われておらず、同時に複数のフラグが false になる可能性があります。

現時点での問題は、1 をクリックしてから 2 をクリックすると、HUD1Flag=false と HUD2Flag=false の両方が表示されることです。もう一度 1 をクリックしても、何も起こらないようです。実際、HUD1Flag を true に変更しており、2 回目のクリックでアイコンが表示されます。

これを修正する 1 つの方法は、次のような行を変更することです。

HUD3Flag = false;

他のフラグもクリアする

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