從循環

Question

當物體與其他物體碰撞停止一個javascript帆布動畫，我希望它只是動畫一次，此刻卻動畫罰款的第一次，然後第二，第三等在後臺運行所有的時間。

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