點擊畫布點擊

Question

在我的遊戲上點擊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; 

     } 

    } 


} 

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

} 
} 



} 

Answer 1

你似乎是使用變量，如HUD4Flag與含義：

1. 虛假手段圖標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;