JS中使用canvas模拟重力的小小技巧

Question

所以，我正在尝试创建几个圆圈，然后我希望它们掉下来。下面是代码和演示：demoFireBug 告诉我没有为未定义的对象定义方法“move”，所以当我想创建一个对象数组时，一定有问题。纠正我的错误并考虑到我刚刚开始学习 JS 中的面向对象编程。

Answer 1

与其创建多个事件，不如创建一个事件并在其中循环：

  setInterval(function(){
    ctx.clearRect(0,0,1000,1000);  //Clear the canvas here
    for (i = 0;i<bubble.length;++i)
    {
      bubble[i].move();
      bubble[i].redraw();
    }
  },32);

问题是范围问题。 您编写它的方式i 在它们执行的所有事件中的值都是 10。

工作小提琴：http://jsfiddle.net/some/fGChQ/16/

您的另一个问题是您在重绘时清除了画布......对于每个圆圈。

Answer 2

我已经创建了一个 fork 来解决循环问题，清除画布矩形似乎也存在问题，导致了一些干扰

Answer 3

for (i = 0;i<bubble.length - 1; ++i)
{
    console.log(bubble[i].y)
    setInterval(function(){
        bubble[i].move();
        bubble[i].redraw();
    },32);
}

bubble.length 为 10，数组索引为 0-9。 bubble[10] 是未定义的，所以你不能调用方法 move 。