Collision Detection Not working in Game of Pac-Man

Question

I am making my own game of pac-man and am having difficulty getting the collision detection between my surrounding div and the "pac-man".

Here is the css for my the character (which is a square for now) and the border surrounding the entire game.

div#pac{
    background-color: white;
    width: 35px;
    height: 35px;
    position: fixed;
    left: 90px;
    top: 135px;
    margin: 2px;
}
div#shell{
    border: 1px solid white;
    width: 80%;
    height: 75%;
    top: 85px;
    left: 130px;
    text-align: center;
    position: fixed;
    background-color: #DEB887;
}

next I thought I should show you the html although it is pretty basic

<div id="shell">
<div id="pac"></div>
</div>

finally the javascript. which is where the problem starts, and it can be quite complicated for some to follow.Also I use my own functions that I made called getStyle and setStyle which do exactly what they sound like they do.

//move function for pac-man.
function move() {
    var upDown = parseInt(getStyle("pac", "top"));
    var leftRight = parseInt(getStyle("pac","left"));
    var width = parseInt(getStyle("shell", "width")) - parseInt(getStyle("pac", "width"));
    var height = parseInt(getStyle("shell", "height")) - parseInt(getStyle("pac", "height"));

    //arrow keys move down
    if (arrowKey == 40) {
        upDown = upDown + 2;
    }
    //arrow keys move up
    else if (arrowKey == 38) {
        upDown = upDown - 2;
    }    
    else if (arrowKey == 37) { //arrow keys move left
        leftRight = leftRight - 2;
    }
    else if (arrowKey == 39) { //arrow keys move right
        leftRight = leftRight + 2;
    }
    if (contains("pac", "shell")) {
        //arrow keys bounce from frame down
        if (upDown <= 85) {
            upDown += 2;
        }
        else if (upDown >= height + 35) {
            upDown += -2;
        }
        else if (leftRight <= 130){
            leftRight += 2;
        }
        else if (leftRight >= width + 35){
            leftRight += -2;
        }
    }
    //update to new location
    setStyle("pac", "top", upDown + "px");
    setStyle("pac", "left", leftRight + "px");
}

in the function above I start by defining my variables.

next I create the actual movement function to tell it to move in a certain direction when a certain key is pressed.

then I do my collision testing which is where the problem occurs.

this problem is very erratic and random. when I run the function the collision detection between the top and the left works just fine. but when I try to move to the right or bottom sides of the surrounding div it cuts me off about 50-80 pixels short.

and you would think just add like 50-80 more pixels to the detection but NOPE that's when it gets even weirder because if I add any more pixels to it, the collision detection just disappears and the pac-man is able to fly right off the screen like there is no div there at all

please, anyone, I have been trying to solve this for 2 days and I can't find a solution. Am I missing something obvious? I tried changing some of the css to stuff like position relative and the left and top attributes but nothing helped.

the full source code and the included library(which has the getStyle and setStyle function is below) https://github.com/nicholaskorte/Javascript-pac-man-game/tree/master

Answer 1

Found my own answer.

The issue resided within the containing function within my library.

i changed this...

function contains(id1, id2) {
    var left1 = parseInt(getStyle(id1, "left"));
    var top1 = parseInt(getStyle(id1, "top"));
    var width1 = parseInt(getStyle(id1, "width"));
    var width2 = parseInt(getStyle(id2, "width"));
    var height1 = parseInt(getStyle(id1, "height"));
    var height2 = parseInt(getStyle(id2, "height"));

    if (left1 <= 5) {
        return false;
    }
    else if (left1 > width2 - width1) {
        return false;
    }
    else if (top1 < 0) {
        return false;
    }
    else if (top1 > height2 - height1) {
        return false;
    }
    else {
        return true;
    }
}

to this...

function collisionFrame(id1, id2) {
    var left1 = parseInt(getStyle(id1, "left"));
    var right1 = left1 + parseInt(getStyle(id1, "width"));
    var top1 = parseInt(getStyle(id1, "top"));
    var bottom1 = top1 + parseInt(getStyle(id1, "height"));

    var left2 = parseInt(getStyle(id2, "left"));
    var right2 = left2 + parseInt(getStyle(id2, "width"));
    var top2 = parseInt(getStyle(id2, "top"));
    var bottom2 = top2 + parseInt(getStyle(id2, "height"));

    if (left1 < left2 + 4) {//from left
        return false;
    }
    else if (right1 > right2 - 4) {//from right
        return false;
    }
    if (top1 < top2 + 4) {//from top
        return false;
    }
    if (bottom1 > bottom2 - 4) {//from bottom
        return false;
    }
    else {
        return true;
    }
}

...and it worked