停止javascript画布动画循环

当对象与另一个对象碰撞时，我希望它只设置一次动画，此时它第一次设置的动画很好，然后第二次、第三次等一直在背景中运行

var imgEx = new Image();
imgEx.src = 'images/explosion.png';

var xpos = 0;
var ypos = 0;
var index = 0; 
var numFrames = 74; 
var frameSize = 100;

function explosion () {
xpos += frameSize;

index += 1;

if (index >= numFrames) {
xpos =0;
ypos =0;
index=0;    
return;             
} 
else if (xpos + frameSize > imgEx.width){
xpos =0;
ypos += frameSize;
}
}

这就是我所说的动画

    Jet.prototype.checkEnemyCollision = function () {
    for (var i = 0; i < enemies.length; i++) {
        if (this.drawX < enemies[i].drawX + enemies[i].width && this.drawX + this.width > enemies[i].drawX && this.drawY < enemies[i].drawY + enemies[i].height && this.drawY + this.height > enemies[i].drawY) {
            if (score > highScore) {
                highScore = score;
            }

            // Added the functions below, removed score = 0


            ctxGameOver.drawImage(imgEx, xpos, ypos, frameSize, frameSize, (jet1.drawX - 50), (jet1.drawY - 50), frameSize, frameSize);
            if (xpos < 800) {
                setInterval(explosion, 1000 / 74);
            }
            if (xpos === 800) {
                stopLoop();
                clearCtxGame();
                gameOver();
            }
        }
    }
}; 

Jet.prototype.checkEnemyCollision=函数（）{
对于（变量i=0；i<0.length；i++）{
如果（this.drawX<敌人[i].drawX+敌人[i].width&&this.drawX+this.width>敌人[i].drawX&&this.drawY<敌人[i].drawY+敌人[i].height&&this.drawY+this.height>敌人[i].drawY）{
如果（分数>高分）{
高分=分数；
}
//添加了下面的函数，删除的分数=0
drawImage（imgEx、xpos、ypos、frameSize、frameSize、（jet1.drawX-50）、（jet1.drawY-50）、frameSize、frameSize）；
如果（xpos<800）{
设定间隔（爆炸，1000/74）；
}
如果（xpos==800）{
stopLoop（）；
clearCtxGame（）；
gameOver（）；
}
}
}
}; 

---

基本上，我已经做了一个游戏，当飞机撞上一个物体时，它会显示一个动画，并通过屏幕将我带到游戏中，当我再次按下“播放”时，动画已经在背景中循环并减慢游戏速度，如果我碰巧一次玩了3到4次游戏，它会在后台循环3/4次，这会让游戏变得非常慢

您可以尝试以下方法。将间隔指定给一个变量，然后在游戏结束时将其清除

    if (xpos < 800) {
            this.explosion = setInterval(explosion, 1000 / 74);
        }
        if (xpos === 800) {
            stopLoop();
            clearInterval(this.explosion);
            clearCtxGame();
            gameOver();
        }

---

因此，基本上是调用

explosion（）

，然后让

explosion（）

函数在停止时处理。如果完成，则不会调用

超时，它将自行停止。
对爆炸执行设置的间隔，但由于未存储间隔处理程序，因此无法停止设置的间隔，因此所有爆炸将继续爆炸。
        if (xpos < 800) {
            explosion();
        }

function explosion() {
    xpos += frameSize;

    index += 1;

    if (index >= numFrames) {
        xpos = 0;
        ypos = 0;
        index = 0;
        return;
    } else if (xpos + frameSize > imgEx.width) {
        xpos = 0;
        ypos += frameSize;
        setTimeout(explosion, 1000 / 74);
    }
}