使用canvas实现JS中的小型重力模拟

Question

使用canvas实现JS中的小型重力模拟

javascriptsimulation

4

所以，我想创建几个圆形，然后让它们掉下来。这是代码和演示：演示 FireBug告诉我，未定义的对象没有定义方法“move”，因此在创建对象数组时肯定出了问题。请更正我的错误，并考虑到我刚开始学习JS中的面向对象编程。

- mic4ael

2

function move() { this.y+=4; } - mic4ael

我有一个示例代码供您体验。http://genosite.free.fr/canvas/game/grav/ 和 http://genosite.free.fr/canvas/game/grav/grav.js 请享用！ - Genosite

太棒了！给你的演示/示例点个赞！看起来很棒！ - Giovanni B

非常感谢这个演示，对我来说将非常有用，可以增加我的知识。 - mic4ael

这个三维虚拟世界展示了 JavaScript 中一个很好的重力示例：http://www.virtual3ds.com/myspace - user3319699

3个回答

1

我已经制作了一个分支，解决了循环问题，同时还出现了清除画布矩形引起一些干扰的问题。

- blackbourna

-1

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方法。

- jForrest

这会产生相同的问题。 - Paul Nikonowicz

1

小于号已经考虑到了这一点。i++可能更可取，但从外观上看，作用域是真正的问题。 - blackbourna

它仍然不能解决我的问题，因为我想让每个圆同时下落。 - mic4ael

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- some · Accepted Answer

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

  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/ 另一个问题是你在每次重绘时清除了画布...这样每个圆都会被清除。