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

Question

我一直在开发一个基于文本的游戏，并且遇到了创建一个检查两个元素之间碰撞的函数的问题；一个用箭头键移动的球和一个 pipe (想想飞扬的小鸟)。经过大量研究和我自己的一些实验后，我仍然无法使其发挥作用。

这是我当前的功能:

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();
  }

感谢所有意见，此时我几乎会尝试任何事情。谢谢。

Answer 1

要发生 2D 碰撞，需要同时发生 4 件事(因此它是和，而不是或 ):

• 球的底部必须低于管道顶部(fullBallHeight > pipelineY)
• 球的顶部必须高于管道的底部 (ballY < fullPipeHeight)
• 球的右侧必须位于管道左侧的右侧 (fullBallWidth > pipelineX)
• 球的左侧必须位于管道右侧的左侧 (ballX < fullPipeWidth)

(图片来自http://jonathanwhiting.com/tutorial/collision/，我推荐您阅读)

所以这是结果条件:

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