Tile Based Collision With Moving Platforms

Question

I am developing a platformer using pure HTML/Javascript. After remaking my collision detection system with help from HTML5 platformer collision detection problem, I realized my moving platform detection would not work because my moving platforms (only a vertically moving wall to block the player, at the moment) are not rendered using the tilemap. Currently, I am manually pushing it to the array of obstacles in the level. Here is my collision detection code:

function collisionDetection() {
    player.onLadder = false;
    var bottomY = player.y + player.height;

    var bottomCol = collisionCheck(player.x + (player.width / 4), bottomY) || collisionCheck(player.x + (player.width / 2), bottomY)
        || collisionCheck(player.x + ((3 * player.width) / 4), bottomY);
    var topCol = collisionCheck(player.x + (player.width / 4), player.y) || collisionCheck(player.x + (player.width / 2), player.y);
    var leftCol = collisionCheck(player.x, player.y) || collisionCheck(player.x, player.y + (player.height / 2));
    var rightCol = collisionCheck(player.x + player.width, player.y) || collisionCheck(player.x + player.width, player.y + (player.height / 2));

    if (bottomCol) {
        player.y -= (bottomY % 32);
        player.onGround = true;
        player.jumping = false;
    }

    if (topCol) {
        player.velY *= -1;
    }

    if (leftCol && !topCol) {
        player.x -= ((player.x + player.width) % 32) - player.width;
        player.jumping = false;
    }

    if (rightCol && !topCol) {
        player.x -= ((player.x + player.width) % 32);
        player.jumping = false;
    }

    if (!bottomCol && !leftCol && !rightCol) {
        player.jumping = true;
        player.onGround = false;
    }
}

function collisionCheck(x, y) {
    var tile = maps[level][y >> 5][x >> 5];
    //collectibles like coins
    if (tile == 14 || tile == 15 || tile == 16) {
        collectiblesCheck(x, y, tile);
        return false;
    //0 is an empty space in the map
    } else if (tile != 0) {
        return true;
    }
}

Essentially, the code finds the closest tile to the player and does necessary adjustments based on where the collision occurs. Since the moving wall is not a tile, I am unsure of the best way to deal with collision detection. I could use my old collision detection method, which traversed through the obstacle array instead of the map tiles, but I feel that that would be too inefficient.

If any of the code needs explaining, please feel free to ask. Thank you.

Answer 1

As long as you have the position of the moving wall and the size of it, as well as the position of the player and the player size, it's easily doable without using a tile map :)

I posted three guides based on shape collision, so check them out:

---

For testing if a point is inside a polygon, use the code I posted below. I wrote this in C# based off of the question asked here (the second most up-voted answer), so you should definitely take a look on how it works and how to use it.

(One of my favorite methods <3 )

public static bool PolyCollide(int nvert, float[] vertx, float[] verty, float testx, float testy)
    {
        int i, j;
        var result = false;
        for (i = 0, j = nvert - 1; i < nvert; j = i++)
            if ((verty[i] > testy != verty[j] > testy) &&
                (testx < (vertx[j] - vertx[i])*(testy - verty[i])/(verty[j] - verty[i]) + vertx[i]))
                result = !result;
        return result;
    }

---

For testing if a rectangle hit another rectangle, take a look at the answer I wrote here. It provides a good explanation and direction on what you need to do. This is probably the logic you want to implement in your game, using the tiles as rectangles and such

---

For collision detection concerning polygon to polygon (basically uses the Separate Axis Theorem), take a look at this source, though I doubt you need it.

I hope this helps, and good luck on your game!