JavaScript中的碰撞检测是如何工作的？
我不能使用jQuery或gameQuery - 已经在使用prototype - 因此，我正在寻找非常简单的东西。我不是要求完整的解决方案，只是指点正确的方向。
假设有:
<div id="ball"></div>
and
<div id="someobject0"></div>
现在球正在移动（任意方向）。"Someobject"（0-X）已经预定义，有20-60个随机放置如下：
#someobject {position: absolute; top: RNDpx; left: RNDpx;}
我可以创建一个具有"someobject(X)"位置的数组，并在"球"移动时测试碰撞...... 像这样：
for(var c=0; c<objposArray.length; c++){
........ and code to check ball's current position vs all objects one by one....
}
但我猜这可能是一个“新手”解决方案，而且看起来相当慢。 有更好的方法吗？
这里是一个非常简单的边界矩形函数。 它期望a和b都是具有x、y、width和height属性的对象：
function isCollide(a, b) {
return !(
((a.y + a.height) < (b.y)) ||
(a.y > (b.y + b.height)) ||
((a.x + a.width) < b.x) ||
(a.x > (b.x + b.width))
);
}
如果您想看这个函数的实际应用，请查看这里的codepen，感谢@MixerOID提供的帮助。
一个没有使用jQuery的答案，使用HTML元素作为参数:
这是一种更好的方法，它检查元素在视口中显示的实际位置，即使它们是绝对、相对位置或通过变换进行了操作：
function isCollide(a, b) {
var aRect = a.getBoundingClientRect();
var bRect = b.getBoundingClientRect();
return !(
((aRect.top + aRect.height) < (bRect.top)) ||
(aRect.top > (bRect.top + bRect.height)) ||
((aRect.left + aRect.width) < bRect.left) ||
(aRect.left > (bRect.left + bRect.width))
);
}
你可以尝试使用jquery-collision插件。全面披露：这是我自己编写并发布的，因为我没有找到合适的解决方案。
它可以让你实现以下功能：
var hit_list = $("#ball").collision("#someobject0");
这将返回与“#ball”重叠的所有“#someobject0”。
Mozilla有一篇很好的文章介绍了这个问题，下面是代码。
矩形碰撞
if (rect1.x < rect2.x + rect2.width &&
rect1.x + rect1.width > rect2.x &&
rect1.y < rect2.y + rect2.height &&
rect1.height + rect1.y > rect2.y) {
// Collision detected!
}
圆形碰撞
if (distance < circle1.radius + circle2.radius) {
// Collision detected!
}
bcm的回答目前没有得到投票，但实际上它是一个非常好、未受到足够重视的答案。它使用了古老的毕达哥拉斯定理来检测物体是否比它们的组合边界圆更接近。简单的碰撞检测通常使用矩形碰撞检测，如果你的精灵往往是矩形的，那么这是可以的。但如果它们是圆形（或者不那么矩形），比如球、小行星或任何其它极角通常为透明的形状，你可能会发现这个高效的例程是最准确的。
但为了更清晰，下面是代码的更完整版本：
function doCollide(x1, y1, w1, x2, y2, w2) {
var xd = x1 - x2;
var yd = y1 - y2;
var wt = w2 + w1;
return (xd * xd + yd * yd <= wt * wt);
}
传入的参数是两个不同精灵对象的x、y和宽度值。
function E() { // Check collision
S = X - x;
D = Y - y;
F = w + W;
return (S * S + D * D <= F * F)
}
big和small变量是两个对象的属性（x坐标、y坐标和宽度w）。
来自这里。
//Off the cuff, Prototype style.
//Note, this is not optimal; there should be some basic partitioning and caching going on.
(function () {
var elements = [];
Element.register = function (element) {
for (var i=0; i<elements.length; i++) {
if (elements[i]==element) break;
}
elements.push(element);
if (arguments.length>1)
for (var i=0; i<arguments.length; i++)
Element.register(arguments[i]);
};
Element.collide = function () {
for (var outer=0; outer < elements.length; outer++) {
var e1 = Object.extend(
$(elements[outer]).positionedOffset(),
$(elements[outer]).getDimensions()
);
for (var inner=outer; inner<elements.length; innter++) {
var e2 = Object.extend(
$(elements[inner]).positionedOffset(),
$(elements[inner]).getDimensions()
);
if (
(e1.left+e1.width)>=e2.left && e1.left<=(e2.left+e2.width) &&
(e1.top+e1.height)>=e2.top && e1.top<=(e2.top+e2.height)
) {
$(elements[inner]).fire(':collision', {element: $(elements[outer])});
$(elements[outer]).fire(':collision', {element: $(elements[inner])});
}
}
}
};
})();
//Usage:
Element.register(myElementA);
Element.register(myElementB);
$(myElementA).observe(':collision', function (ev) {
console.log('Damn, '+ev.memo.element+', that hurt!');
});
//detect collisions every 100ms
setInterval(Element.collide, 100);
请看维基百科页面。它可以给你一些提示。
hittest.js;可以检测两个透明的PNG图片（像素）是否发生碰撞。
<img id="png-object-1" src="images/object1.png" />
<img id="png-object-2" src="images/object2.png" />
var pngObject1Element = document.getElementById( "png-object-1" );
var pngObject2Element = document.getElementById( "png-object-2" );
var object1HitTest = new HitTest( pngObject1Element );
if( object1HitTest.toObject( pngObject2Element ) ) {
// Collision detected
}
position: absolute而不是relative。这是一个可以工作的版本的分支：http://jsbin.com/akeSeDI/3/edit - Husky