1

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

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

4

1 回答 1

2

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

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

于 2013-03-18T16:59:42.990 回答