Collision detection problems; Strange reactions to certain conditions

Question

If anyone sees this question as being too specific feel free to have it deleted.

I'm having trouble with my collision detection, i had seen some basic collision detection techniques and then tried adapting it to tell which side is being collided with, however the detection seems to fail when corners collide or the character has vertical and horizontal velocity when colliding.

Heres my collision detection function:

this.checkCollision = function() {
        var isGround = false;
        var i;

        /*Combines Platforms and Chars so Character Collide with Eachother*/
        var x = platforms[level];
        var y = chars[level];
        var p = x.concat(y);

        /* For Readability */
        var top = this.y;
        var bottom = this.y + this.h;
        var left = this.x;
        var right = this.x + this.w;

        for (i = 0; i < p.length; i++) {
            /* For Readability */
            var pTop = p[i].y;
            var pBottom = p[i].y + p[i].h;
            var pLeft = p[i].x;
            var pRight = p[i].x + p[i].w;

            if (p[i] !== this) {
                if (this.inverted) {

                        /*Vertical-Top*/
                    if ((bottom === pTop) && (right > pLeft && left < pRight)) {

                        this.vy = -gravity;


                        /*Vertical-Near-Top*/
                    } else if ((bottom + this.vy >= pTop && bottom <= pTop) && (right > pLeft && left < pRight)) {

                        this.vy = pTop - bottom;

                        /*Vertical-Bottom*/
                    } else if ((top === pBottom) && (right > pLeft && left < pRight) && (this.vy <= 0)) {

                        isGround = true;
                        this.onGround = true;

                        /*Vertical-Near-Bottom*/
                    } else if ((top + this.vy <= pBottom && top >= pTop) && (right > pLeft && left < pRight)) {

                        this.vy = pBottom - top + gravity;

                    }
                } else {

                        /*Vertical-Top*/
                    if ((bottom === pTop) && (right > pLeft && left < pRight)) {

                        if (p[i].bouncy) {
                            this.vy = -(this.jumpVelocity * 1.2);
                        } else if (p[i] instanceof Char && !p[i].inverted) {
                            this.vx = this.current ? this.vx : p[i].vx;
                            if (p[i].onGround) {
                                isGround = true;
                                this.onGround = true;
                            } else {
                                this.vy = p[i].vy;
                            }
                        } else {
                            this.vx = this.current ? this.vx : 0;
                            isGround = true;
                            this.onGround = true;
                        }

                        /*Vertical-Near-Top*/
                    } else if ((bottom + this.vy >= pTop && bottom <= pTop) && (right > pLeft && left < pRight)) {

                        this.vy = pTop - bottom - gravity;

                        /*Vertical-Bottom*/
                    } else if ((top === pBottom) && (right > pLeft && left < pRight)) {

                        this.vy = gravity;

                        /*Vertical-Near-Bottom*/
                    } else if ((top + this.vy <= pBottom && top >= pTop) && (right > pLeft && left < pRight)) {

                        this.vy = top - pBottom;

                    }
                }
                /*Horizontal-Left*/
                if ((right === pLeft) && ((top < pTop && bottom > pTop) || (top < pBottom && bottom >= pBottom) || (top >= pTop && bottom <= pBottom)) && (this.vx > 0)) {

                    this.vx = 0;

                    /*Horizontal-Left-Near*/
                } else if ((right + this.vx >= pLeft && right <= pRight) && ((top < pTop && bottom > pTop) || (top < pBottom && bottom >= pBottom) || (top >= pTop && bottom <= pBottom)) && (this.vx > 0)) {

                    this.vx = pLeft - right;

                    /*Horizontal-Right*/
                } else if ((left === pRight) && ((top < pTop && bottom > pTop) || (top < pBottom && bottom >= pBottom) || (top >= pTop && bottom <= pBottom)) && (this.vx < 0)) {

                    this.vx = 0;

                    /*Horizontal-Right-Near*/
                } else if ((left + this.vx <= pRight && left >= pLeft) && ((top < pTop && bottom > pTop) || (top < pBottom && bottom >= pBottom) || (top >= pTop && bottom <= pBottom)) && (this.vx < 0)) {

                    this.vx = pRight - left;

                }
            }
        }
        if (!isGround) {
            this.onGround = false;
        }
    };

The rest of the code is the JSFiddle here (press T to enter the testing level with all character in it): http://jsfiddle.net/v5hhpt57/1/

Also i recommend using the fullscreen result as the canvas doesn't seem to fit well in the JSFiddle page: http://tinyurl.com/twa-js (Not JSFiddle, Google Site Hosting due to difficulties with JSFiddle)

For a specific problem, in the testing level remove the red from on top the blue, move the pink over to the right a little bit and try bouncing the purple on top of the blue.

Finally don't mind the floating and sinking through the ground, that's on the collision handling end.

and again: If anyone sees this question as being too specific feel free to have it deleted.

Answer 1

i'm making game also with canvas. I'm still beginner, but have made some basics for my online web-based game. Here collisions i think is almost like in my game mouse.

Xerror = 2
Yerror = 3
monster_width = 20
monster_height = 20
mouseX  = evt.clientX-Xerror  //My mouse X position in canvas map
mouseY  = evt.clientY-Yerror  //My mouse Y position in canvas map   

for monster in all_monsters  //looping trough all monsters
if mouseX > monster.x_position[monster.id]-monster_width/2+Xerror*4  and mouseX< 
            monster.x_position[monster.id]+monster_width/2+Xerror*4  and mouseY>
            monster.y_position[monster.id]-monster_height/2+Yerror*2 and mouseY<
            monster.y_position[monster.id]+monster_height/2+Yerror*4    
// then my mouse is over one of the monsters

These X-errors maybe becouse of little borders of canvas, dont know, but without these im getting wrong outputs. But im also substracting my monsters width/height from 2, to get the center. (my monsters are just cubes).

My own game is at gamegame.herokuapp.com, ID testeris, PWD testeris. If you want to contact me, is [email protected]. I am passionate making my online game with canvas, Ruby on rails, Backbone.js, coffeescript. Would be interesting to speak with others who like creating games with canvas :)

Answer 2

For Tomb-Raider, we had a list of spheres connected to faces or vertex. A detection between a sphere and a triangle is simple so lots of small spheres give almost perfect collision. Between moving objects (all balls) and the background which just had flags (climbable and such). While I'm at it, a trick from C64 days - use rooms with a 2D Quad. Then you only have to consider rendering objects in the adjacent rooms if they are inside the rectangle made by expanding the quad to square/rectangle (simple 4x4 matrix)