2

特定の物理法則に従ってボールを表示するアプリケーションをコーディングしています。ボール オブジェクトとパス プロトタイプがあります。このパス プロトタイプは、特定の瞬間のボールの座標を計算して描画します。これは次のようになります。

Ball.prototype.path = function(v) {
modifying the ball coordinates...
ctx.arc(....);
(other canvas stuff)}

ボールのアニメーションを表示したい場合は、次のようにします。

var ball1 = new Ball(...);
var ball2...
function loop () {
ctx.beginPath(); // The balls won't show up if I begin and close the Path in path(), I don't know why...
ball1.path();
ball2...
ctx.closePath();
};
setInterval(loop, 0.0015);

しかし、ボールを追加して表示するボタンを追加したいと思います。そこで、追加されたボールに対してこれらのコマンドを実行する関数を探しています。

次のようにする必要があるため、少し注意が必要です。

  1. 新しい変数を作成して名前を付けます。
  2. その名前に従って path() を実行します。
  3. そのすべてが同じループ関数内にあるため、後で setInterval を作成できます。

編集: 修正済み @Frederik @Doorknob BallArray を使用しました:

var BallArray = new Array(); i=0; function AddBallonClick() { i++; BalleArray.push(i) }; function loop() { for (var i=0;i<BalleArray.length;i++) { ctx.beginPath(); var ball = new Ball(0, 0, 40); ball.path(); ctx.closePath(); }; }; setInterval(loop, dt);

しかし、新しい変数に ball_i という名前を付けたいと思っています。つまり、ball_1、ball_2... という名前を付ける方法がわかりません。一度だけボールを追加してもスクリプトが動いていないようで、それも問題です...

編集2：修正

また、すべての新しいボールに初速度を設定したいのですが、通常は次のようにします。

   ball.v = new V(...);

しかし、配列ができたので、これをループに追加しましたが、機能しません...:

   balles[i].v = new V(...)

編集3：

ボタンをクリックするたびに、ボールが追加および描画されず、代わりにアニメーションが「再生」されます。私の種類のコードでは、JavaScriptは同時にボールを描画できないようです:

    function loop()
    {
    for(var i = 0; i < balls.length; i++) {
        ctx.beginPath();
        balls[i].path();
        ctx.closePath();
    }
};
    setInterval(loop, dt);

ctx.clearRect(0, 0, width, height)編集：すべて修正済み をループ関数の前に配置する必要がある最後の問題を解決しましたfor(var i=0...)。

皆さんのお陰で ：） ！

4

1 に答える 1