javascript - canvas を使用した JS での重力のシミュレーション

Question

それで、私はいくつかの円を作成しようとしていて、それらを倒したいと思っています。コードとデモを次に示します。間違いを訂正し、JS でオブジェクト指向プログラミングを学び始めたばかりであることを考慮してください。

Answer 1

複数のイベントを作成する代わりに、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

ループの問題に対処するこれのフォークを作成しました。また、干渉を引き起こしていたキャンバスの長方形のクリアに問題があったようです

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 メソッドを呼び出すことはできません。