Javascript Can'；t使用clearInterval（）停止函数的执行

我正在用JavaScript创建一个小游戏，我有一个障碍物，应该每3100毫秒生成一次，当“玩家”碰到障碍物时，障碍物应该停止移动或重新生成。但是我写的代码是这样的，在第一次繁殖障碍物时，代码工作正常，障碍物停止移动或重新繁殖，但从第二次繁殖开始，代码就不能正常工作

这是我的密码：

//Spawning Obstacle 

counter = 0;

function createObstacle() {
    counter++;
    ctx.clearRect(0, 0, 520, 320);
    ctx.drawImage(background, 0, 0, 520, 320);
    ctx.drawImage(bomb, obX, obY, 20, 20);
    ctx.fillStyle = "black";
    ctx.fillRect(x, y, 20, 20);
    obY += 10;
    if (counter == 31) {
        clearInterval(moveObstacle);
        console.log(counter);
        counter = 0;
        console.log(counter);
        obX = Math.floor(Math.random() * 10) * 50;
        obY = 0;
        score++;
        ctx.clearRect(0, 0, 520, 320);
        ctx.drawImage(background, 0, 0, 520, 320);
        ctx.drawImage(bomb, obX, obY, 20, 20);
        ctx.fillStyle = "black";
        ctx.fillRect(x, y, 20, 20);
    }
}

function obstacle() { moveObstacle = setInterval(createObstacle, 100); }
obstacle();
var recreateObs = setInterval(obstacle, 3100);

//Game Over

function gameOver() {
    if ((x == obX && y - 20 == obY) || (x == obX && y + 10 == obY) || (x + 10 == obX && y == obY) || (x - 10 == obX && y == obY) || (x + 10 == obX && y + 10 == obY || (x - 10 == obX && y - 10 == obY) || (x + 10 == obX && y - 10 == obY || (x - 10 == obX && y + 10 == obY)))) {
        ctx.clearRect(x, y, 20, 20);
        ctx.fillStyle = "black";
        ctx.fillRect(x, y, width, height);
        drawRect = nope;
        lose.play();
        clearInterval(moveObstacle);
        clearInterval(recreateObs);
        clearInterval(runGameOver);
        clearInterval(writeScore);
        return "Game Over";
    }
}

var runGameOver = setInterval(gameOver, 100);

我尝试使用setTimeOut（）和clearTimeOut（）调用并停止调用障碍（），但似乎没有任何变化。另外，由于某种原因，只要调用两次障碍（）就足以让障碍不断繁殖

---

谢谢你的回复。修复了它。

通过更改以下内容来修复它：

function obstacle() { moveObstacle = setInterval(createObstacle, 100); }
obstacle();
var recreateObs = setInterval(obstacle, 3100);

//Game Over

function gameOver() {
if ((x == obX && y - 20 == obY) || (x == obX && y + 10 == obY) || (x + 10 == obX && y == obY) || (x - 10 == obX && y == obY) || (x + 10 == obX && y + 10 == obY || (x - 10 == obX && y - 10 == obY) || (x + 10 == obX && y - 10 == obY || (x - 10 == obX && y + 10 == obY)))) {
    ctx.clearRect(x, y, 20, 20);
    ctx.fillStyle = "black";
    ctx.fillRect(x, y, width, height);
    drawRect = nope;
    lose.play();
    clearInterval(moveObstacle);
    clearInterval(recreateObs);
    clearInterval(runGameOver);
    clearInterval(writeScore);
    return "Game Over";
}

}

为此：

recreateObs = setInterval(function(){spawnObstacle= createObstacle, 100)}, 3100);

