Collision Detection doesnt work because some things move more than 1px at a time

Question

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
                    alert();

                }

            }

        }

    }
}, 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!

Answer 1

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!')

Answer 2

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.