javascript - 如何使用jQuery检查两个HTML元素之间的冲突

我一直在开发基于文本的游戏，并且遇到了创建一个检查两个元素之间的碰撞的函数的问题。用箭头键移动的球和一根烟斗（想想蓬松的鸟儿排序）。经过大量研究和我自己的实验，我仍然无法使它起作用。

这是我当前的功能：

function collision(div1, div2) {
    var ballX = div1.offset().left;
    var ballY = div1.offset().top;
    var ballHeight = div1.outerHeight(true);
    var ballWidth = div1.outerWidth(true);
    var fullBallHeight = ballY + ballHeight;
    var fullBallWidth = ballX + ballWidth;
    var pipeX = div2.offset().left;
    var pipeY = div2.offset().top;
    var pipeHeight = div2.outerHeight(true);
    var pipeWidth = div2.outerWidth(true);
    var fullPipeHeight = pipeY + pipeHeight;
    var fullPipeWidth = pipeX + pipeWidth;

    if (fullBallHeight < pipeY || ballY > fullPipeHeight || fullBallWidth < pipeX || ballX > fullPipeWidth) {
      return true;
    }
    return false;
  }

并调用该函数：

  if (collision($("#ball"), $(".pipe")) == true) {
    //code for game over
  } else if (collision($("#ball"), $(".pipe")) == false) {
    //calling loop function for ball animation
    loop();
  }

感谢所有输入，目前我将尝试任何操作。谢谢。

最佳答案

为了发生2D碰撞，您需要同时发生4件事（因此，这是一个and，而不是or）：


球的底部必须低于管道的顶部（fullBallHeight> pipeY）
球的顶部必须在管道的底部上方（ballY 球的右侧必须在管道的左侧（fullBallWidth> pipeX）
球的左侧必须在管道的右侧（ballX



（图片来自http://jonathanwhiting.com/tutorial/collision/，我建议您阅读）

所以这是结果条件：

if (fullBallHeight > pipeY && ballY < fullPipeHeight && fullBallWidth > pipeX && ballX < fullPipeWidth) {