使用画布在JS中很少模拟重力

Little simulation of gravity in JS using canvas

本文关键字:模拟 JS      更新时间:2023-09-26

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

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

  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/

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

我已经对此进行了分叉来解决循环问题,似乎也存在清除画布矩形的问题,这引起了一些干扰

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 在它上面。