Странная ошибка при нажатии на объекты на холсте?

Question

У меня странная ошибка в моем скрипте.У меня есть 3 шара на холсте, и я могу нажать на любой из них, чтобы выбрать.

Если я щелкну другой шар после того, как он был выбран, будет выбран новый шар.Каждый раз, когда выбирается новый шар, массив выбранных шариков сбрасывается.Пока все хорошо.

Что я хотел бы сделать, это сбросить массив выбранных шаров, когда я нажимаю на пустое пространство внутри холста.

Но это работает только для 1 из шаров(Нижний, индекс № 2 в массиве).Но если я включу оповещение, чтобы увидеть, на какой мяч нажали, все шары записывают щелчок.И так как я получаю всплывающее окно с предупреждением и сценарий останавливается, я вижу, что другие шары на короткое время также выбраны.

Я сделал этот 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, но не когда он находится под 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;
  }
}

Вы видите, что я добавил простой флаг, чтобы определить, были ли выбраны какие-либо шары или нет.Если ничего не было, то я сбросил массив.В противном случае я не сбрасываю массив.