Question

我正在javascript中构建一个小游戏，以便在javascript中学习面向对象的编程。在其中，单位移动并做基本的东西。

动画每20毫秒发生一次。碰撞检测应该每100毫秒发生一次。

在每次实例化一个单元时，与一个新的setInterval相比，在文档中运行单个setInterval似乎更快。所以我这样做。来源：http://www.schillmania.com/content/projects/javascript-animation-2/。

但现在我必须做碰撞检测，以及动画。我看到两个解决方案：

解决方案1：

window.setInterval(AnimateFunc,20);

function AnimateFunc(){
    for (i = 0; i < UnitArray.length; i++){
        UnitArray[i].Behaviour();     // Every unit in my array of units behaviour function is called. ex: add 2 pixels to unit.style.top.
    }
    CollisionDetectionCounter += 1;   // Globale variable
    if (CollisionDetectionCounter === 5){
        CollisionDetectionFunc();
        CollisionDetectionCounter = 0;
    }
}

使用此解决方案，将保留文档中的单个setInterval调用。但每隔50个变量递增和50个比较。

解决方案2：

window.setInterval(AnimateFunc,20);
window.setInterval(CollisionDetectionFunc, 100);

function AnimateFunc(){
    for (i = 0; i < UnitArray.length; i++){
        UnitArray[i].Behaviour();
    }
}
function CollisionDetectionFunc(){
    // Perform collision detection between all units curently on the field.
}

使用此解决方案，我们可以阻止50次递增/比较，但现在有两个setInterval函数正在运行。

你认为哪种解决方案最好？

我意识到这可能不重要。我可能会做出其他的决定，这会让我的游戏更加糟糕，但是我很好奇：）

提前谢谢。

Answer 1

除非那些确切的时间限制是您的硬限制，否则我建议requestAnimationFrame而不是setInterval。但是如果你必须使用setInterval，那么我会推荐一种混合你的两种设置的方法：

function AnimateFunc(){
    for (i = 0; i < UnitArray.length; i++){
        UnitArray[i].Behaviour();
    }
}

function CollisionDetectionFunc(){
    // Perform collision detection between all units curently on the field.
}

function TickFunc() {
    AnimateFunc();
    CollisionDetectionCounter += 1;   // Globale variable
    if (CollisionDetectionCounter === 5){
        CollisionDetectionFunc();
        CollisionDetectionCounter = 0;
    }
}
window.setInterval(TickFunc, 20);

这使您可以控制单个计时器。这不仅仅是一个同步关注的性能问题：多个定时器可以相互漂移，听起来并不像你想要这样。但它也可以让你保持关注点的分离：有动画功能，碰撞功能和协调它们的功能。

这也适用于使用requestAnimationFrame。

Answer 2

您应该使用requestAnimationFrame代替，有关详细信息，请参阅：

您的代码可能与此类似：

var lastCollisionDetection;
var requestId;

function animate(time) {
  if (lastCollisionDetection + 100 > time) {
    lastCollisionDetection = time;

    // TODO: collision detection
  }

  // TODO: update objects - you might want to check the passed time here as well

  requestId = window.requestAnimationFrame(animate);
}

lastCollisionDetection = window.performance.now();
requestId = window.requestAnimationFrame(animate);

哪种解决方案最佳性能

2 个答案: