1

キャンバス上にx個の蝶を生成するスクリプトがあります。適度にプリミティブな関数コンストラクターを使用しているため、各蝶は他の蝶に影響を与えることなく変更できますが、シーケンスの1つを更新するとすべてが更新され、表示されませんなぜ。

コードの量が非常に多い (350 行以上) ため、表示するJS フィドルを作成しました (そしておそらく眉をひそめます)。

ここですべてを完全に表示できます。

しかし、JSFiddle へのリンクだけを投稿することはできないため、ここにシーケンス関数自体のコードを示します。

function Sequence (s, f) {
    // Check we have arguments
    if (!s || !f) {
        throw new TypeError('No sequences to load');
    }

    // Instance for the onload event
    var _sq  = this;

    // Some public properties
    this.w  = 0;
    this.r  = false;
    this.st = 0;
    this.ns = 22;

    // This is the step in the sequence we're at
    this.s  = 20;

    // The step width
    this.sw = 0;

    // Create the image
    this._s = new Image;
    this._f = new Image;

    // Load listener 
    this._s.onload = function () {
        // Set our publics
        _sq.w = this.width;
        _sq.sw = _sq.w / fps;
    };

    this._s.src = s;
    this._f.src = f;

    // Return
    return this;
};

[編集] 基本的に負荷を気にしないようにシーケンス クラスを更新しました。

<link rel="prefetch" href="image.png" />

また、JSFiddle を更新して動作を確認できるようにしました (他にもいくつかの更新があります) が、コードが少し扱いに​​くいため、ここでは説明しません。

4

1 に答える 1

0

コメントで既に述べたように、コードは読みにくいです。

しかし、あなたの問題はおそらくここにあります：

    for ( ; i < no_of_butterflies; i++) {
        // Create the sequence
        var s = new Sequence('http://ok5.com/blue-walking.png', 'http://ok5.com/blue-flying-2.png');

        // Listen to the load
        s.loaded = function() {
            bs.push(new Butterfly(s));
        };

        // Load the beast up
        s.load();
    }

s.loadedイメージが読み込まれると、コールバックが呼び出されます。だから、あなたのすべての蝶のために、あなたは同じものを持っていて、Sequenceあなたはステータスとイメージを取ります。コードの残りの部分が機能しているように見える理由を説明できません。コードをデバッグする時間がありません。私の提案は、スコープとクロージャーについて読んで、きれいに書き直すことです。そのような問題は他にもあると思うからです。

編集 修正は、シーケンスをパラメーターとして渡すことです。

// If we have a loaded listener, fire it
if (_sq.loaded) {
    _sq.loaded(_sq);
}

コールバックを次のように変更します。

// Listen to the load
s.loaded = function(s) {
    bs.push(new Butterfly(s));
};

ただし、それが正しく機能しているかどうかを確認する必要があります。

于 2013-04-08T12:20:48.797 に答える