简单的JQuery游戏 - 如何知道两辆汽车（div）相撞？

Question

我尝试制作了这个简单的Jquery游戏

http://www.abkeya.com/2011/02/14/simple-jquery-game/

大部分部分都运行良好，但是正如您所看到的，我使用了两个div，一个是玩家的汽车，另一个是对手的汽车，如果我想知道两辆汽车何时相撞，或者有更好的建议使其更进一步，那将是最好的选择？

此外，当街道线条到达街道底部并消失时，它们的高度会切换。我想知道如何在街道开始时做同样的事情，以便汽车和街道线条自然地出现。

- Ismail

Answer 1

我认为你只需要像简单的盒子碰撞这样的东西。

这种汽车的有趣之处在于它可能只是一个DIV。汽车具有固定的高度和宽度，位置随鼠标而变。

我们可以在每次鼠标移动或对手汽车移动时执行什么操作。

function intersects(a,b)
{
    if(a.x + a.w > b.x)
        sectHor = true;
    if(a.x < b.x + b.w)
        sectHor = true;
    if(a.y < b.y + b.h)
        sectVert = true;
    if(a.y + a.h > b.y)
        sectVert = true;

    if(sectHor && sectVert)
        return true;
    else return false;
}

我不确定这是否有效，但当然有很多其他方法可以计算这个。我担心的是，当A在所有方面都比B大时，它们会重叠，也许我的交集函数将无法返回true。

- Marnix

Answer 2

你可以使用边界框的概念来处理精灵。由于你的汽车形状相对矩形，所以这相对容易。在每个时钟周期，你只需要检查 Car1 的四个轴是否在 Car2 的边界框内。为此，你只需要获取每辆车的顶部、左侧、顶部+高度和顶部+宽度（一个框）。

至于对象的无缝进入，你尝试过将它们从负位置开始，使它们最初不在屏幕上吗？这将导致它们逐渐进入屏幕，使其看起来更加无缝。

如果你需要任何这些方面的进一步示例，请告诉我！

- Aaron Hathaway

---

@将对象放在负位置-是的，我尝试过了，我尝试的是快速和慢速地show()它，但仍然可以看到汽车是从主div的外面出现的。 - Ismail

嗯，我觉得我可能误解了你的意思。如果您不介意的话，能否详细说明一下？ - Aaron Hathaway

Answer 3

如果您不介意使用jQuery插件，请查看此链接：http://www.labs.skengdon.com/?page=/_hittest/

- Shaz

---

是的，这个似乎解决了Divs相互重叠的问题。但它并没有展示代码，好像我应该使用哪些代码？ - Ismail

$('.element')._hittest( $('.hit') ); 这个插件可以免费使用。 - Shaz