Question

I’ve been looking at similar questions posted on Stack Overflow (and elsewhere) but they seem to either only deal with rectangles, which I can handle well at this point, or are more complex than I can currently wrap my head around.

I’m moving a sprite around the screen via mousedown events and want to lock it from moving "out of bounds". The bounds could be something simple like this room:

Where the green is movable space and the red is restricted. Am I better off breaking this down into something like 1 long rectangle and 2 triangles (or groups of squares to represent a triangle with jagged edges) or is there a basic concept that I should look towards to specify the coordinates of the "walkable area" and verify that the user is always "within bounds"?

I’m coding this in JavaScript and am relying heavily on jQuery.

Edit: Considering I’d potentially need to have limitless points (if the room had more than 4 points) would I be better off using something like A* to generate the paths?

Answer 1

Try deconstructing your problem a bit. With this simple shape, you have a rectangle that needs to have x-coordinates between two slopes, and y-coordinates between two flat lines.

Something like this should work nicely:

function outOfBounds(point, boundary) {
    return point.y > boundary.top
        || point.y < boundary.bottom
        || point.x < boundary.getLeftBoundAt(point.y)
        || point.x > boundary.getRightBoundAt(point.y);
}

Recall that sloped lines can be defined as mx + b, but in this case, the x-coordinate of your slopes varies in relation to the y coordinate. Anyway, getLeftBoundAt() will look something like:

function getLeftBoundAt(y) {
    return this.slope * y + this.base;
}

EDIT:

Due to the fact that the height varies along the left and right edges as well, you would need a slightly more complex solution, where boundary.top is replaced with a call to a function like this:

function getTopBoundAt(x) {
    var segment = this.topSegmentAt(x);
    return segment.origin.y + segment.slope * (x - segment.origin.x);
}