碰撞檢測問題或我的邏輯

Question

我使用jQuery / HTML5 Canvas和一個瓦片地圖算法創建了一個小動作原型。 我的問題是碰撞是奇怪的。 我會解釋，如果我向左和向右移動，則檢測到碰撞並停止運動，如果我上下移動則會發生同樣的情況。 如果我向左和向右移動（發生碰撞）那么當我在左右碰撞后上下移動時，上下碰撞不再成立。

這是我的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

這里亞去！ 它並沒有太大的不同。 大多數情況下，您檢查過每次檢查瓷磚是否有碰撞時都移動了播放器，因此如果至少有一個已檢查的磁貼沒有碰撞，則無論如何都會移動播放器。

這樣做：

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

玩得開心！