從對象方法中使用多個時，setInterval（）加速

Question

我的setIntervals()有問題。我知道這些問題出現很多，但我似乎無法弄清楚我的實現有什麼問題。每當我實例化一個新的Obstacle()時，它就會清除用於旋轉障礙物實例的設置間隔，並且障礙物的下一個實例化似乎旋轉兩次！我相信這是與範圍有關，但我是一個相對初學者，所以我不太確定這裏發生了什麼。可以提供更多信息。

var obstacleCount = 1; 
function Obstacle(){ 
    this.angle = 0; 
    this.id = obstacleCount; 
    this.elPrefix = "cookie-"; 
    this.el = '.' + this.elPrefix + this.id; 
    $('#game-wrapper').append('<div class="' + this.elPrefix + this.id + '"></div>'); 
    obstacleCount += 1; 
} 

var intervals = new Array(); 

Obstacle.prototype.roll = function() { 
    self = this; 
    intervals[self.id] = setInterval(function(){ 
     self.angle -= 3; 
     $(self.el).rotate(self.angle); 
    }, 5); 
    $(self.el).animate({ 
     right: 1000 
    }, 4000, 'linear', function(){ 
     $(self.el).remove(); 
     clearInterval(intervals[self.id]); 
    }); 
}; 

var obstacles = new Array(); 

setInterval(function(){ 
    obstacleID = obstacleCount; 
    obstacles[obstacleID] = new Obstacle(); 
    obstacles[obstacleID].roll(); 
}, 1000); 

Answer 1

在大多數遊戲中，有一個更新循環可以處理遊戲的所有更新邏輯。我建議使用單個時間間隔來更新所有對象，而不是通過setInterval爲每個對象提供它自己的計劃更新。您從更新循環方法中獲得一些優勢：

1. 不必跟蹤間隔。

2. 由於setInterval與時序不一致（主腳本完成執行時觸發，並在下一次執行前有一些額外的時間，但只有在間隔時間結束時纔會觸發，這意味着您不能完全依賴它的時間就是你所要求的時間。）你最好在當時更新所有的對象，這樣你就可以保持一致。

一般僞代碼，讓你開始：

initialize objects 
    add all objects to an array 

    setInterval(updateObjects, 30); 

    updateObjects(){ 
     for each object in array 
     object.roll(); 
    }