单击画布中的对象时出现奇怪的错误？

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

你可以看到我添加了一个简单的标志来确定是否有球被选中。如果没有，那么我重置阵列。否则，我不会重置阵列。