Question

当我使用setInterval（）来控制游戏循环时。它通过让星星变得更快更快来做出回应。在循环的每个转弯处，速度越来越大。如何保持速度不变？

function Star(x, y, rad, velocity, fill){
    this.x = Math.floor(Math.random() * 999);//this create a random number between 0 and 599 on the x axis
    this.y = 0;
    this.rad = Math.floor((Math.random() * 30) + 15);//this create a random number between 10 and 30 for the radius
    this.velocity = 5;
    this.fill = fill 

    this.draw = function(){
    ctx.beginPath();
    ctx.fillStyle = this.fill;             
    ctx.arc(this.x, this.y, this.rad, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.fill();
    this.y += this.velocity;
    }
}

function createMultipleStars(){
    for (var i = 0; i <= numOfStars; i++)
    stars[i] = new Star(i * 50, 10, i, i, "rgba(255,215,0,0.6)");
}


function step() {
    ctx.clearRect(0,0,canvas.width, canvas.height);
    for (var i = 0; i<= numOfStars; i++)
    stars[i].draw();
    requestAnimationFrame(step);
}
   //spaceShip.drawSpaceShip();
var myVar2 = setInterval(function(){ createMultipleStars() }, 4000);
var myVar = setInterval(function(){ step() }, 4000);

Answer 1

您的step函数通过requestAnimationFrame异步调用自身。

然后，每次拨打step时，结果都是这样的：

step ──> step ──> step ──> step ──> …

但是，您在step中致电setInterval。因此，step的新来电定期进行：

setInterval ──> step ──> step ──> step ──> step ──> …
     ├─────────────────> step ──> step ──> step ──> …
     ├──────────────────────────> step ──> step ──> …
     ├───────────────────────────────────> step ──> …
     ⋮

因此，请勿使用setInterval(step)。将其替换为step()。

或者，不要让step自己打电话。

Answer 2

reqestAnimationFrame的作用类似于setTimeout，除非您不告诉它何时执行，它会告诉您何时应该执行。

所以实际上是循环：

function step () {
    requestAnimationFrame(step);
}

类似于：

setInterval(step);

因此，实际上，您每个时间间隔都会创建越来越多的动画循环，而不是每个时间间隔执行step。 step函数将在自己的requestAnimationFrame循环中执行。

当我使用setInterval函数时，画布中的对象以指数方式变得更快

2 个答案: