HTML5 Canvas - 计算与'磁铁'相关的对象速度

Question

我的Canvas中间直接有一个"磁铁",我有点击时添加到画布中的对象.然后他们被吸引到磁铁上.

我有物体相对于彼此的X和Y距离,大约在-20到20之间.

这是我用来吸引对象的计算,它可以工作,但越接近,力就越弱,当它应该相反时,我该怎么做？

impulseX = (distanceX / 100)
impulseY = (distanceY / 100)

例子:

Distance = 20, speed = 0.05
Distance = 10, speed = 0.1
Distance = -20, speed = -0.05
Distance = -10, speed = -0.1

我正在做的例子:http://jsfiddle.net/qk8Wk/

谢谢

Answer 1

你的冲动应遵循平方反比定律,即

var distance2 = distanceX * distanceX + distanceY * distanceY;
var mag = n / distance2;

其中n是表示场强的一般常数.

那么冲动需要与冲动的方向成比例:

var theta = Math.atan2(distanceY, distanceX);
var impulseX = mag * Math.cos(theta);
var impulseY = mag * Math.sin(theta);

见http://jsfiddle.net/alnitak/BH5qL/

或者,避免触发功能(根据@JayC)

var norm = Math.sqrt(distance2);
var impulseX = mag * (distanceX / norm);
var impulseY = mag * (distanceY / norm);