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

停止循环播放javascript画布动画

1 个答案: