Javascript 碰撞检测性能差

我正在使用KineticJs构建一个游戏，它使用拖放来移动屏幕上的元素，我有很大的性能问题，因为我检查了dragmove事件，如果您拖动的元素与可能的捕捉位置发生碰撞，那么拖动的元素会变得非常滞后。 我正在使用kineticJs内置函数，但我感觉它们没有得到很好的优化。实际上，它在chrome中运行得相当不错（你可以看到它的滞后），但在firefox中并不好。 关于如何优化我的代码有什么想法吗

element.on('dragmove',function(evt){
    var position = stage.getUserPosition(evt);
    var snap = snapGroup.getIntersections(position.x,position.y);
    if(snap.length > 0) snapElement(snap[0]);
}

---

找到瓶颈。我猜是这样的：

var snap = snapGroup.getIntersections(position.x,position.y);

如果是这样，请设置一个计数器，并且只在更新过程中每隔几次更新一次。确保在

dragend

上进行最后更新，以便最终得到正确的最终位置

编辑：

也许类似的方法可以奏效：

var dragUpdateCount = 0;
var dragUpdateRate = 5;
element.on('dragmove',function(evt){
    dragUpdateCount++;
    if (dragUpdateCount >= dragUpdateRate) {
        var position = stage.getUserPosition(evt);
        var snap = snapGroup.getIntersections(position.x,position.y);
        if (snap.length > 0) {
            snapElement(snap[0]);
        }
        dragUpdateCount = 0;
    }
}

---

正如@Aram指出的，瓶颈在于.getcrossions（）函数

.getcrossions（）函数非常占用内存/处理空间，因此需要进行初步检查，将处理限制在某些位置。我做的一个小游戏也遇到了类似的问题，.getcrossions（）的碰撞检测正在扼杀我的速度，我也尝试了.intersects（），但结果类似。我所做的是这样的：（不知道这是否适用于旋转）

element.on（'dragmove'，function（）{//我认为您不需要在此处传递'evt'
var position=stage.getUserPosition（）；
var snapChildren=snapGroup.getChildren（）；//获取每个snapGroup子级
对于（var i=0；i snapChild[i].getX（）&&position.xsnapChild[i].getY（）&&position.y0）snapElement（snap[0]）；
}
}
}
}

因此，这是一种“边界矩形”碰撞检测方法，应该可以最大限度地减少所需的处理

---

即使您获取所有子对象并在for循环中处理它们，它仍然比.getcrossions（）快

为什么不询问此碰撞检测代码是否真的属于dragmove？为什么不

dragstop

？它一定在dragmove事件中，因为我正在旋转拖动元素，因为它拖动到可能的下降位置。这很有帮助，但我尝试每隔几次就更新一次，但不起作用，我不知道是什么问题，你能写下你将如何实现它的代码吗？如果这不起作用，那么你只需要用同样的想法构建你自己的函数，你需要先做一些简单的检查，然后你就可以了。GetCructions（）GetCructions（）性能将很快得到提高。请继续关注。

 element.on('dragmove',function(){ //dont think you need the 'evt' passed here
     var position = stage.getUserPosition();
     var snapChildren = snapGroup.getChildren();  //get each snapGroup child
     for(var i=0; i<snapChildren.length; i++){
          if(position.x > snapChild[i].getX() && position.x < snapChild[i].getX()+snapChild[i].getWidth()){ // check horizontal bounding rectangle
                if(position.y > snapChild[i].getY() && position.y < snapChild[i].getY()+snapChild[i].getHeight(){ // check vertical bounding rectangle
                    var snap = snapGroup.getIntersections(position.x,position.y);
                    if(snap.length > 0) snapElement(snap[0]);
                }
           }
     }
 }