javascript - 单击 Canvas 中的对象时出现奇怪的错误？

Question

我的脚本中出现了一个奇怪的错误。我在 Canvas 上有 3 个球，我可以点击其中的任何一个来选择。

如果我在选择一个球后单击另一个球，则会选择新球。每次选择一个新球时，所选球的数组都会重置。到目前为止一切顺利。

我想做的是在单击 Canvas 内的空白区域时重置所选球的数组。

但这只适用于 1 个球(底部的球，数组中的索引 #2)。 但是，如果我打开警报以查看点击了哪个球，则所有球都会记录点击。 由于弹出警报窗口并且脚本卡住，我可以看到其他球也被短暂选中。

我做了this jsFiddle给你看。当你第一次加载 fiddle 时，错误的代码被注释掉了，取消注释它会看到它。

要查找的代码段是:

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 语句中重置数组时，为什么我会得到这个错误，但在 else 语句中却没有？

我该如何解决？

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

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