//Game Over
    
    function gameOver() {
        if ((x == obX && y - 20 == obY) || (x == obX && y + 10 == obY) || (x + 10 == obX && y == obY) || (x - 10 == obX && y == obY) || (x + 10 == obX && y + 10 == obY || (x - 10 == obX && y - 10 == obY) || (x + 10 == obX && y - 10 == obY || (x - 10 == obX && y + 10 == obY)))) {
            ctx.clearRect(x, y, 20, 20);
            ctx.fillStyle = "black";
            ctx.fillRect(x, y, width, height);
            drawRect = nope;
            lose.play();
            clearInterval(recreateObs);
            clearInterval(spawnObstacle);
            clearInterval(runGameOver);
            clearInterval(writeScore);
            return "Game Over";
        }
    }

---

通过更改此选项修复了此问题：

function obstacle() { moveObstacle = setInterval(createObstacle, 100); }
obstacle();
var recreateObs = setInterval(obstacle, 3100);

//Game Over

function gameOver() {
if ((x == obX && y - 20 == obY) || (x == obX && y + 10 == obY) || (x + 10 == obX && y == obY) || (x - 10 == obX && y == obY) || (x + 10 == obX && y + 10 == obY || (x - 10 == obX && y - 10 == obY) || (x + 10 == obX && y - 10 == obY || (x - 10 == obX && y + 10 == obY)))) {
    ctx.clearRect(x, y, 20, 20);
    ctx.fillStyle = "black";
    ctx.fillRect(x, y, width, height);
    drawRect = nope;
    lose.play();
    clearInterval(moveObstacle);
    clearInterval(recreateObs);
    clearInterval(runGameOver);
    clearInterval(writeScore);
    return "Game Over";
}

}

为此：

recreateObs = setInterval(function(){spawnObstacle= createObstacle, 100)}, 3100);

//Game Over
    
    function gameOver() {
        if ((x == obX && y - 20 == obY) || (x == obX && y + 10 == obY) || (x + 10 == obX && y == obY) || (x - 10 == obX && y == obY) || (x + 10 == obX && y + 10 == obY || (x - 10 == obX && y - 10 == obY) || (x + 10 == obX && y - 10 == obY || (x - 10 == obX && y + 10 == obY)))) {
            ctx.clearRect(x, y, 20, 20);
            ctx.fillStyle = "black";
            ctx.fillRect(x, y, width, height);
            drawRect = nope;
            lose.play();
            clearInterval(recreateObs);
            clearInterval(spawnObstacle);
            clearInterval(runGameOver);
            clearInterval(writeScore);
            return "Game Over";
        }
    }

---

在将setInterval id分配给函数之前，必须在函数外部声明moveBarrierd变量

var-moveObstacleId；
函数{
moveObstacleId=设置间隔（CreateBobstacleid，100）；
}
障碍（）；
清除间隔（moveObstacleId）

---

并对其他setInterval函数执行同样的操作。

在为其分配setInterval id之前，必须在函数外部声明moveReshibler变量

var-moveObstacleId；
函数{
moveObstacleId=设置间隔（CreateBobstacleid，100）；
}
障碍（）；
清除间隔（moveObstacleId）

---

并对其他设置间隔函数执行相同操作。

movebounder

将保留最后一个设置间隔的id并非所有设置间隔函数都很高兴您修复了它。发布自己问题的答案并接受它比只发布问题本身的更新要好。@ibrahimmahrir谢谢，谢谢worked@SmilinJasper我认为雅各布的意思（我也同意）是把它作为一个答案而不是评论，这样人们将来可能会发现它很有用。答案区域位于列表的底部page@ibrahimmahrir哈哈，好吧，对不起。stackoverflow

MoveBarrier

的新成员将保留最后一个

setInterval

的id，但不是所有人都很高兴您修复了它。发布自己问题的答案并接受它比只发布问题本身的更新要好。@ibrahimmahrir谢谢，谢谢worked@SmilinJasper我认为雅各布的意思（我也同意）是把它作为一个答案而不是评论，这样人们将来可能会发现它很有用。答案区域位于列表的底部page@ibrahimmahrir哈哈，好吧，对不起。对stackoverflow来说有点陌生