I'm writing a 2d scrolling game in javascript using canvas and since I'm limited to setInterval running at minimum once every ms, I need to have some objects moving at greater than 1 pixel a second. I have this for collision detection between objects:

// ** oversee collisions
collisionsInterval = setInterval(function() {

    // outter object
    for(i = 0; i < objectsToCollision.length; i++) {

        // inner object
        for(j = 0; j < objectsToCollision.length; j++) {

            // dont compare an object to itself
            if(i==j) continue;

            // check if they touch on x axis
            if(Math.abs(objectsToCollision[i].centerX - objectsToCollision[j].centerX) <= (objectsToCollision[i].halfWidth + objectsToCollision[j].halfWidth)) {

                // check if they touch on y axis
                if(Math.abs(objectsToCollision[i].centerY - objectsToCollision[j].centerY) <= (objectsToCollision[i].halfHeight + objectsToCollision[j].halfHeight)) {

                    // a collision was detected, do something useful




}, 1);

The problem is, since it wont alert() when two things are about to touch because my objects move at more than 1px at a time. The problem is, some objects might move 3px at a time, some might move at 8px at a time, and I also have gravity occurring so in the Y direction especially the velocity of my objects will really vary.

In my code above objectsToCollision is an array which contains all the objects I'm checking for collisions with. I've modelled what I've done so far after this https://gamedev.stackexchange.com/a/587 but it doesn't discuss how to solve the problem I'm experiencing!

  • 3
    \$\begingroup\$ I'm going to venture a guess and say that your objects are really small compared to their relative velocities? If so, the issue is called "Tunneling". That might help you search for more relevant results. Here's one related link I've seen a few times: gamedev.net/topic/345705-predictive-collision-detection \$\endgroup\$ Commented Mar 9, 2012 at 20:56

2 Answers 2


This looks like you're comparing the objects at a single point - the center-point of the rectangle is not important - only the bounds:

object1 = ship
object2 = bullet

if (object2.y2 > object1.y1) AND (object2.y1 < object1.y2):
    if(object2.x2 > object1.x1) AND (object2.x1 < object1.x2):
        print ('a hit!')
  • \$\begingroup\$ The method I'm using to calculating collisions already works when it comes to determining when a collision occurs. However, I do prefer your method of detecting when two objects overlap because it makes use of 2 y coordinates and 2 x coordinates to an object (or in other words, vertices), and it would be much more beneficial for me to track an objects' vertices instead of center because I'll need them for drawing the objects in webGL. It might also be faster than how I'm doing it because it doesn't use Math.abs. This answer didn't necessarily resolve my problem but it did help, thanks! \$\endgroup\$ Commented Mar 12, 2012 at 16:42

This is by no means a complete answer, but instead of describing objects as points describe them as a line or set of lines, each with a start point and time and end point and time. Now you can easily calculate the position of something at any given nanosecond. This is great if you are shooting at them with a laser over short distances. Figuring a collision between two such objects is harder and would require either some fancy mathematics or else a series of successive approximations. If the approximations start to diverge, you missed. If they converge, you'll get to the collision point soon enough.

At any rate, you'll quickly get the objects into a position where you can do the hard work of checking for a collision, answering questions like "would object A pass through the hole object B or smack a projecting fin?" at time t + 0.4398224, despite the fact that they were miles apart at both times t and time t + 1.


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .