jQuery碰撞

时间：2012-02-22 10:06:52

标签： jquery collision-detection

我有这个游戏我正在使用jQuery Collision编写，并且它使用键盘键移动div，当div接触另一个div时，它应该防止重叠。

我该怎么做？

HTML ---- 

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <link href="style.css" rel="stylesheet" />

    <script src="jquery.min.js" rel="javascript"></script>
    <script src="game.js" rel="javascript"></script>
    <script src="jquery-collision-1.0.1.js" rel="javascript"></script>
    <script src="jquery-ui-draggable-collision-1.0.1.js" rel="javascript"></script>

</head>
<body>

<div id="office">

    <div class="popup">
        <p>hello desk</p>
        <a class="close">X</a>
    </div>

    <div class="chris"></div>

    <!--Rian, Peter, Chris, Christopher ---------------- DESK -->
    <div class="desk-full" style="position: absolute; right: 50px; top: 50px;">

        <div class="christopher-stuff"></div>

    </div>

    <!--Adrian, Tatam, Ellize ---------------- DESK -->
    <div class="desk-full" style="position: absolute; right: 50px; top: 300px;">

    </div>

</div>

</body>
</html>

JAVASCRIPT ---- 

$(document).ready(function(){

$(".chris").click(function(){

var KEY = {
    UP: 38,
    DOWN: 40,
    LEFT: 37,
    RIGHT: 39
}

// a global object to store all global variable used for the game
var office = {
}

// an array to remember which key is pressed and which is not.
office.pressedKeys = [];

$(function(){
    // set interval to call gameloop every 30 milliseconds
    office.timer = setInterval(gameloop,30);

    // mark down what key is down and up into an array called "pressedKeys"
    $(document).keydown(function(e){
        office.pressedKeys[e.keyCode] = true;
    });
    $(document).keyup(function(e){
        office.pressedKeys[e.keyCode] = false;
    });
});

// this function is called every 30 milliseconds 
function gameloop()
{
    moveMe();
    collideDetection();
}

function moveMe()
{  

    if (office.pressedKeys[KEY.UP]) // arrow up
    {
        var direction = parseInt($(".chris").css("top"));
        $(".chris").css({
                top: direction-5,
                background: "url(chris-top.gif) no-repeat !important",
                width: "43px",
                height: "44px"
            }); 
    }
    if (office.pressedKeys[KEY.DOWN]) // arrow down
    {
        var direction = parseInt($(".chris").css("top"));
        $(".chris").css({
            top: direction+5,
            background: "url(chris-down.png) no-repeat !important",
            width: "48px",
            height: "25px"
            });
    }
    if (office.pressedKeys[KEY.LEFT]) // left
    {
        var direction = parseInt($(".chris").css("left"));
        $(".chris").css({
            left: direction-5,
            background: "url(chris-left.gif) no-repeat !important",
            width: "43px",
            height: "44px"
            });
    }
    if (office.pressedKeys[KEY.RIGHT]) // right
    {
        var direction = parseInt($(".chris").css("left"));
        $(".chris").css({
            left: direction+5,
            background: "url(chris-right.gif) no-repeat !important",
            width: "43px",
            height: "44px"
            });         
    }



        if (office.pressedKeys[KEY.UP] & office.pressedKeys[KEY.RIGHT]) // arrow up
    {
        $(".chris").css({
                background: "url(chris-top-right.png) no-repeat left top !important",
                width: "43px",
                height: "44px"
            }); 
    }
        if (office.pressedKeys[KEY.UP] & office.pressedKeys[KEY.LEFT]) // arrow up
    {
        $(".chris").css({
                background: "url(chris-top-left.png) no-repeat !important",
                width: "43px",
                height: "44px"
            }); 
    }
        if (office.pressedKeys[KEY.DOWN] & office.pressedKeys[KEY.RIGHT]) // arrow down
    {
        $(".chris").css({
                background: "url(chris-down-right.png) no-repeat !important",
                width: "43px",
                height: "44px"
            });
    }
        if (office.pressedKeys[KEY.DOWN] & office.pressedKeys[KEY.LEFT]) // arrow down
    {
        $(".chris").css({
                background: "url(chris-down-left.png) no-repeat !important",
                width: "43px",
                height: "44px"
            });
    } 
}

function collideDetection(){
    var chrisY = parseInt($(".chris").css("top"));
    var chrisX = parseInt($(".chris").css("left"));

    var chrisY = chrisY + 50;
    var chrisX = chrisX + 50;

    // -------------------- jQuery Collision Dtection and Prevention of Overlapping ---------------------
    var hit_list = $(".chris").collision( { obstacle: ".desk-full", preventCollision: true } );

    var officeHeight = parseInt($("#office").height());
    var officeWidth = parseInt($("#office").width());

    if(shipX <= 0) {
        $(".chris").css({
            left: "0",
            background: "url(chris-right.png) no-repeat !important",
            width: "25px",
            height: "48px"
        }); 
        }

    if(chrisX > officeWidth) {
        $(".chris").css({
            left: "0px",
            background: "url(chris-left.png) no-repeat !important",
            width: "25px",
            height: "48px"
        }); 
        }

    if(chrisX <= 0) {
        $(".chris").css({
            top: "0",
            background: "url(chris-down.png) no-repeat !important",
            width: "48px",
            height: "25px"
        }); 
        }

    if(chrisY > officeHeight) {
        $(".chris").css({
            top: "0px",
            background: "url(chris-up.png) no-repeat !important",
            width: "48px",
            height: "25px"
        }); 
        }
}

});    
});

1 个答案:

答案 0 :(得分：7)

$("#right").click(function(){
  $(".block").animate({"left": "+=50px"}, "fast", checkCollisions);
});

$("#left").click(function(){
  $(".block").animate({"left": "-=50px"}, "fast", checkCollisions);
});

$("#up").click(function(){
  $(".block").animate({"top": "-=50px"}, "fast", checkCollisions);
});

$("#down").click(function(){
  $(".block").animate({"top": "+=50px"}, "fast", checkCollisions);
});

function getPositions(box) {
  var $box = $(box);
  var pos = $box.position();
  var width = $box.width();
  var height = $box.height();
  return [ [ pos.left, pos.left + width ], [ pos.top, pos.top + height ] ];
}
        
function comparePositions(p1, p2) {
  var x1 = p1[0] < p2[0] ? p1 : p2;
  var x2 = p1[0] < p2[0] ? p2 : p1;
  return x1[1] > x2[0] || x1[0] === x2[0] ? true : false;
}

function checkCollisions(){
  var box = $(".bomb")[0];
  var pos = getPositions(box);

  var pos2 = getPositions(this);
  var horizontalMatch = comparePositions(pos[0], pos2[0]);
  var verticalMatch = comparePositions(pos[1], pos2[1]);            
  var match = horizontalMatch && verticalMatch;
  if (match) { $("body").append("<p>COLLISION !!!</p>"); }
}
.block {
  position:absolute;
  background-color:#abc;
  left:50px;
  width:90px;
  height:90px;
  margin:5px;
}
.bomb {
  position:absolute;
  background-color:red;
  left:250px;
  width:40px;
  height:40px;
  margin:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id="left">left</button>
<button id="right">right</button>
<button id="up">up</button>
<button id="down">down</button>

<div class="block"></div>
<div class="bomb"></div>

您可以使用JQuery Collision和JQuery UI Draggable Collision。

JQuery Collision扩展返回两个选择器之间的冲突。处理填充，边距，边框，并可以确定重叠或部分外部。

使用 JQuery Collision ，您可以找到所有重叠：

var list = $("#selector").collision(".obstacle");

返回与“#selector”重叠的所有元素的列表。

使用 JQuery UI Draggable ，您可以在拖动元素时绑定事件并发生碰撞，并且可以防止碰撞：

$("#selector").draggable( { obstacle: ".obstacle", preventCollision: true } );

一些用于碰撞检测的插件：
Collidable Draggables，
Collision Check Plugin v1.1，
$.event.special.drop

另外：

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/2.1.1/jquery.min.js"></script>
<h1>Detect overlapping</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>

相关问题
最新问题