1

我正在做一个小模拟,草会根据它的能量水平变成不同的颜色。目前,每个草块都会通过 if/else 语句来确定每个游戏循环的颜色。制作足够多的 if 语句以使颜色平滑变化似乎非常占用 CPU,我想知道是否有更有效的方法来做到这一点。

模拟可以在这里找到:http: //j.mp/Wou7Sl (关于给草上色的部分是一个名为 colorGrass 的函数,在第 134 行开始)

这不是一个紧急问题或任何问题,但我们将不胜感激。

4

1 回答 1

1

首先,您可以采取一些措施来显着提高性能。

  • 你有很多不必要的电话$(document).ready; 这些只会减慢速度。

  • getElementByIdjQuery 选择器与;相比是出了名的慢。在性能很重要的地方使用它,并尝试尽可能少地查找元素。获取元素的句柄并重用它。

  • .style比 jQuery 快得多.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 回答