HTML5圈防止將外面帆布，防止碰撞

Question

我有HTML 5圈拖放例如，

http://jsfiddle.net/eGjak/503/

我想跟進事情

1. 防止畫布以外的阻力圈

2. 隱藏在圓圈上的線

3. 防止拖過另一個圈子

我的一些代碼，但沒有運氣玩。誰能請幫助我，通過邏輯或一些有用的資源

Answer 1

1. 這是一個容易的。它只是檢查x不離開屏幕的左側或右側，y不離開屏幕的頂部或底部

   if（x> 0 || x <（canvas.width - circle.width ） & & Y> 0 ||Ÿ<（canvas.height - circle.height））{

   ...update... 
   

   }

2. 在這裏，您需要做的直線/圓弧碰撞檢查。 See here。

3. 爲此，您需要進行圓/圓碰撞檢測。如果發生碰撞，否則爲false下面將返回true：

   this.isIntersecting = function(c1center, c1radius, c2center, c2radius) 
   { 
   
       var dX = Math.pow(c1center.x - c2center.x, 2); 
       var dY = Math.pow(c1center.y - c2center.y, 2); 
       var r2 = Math.pow(c1radius.radius() + c2radius.radius(), 2); 
       return (dX + dY <= r2); 
   } 
   

c1center和c2center與x對象，y屬性（如：c1center = {x:0, y:0 }）