javascript - 停止 javascript Canvas 动画循环

Question

当对象与另一个对象发生碰撞时，我希望它只播放一次动画，此时它第一次播放得很好，然后第二次、第三次等一直在后台运行。

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

基本上我制作了一个游戏，当喷气式飞机击中一个物体时它会显示一个动画并将我带到游戏结束屏幕，当我再次按下播放时动画已经在后台循环并减慢游戏速度，如果我碰巧一口气玩了 3 或 4 次游戏，它在后台运行 3/4 次循环，使游戏速度非常慢。

Answer 1

您可以尝试以下操作。将间隔分配给变量，然后在游戏结束时将其清除。

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

或者我认为更好的方法，

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

所以基本上发生的事情是调用 explosion()，然后让 explosion() 函数在它停止时进行处理。如果完成，timeOut 将不会被调用，它会自行停止。