單擊畫布中的對象時出現奇怪的錯誤？

Question

我在腳本中發生了一個奇怪的錯誤。我在畫布上有3個球，我可以點擊其中任何一個進行選擇。

如果我在選擇一個球之後點擊另一個球，則會選中新的球。每次選擇一個新球時，所選球的陣列都會被重置。到現在爲止還挺好。

我想要做的是在點擊畫布內的空白區域時重置所選球的數組。

但是，這隻適用於1球（底部的一個，索引＃2數組）。 但是，如果我打開警報以查看單擊了哪個球，所有球都會記錄點擊。 而且由於我彈出警報窗口並且腳本凍結，我可以看到其他球也被簡單地選中。

我製作了this jsFiddle供您查看。當您第一次加載小提琴時，將錯誤的代碼註釋掉，取消註釋即可看到它。

的一段代碼來尋找的是：

function selectBall(){ 
var mX = mouseX; 
var mY = mouseY; 
    for(i=0;i<balls.length;i++){ 
     if(balls[i].select(mX, mY)){ 
      ball.length = 0; 
      ball.push(balls[i]); 

      /* Uncomment this to see that click actually happens. 
      alert('Ball ' + i + ' clicked'); 
      */ 

     } 

     /* Uncomment this to get the bug. 
     else { 
      ball.length = 0;      
     } 
     */ 
    } 
} 

爲什麼我得到這個錯誤時，相同的代碼行的陣列重置就好了，當它的if語句內而不是在其下別的嗎？

我該如何解決？

Answer 1

您正在爲每個未被點擊的球重新設置球列表。這是不正確的。如果沒有點擊球，你想要做的只是重置球列表。這可以通過以下來解決。

function selectBall(){ 
    var mX = mouseX; 
    var mY = mouseY; 
    var isClick = false; 
    for(i=0;i<balls.length;i++){ 
    if(balls[i].select(mX, mY)){ 
     isClick = true; 
     ball.length = 0; 
     ball.push(balls[i]); 
     break; 
    } 
    } 
    if (!isClick) 
    { 
    ball.length = 0; 
    } 
} 

你可以看到我添加了一個簡單的標誌來確定是否有球被選中。如果沒有，那麼我重置陣列。否則，我不會重置陣列。