Question

我有3个物体“Ball”实例以1像素的速率向右移动。同时，我希望它们以不同的速度移动 - 每个都有一个唯一的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

Answer 1

所以，有一些问题：如果你用你显示的第二个变体替换你的setInterval代码，那么你必须将它移动到实例化球下面。（因为循环只执行一次，如果球没有被实例化，代码就不会运行，因为没有球可以迭代。

另外，你的bL变量在所有球上共享，所以为了获得不同的速度，你必须将bL更改为this.bL和ball.bL

最后但并非最不重要的是，球速差太小，无法看到它。（你如何区分每秒1000次，每秒999次？），所以我建议你将setInterval中的ball.speed.ballSpeed更改为FPS * ball.speed.ballSpeed。

此外，似乎Ball构造函数的参数未使用，因此我建议删除它们。

Code to let me add jsFiddle link

工作示例的JSfiddle：jsFiddle

希望我能帮忙，Ferdi265

Answer 2

你需要实际使用每个球的弹性速度。

以下是代码的更新。

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是因为球的速度不同，所以当最后一个球越过终点时，间隔需要停止。

每个Object实例的唯一setInterval值

2 个答案: