Question

我正在用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（）来调用和停止调用barrier（），但是似乎没有什么改变。同样，只需两次调用barrier（）就足以使障碍由于某种原因而不断产生。

感谢您的回复。修复它。

Answer 1

通过更改以下内容解决了此问题：

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

Answer 2

您必须在函数外部并为它分配setInterval ID之前声明moveObstacle变量。

var moveObstacleId;
function obstacle() { 
     moveObstacleId = setInterval(createObstacle, 100); 
}
obstacle();

clearInterval(moveObstacleId)

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

使用clearInterval（）无法停止执行功能

2 个答案: