1

草がエネルギーレベルに基づいて異なる色に変わる小さなシミュレーションを作成しています。現在、すべての草のブロックは、if/else ステートメントを使用して、ゲームループごとにどの色であるかを判断します。色をスムーズに変更するための十分な if ステートメントを作成することは、非常に CPU を集中的に使用するように思われます。これを行うためのより効率的な方法があるかどうか疑問に思っていました。

シミュレーションはここにあります: http://j.mp/Wou7Sl (草の着色に関する部分は、134 行目で開始された colorGrass という関数です)

これは緊急の質問でも何でもありませんが、回答をいただければ幸いです。

4

1 に答える 1

1

まず、パフォーマンスを大幅に改善するためにできることがいくつかあります。

  • への不要な呼び出しがたくさんあり$(document).readyます。これらは物事を遅くするだけです。

  • jQuery セレクターは、に比べて遅いことで有名getElementByIdです。パフォーマンスが重要な場合は代わりにそれを使用し、要素をできるだけ検索しないようにしてください。要素へのハンドルを取得して再利用します。

  • .stylejQuery よりもはるかに高速です.css。パフォーマンスが重要な場合に使用します。

  • を繰り返し参照しないでくださいfoo[bar]。代わりに、実行しbaz = foo[bar]てから使用してbazください。

上記の変更の一部を含むデモを次に示します。よりスムーズに実行され、CPU の消費が少なくなり、より高いフレーム レートで実行できることがわかります。さらに最適化を行う必要がありますが、アイデアは理解できます。

それを片付けたので、草に取り組むことができます。草のコードはもともと次のようになっていました。

function colorGrass(i) {
    $(document).ready(function () {
        if (Grasses[i].energy < 25) {
            $('#' + Grasses[i].id + '').css('background-color', '#666600');
        }
        if (Grasses[i].energy > 25 && Grasses[i].energy < 50) {
            $('#' + Grasses[i].id + '').css('background-color', '#669900');
        }
        if (Grasses[i].energy > 50 && Grasses[i].energy < 75) {
            $('#' + Grasses[i].id + '').css('background-color', '#66cc00');
        }
        if (Grasses[i].energy > 75) {
            $('#' + Grasses[i].id + '').css('background-color', 'green');
        }
    });
}

上記の変更を行った後、次のようになります (よりクリーンだと思いませんか?):

function colorGrass(i) {
    var grass = Grasses[i];
    var el = document.getElementById(grass.id);
    if (grass.energy < 25) {
        el.style.backgroundColor = '#666600';
    }
    else if (grass.energy < 50) {
        el.style.backgroundColor = '#669900';
    }
    else if (grass.energy < 75) {
        el.style.backgroundColor = '#66cc00';
    }
    else {
        el.style.backgroundColor = 'green';
    }
}

ここで、芝生を滑らかにグラデーションさせるには、「エネルギー」値を取得して、それを「緑」チャンネルに直接変換できる必要があります。次に例を示します。

function colorGrass(i) {
    var grass = Grasses[i];
    var el = document.getElementById(grass.id);
    el.style.backgroundColor = 'rgb(100,' + (grass.energy + 100) + ',0)';
}

正確にどのように見えるかはあなた次第なので、適切と思われるようにこれらの値を微調整し、見栄えを良くするために必要なその他の変更 (css など) を行います。

于 2013-03-20T03:06:37.353 に答える