每個對象實例的唯一setInterval值

我有3個以1像素的速度向右移動的對象「球」實例。同時，我希望他們以不同的速度移動 - 每個人都有獨特的setInterval值。每個對象實例的唯一setInterval值

最初，我讓它們設置爲以單獨的像素速率向右移動，但這使得碰撞檢測（在另一個項目中使用時）有點不可靠。這裏是我的代碼：

$(window).load(function() { 

balls = []; 
FPS = 1000/60; 

function Speed(ballSpeed) { 

    this.ballSpeed = ballSpeed; 
} 

function Ball() { 
    var rNum = Math.random() + 1; 
    var rate = Math.round(rNum*10)/10; 
    var ballDrop = $('<div />').addClass('ball'); 
    this.speed = new Speed(rate); 
    this.output = ballDrop.appendTo($(".container")); 
} 

Ball.prototype = { 
    updatePos: function() {    
     bL = this.output.position().left; 
     this.output.css({left: bL += 1}); 
     this.output.text(this.speed.ballSpeed); 
    } 

} 

var ballRate = setInterval(function() { 
    balls.forEach(function(ball){ 
     ball.updatePos(); 
     if (bL === 580) { 
     window.clearInterval(ballRate); 
     }   
    }); 

}, FPS); 

function addBall() { 
    ball = new Ball(10, 20); 
    balls.push(ball); 
    } 

for (var i=0; i<3; i++) { 
    addBall(); 
    } 

});

我一直想要做的東西像下面，但它不工作...

balls.forEach(function(ball){ 
    var ballRate = setInterval(function() { 
     ball.updatePos(); 
     if (bL === 580) { 
      window.clearInterval(ballRate); 
     }   
    }, ball.speed.ballSpeed); 

});

這裏的jsFiddle

來源

2014-06-14 Tim C

每像素1像素？不要在動畫幀中測量時間！ – Bergi

你的問題到底是什麼？ – jfriend00

你應該爲Ball類定義一些'run'方法，叫它開始運行球，當然每個運行方法都應該調用核心'setInterval'並且間隔時間應該是不同的（特別是每個球），就像這個http://jsfiddle.net/viphalongpro/76QpJ/9/ –

所以，也存在一些問題：如果你用你顯示的第二個變體替換你的setInterval代碼，那麼你必須將它移動到以下的球被實例化爲。（因爲循環只執行一次，並且如果沒有實例化球，代碼將不會運行，因爲沒有球迭代。

此外，您的bL變量在所有球上共享，因此按順序有不同的速度，你必須改變bL這個.bL和ball.bL

最後但並非最不重要的是，球速差異太小，以至於看不到它（你怎麼區分1000次/秒每秒999次），所以我建議你將setInterval中的ball.speed.ballSpeed更改爲FPS * ball.speed.ballSpeed。

此外，似乎Ball構造函數的參數未使用，所以我建議去rem那些。

Code to let me add jsFiddle link

的jsfiddle工作實例：jsFiddle

希望我能幫上忙，Ferdi265

來源

2014-06-14 17:20:29 Ferdi265

非常感謝！這是一個很大的幫助。 –

您需要實際使用每個球的induvidual速度。

這裏是代碼的更新。

Ball.prototype = { 
    updatePos: function() {    
     bL = this.output.position().left; 
     if(bL < 580) { 
      this.output.css({left: bL += this.speed.ballSpeed});  
      this.output.text(this.speed.ballSpeed); 
      return true; 
     }else { 
      return false; 
     } 
    } 
}

和

var ballRate = setInterval(function() { 
    var keepUpdating = []; 
    balls.forEach(function(ball){ 
     keepUpdating.push(ball.updatePos());     
    }); 
    if(keepUpdating.indexOf(true) === -1) { 
     window.clearInterval(ballRate); 
    } 
}, FPS);

的keepUpdating是因爲球有不同的速度，所以間隔需要停止當最後一個球衝過終點。

來源

2014-06-14 17:21:47 Karl

每個對象實例的唯一setInterval值

回答

相關問題