CODEWITHSUNDEEP
javascriptcanvascollision
li x
li x

Reputation: 4051

Collision Detection Function

I have constructed this function to be able to check if two object are touching in a AABB collision type model but I can't quite figure out the logic or rather why it doesn't work.

function hitTest(x1, y1, w1, h1, x2, y2, w2, h2) {
    //x1, y1 = x and y coordinates of object 1 
    for (var x = 0; x < AliLength; x++) {
        x1 = AliensArrR1[x].getX();
        y1 = AliensArrR1[x].getY();
    }
    //w1, h1 = width and height of object 1
    w1 = 50;
    h1 = 18;
    //x2, y2 = x and y coordinates of object 2 (usually midpt)
    for (var x = 0; x < bullets.length; x++) {
        x2 = bullets[x].getX();
        y2 = bullets[x].getX();
    }
    // w2, h2 = width and height of object 2
    w2 = 3;
    h2 = 13;
    if ((x1 <= x2 && x1 + w1 >= x2) &&
    (y1 <= y2 && y1 + h1 >= y2) && (x2 <= x1 && x2 + w2) && (y2 <= y2 && y2 + h2))
        alert("Hit");
    else
        return false;
};

There are 12 images per each row and an array for each, I'm not worried about performance right now just want to make sure I can get it working on one and get the logic correct.

Any suggestions are greatly appreciated!

edit: I'm trying to check if object one which has the width of 18 and 50 ever overlaps with my other object which has a width of 3 and height of 13, These never change only the x and y axis's change. I'm new to doing collision detection and after having a couple stabs at how to apply the logic of checking both the x and y on each to see if they intersect. I thought I would ask for some help as clearly I'm heading in the wrong direction.

![This is what I'm trying to achieve]:http://uploads.gamedev.net/monthly_06_2011/ccs-8549-0-64600400-1307074262.gif

Upvotes: 1

Views: 493

Answers (3)

MattX
MattX

Reputation: 1

It's correct but like that:

function hitTest(x1, y1, w1, h1, x2, y2, w2, h2) {    
  if (((x1 <= x2 && x1 + w1 >= x2) || (x2 <= x1 && x2 + w2 >= x1)) && ((y1 <= y2 && y1 + h1 >= y2) || (y2 <= y1 && y2 + h2 >= y1)))
    return true; 
  else
    return false;    
}

Upvotes: 0

tom
tom

Reputation: 22969

I suggest you refactor your code a bit. Keep the eight arguments, but do not assign anything to them in the function hitTest and do not reference any global variables or constants. Just compare the given coordinates and widths and return true if they overlap, false otherwise.

Test this function by feeding it some test cases. If you can't visualize in your head, draw a 2D grid and label the axes then draw arbitrary rectangles. Pick two that are not overlapping, give them to your function, and check that it returns false. Pick two that are overlapping, give them to your function, and check that it returns true. Pick two that are just touching, feed them to your function, and check that it returns what you would like it to return. Repeat until you are confident your code is correct.

Then use this function to implement another function which goes through all the aliens and all the bullets and checks using hitTest if any of them collide. It should give 18, 50, etc. as the width and height. If the coordinates refer to the centre of the object, you may need to offset them so that they refer to the top right corner.

Hint

If you find it hard to do the collision checking in 2D, make a simpler function which takes two 1D line segments (x1, w1, x2, w2) and determines if they overlap. The 2D case can be broken down into two 1D checks: the objects should overlap both horizontally and vertically.

Final solution

x1 + w1 >= x2 && x2 + w2 >= x1 && y1 + h1 >= y2 && y2 + h2 >= y1

Upvotes: 2

tomasdev
tomasdev

Reputation: 5997

It's mostly done, buuuut...

Given w1 width of, h1 height of, x1 X position of, y1 Y position of Object 1, and idem for x2, y2, w2, h2 on Object 2:

The conditional should be OR between conditions and I bet there are some typos in your vertical part. Commented version:

if (
    // Horizontal collision
    // Does right edge of 1 collide with left edge of 2? Only when 1 to the left of 2
    (x1 <= x2 && x1 + w1 >= x2) ||
    // Does left edge of 1 collide with right edge of 2? Only when 2 to the left of 1
    (x2 <= x1 && x2 + w2 >= x1) ||

    // Vertical collision
    // Does bottom edge of 1 collide with top edge of 2? Only when 1 above 2
    (y1 <= y2 && y1 + h1 >= y2) ||
    // Does top edge of 1 collide with bottom edge of 2? Only when 2 above 1
    (y2 <= y1 && y2 + h2 >= y1)
) {
    // hit
}

Upvotes: 0

Related Questions