gpt4 book ai didi

javascript - 如何根据某个js值平滑高效地调整html元素的颜色?

转载 作者:行者123 更新时间:2023-11-28 02:22:03 25 4
gpt4 key购买 nike

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

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

这不是一个紧急问题或其他问题,但如果能得到答案,我们将不胜感激。

最佳答案

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

  • 您对 $(document).ready 进行了很多不必要的调用;这些只会减慢速度。

  • getElementById 相比,jQuery 选择器的速度非常慢;在性能很重要的地方使用它,并尝试尽可能少地查找元素。获取元素的句柄并重用它。

  • .style 比 jQuery 的 .css 快得多,当性能很重要时使用它。

  • 避免重复引用foo[bar];相反,执行baz = foo[bar],然后使用baz

Here is a demo进行了上述一些更改;您会注意到它运行更流畅,消耗更少的 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';
}
}

现在,为了让草顺利渐变,您应该能够获取“能量”值并将其直接转换为“绿色” channel ,例如:

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

它的确切外观取决于您,因此请根据您的需要调整这些值,并进行您需要进行的任何其他更改(CSS 等)以使其看起来不错。

关于javascript - 如何根据某个js值平滑高效地调整html元素的颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15513954/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com