Question

我正在制作我自己的pac-man游戏并且很难获得   我周围的div和＆＃34; pac-man＆＃34;之间的碰撞检测。

这是我的角色的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个像素   但是，当它变得更加奇怪时，NOPE会因为我再加上它   对它的像素，碰撞检测刚刚消失，而且是pac-man   能够在屏幕上飞行，就像那里根本没有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;
    }
}

......它有效

碰撞检测不适用于Pac-Man游戏

1 个答案: