Question

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

HTML CODE：

<!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>

CSS代码：

.all {
    display: flex;
    flex-direction: column;
}
.all > div {
    display: flex;
    flex-direction: row;
}
.all > div > span {
    width: 20px;
    height: 20px;
    border: 1px solid gray;
}

JS CODE：

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);
}

我希望每个块一个接一个地改变颜色，但实际上它会为一行中的所有行着色。这就像我的间隔不起作用。

Answer 1

那是因为您的setInterval电话错误。

setInterval和setTimeout都将Function作为第一个参数，而（在您的示例中）您实际上是在立即调用函数（这就是您立即看到结果的原因））。您应该查看文档，例如在MDN：https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval。

您可以修改downmove(i)函数以返回将传递给setInterval的新函数，也可以使用匿名函数将downmove调用包围在区间内这样：

for (i = 0; i<10; i++) {
    setInterval(
        (function (idx) { downmove(idx); })(i),
        2000
    );
}

（请注意我正在使用IIFE来正确处理i变量，这可以通过在for循环中使用let i = 0来避免，但为什么需要这样做呢？另一个要讨论的主题，你可以在这里阅读更多相关内容：JavaScript closure inside loops – simple practical example）。

您的代码还有一个问题 - 您希望按顺序更改颜色，但实施（即使使用修复程序）将在所述2秒钟后立即运行每个颜色更改。要解决此问题，您必须以某种方式保留以前彩色行的轨迹并每2秒递增一次。

这是一个固定实现的简单示例：

let idx = 0;

const intervalID = setInterval(function () {
    if (idx >= 10) {
        // Maximum row reached, break the loop...
        clearInterval(intervalID);

        return;
    }

    downmove(idx);

    idx++;
}, 2000);

（此处无需使用for-loop。）

Answer 2

这就是你可以做到的，但我想你以后必须为你的游戏改变它。

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);

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

2 个答案: