这里是我的密码笔的链接:https://codepen.io/apasric4/pen/zYYydYP
单击开始按钮时,板上的一系列颜色应点亮。控制台记录了颜色数组,并选择了具有相应颜色的框元素。带有changeOpacity函数的超时功能将框的颜色的不透明度更改几秒钟,然后将其恢复正常以创建所需的效果。
这部分代码是上面解释的。
btn.addEventListener('click', ()=> {
if (!gamePlay) {
gamePlay=true;
createSequence(number);
gameClicks.forEach((color,i)=> {
box=document.querySelector(`.box[data-color=${color}]`)
setTimeout(()=> {
changeOpacity();
}, 200*i);
})
}
});
function changeOpacity() {
box.classList.toggle('active');
setTimeout(()=> {
box.classList.toggle('active');
}, 300);
}
但是,我的问题是,当序列运行时,特别是只有一种颜色会点亮。这对我来说很奇怪。例如,单击开始时,也许只有带有黄色颜色属性的框会亮起。我不明白为什么会这样。
将当前的changeOpacity
传递给box
(并确保在函数内部正确确定box
的范围,而不是使其成为隐式的全局变量):
btn.addEventListener('click', () => {
if (!gamePlay) {
gamePlay = true;
createSequence(number);
gameClicks.forEach((color, i) => {
const box = document.querySelector(`.box[data-color=${color}]`)
setTimeout(() => {
changeOpacity(box);
}, 200 * i);
})
}
});
function changeOpacity(box) {
box.classList.toggle('active');
setTimeout(() => {
box.classList.toggle('active');
}, 300);
}