Collision detection between draggable object and world objects?

Question

I have a game I'm making in Javascript that will involve combining items by dragging and dropping them onto each other. Think Alchemy or similar.

So far, so good, but I hit a snag while trying to figure out how I can detect collisions between the two entities! I have a (really) basic bounding box test -

function isColliding(a, b) {
    if (a.x + a.width < b.x || a.x > b.x + b.width || a.y + a.height < b.y || a.y > b.y + b.height) {
        return false;
    } else {
        return true;
    }
}

The trouble I'm having is that in practice, this is fine for detecting the mouse colliding with an object to pick it up, but I'm stuck on how I can, after I've grabbed an object, test to see if that object I have grabbed is colliding with any of the multiple other objects that exist in the window. I tried doing -

Core.objectCollision = function() {
    if (Core.Mouse.isHolding != null) {
        for (i in Core.Objects) {
            if (isColliding(Core.Mouse.isHolding, Core.Objects[i])) {
                console.log("Colliding with world object!");
            }
        }
    }
}

This function is inside my update loop, but of course the object I'm holding is within my Core.Objects array too, so technically collides with itself.

I really think I'm missing something obvious, but a lot of my searches for help have been returning how to simply detect collision between two already known items, however I need it so any item I grab can be tested against any other item in the view.

Please also note I'm trying to avoid libraries for the time being, I'd rather learn the functionality myself. Thanks for any help!

Answer 1

To avoid checking collision on the same object you can generate a unique id on every object and then when you are looping over them check so they dont have the same id.

Jon is wondering about your objects shapes since a rectangular bbox will in most cases be too large and hence you will detect collision even though objects are not colliding. Can be solved by using multiple bboxes or pixel collision detection (there are more ways to do it ).

Answer 2

To prevent the check of the object colliding against itself, just check the reference like so:

Core.objectCollision = function() {
    if (Core.Mouse.isHolding != null) {
        for (i in Core.Objects) {

            // Skip the object that was grabbed.
            if (i == Core.Mouse.isHolding)
                continue;

            if (isColliding(Core.Mouse.isHolding, Core.Objects[i])) {
                console.log("Colliding with world object!");
            }
        }
    }
}

Now, if you want to implement a physics engine, I really recommend you see this series https://www.youtube.com/watch?v=3Oay1YxkP5c even thou he implements a 3D engine, the core logic is the same.

Then, to get a better performance, you might want to look at quad trees so that objects that are far from each other are not checked for collision, this: http://buildnewgames.com/gamephysics/ should give you some directions.