Javascript 吃豆人游戏中的碰撞检测不起作用

我正在做我自己的吃豆人游戏，我很难得到它 我周围的潜水艇和“吃豆人”之间的碰撞检测

这是我的角色的css（现在是正方形）和 整个游戏的边界

接下来我想我应该向您展示html，尽管它非常基本

最后是javascript。这就是问题开始的地方，它可以 对于某些人来说，这是相当复杂的。而且我使用自己的函数 我制作了一个名为getStyle和setStyle的程序，这两个程序完全符合它们的声音 就像他们一样

//pac man的移动功能。
函数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”））；
//箭头键向下移动
如果（箭头键==40）{
向上向下=向上向下+2；
}
//箭头键向上移动
否则如果（箭头键==38）{
向上向下=向上向下-2；
}    
否则，如果（arrowKey==37）{//箭头键向左移动
leftRight=leftRight-2；
}
否则，如果（arrowKey==39）{//箭头键向右移动
leftRight=leftRight+2；
}
如果（包含（“pac”、“外壳”））{
//箭头键从帧向下反弹
如果（上下=高度+35）{
向上向下+=-2；
}
else if（leftRight=宽度+35）{
leftRight+=-2；
}
}
//更新到新位置
设置方式（“pac”、“top”、“upDown+“px”）；
设置样式（“pac”、“左”、“左”和“px”）；
}

在上面的函数中，我首先定义变量

接下来，我创建实际的移动函数，告诉它以 按下某个键时的某个方向

然后我做碰撞测试，这就是问题发生的地方

这个问题是非常不稳定和随机的。当我运行函数时 顶部和左侧之间的碰撞检测工作正常。但是 当我尝试移动到周围div的右侧或底部时 它缩短了我50-80像素的距离

你会认为只需在检测中增加50-80个像素 但不，那是它变得更奇怪的时候，因为如果我再加上 对它来说，碰撞检测就消失了，吃豆人也消失了 能够像根本没有div一样从屏幕上飞走

拜托，各位，我已经试着解决这个问题两天了，我 找不到解决办法。我错过了什么明显的东西吗？我试过了 将一些css更改为相对位置和左侧 和顶级属性，但没有任何帮助

完整的源代码和包含的库（具有getStyle 和setStyle函数如下所示）

找到了我自己的答案

问题存在于我的库中的包含函数中

我改变了这个

函数包含（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”）；
如果（左1宽度2-宽度1）{
返回false；
}
否则如果（top1<0）{
返回false；
}
否则如果（top1>高度2-高度1）{
返回false；
}
否则{
返回true；
}
}

对此

函数冲突帧（id1、id2）{
var left1=parseInt（getStyle（id1，“left”）；
var right1=left1+parseInt（getStyle（id1，“宽度”）；
var top1=parseInt（getStyle（id1，“top”）；
var bottom1=top1+parseInt（getStyle（id1，“height”）；
var left2=parseInt（getStyle（id2，“左”）；
var right2=left2+parseInt（getStyle（id2，“宽度”）；
var top2=parseInt（getStyle（id2，“top”）；
var bottom2=top2+parseInt（getStyle（id2，“height”）；
如果（left1right2-4）{//从右
返回false；
}
如果（top1bottom2-4）{//从底部开始
返回false；
}
否则{
返回true；
}
}

…而且成功了

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;
}

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

//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");
}

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;
    }
}

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;
    }
}