jQuery/çarpışma algılama JavaScript

SORU

19 Kasım 2010, Cuma

jQuery/çarpışma algılama JavaScript

Nasıl olursa <div> iki element çarpıştı varsa algılamak için?

İki divs basit renkli kutuları birbirine dik kalacak, hiçbir karmaşık şekiller veya açıları da öyle.

CEVAP

20 Kasım 2010, CUMARTESİ

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>

Genel fikir kutuları ofset ve boyut ve üst üste olup olmadığını kontrol edin.

Eğer güncelleme yapmak istiyorsanız, setInterval kullanabilirsiniz:

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

detectOverlapping();

Ayrıca, belirli bir örnek için fonksiyonu optimize edebilirsiniz.

sabit olduğundan kutu boyutları defalarca Şifremi yapmak için okumana gerek yok. Sayfa yüklendiğinde, onları (bir değişken) okuma ve sadece değişken okuyun
küçük kutusunun yatay konumunu değiştirmek değil, kullanıcının pencereyi yeniden boyutlandırır sürece). Araba kutuları dikey konumlarını değiştirmez. Bu nedenle, bu değerler de defalarca okumak zorunda değilsiniz, ama aynı zamanda bir değişken saklanabilir.
her zaman tüm araç kutuları ile ister küçük kutu çakışıyor test etmek zorunda değilsiniz. - Dikey konumunu temel alan - kutu şu anda hangi çözmek ve lane sadece belirli Araç Kutusu test edebilirsiniz.

Bunu Paylaş: