Javascript中的俄罗斯方块：setInterval setTimeout行为_Javascript_Settimeout_Setinterval_Tetris

Javascript中的俄罗斯方块：setInterval setTimeout行为

javascript

Javascript中的俄罗斯方块：setInterval setTimeout行为,javascript,settimeout,setinterval,tetris,Javascript,Settimeout,Setinterval,Tetris,我有个问题。我正在尝试用javascript做一个俄罗斯方块游戏（为了学习）。但是，我不能使用setInterval（或setTimeout）函数。我想做的是每2000毫秒改变下一个箱子的颜色 HTML代码： <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>PROJET : PROGRAMMATION COTE CLIENT<

我有个问题。我正在尝试用javascript做一个俄罗斯方块游戏（为了学习）。但是，我不能使用setInterval（或setTimeout）函数。我想做的是每2000毫秒改变下一个箱子的颜色

HTML代码：

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>PROJET : PROGRAMMATION COTE CLIENT</title>
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
    <div class="all">
        <div id="A">
            <span id="pos1A"></span>
            <span id="pos2A"></span>
            <span id="pos3A"></span>
            <span id="pos4A"></span>
            <span id="pos5A"></span>
            <span id="pos6A"></span>
            <span id="pos7A"></span>
            <span id="pos8A"></span>
            <span id="pos9A"></span>
            <span id="pos10A"></span>
        </div>
    </div>
    <script src="classes.js"></script>
    <script src="indexjs.js"></script>
    </body>
</html>

JS代码：

var array = ['pos1A','pos2A','pos3A','pos4A','pos5A','pos6A','pos7A','pos8A','pos9A','pos10A    '];
function downmove(i) {
    var element = document.getElementById(array[i]);
    element.style.backgroundColor = 'green';
    console.log(element);
}
var i;
for(i=0;i<10;i++) {
    setInterval(downmove(i),2000);
}

var数组=['pos1A'、'pos2A'、'pos3A'、'pos4A'、'pos5A'、'pos6A'、'pos7A'、'pos8A'、'pos9A'、'pos10A']；
功能下移（一）{
var element=document.getElementById（数组[i]）；
element.style.backgroundColor='绿色'；
控制台日志（元素）；
}
var i；
对于（i=0；i这是因为setInterval
调用错误
setInterval
和setTimeout
都将函数
作为第一个参数，而（在您的示例中）您实际上是立即调用您的函数（这就是您立即看到结果的原因）。您应该查看文档，例如MDN:
您可以修改downmove（i）
函数以返回将传递给setInterval
的新函数，也可以使用匿名函数将downmove
调用包装在间隔内，如下所示：
for (i = 0; i<10; i++) {
    setInterval(
        (function (idx) { downmove(idx); })(i),
        2000
    );
}

（此处无需对循环使用。
这是因为setInterval
调用错误
setInterval
和setTimeout
都将函数
作为第一个参数，而（在您的示例中）您实际上是立即调用您的函数（这就是您立即看到结果的原因）。您应该查看文档，例如MDN:
您可以修改downmove（i）
函数以返回将传递给setInterval
的新函数，也可以使用匿名函数将downmove
调用包装在间隔内，如下所示：
for (i = 0; i<10; i++) {
    setInterval(
        (function (idx) { downmove(idx); })(i),
        2000
    );
}

（无需在此处使用循环的。
这是您可以做到的，但我想您必须在以后的游戏中更改它
var array = ['pos1A','pos2A','pos3A','pos4A','pos5A','pos6A','pos7A','pos8A','pos9A','pos10A    '];

var i = 0,
    interval;
    max_i = 9;

function downmove() {
    var element = document.getElementById(array[i]);
    element.style.backgroundColor = 'green';
    console.log(element);
    i++;

    if (i === max_i) clearInterval(interval);
}

interval = setInterval(downmove, 2000);

这是你可以做到的，但我想你以后必须为你的比赛改变它
var array = ['pos1A','pos2A','pos3A','pos4A','pos5A','pos6A','pos7A','pos8A','pos9A','pos10A    '];

var i = 0,
    interval;
    max_i = 9;

function downmove() {
    var element = document.getElementById(array[i]);
    element.style.backgroundColor = 'green';
    console.log(element);
    i++;

    if (i === max_i) clearInterval(interval);
}

interval = setInterval(downmove, 2000);

阅读总是很有用的。如果要使用setInterval
，或者使用setTimeout
，那么你也应该删除for
循环，在这种情况下，i
的值会出现闭包问题……谢谢。我还没有读过闭包的内容，我想我不需要它来完成这个小项目。你呢ading总是有用的。如果要使用setInterval
，或者使用setTimeout
，那么您还应该删除for
循环，在这种情况下，i
的值会出现闭包问题……谢谢。我还没有读到闭包的相关内容，我想我不需要它来完成这个小项目。比KS对你的答案有很多的看法。我来自C++，这些概念我不熟悉。我必须在基础上做更多的工作，然后再把我的手放在这个项目上。非常感谢你有用的链接，祝你今天的日子过得很好。谢谢你的回答。我来自C++，这些概念我不熟悉。我必须在Basic基础上做更多的工作。我正在着手这个项目。非常感谢您提供的有用链接，祝您度过愉快的一天。我尝试了这个方法，效果很好，但我不明白为什么您要调用setInterval（downmove，2000）而不是setInterval（downmove（），2000）它适用于第一个块，但不适用于第二个块，它仅以绿色显示第一个块。顺便说一句，非常感谢您的回答和时间。@WaLinke第二个块不起作用，因为使用“downmove（）”调用函数并将结果（为“null”）传递给setInterval。与setInterval（downmove，…）相比你可以传递函数本身！我尝试了这个方法，但我不明白为什么你调用setInterval（downmove，2000）而不调用setInterval（downmove（），2000）。它与第一个函数一起工作，但与第二个函数不一起，它只以绿色显示第一个块。顺便说一句，非常感谢你的回答和时间。@WaLinke第二个函数不起作用，因为“downmove（）”调用函数并将结果（为“null”）传递给setInterval。与setInterval（downmove，…）相比，传递函数本身！