//traffic lights:red,yellow,green
fill(trafficFirstLightColor)
ellipse(315, 40, 20, 20)
fill(trafficSecondLightColor)
ellipse(315, 40 + 25 * 1, 20, 20)
fill(trafficThirdLightColor)
ellipse(315, 40 + 25 * 2, 20, 20)
//if three lights with black, first light on
x+=10
if (trafficFirstLightColor === "black" && trafficSecondLightColor === "black" && trafficThirdLightColor === "black" && x == 3000) {
setTimeout(() => {
trafficFirstLightColor = 'red';
}, x)
} else if (trafficFirstLightColor === "red" && x == 6000) {
trafficFirstLightColor = "black"
setTimeout(() => {
trafficSecondLightColor = 'yellow';
}, x-3000)
} else if (trafficSecondLightColor === "yellow" && x == 9000) {
trafficSecondLightColor = "black"
setTimeout(() => {
trafficThirdLightColor = 'green';
}, x-6000)
}
我试图为交通灯每3秒生成颜色;然而,它失败了……
我最初有三个黑色的交通灯,并给他们特定的变量,我给另一个变量x作为if-else语句中的变量,当所有的交通灯都是黑色的,第一个交通灯变成红色。然后,当第一个交通灯变为红色时,第二个交通灯变为黄色3秒。最后,当第二个交通灯变成黄色时,第三个交通灯变成绿色。顺便说一句,计划很棒,但代码很糟糕。
2条答案
按热度按时间lzfw57am1#
假设这是一个使用
setup
和draw
的p5.js配置,draw
函数的执行速度高达30/60 FPS,因此您不必手动调用setTimeout
来触发更改。相反,您可以将当前的millis()
与以前的millis()
进行比较,以了解自上次调用draw()
以来所经过的时间。下面是一个尝试使用p5.js而不使用
setTimeout
执行交通灯动画的示例:nmpmafwu2#
当你处理多个值时,使用一个数据结构,而不是
thing1
,thing2
,thing3
...。在这种情况下,我们可以创建一个数组,其中包含3个包含颜色和持续时间属性的对象,然后循环数组或使用索引在渲染灯光时遍历灯光。代码不仅泛化得很好(您可以随意添加和删除灯光),而且通过分离配置和实现逻辑,可以更容易地调整持续时间,而不会在代码中出现混乱。
如果您的画布在
draw
中的每一帧上都被清除,则可以将灯光循环与绘图分开:请记住,
setTimeout
是一个粗略的估计,而不是一个精确的持续时间,所以这将随着时间的推移而漂移。如果你想避免漂移,你可以跟踪最后一次灯光变化的时间,然后反复检查自最后一次灯光变化以来所经过的毫秒数。当它超过当前灯光持续时间时,将上次更改时间增加持续时间并重复。
如果要一次渲染所有灯光而不是更改单个灯光的颜色,可以添加循环: