javascript - 碰撞检测问题还是我的逻辑

Question

我使用 jQuery/HTML5 Canvas 和瓦片 map 算法创建了一个运动的小原型(prototype)。我的问题是碰撞表现得很奇怪。我将解释一下，如果我左右移动，则会检测到碰撞并停止移动，如果我上下移动，也会发生同样的情况。如果我左右移动(发生碰撞)，那么当我已经左右碰撞后上下移动时，上下碰撞不再成立。

这是我的 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;
            }

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

Answer 1

Here走吧!这并没有太大不同。大多数情况下，每次检查图 block 是否发生碰撞时，您都会检查是否移动了玩家，因此如果至少检查了一个图 block 没有发生碰撞，那么玩家无论如何都会移动。

所以这使得:

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

玩得开心!