CODEWITHSUNDEEP
jquerycollision-detection
Christopher
Christopher

Reputation: 431

jQuery Collision

I have this game I'm writing with the jQuery Collision, and it uses keyboard keys to move a div, when a div touches another div, it should prevent overlapping.

How on earth do I do that?

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"
        }); 
        }
}

});    
});

Upvotes: 2

Views: 14195

Answers (1)

Panos Kalatzantonakis
Panos Kalatzantonakis

Reputation: 12673

$("#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>

You can use JQuery Collision and JQuery UI Draggable Collision.

JQuery Collision extension returns the collisions between two selectors. Handles padding, margin, borders, and can determine either overlap or portion outside.

With JQuery Collision you can find all overlaps:

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

Returns a list of all elements that overlap "#selector".

With JQuery UI Draggable, you can bind an event when you drag an element and a collision happens and you can prevent the collision:

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

Some plugins for collision detection:
Collidable Draggables,
Collision Check Plugin v1.1,
$.event.special.drop

Also :

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>

Upvotes: 8

Related Questions