Javascript:简单粒子运动，粒子弹性弹跳

Question

我创建了这个相当简单的javascript；球或“分子”在屏幕上移动。我希望加入这样的功能:当一个球与另一个球接触时，它们会交换速度。我们不需要担心任何角度，只是当他们接触到对方，速度交换。(不过，在链接的代码中，我没有改变速度，而是编写了一个颜色更改代码)

我一直试图把这个函数称为“某个地方”，以识别分子何时接触，但我没有运气。我不太明白为什么。

链接到代码：

http://jsbin.com/arokuz/5/

似乎有三个主要问题：

• 分子似乎是随机变化的，而不是当两个分子接触时。
• 当将数组设置为有3个分子时，只有两个分子出现，第一个是实际存在的，但是对.fillstyle的变化没有反应，所以在画布上看不见。
• 用函数方法，我只能识别阵列touch...how中的串联分子(1和2或4和5)，我可以检查所有的分子吗？

Answer 1

你只是在把一个分子和另外两个分子进行比较，事实上，它可能在任何地方。

碰撞检测是一个很难解决的话题，但是如果你想让你的想法快速工作，你可能会选择一个n^2算法和2嵌套的for循环。

人们很期待该守则：

  // collision
  for(var t = 0; t < molecules.length-1; t++)
     for(var tt = t+1; tt < molecules.length; tt++) {
         var p1 = molecules[t];
         var p2 = molecules[tt];
         if (sq(p1.x-p2.x) +sq(p1.y-p2.y) < sq(p1.radius+p2.radius) ) 
          {
            p1.collided = 8;  // will diplay for next 8 frames
            p2.collided = 8;  // .
         }
  }

小提琴在这里：http://jsbin.com/arokuz/10

Answer 2

生成三个时只出现两个的原因不是因为第一个没有呈现而是最后一个没有，这是因为您如何通过比较它们与列表中下一个的距离来绘制它们--因为它是最后一个，因此没有next，因此抛出一个空错误并继续(检查控制台)。

他们之所以似乎“随机”检测碰撞，是因为他们没有检查所有其他分子--只有清单上的下一个分子，不幸的是，唯一简单的方法就是检查每一个球的所有其他球并进行检查。

为了让分子检测距离，你可以使用毕达哥拉斯定理，我通常使用它，例如：

var distx = Math.abs(molecule1.x - molecule2.x);
var disty = Math.abs(molecule1.x - molecule2.y);
var mindist = molecule1.radius + molecule2.radius;
return Math.sqrt(distx*distx+disty*disty) < mindist;