キャンバスでオブジェクトをクリックすると奇妙なバグがありますか？

Question

私のスクリプトには奇妙なバグがあります。キャンバスに3つのボールがあり、誰かをクリックして選択できます。

1つを選択した後に別のボールをクリックすると、新しいボールが選択されます。新しいボールが選択されるたびに、選択されたボールの配列がリセットされます。ここまでは順調ですね。

私がしたいのは、キャンバスの空のスペースをクリックすると、選択したボールの配列をリセットすることです。

しかし、これは1つのボール（下の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; 
    } 
} 

ボールが選択されているかどうかを判断するために単純なフラグを追加したことがわかります。もしそうでなければ、配列をリセットします。それ以外の場合は、アレイをリセットしません。