# Collision detection

## Recommended Posts

Hello, I'm new to Pixi JS and I'm kinda stuck.

So, I have about 5 containers which I can move (drag, drop), now when I drag one over the other, something has to happend.. an alert or whatever.

How can I detect one container moving over the other?

Ty.

##### Share on other sites

You could do basic box collision detection if you dont need pixel perfect collisions.

function boxesIntersect(a, b)
{
var ab = a.getBounds();
var bb = b.getBounds();
return ab.x + ab.width > bb.x && ab.x < bb.x + bb.width && ab.y + ab.height > bb.y && ab.y < bb.y + bb.height;
}

##### Share on other sites

@Exca where from did you take that code ? That is true only if you take difference of centers, not left-top points.

##### Share on other sites

Oops, that is correct. I took that from one project where I did circle calculations. Changed the code to work with topleft points.

##### Share on other sites

This might be helpful (scroll down the the actual function): https://github.com/kittykatattack/learningPixi#collision

(edit: seems the anchors are currently out of whack, go up to the table of contents and click on The hitTestRectangle function)

Edited by dmko
anchor is wrong
##### Share on other sites

• 1 year later...

Code above is incorrect. Should read:

return ab.x + ab.width > bb.x && ab.x < bb.x + bb.width && ab.y + ab.height > bb.y && ab.y < bb.y + bb.height;

Correction is: ab.y + ab.height > bb.y

##### Share on other sites

12 hours ago, JackParke said:

Code above is incorrect. Should read:

return ab.x + ab.width > bb.x && ab.x < bb.x + bb.width && ab.y + ab.height > bb.y && ab.y < bb.y + bb.height;

Correction is: ab.y + ab.height > bb.y

Well spotted, fixed the error to original post.

##### Share on other sites

Maybe check this out too. It's more on the hitTestRectangle() function.

## Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

×   Pasted as rich text.   Paste as plain text instead

Only 75 emoji are allowed.