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

Question

我正在制作自己的 pac-man 游戏，但很难获得 我周围的 div 和“吃豆人”之间的碰撞检测。

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

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

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

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

最后是javascript。这是问题开始的地方，它可以 对于某些人来说是相当复杂的。另外我使用我自己的函数 我做了调用 getStyle 和 setStyle ，它们完全按照他们的声音做 像他们一样。

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

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

接下来我创建了实际的移动函数来告诉它在一个 按下某个键时的某个方向。

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

这个问题非常不稳定和随机。当我运行该功能时 顶部和左侧之间的碰撞检测工作得很好。但 当我尝试移动到周围 div 的右侧或底部时 它使我缩短了大约 50-80 像素。

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

拜托，任何人，我已经尝试解决这个问题 2 天，我 找不到解决方案。我错过了一些明显的东西吗？我试过了 将一些 css 更改为相对位置和左侧等内容 和顶级属性，但没有任何帮助。

完整的源代码和包含的库（具有 getStyle 和 setStyle 功能如下） https://github.com/nicholaskorte/Javascript-pac-man-game/tree/master

Answer 1

找到我自己的答案。

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

我改变了这个...

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

...它成功了