jQuery/JavaScript 碰撞检测 [英] jQuery/JavaScript collision detection

问题描述

如何检测两个

元素是否发生碰撞?

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

解决方案

var重叠 = (function () {函数 getPositions( elem ) {变量位置，宽度，高度；pos = $( elem ).position();宽度 = $( elem ).width();高度 = $( elem ).height();返回 [[ pos.left, pos.left + width ], [ pos.top, pos.top + height ] ];}函数 comparePositions( p1, p2 ) {无功 r1, r2;r1 = p1[0] r2[0] ||r1[0] === r2[0];}返回函数 ( a, b ) {var pos1 = getPositions( a ),pos2 = getPositions( b );返回 comparePositions( pos1[0], pos2[0] ) &&比较位置( pos1[1], pos2[1] );};})();$(函数(){var area = $( '#area' )[0],box = $( '#box0' )[0],html;html = $( area ).children().not( box ).map( function ( i ) {return '<p>Red box + Box ' + ( i + 1 ) + ' = ' +重叠( box, this ) + '</p>';}).get().join('');$('body').append(html);});

body {填充:30px；颜色:#444；字体系列:Arial、sans-serif；}h1{字体大小:24px；底边距:20px；}#区域 {边框:2px纯灰色；宽度:500px；高度:400px；位置:相对；}#区域 >div {背景颜色:rgba(122, 122, 122, 0.3);位置:绝对；文本对齐:居中；字体大小:50px；宽度:60px；高度:60px；}#box0 {背景颜色:rgba(255, 0, 0, 0.5) ！重要；顶部:150px；左:150px；}#box1 {顶部:260px；左:50px；}#box2 {顶部:110px；左:160px；}#box3 {顶部:200px；左:200px；}#box4 {顶部:50px；左:400px；}p{边距:5px 0;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><h1>检测与 JavaScript 的重叠</h1><div id="区域"><div id="box0"></div><div id="box1">1</div><div id="box2">2</div><div id="box3">3</div><div id="box4">4</div>

总体思路 - 获取框的偏移量和尺寸并检查它们是否重叠.

如果你想让它更新，你可以使用setInterval:

function detectionOverlapping() {//检测框是否与移动框重叠的代码设置间隔(检测重叠，25)；}检测重叠()；

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

• 您不必重复阅读框尺寸(就像我在代码中所做的那样)，因为它们是固定的.您可以在页面加载时读取它们(到变量中)，然后读取变量

• 小框的水平位置不会改变(除非用户调整窗口大小).车箱的垂直位置不变.因此，这些值也不必重复读取，也可以存储到变量中.

• 您不必一直测试小盒子是否与所有汽车盒子重叠.您可以 - 根据其垂直位置 - 确定盒子当前位于哪个车道，并仅测试该车道上的特定汽车盒子.

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 碰撞检测的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！