停止循环的 javascript 画布动画答案

【问题标题】：stop a javascript canvas animation from looping停止循环的 javascript 画布动画
【发布时间】：2013-03-06 05:17:42
【问题描述】：

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

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 次循环，这使得游戏非常慢。

【问题讨论】：

你对爆炸进行了设置间隔，但是由于你没有存储间隔处理程序，所以你无法停止 setInterval，所以所有爆炸都会继续爆炸。

标签： javascript html loops animation canvas

【解决方案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 将不会被调用，它会自行停止。

【讨论】：