jQuery / JavaScript碰撞检测

问题描述

如何检测两个< div> 元素是否发生了碰撞？

这两个div是简单的彩色盒子相互垂直行走，所以没有复杂的形状或角度。

解决方案

  var overlapps =（function（）{function getPositions（elem）{var pos，width，height; pos = $（elem）.position（）; width = $（elem）.width ）; height = $（elem）.height（）; return [[pos.left，pos.left + width]，[pos.top，pos.top + height]];} function comparePositions（p1，p2）{var r1，r2; r1 = p1 [0]  r2 [0] | r1 [0] === r2 [0];}返回函数（a，b）{var pos1 = getPositions（a）， pos2 = getPositions（b）; return comparePositions（pos1 [0]，pos2 [0]）&& comparePositions（pos1 [1]，pos2 [1]）; };（）; $（function（）{var area = $（'#area'）[0]，box = $（'＃box0'）[0]，html; html = $（area）.children （）.not（box）.map（function（i）{return'< p> Red box + Box'+（i + 1）+'='+ overlapps（box，this）+'< / p> ';}）。get（）。join（''）; $（'body'）.append（html）;}）;  
  body {padding：30px;颜色：＃444; font-family：Arial，sans-serif;} h1 {font-size：24px; margin-bottom：20px;}＃area {border：2px solid gray;宽度：500px; height：400px; position：relative;}＃area> div {background-color：rgba（122，122，122，0.3）;位置：绝对; text-align：center; font-size：50px;宽度：60px; height：60px;}＃box0 {background-color：rgba（255，0，0，0.5）！important;顶部：150px; left：150px;}＃box1 {top：260px; left：50px;}＃box2 {top：110px; left：160px;}＃box3 {top：200px; left：200px;}＃box4 {top：50px; left：400px;} p {margin：5px 0;}  
 < script src =https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js>< / script>< h1>检测与JavaScript重叠< h1>< div id =area> < div id =box0>< / div> < div id =box1> 1< / div> < div id =box2> 2< / div> < div id =box3> 3< / div> < div id =box4> 4< / div>< / div>  

总体思路 - 获得方块的偏移量和尺寸，并检查它们是否重叠。

如果你想更新，你可以使用 setInterval ：

  function detectOverlapping（）{
 //检测框与移动框重叠的代码
 setInterval（detectOverlapping，25）; 
} 
 
 detectOverlapping（）; 
  

另外，请注意，您可以针对您的特定示例优化函数。

• 因为它们是固定的，所以您不必重复读取框的尺寸（就像我在代码中那样）。您可以在页面加载（读入变量）中读取它们，然后只读取变量




• 小盒子的水平位置不会改变（除非用户调整窗口大小）。车厢的垂直位置不变。因此，这些值也不必重复读取，但也可以存储到变量中。

您不必测试小盒子在任何时候都与所有车厢重叠。您可以 - 根据其垂直位置 - 找出箱子当前在哪个车道上，并且只测试该车道上的特定车厢。

How to detect if two <div> elements have collided?

The two divs are simple coloured boxes travelling perpendicular to each other, so no complicated shapes or angles.

解决方案

var overlaps = (function () {
    function getPositions( elem ) {
        var pos, width, height;
        pos = $( elem ).position();
        width = $( elem ).width();
        height = $( elem ).height();
        return [ [ pos.left, pos.left + width ], [ pos.top, pos.top + height ] ];
    }

    function comparePositions( p1, p2 ) {
        var r1, r2;
        r1 = p1[0] < p2[0] ? p1 : p2;
        r2 = p1[0] < p2[0] ? p2 : p1;
        return r1[1] > r2[0] || r1[0] === r2[0];
    }

    return function ( a, b ) {
        var pos1 = getPositions( a ),
            pos2 = getPositions( b );
        return comparePositions( pos1[0], pos2[0] ) && comparePositions( pos1[1], pos2[1] );
    };
})();

$(function () {
    var area = $( '#area' )[0],
        box = $( '#box0' )[0],
        html;

    html = $( area ).children().not( box ).map( function ( i ) {
        return '<p>Red box + Box ' + ( i + 1 ) + ' = ' + overlaps( box, this ) + '</p>';
    }).get().join( '' );

    $( 'body' ).append( html );
});

body {
    padding: 30px;
    color: #444;
    font-family: Arial, sans-serif;
}

h1 {
    font-size: 24px;
    margin-bottom: 20px;
}

#area {
    border: 2px solid gray;
    width: 500px;
    height: 400px;
    position: relative;
}

#area > div {
    background-color: rgba(122, 122, 122, 0.3);
    position: absolute;
    text-align: center;
    font-size: 50px;
    width: 60px;
    height: 60px;
}

#box0 {
    background-color: rgba(255, 0, 0, 0.5) !important;
    top: 150px;
    left: 150px;
}

#box1 {
    top: 260px;
    left: 50px;
}

#box2 {
    top: 110px;
    left: 160px;
}

#box3 {
    top: 200px;
    left: 200px;
}

#box4 {
    top: 50px;
    left: 400px;
}

p {
    margin: 5px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<h1>Detect overlapping with JavaScript</h1>
<div id="area">
    <div id="box0"></div>
    <div id="box1">1</div>
    <div id="box2">2</div>
    <div id="box3">3</div>
    <div id="box4">4</div>
</div>

General idea - you get the offset and dimension of the boxes and check whether they overlap.

If you want it to update, you can use setInterval:

function detectOverlapping() {
    // code that detects if the box overlaps with a moving box
    setInterval(detectOverlapping, 25);
}

detectOverlapping();

Also, note that you can optimize the function for your specific example.

• you don't have to read the box dimensions repeatedly (like I do in my code) since they are fixed. You can read them on page load (into a variable) and then just read the variable

• the horizontal position of the little box does not change (unless the user resizes the window). The vertical positions of the car boxes does not change. Therefore, those values also do not have to be read repeatedly, but can also be stored into variables.

• you don't have to test whether the little box overlaps with all car boxes at all times. You can - based on its vertical position - figure out in which lane the box is currently, and test only the specific car box from that lane.

这篇关于jQuery / JavaScript碰撞检测的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！