javascript - 在简单的碰撞检测算法方面需要帮助

标签 javascript html canvas

好的,所以我的简单碰撞检测算法不起作用。它总是激活(除非玩家在他的 x 和/或 y 平原上没有任何碰撞)。

好吧,这是代码:

collisionCheck: function(bArray){
    for(var i = 0; i < bArray.length; i++){
        for(var j = 0; j < bArray[i].length; j++){
            if(bArray[i][j].getType() != 0){
                if((bArray[i][j].getX() > this.x && bArray[i][j].getX() < this.x + this.width) ||
                    (bArray[i][j].getX() + blockSize > this.x && bArray[i][j].getX() + blockSize < this.x + this.width) &&
                    (bArray[i][j].getY() > this.y && bArray[i][j].getY() < this.y + this.height) || 
                    (bArray[i][j].getY() + blockSize > this.y && bArray[i][j].getY() + blockSize < this.y + this.height)){
                    this.x = 0;
                }
            }
        }
    }
}

看到它为什么在不应该激活时激活的任何原因吗?

最佳答案

试试这个:

collisionCheck: function(bArray){
  for(var i=0,len=bArray.length; i<len; ++i){
    for(var j=0,len2=bArray[i].length; j<len2; ++j){
      if(!bArray[i][j].getType()) continue;
      var x = bArray[i][j].getX(), y = bArray[i][j].getY();
      var x2 = x+blockSize, y2 = y+blockSize;
      var overlapping = (x2>this.x) && (x<(this.x+this.width)) && (y2>this.y) && (y<(this.y+this.height));
      if (overlapping) this.x = 0; // I don't know why you'd do this, but it's what you have
    }
  }
  // Should this function return anything?
}

要回答您关于为什么您当前的逻辑不正确的问题,让我们关注一个问题。您的逻辑基本上是在以下情况下发生碰撞:

(YourLeftEdgeIsPastMyLeftEdge AND YourLeftEdgeIsNotPastMyRightEdge) OR
((Something AND Something) AND (Something AND Something))
OR
(Something AND Something)

中线是因为&&higher precedence|| ,导致您的条件的中间两行聚集在一起。

由此可见,仅检查两个项目的水平位置就可以碰撞成功,这显然是一个错误。

我在回答中的逻辑基本上是两个对象重叠,如果:

  • A.一个的右边缘在另一个的左边缘的左边,或者
  • B.一个的左边缘在另一个的右边缘的右侧,或者
  • C.一个的底部边缘高于另一个的顶部边缘,或者
  • D.一个的上边缘低于另一个的下边缘。

De Morgan's Laws!(A || B || C || D)(!A && !B && !C && !D)相同,所以我们可以说两个对象确实重叠,如果:

  • A.一个的右边缘在另一个的左边缘的右边,并且
  • B.一个的左边缘在另一个的右边缘的左边,并且
  • C.一个的底部边缘低于另一个的顶部边缘,并且
  • D.一个的上边缘高于另一个的下边缘。

这导致了我提供的代码:
(x2>this.x) && (x<(this.x+this.width)) && (y2>this.y) && (y<(this.y+this.height))

关于javascript - 在简单的碰撞检测算法方面需要帮助,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4775836/

相关文章:

javascript - 如何获取div拖动后的起始值和结束值

javascript - 如何使用 javascript 在按钮单击中动态添加文本框

javascript - 当 JSON.stringify 显示空对象但实际上它不为空时如何获取实际内容

javascript - 在 Canvas 中填充一部分绘制的图像

javascript - 同步 Canvas 绘图/阅读

javascript - 使用 jquery 从对象数组中获取属性值数组

html - Flexbox - 如何对齐导航栏中的元素

html - 下拉菜单/文本字段合二为一

html - CSS:将文本向下移动几个像素但保持背景不变?

javascript - 函数表达式参数未赋值,但有值