1

オブジェクトが別のオブジェクトと衝突するときは、一度だけアニメーション化する必要があります。現時点では、最初はうまくアニメーション化され、次に2番目、3番目などが常にバックグラウンドで実行されます。

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 に答える