碰撞检测问题或我的逻辑

时间:2013-12-06 18:37:28

标签: javascript jquery html5 html5-canvas collision

我使用jQuery / HTML5 Canvas和tile map算法创建了一个小动作原型。我的问题是碰撞是奇怪的。我将解释,如果我左右移动,则检测到碰撞并且移动停止,如果我上下移动,则会发生同样的情况。如果我向左和向右移动(发生碰撞)那么当我在左右碰撞后上下移动时,上下碰撞不再成立。

这是我的JSFiddle

以下是我检测和移动的片段

            if (keydown == UP) {
                if (!hasCollided(pX, pY - v, mX, mY)) pY -= v;
                keydown = null;
            } else if (keydown == DOWN) {
                if (!hasCollided(pX, pY + v, mX, mY)) pY += v;
                keydown = null;
            } else if (keydown == LEFT) {
                if (!hasCollided(pX - v, pY, mX, mY)) pX -= v;
                keydown = null;
            } else if (keydown == RIGHT) {
                if (!hasCollided(pX + v, pY, mX, mY)) pX += v;
                keydown = null;
            }

对我的逻辑的任何帮助将不胜感激。提前谢谢。

1 个答案:

答案 0 :(得分:2)

Here你去!它并没有太大的不同。大多数情况下,你检查过你每次检查一个瓷砖是否有碰撞时都移动了玩家,所以如果至少有一个被检查过的瓷砖没有碰撞,那么无论如何都会移动玩家。

这样做:

var desPosX = 0;
    var desPosY = 0;
    if (keydown == UP) {
        desPosY = -v;
    } else if (keydown == DOWN) {
        desPosY = v;
    }
    if (keydown == LEFT) {
        desPosX = -v;
    } else if (keydown == RIGHT) {
        desPosX = v;
    }
    var collided = false;
    if(!gliding)
        keydown = null;
    for (var y = minY; y < maxY; y++) {
        for (var x = minX; x < maxX; x++) {
            if (map[y][x] == 1) {
                mX = x * 32;
                mY = y * 32;
            }

            if (hasCollided(desPosX+pX, desPosY+pY, mX, mY)) {
                collided = true;
            }
        }
    }
    if (!collided) {
        pX += desPosX;
        pY += desPosY;
    }

玩得开心!