Creating your own collision detection function in JavaScript

In this post we will talk about how I created a collision detection function in JavaScript.

I needed to create a collision detection function for I little game I made for a school assignment. If your looking to also create a collision detection function you have 2 options.

1. Use the jQueryUI libary:

In the JqueryUI libary there is already a sort of collision detection function build into it. It’s called Droppable and it can detect if a draggable element is on another element. I used this in one of my projects. This is handy if you’re looking for a way to detect if something is dropped onto a element on a website then this is the thing for you. This will save your some time and these days your probally allready use jQuery in your project.

2. Creating your own function:

If can’t use jQuery because or just because you want to build your own collision detection for your game this is the way I did it. I used this for a project which I can’t share here since it’s for a internal education project I did at one of my internships.

First let me explain the theory behind the code. In this example we will use 2 elements which in this case a squares. The function will do the following:

  1. Get the offset from the left and top from both elements from both elements.
  2. Get the width and height of both elements.
  3. Then there is an If statement that checks if the offset+width is equal or bigger then the offset of element 2 but it also checks if the offset is not bigger then the offset+width of element2.
    At the same time it does something like the calculation for the width only this time for the height of the element.
  4. If this matches then a piece of code or function is executed.

I have to admit I didn’t come up with this theory myself but I found it on Stackoverflow.¬†Oscar Godson¬†created it and I made a function using his theory. You can view his theory right here. (You need to scroll a little bit. It’s the second anwser.) And now for the code itself.


 

First off we need to post the function in a setInterval function. This way every second there will be a check if the two elements collide.

setInterval(function(){ }, 1000);

I you want to know why I use the 1000 number in the code click here to find out.
Now that we have created a the setInterval that fires every second we can go on and create the code that will check for the collision.


 

setInterval(function()
{
var Element1;
var Element2;

}, 1000);

First we set two variables that we will use later in the code.


 

setInterval(function()
{
var Element1;
var Element2;

Element1.top = $('#element1').offset().top;
Element1.left = $('#element1').offset().left;
Element1.right = Number( $('#element1').offset().left)+
Number($('#element1').width());
Element1.bottom = Number($('#element1').offset().top)+Number($('#element1').height());
}, 1000);

The code above here gets all the stuff we want to know from the first element. As you can see we get the right border values just by adding the width to the offset on the left. The same goes for the bottom. We just simply add the height to the top offset and we know where the bottom is.


 

setInterval(function()
{
var Element1;
var Element2;

Element1.top = $('#element1').offset().top;
Element1.left = $('#element1').offset().left;
Element1.right = Number( $('#element1').offset().left)+
Number($('#element1').width());
Element1.bottom = Number($('#element1').offset().top)+Number($('#element1').height());

Element2.top = $('#element2').offset().top;
Element2.left = $('#element2').offset().left;
Element2.right = Number( $('#element2').offset().left)+
Number($('#element2').width());
Element2.bottom = Number($('#element2').offset().top)+Number($('#element2').height());
}, 1000);

Leave a comment